UI : Permission fix for create operation (#7324)

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>

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}

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 { permissions } = usePermissionProvider();
-  const { isAuthDisabled } = useAuthContext();
   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}

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}

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={

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
+      <Route exact component={AddGlossaryPage} path={ROUTES.ADD_GLOSSARY} />
-        exact
+      <Route
-        component={AddGlossaryPage}
-        hasPermission={checkPermission(
-          Operation.Create,
-          ResourceEntity.GLOSSARY,
-          permissions
-        )}
-        path={ROUTES.ADD_GLOSSARY}
-      />
-      <AdminProtectedRoute
         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
+      <Route exact component={AddWebhookPage} path={ROUTES.ADD_WEBHOOK} />
-        exact
-        component={AddWebhookPage}
-        hasPermission={checkPermission(
-          Operation.Create,
-          ResourceEntity.WEBHOOK,
-          permissions
-        )}
-        path={ROUTES.ADD_WEBHOOK}
-      />
 
       <AdminProtectedRoute
         exact
@@ -488,26 +455,8 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
         )}
         path={ROUTES.ADD_POLICY}
       />
-      <AdminProtectedRoute
+      <Route exact component={AddRulePage} path={ROUTES.ADD_POLICY_RULE} />
-        exact
+      <Route exact component={EditRulePage} path={ROUTES.EDIT_POLICY_RULE} />
-        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={GlobalSettingPage} path={ROUTES.SETTINGS} />
       <Route