fix(ui): activity feed settings page ui updates (#7227)

openmetadata-ui/src/main/resources/ui/src/authentication/auth-provider/AuthProvider.tsx

@@ -264,6 +264,9 @@ export const AuthProvider = ({
    * It will try for max 3 times if it's not succeed then it will proceed for logout
    */
   const trySilentSignIn = () => {
+    const pathName = location.pathname;
+    // Do not try silent sign in for SignIn or SignUp route
+    if ([ROUTES.SIGNIN, ROUTES.SIGNUP].indexOf(pathName) === -1) {
       // Try to renew token
       silentSignInRetries < 3
         ? renewIdToken()
@@ -279,6 +282,7 @@ export const AuthProvider = ({
               trySilentSignIn();
             })
         : onLogoutHandler(); // Logout if we reaches max silent signIn limit;
+    }
   };
 
   /**

openmetadata-ui/src/main/resources/ui/src/authentication/authenticators/OidcAuthenticator.tsx

@@ -22,7 +22,7 @@ import React, {
   useMemo,
 } from 'react';
 import { Callback, makeAuthenticator, makeUserManager } from 'react-oidc';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
 import AppState from '../../AppState';
 import Loader from '../../components/Loader/Loader';
 import { oidcTokenKey, ROUTES } from '../../constants/constants';
@@ -74,6 +74,7 @@ const OidcAuthenticator = forwardRef<AuthenticatorRef, Props>(
       setIsSigningIn,
       setLoadingIndicator,
     } = useAuthContext();
+    const history = useHistory();
     const { userDetails, newUser } = AppState;
     const userManager = useMemo(
       () => makeUserManager(userConfig),
@@ -148,6 +149,12 @@ const OidcAuthenticator = forwardRef<AuthenticatorRef, Props>(
               <>
                 <Callback
                   userManager={userManager}
+                  onError={(error) => {
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+
+                    history.push(ROUTES.SIGNIN);
+                  }}
                   onSuccess={(user) => {
                     localStorage.setItem(oidcTokenKey, user.id_token);
                   }}

openmetadata-ui/src/main/resources/ui/src/components/PermissionProvider/PermissionProvider.interface.ts

@@ -23,7 +23,6 @@ export type OperationPermission = {
 
 export enum ResourceEntity {
   ALL = 'all',
-  ACTIVITY_FEED = 'activityFeed',
   BOT = 'bot',
   CHART = 'chart',
   DASHBOARD = 'dashboard',

openmetadata-ui/src/main/resources/ui/src/pages/ActivityFeedSettingsPage/ActivityFeedSettingsPage.style.less

@@ -2,15 +2,18 @@
   .ant-tree-list-holder-inner {
     margin-left: -16px;
   }
-  .ant-tree-list-holder {
-    padding: 0.5rem;
-  }
   .ant-tree-switcher.ant-tree-switcher_open {
     visibility: hidden;
   }
-
   .ant-tree-node-content-wrapper {
     padding: 0;
   }
-  margin-left: -8px;
+  .ant-divider.ant-divider-horizontal {
+    margin: 16px 0;
+  }
+}
+
+.settings-page-card-container {
+  box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 12%);
+  border: 1px #dde3ea solid;
 }

openmetadata-ui/src/main/resources/ui/src/pages/ActivityFeedSettingsPage/ActivityFeedSettingsPage.tsx

@@ -1,5 +1,15 @@
 /* eslint-disable @typescript-eslint/camelcase */
-import { Button, Card, Col, Divider, Row, Space, Tree, Typography } from 'antd';
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Row,
+  Space,
+  Tooltip,
+  Tree,
+  Typography,
+} from 'antd';
 import { AxiosError } from 'axios';
 import { cloneDeep, isUndefined, map, startCase } from 'lodash';
 import React, { Key, useEffect, useState } from 'react';
@@ -11,13 +21,18 @@ import {
 } from '../../axiosAPIs/eventFiltersAPI';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import Loader from '../../components/Loader/Loader';
+import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider';
+import { ResourceEntity } from '../../components/PermissionProvider/PermissionProvider.interface';
 import { TERM_ALL } from '../../constants/constants';
+import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil';
+import { Operation } from '../../generated/entity/policies/policy';
 import {
   EventFilter,
   Filters,
   SettingType,
 } from '../../generated/settings/settings';
 import jsonData from '../../jsons/en';
+import { checkPermission } from '../../utils/PermissionsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import './ActivityFeedSettingsPage.style.less';
 import { getEventFilterFromTree } from './ActivityFeedSettingsPage.utils';
@@ -69,7 +84,9 @@ const ActivityFeedSettingsPage: React.FC = () => {
     return [
       {
         key: entityType,
-        title: <strong>{startCase(entityType)}</strong>,
+        title: (
+          <Typography.Text strong>{startCase(entityType)}</Typography.Text>
+        ),
         data: true,
         children:
           data?.map(({ eventType, include, exclude }) => {
@@ -164,6 +181,19 @@ const ActivityFeedSettingsPage: React.FC = () => {
     setCheckedKeys(checkKeys);
   }, [eventFilters, updatedTree, selectedKey]);
 
+  const { permissions } = usePermissionProvider();
+
+  const editPermission = checkPermission(
+    Operation.EditAll,
+    ResourceEntity.FEED,
+    permissions
+  );
+  const createPermission = checkPermission(
+    Operation.Create,
+    ResourceEntity.FEED,
+    permissions
+  );
+
   const handleResetClick = async () => {
     try {
       setLoading(true);
@@ -193,21 +223,25 @@ const ActivityFeedSettingsPage: React.FC = () => {
         <>
           <Row gutter={[16, 16]}>
             <Col span={24}>
-              <Typography.Title level={5} type="secondary">
+              <Typography.Title
+                level={5}
+                style={{ margin: 0 }}
+                type="secondary">
                 Activity Feed
               </Typography.Title>
             </Col>
             <Col span={24}>
-              <Card size="small">
+              <Card className="settings-page-card-container" size="small">
                 {eventFilters &&
                   map(eventFilters, ({ entityType, filters }, index) => (
                     <>
                       {entityType !== TERM_ALL ? (
-                        <div className="tw-rounded-border" key={entityType}>
+                        <div
+                          className="activity-feed-settings-tree"
+                          key={entityType}>
                           <Tree
                             checkable
                             defaultExpandAll
-                            className="activity-feed-settings-tree"
                             defaultCheckedKeys={checkedKeys}
                             icon={null}
                             key={entityType}
@@ -225,12 +259,28 @@ const ActivityFeedSettingsPage: React.FC = () => {
             </Col>
             <Col>
               <Space direction="horizontal" size={16}>
-                <Button type="primary" onClick={onSave}>
+                <Tooltip
+                  title={
+                    editPermission || createPermission
+                      ? ''
+                      : NO_PERMISSION_FOR_ACTION
+                  }>
+                  <Button
+                    disabled={!(editPermission || createPermission)}
+                    type="primary"
+                    onClick={onSave}>
                     Save
                   </Button>
-                <Button type="text" onClick={handleResetClick}>
+                </Tooltip>
+                <Tooltip
+                  title={createPermission ? '' : NO_PERMISSION_FOR_ACTION}>
+                  <Button
+                    disabled={!createPermission}
+                    type="text"
+                    onClick={handleResetClick}>
                     Reset all
                   </Button>
+                </Tooltip>
               </Space>
             </Col>
             <Col span={24} />

openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx

@@ -234,8 +234,12 @@ const GlobalSettingRouter = () => {
         exact
         // Currently we don't have any permission related to ActivityFeed settings page
         // update below once we have it
-        hasPermission
         component={ActivityFeedSettingsPage}
+        hasPermission={checkPermission(
+          Operation.ViewAll,
+          ResourceEntity.FEED,
+          permissions
+        )}
         path={getSettingPath(
           GlobalSettingsMenuCategory.COLLABORATION,
           GlobalSettingOptions.ACTIVITY_FEED

openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less

@@ -27,6 +27,7 @@
   0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 @table-header-bg: #fff;
 @border-radius-base: 4px;
+@checkbox-size: 14px;
 
 @import url('./components/table.less');
 @import url('./components/toggle-switch.less');

openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsUtils.tsx

@@ -176,8 +176,8 @@ export const getGlobalSettingsMenuWithPermission = (
         {
           label: 'Activity Feed',
           isProtected: checkPermission(
-            Operation.EditAll,
+            Operation.ViewAll,
-            ResourceEntity.ACTIVITY_FEED,
+            ResourceEntity.FEED,
             permissions
           ),
           icon: <AllActivityIcon className="side-panel-icons" />,