UI : Permission fix for create operation (#7324)

2025-08-27 02:16:18 +00:00 · 2022-09-08 15:02:15 +05:30 · 2022-09-08 15:02:15 +05:30 · 72b15d71ba
commit 72b15d71ba
parent 27f94e45ab
6 changed files with 71 additions and 87 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx
@ -19,7 +19,6 @@ import cronstrue from 'cronstrue';
 import { capitalize, isNil, lowerCase, startCase } from 'lodash';
 import React, { Fragment, useCallback, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { PAGE_SIZE } from '../../constants/constants';
 import { NO_PERMISSION_TO_VIEW } from '../../constants/HelperTextUtil';
 import { Connection } from '../../generated/entity/services/databaseService';
@ -27,7 +26,6 @@ import {
  IngestionPipeline,
  PipelineType,
 } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
-import { useAuth } from '../../hooks/authHooks';
 import { isEven } from '../../utils/CommonUtils';
 import {
  getAddIngestionPath,
@ -64,8 +62,7 @@ const Ingestion: React.FC<IngestionProps> = ({
  permissions,
 }: IngestionProps) => {
  const history = useHistory();
-  const { isAdminUser } = useAuth();
-  const { isAuthDisabled } = useAuthContext();
+
  const [searchText, setSearchText] = useState('');
  const [showActions, setShowActions] = useState(false);
  const [currTriggerId, setCurrTriggerId] = useState({ id: '', state: '' });
@ -419,7 +416,7 @@ const Ingestion: React.FC<IngestionProps> = ({
          </div>
          <div className="tw-relative">
            {isRequiredDetailsAvailable &&
-              (isAdminUser || isAuthDisabled) &&
+              permissions.EditAll &&
              getAddIngestionElement()}
          </div>
        </div>
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.component.tsx
@ -1,23 +1,24 @@
 import { AxiosError } from 'axios';
 import { LoadingState } from 'Models';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { addGlossaries } from '../../axiosAPIs/glossaryAPI';
 import AddGlossary from '../../components/AddGlossary/AddGlossary.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
+import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider';
+import { ResourceEntity } from '../../components/PermissionProvider/PermissionProvider.interface';
 import { CreateGlossary } from '../../generated/api/data/createGlossary';
-import { useAuth } from '../../hooks/authHooks';
+import { Operation } from '../../generated/entity/policies/policy';
 import jsonData from '../../jsons/en';
+import { checkPermission } from '../../utils/PermissionsUtils';
 import { getGlossaryPath } from '../../utils/RouterUtils';
 import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 import { showErrorToast } from '../../utils/ToastUtils';

 const AddGlossaryPage: FunctionComponent = () => {
-  const { isAdminUser } = useAuth();
-  const { isAuthDisabled } = useAuthContext();
  const history = useHistory();
+  const { permissions } = usePermissionProvider();
  const [tagList, setTagList] = useState<Array<string>>([]);
  const [isTagLoading, setIsTagLoading] = useState<boolean>(false);
  const [status, setStatus] = useState<LoadingState>('initial');
@ -25,6 +26,12 @@ const AddGlossaryPage: FunctionComponent = () => {
    TitleBreadcrumbProps['titleLinks']
  >([]);

+  const createPermission = useMemo(
+    () =>
+      checkPermission(Operation.Create, ResourceEntity.GLOSSARY, permissions),
+    [permissions]
+  );
+
  const goToGlossary = (name = '') => {
    history.push(getGlossaryPath(name));
  };
@ -101,7 +108,7 @@ const AddGlossaryPage: FunctionComponent = () => {
    <PageContainerV1>
      <div className="tw-self-center">
        <AddGlossary
-          allowAccess={isAdminUser || isAuthDisabled}
+          allowAccess={createPermission}
          fetchTags={fetchTags}
          header="Add Glossary"
          isTagLoading={isTagLoading}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
@ -14,9 +14,8 @@
 import { AxiosError } from 'axios';
 import { cloneDeep, get, isUndefined } from 'lodash';
 import { LoadingState } from 'Models';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import {
  addGlossaryTerm,
  getGlossariesByName,
@ -26,11 +25,14 @@ import AddGlossaryTerm from '../../components/AddGlossaryTerm/AddGlossaryTerm.co
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Loader from '../../components/Loader/Loader';
+import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider';
+import { ResourceEntity } from '../../components/PermissionProvider/PermissionProvider.interface';
 import { CreateGlossaryTerm } from '../../generated/api/data/createGlossaryTerm';
 import { Glossary } from '../../generated/entity/data/glossary';
 import { GlossaryTerm } from '../../generated/entity/data/glossaryTerm';
-import { useAuth } from '../../hooks/authHooks';
+import { Operation } from '../../generated/entity/policies/policy';
 import jsonData from '../../jsons/en';
+import { checkPermission } from '../../utils/PermissionsUtils';
 import { getGlossaryPath } from '../../utils/RouterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';

@ -38,8 +40,7 @@ const AddGlossaryTermPage = () => {
  const { glossaryName, glossaryTermsFQN } =
    useParams<{ [key: string]: string }>();
  const history = useHistory();
-  const { isAdminUser } = useAuth();
-  const { isAuthDisabled } = useAuthContext();
+  const { permissions } = usePermissionProvider();
  const [status, setStatus] = useState<LoadingState>('initial');
  const [isLoading, setIsLoading] = useState(true);
  const [glossaryData, setGlossaryData] = useState<Glossary>();
@ -49,6 +50,16 @@ const AddGlossaryTermPage = () => {

  const [parentGlossaryData, setParentGlossaryData] = useState<GlossaryTerm>();

+  const createPermission = useMemo(
+    () =>
+      checkPermission(
+        Operation.Create,
+        ResourceEntity.GLOSSARY_TERM,
+        permissions
+      ),
+    [permissions]
+  );
+
  const goToGlossaryPath = (path: string) => {
    history.push(path);
  };
@ -198,7 +209,7 @@ const AddGlossaryTermPage = () => {
      ) : (
        <div className="tw-self-center">
          <AddGlossaryTerm
-            allowAccess={isAdminUser || isAuthDisabled}
+            allowAccess={createPermission}
            glossaryData={glossaryData as Glossary}
            parentGlossaryData={parentGlossaryData}
            saveState={status}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.component.tsx
@ -13,12 +13,13 @@

 import { AxiosError } from 'axios';
 import { LoadingState } from 'Models';
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useMemo, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import { addWebhook } from '../../axiosAPIs/webhookAPI';
 import AddWebhook from '../../components/AddWebhook/AddWebhook';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
+import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider';
+import { ResourceEntity } from '../../components/PermissionProvider/PermissionProvider.interface';
 import {
  GlobalSettingOptions,
  GlobalSettingsMenuCategory,
@ -28,8 +29,9 @@ import {
  CreateWebhook,
  WebhookType,
 } from '../../generated/api/events/createWebhook';
-import { useAuth } from '../../hooks/authHooks';
+import { Operation } from '../../generated/entity/policies/policy';
 import jsonData from '../../jsons/en';
+import { checkPermission } from '../../utils/PermissionsUtils';
 import { getSettingPath } from '../../utils/RouterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';

@ -40,14 +42,19 @@ const HEADER_TEXT_WEBHOOK: { [key: string]: string } = {
 };

 const AddWebhookPage: FunctionComponent = () => {
-  const { isAdminUser } = useAuth();
-  const { isAuthDisabled } = useAuthContext();
  const history = useHistory();
  const params = useParams<{ webhookType?: WebhookType }>();
+  const { permissions } = usePermissionProvider();

  const webhookType: WebhookType = params.webhookType ?? WebhookType.Generic;
  const [status, setStatus] = useState<LoadingState>('initial');

+  const createPermission = useMemo(
+    () =>
+      checkPermission(Operation.Create, ResourceEntity.WEBHOOK, permissions),
+    [permissions]
+  );
+
  const goToWebhooks = () => {
    switch (webhookType) {
      case WebhookType.Slack: {
@ -111,7 +118,7 @@ const AddWebhookPage: FunctionComponent = () => {
    <PageContainerV1>
      <div className="tw-self-center">
        <AddWebhook
-          allowAccess={isAdminUser || isAuthDisabled}
+          allowAccess={createPermission}
          header={`Add ${HEADER_TEXT_WEBHOOK[webhookType]}`}
          mode={FormSubmitType.ADD}
          saveState={status}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditWebhookPage/EditWebhookPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/EditWebhookPage/EditWebhookPage.component.tsx
@ -13,9 +13,8 @@

 import { AxiosError } from 'axios';
 import { LoadingState } from 'Models';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useEffect, useMemo, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
 import {
  deleteWebhook,
  getWebhookByName,
@ -24,6 +23,8 @@ import {
 import AddWebhook from '../../components/AddWebhook/AddWebhook';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
 import Loader from '../../components/Loader/Loader';
+import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider';
+import { ResourceEntity } from '../../components/PermissionProvider/PermissionProvider.interface';
 import {
  GlobalSettingOptions,
  GlobalSettingsMenuCategory,
@ -31,8 +32,9 @@ import {
 import { FormSubmitType } from '../../enums/form.enum';
 import { CreateWebhook } from '../../generated/api/events/createWebhook';
 import { Webhook, WebhookType } from '../../generated/entity/events/webhook';
-import { useAuth } from '../../hooks/authHooks';
+import { Operation } from '../../generated/entity/policies/policy';
 import jsonData from '../../jsons/en';
+import { checkPermission } from '../../utils/PermissionsUtils';
 import { getSettingPath } from '../../utils/RouterUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';

@ -44,14 +46,25 @@ const EDIT_HEADER_WEBHOOKS_TITLE: { [key: string]: string } = {

 const EditWebhookPage: FunctionComponent = () => {
  const { webhookName } = useParams<{ [key: string]: string }>();
-  const { isAdminUser } = useAuth();
-  const { isAuthDisabled } = useAuthContext();
  const history = useHistory();
+  const { permissions } = usePermissionProvider();
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [webhookData, setWebhookData] = useState<Webhook>();
  const [status, setStatus] = useState<LoadingState>('initial');
  const [deleteStatus, setDeleteStatus] = useState<LoadingState>('initial');

+  const createPermission = useMemo(
+    () =>
+      checkPermission(Operation.Create, ResourceEntity.WEBHOOK, permissions),
+    [permissions]
+  );
+
+  const editPermission = useMemo(
+    () =>
+      checkPermission(Operation.EditAll, ResourceEntity.WEBHOOK, permissions),
+    [permissions]
+  );
+
  const fetchWebhook = () => {
    setIsLoading(true);
    getWebhookByName(webhookName)
@ -143,7 +156,7 @@ const EditWebhookPage: FunctionComponent = () => {
      <div className="tw-self-center">
        {!isLoading ? (
          <AddWebhook
-            allowAccess={isAdminUser || isAuthDisabled}
+            allowAccess={createPermission || editPermission}
            data={webhookData}
            deleteState={deleteStatus}
            header={
--- a/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx
@ -375,56 +375,23 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
        component={MlModelPage}
        path={ROUTES.MLMODEL_DETAILS_WITH_TAB}
      />
-      <AdminProtectedRoute
-        exact
-        component={AddGlossaryPage}
-        hasPermission={checkPermission(
-          Operation.Create,
-          ResourceEntity.GLOSSARY,
-          permissions
-        )}
-        path={ROUTES.ADD_GLOSSARY}
-      />
-      <AdminProtectedRoute
+      <Route exact component={AddGlossaryPage} path={ROUTES.ADD_GLOSSARY} />
+      <Route
        exact
        component={AddGlossaryTermPage}
-        hasPermission={checkPermission(
-          Operation.Create,
-          ResourceEntity.GLOSSARY_TERM,
-          permissions
-        )}
        path={ROUTES.ADD_GLOSSARY_TERMS_CHILD}
      />
-      <AdminProtectedRoute
+      <Route
        exact
        component={AddGlossaryTermPage}
-        hasPermission={checkPermission(
-          Operation.Create,
-          ResourceEntity.GLOSSARY_TERM,
-          permissions
-        )}
        path={ROUTES.ADD_GLOSSARY_TERMS}
      />
-      <AdminProtectedRoute
+      <Route
        exact
        component={AddWebhookPage}
-        hasPermission={checkPermission(
-          Operation.Create,
-          ResourceEntity.WEBHOOK,
-          permissions
-        )}
        path={ROUTES.ADD_WEBHOOK_WITH_TYPE}
      />
-      <AdminProtectedRoute
-        exact
-        component={AddWebhookPage}
-        hasPermission={checkPermission(
-          Operation.Create,
-          ResourceEntity.WEBHOOK,
-          permissions
-        )}
-        path={ROUTES.ADD_WEBHOOK}
-      />
+      <Route exact component={AddWebhookPage} path={ROUTES.ADD_WEBHOOK} />

      <AdminProtectedRoute
        exact
@ -488,26 +455,8 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
        )}
        path={ROUTES.ADD_POLICY}
      />
-      <AdminProtectedRoute
-        exact
-        component={AddRulePage}
-        hasPermission={checkPermission(
-          Operation.EditAll,
-          ResourceEntity.POLICY,
-          permissions
-        )}
-        path={ROUTES.ADD_POLICY_RULE}
-      />
-      <AdminProtectedRoute
-        exact
-        component={EditRulePage}
-        hasPermission={checkPermission(
-          Operation.EditAll,
-          ResourceEntity.POLICY,
-          permissions
-        )}
-        path={ROUTES.EDIT_POLICY_RULE}
-      />
+      <Route exact component={AddRulePage} path={ROUTES.ADD_POLICY_RULE} />
+      <Route exact component={EditRulePage} path={ROUTES.EDIT_POLICY_RULE} />

      <Route exact component={GlobalSettingPage} path={ROUTES.SETTINGS} />
      <Route