fix(rbac): fix the roles table to also watch policies

janus-idp · Jan 18, 2024 · 6fe96ec · 6fe96ec
1 parent a25a64d
commit 6fe96ec
Show file tree

Hide file tree

Showing 6 changed files with 4,121 additions and 5,950 deletions.
diff --git a/plugins/rbac/src/components/CreateRole/AddMembersForm.tsx b/plugins/rbac/src/components/CreateRole/AddMembersForm.tsx
@@ -34,9 +34,7 @@ export const AddMembersForm = ({
   membersData,
 }: AddMembersFormProps) => {
   const [search, setSearch] = React.useState<string>('');
-  const [selectedMember, setSelectedMember] = React.useState<SelectedMember>(
-    {} as SelectedMember,
-  );
+  const [selectedMember, setSelectedMember] = React.useState<SelectedMember>();
 
   const getDescription = (member: MemberEntity) => {
     const memberCount = getMembersCount(member);
@@ -75,7 +73,7 @@ export const AddMembersForm = ({
       <br />
       <Autocomplete
         options={membersOptions}
-        getOptionLabel={(option: SelectedMember) => option.label || ''}
+        getOptionLabel={(option: SelectedMember) => option.label}
         getOptionSelected={(option: SelectedMember, value: SelectedMember) =>
           option.etag === value.etag
         }

diff --git a/plugins/rbac/src/components/RbacPage.test.tsx b/plugins/rbac/src/components/RbacPage.test.tsx
@@ -37,7 +37,7 @@ describe('RbacPage', () => {
     mockUseRoles.mockReturnValue({
       loading: true,
       data: [],
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: false,
       createRoleLoading: false,
     });

diff --git a/plugins/rbac/src/components/RolesList/RolesList.test.tsx b/plugins/rbac/src/components/RolesList/RolesList.test.tsx
@@ -63,7 +63,7 @@ describe('RolesList', () => {
     mockUseRoles.mockReturnValue({
       loading: false,
       data: useRolesMockData,
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: false,
       createRoleLoading: false,
     });
@@ -80,7 +80,7 @@ describe('RolesList', () => {
     mockUseRoles.mockReturnValue({
       loading: false,
       data: [],
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: false,
       createRoleLoading: false,
     });
@@ -96,7 +96,7 @@ describe('RolesList', () => {
     mockUseRoles.mockReturnValue({
       loading: false,
       data: useRolesMockData,
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: false,
       createRoleLoading: false,
     });
@@ -128,7 +128,7 @@ describe('RolesList', () => {
           },
         },
       ],
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: false,
       createRoleLoading: false,
     });
@@ -160,7 +160,7 @@ describe('RolesList', () => {
           },
         },
       ],
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: true,
       createRoleLoading: false,
     });
@@ -175,7 +175,7 @@ describe('RolesList', () => {
     mockUseRoles.mockReturnValue({
       loading: false,
       data: useRolesMockData,
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: false,
       createRoleLoading: false,
     });
@@ -192,7 +192,7 @@ describe('RolesList', () => {
     mockUseRoles.mockReturnValue({
       loading: false,
       data: useRolesMockData,
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: true,
       createRoleLoading: false,
     });
@@ -209,7 +209,7 @@ describe('RolesList', () => {
     mockUseRoles.mockReturnValue({
       loading: false,
       data: useRolesMockData,
-      retry: jest.fn(),
+      retry: { roleRetry: jest.fn(), policiesRetry: jest.fn() },
       createRoleAllowed: false,
       createRoleLoading: false,
     });

diff --git a/plugins/rbac/src/components/RolesList/RolesList.tsx b/plugins/rbac/src/components/RolesList/RolesList.tsx
@@ -23,6 +23,8 @@ const useStyles = makeStyles(theme => ({
 
 export const RolesList = () => {
   const { toastMessage, setToastMessage } = useToast();
+  const [isMounted, setIsMounted] = React.useState<boolean>(false);
+  const mountedRef = React.useRef(false);
   const { openDialog, setOpenDialog, deleteRoleName } = useDeleteDialog();
 
   const [roles, setRoles] = React.useState<number | undefined>();
@@ -32,7 +34,8 @@ export const RolesList = () => {
 
   const closeDialog = () => {
     setOpenDialog(false);
-    retry();
+    retry.roleRetry();
+    retry.policiesRetry();
   };
 
   const onAlertClose = () => {
@@ -42,6 +45,16 @@ export const RolesList = () => {
     setRoles(searchResults.length);
   };
 
+  React.useEffect(() => {
+    mountedRef.current = true;
+    if (!loading) {
+      setIsMounted(true);
+    }
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [loading]);
+
   return (
     <>
       <SnackbarAlert toastMessage={toastMessage} onAlertClose={onAlertClose} />
@@ -57,7 +70,7 @@ export const RolesList = () => {
         }
         options={{ padding: 'default', search: true, paging: true }}
         data={data}
-        isLoading={loading}
+        isLoading={!isMounted}
         columns={columns}
         renderSummaryRow={summary => onSearchResultsChange(summary.data)}
         emptyContent={

diff --git a/plugins/rbac/src/hooks/useRoles.ts b/plugins/rbac/src/hooks/useRoles.ts
@@ -24,7 +24,7 @@ export const useRoles = (
   data: RolesData[];
   createRoleLoading: boolean;
   createRoleAllowed: boolean;
-  retry: () => void;
+  retry: { roleRetry: () => void; policiesRetry: () => void };
 } => {
   const rbacApi = useApi(rbacApiRef);
   const {
@@ -33,10 +33,11 @@ export const useRoles = (
     retry: roleRetry,
   } = useAsyncRetry(async () => await rbacApi.getRoles());
 
-  const { loading: policiesLoading, value: policies } = useAsyncRetry(
-    async () => await rbacApi.getPolicies(),
-    [],
-  );
+  const {
+    loading: policiesLoading,
+    value: policies,
+    retry: policiesRetry,
+  } = useAsyncRetry(async () => await rbacApi.getPolicies(), []);
 
   const deletePermissionResult = usePermission({
     permission: policyEntityDeletePermission,
@@ -111,6 +112,7 @@ export const useRoles = (
   useInterval(
     () => {
       roleRetry();
+      policiesRetry();
     },
     loading ? null : pollInterval || 10000,
   );
@@ -120,6 +122,6 @@ export const useRoles = (
     data,
     createRoleLoading,
     createRoleAllowed,
-    retry: roleRetry,
+    retry: { roleRetry, policiesRetry },
   };
 };