fix: Group and User management (CM-436)

webui/react/src/components/CreateGroupModal.tsx

@@ -53,10 +53,10 @@ const EDIT_VALUES: Messages = {
 interface Props {
   group?: V1GroupSearchResult;
   groupRoles?: UserRole[];
-  onClose?: () => void;
+  onSuccess?: () => void;
 }
 
-const CreateGroupModalComponent: React.FC<Props> = ({ onClose, group, groupRoles }: Props) => {
+const CreateGroupModalComponent: React.FC<Props> = ({ onSuccess, group, groupRoles }: Props) => {
   const idPrefix = useId();
   const [form] = Form.useForm();
   const { rbacEnabled } = useObservable(determinedStore.info);
@@ -124,7 +124,7 @@ const CreateGroupModalComponent: React.FC<Props> = ({ onClose, group, groupRoles
       }
       openToast({ severity: 'Confirm', title: messages.API_SUCCESS_MESSAGE });
       form.resetFields();
-      onClose?.();
+      onSuccess?.();
     } catch (e) {
       openToast({ severity: 'Error', title: messages.API_FAILURE_MESSAGE });
       handleError(e, { silent: true, type: ErrorType.Input });

webui/react/src/components/CreateUserModal.tsx

@@ -57,7 +57,7 @@ interface Props {
   user?: DetailedUser;
   viewOnly?: boolean;
   userRoles?: Loadable<UserRole[]>;
-  onClose?: () => void;
+  onSuccess?: () => void;
 }
 
 interface FormInputs {
@@ -71,7 +71,7 @@ interface FormInputs {
 }
 
 const CreateUserModalComponent: React.FC<Props> = ({
-  onClose,
+  onSuccess,
   user,
   userRoles,
   viewOnly,
@@ -149,7 +149,7 @@ const CreateUserModalComponent: React.FC<Props> = ({
         });
         form.resetFields();
       }
-      onClose?.();
+      onSuccess?.();
     } catch (e) {
       openToast({
         severity: 'Error',

webui/react/src/components/DeleteGroupModal.tsx

@@ -11,18 +11,18 @@ export const MODAL_HEADER = 'Delete Group';
 
 interface Props {
   group: V1GroupSearchResult;
-  onClose?: () => void;
+  onSuccess?: () => void;
 }
 
-const DeleteGroupModalComponent: React.FC<Props> = ({ onClose, group }: Props) => {
+const DeleteGroupModalComponent: React.FC<Props> = ({ onSuccess, group }: Props) => {
   const { openToast } = useToast();
 
   const handleSubmit = async () => {
     if (!group.group.groupId) return;
     try {
       await deleteGroup({ groupId: group.group.groupId });
       openToast({ severity: 'Confirm', title: API_SUCCESS_MESSAGE });
-      onClose?.();
+      onSuccess?.();
     } catch (e) {
       openToast({ severity: 'Error', title: 'error deleting group' });
       handleError(e, { silent: true, type: ErrorType.Input });

webui/react/src/pages/Admin/GroupManagement.tsx

@@ -41,6 +41,7 @@ interface DropdownProps {
   fetchGroups: () => void;
   group: V1GroupSearchResult;
   availabeUsers: DetailedUser[];
+  onGroupsUpdate: () => void;
 }
 
 const MenuKey = {
@@ -59,6 +60,7 @@ const GroupActionDropdown = ({
   expanded,
   fetchGroups,
   fetchGroup,
+  onGroupsUpdate,
   group,
   availabeUsers,
 }: DropdownProps) => {
@@ -109,13 +111,17 @@ const GroupActionDropdown = ({
         <Button icon={<Icon name="overflow-vertical" size="small" title="Action menu" />} />
       </Dropdown>
       <AddUsersToGroupModal.Component group={group} users={availabeUsers} onClose={onFinishEdit} />
-      <EditGroupModal.Component group={group} groupRoles={groupRoles} onClose={onFinishEdit} />
-      <DeleteGroupModal.Component group={group} onClose={fetchGroups} />
+      <EditGroupModal.Component group={group} groupRoles={groupRoles} onSuccess={onFinishEdit} />
+      <DeleteGroupModal.Component group={group} onSuccess={onGroupsUpdate} />
     </div>
   );
 };
 
-const GroupManagement: React.FC = () => {
+interface Props {
+  onGroupsUpdate: () => void;
+}
+
+const GroupManagement: React.FC<Props> = ({ onGroupsUpdate }: Props) => {
   const { rbacEnabled } = useObservable(determinedStore.info);
   const [groups, setGroups] = useState<V1GroupSearchResult[]>([]);
   const [groupUsers, setGroupUsers] = useState<V1GroupDetails[]>([]);
@@ -135,6 +141,12 @@ const GroupManagement: React.FC = () => {
 
   const fetchGroups = useCallback(async (): Promise<void> => {
     if (!('tableLimit' in settings) || !('tableOffset' in settings)) return;
+    if (settings.tableOffset > 0 && settings.tableOffset === total) {
+      // handle when last group is deleted on a page
+      updateSettings({
+        tableOffset: settings.tableOffset - settings.tableLimit,
+      });
+    }
     try {
       const response = await getGroups(
         {
@@ -154,7 +166,7 @@ const GroupManagement: React.FC = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [settings]);
+  }, [settings, total, updateSettings]);
 
   const fetchGroup = useCallback(
     async (groupId: number): Promise<void> => {
@@ -251,6 +263,11 @@ const GroupManagement: React.FC = () => {
     [groupUsers, canModifyGroups, RemoveUserFromGroupModal],
   );
 
+  const handleGroupsUpdate = useCallback(() => {
+    fetchGroups();
+    onGroupsUpdate();
+  }, [fetchGroups, onGroupsUpdate]);
+
   const columns = useMemo(() => {
     const actionRenderer = (_: string, record: V1GroupSearchResult) => {
       const userGroup = groupUsers.find((gr) => gr.groupId === record.group.groupId);
@@ -267,6 +284,7 @@ const GroupManagement: React.FC = () => {
           fetchGroup={fetchGroup}
           fetchGroups={fetchGroups}
           group={record}
+          onGroupsUpdate={handleGroupsUpdate}
         />
       ) : null;
     };
@@ -303,7 +321,15 @@ const GroupManagement: React.FC = () => {
         width: DEFAULT_COLUMN_WIDTHS['action'],
       },
     ];
-  }, [canModifyGroups, expandedKeys, fetchGroup, fetchGroups, groupUsers, users]);
+  }, [
+    canModifyGroups,
+    expandedKeys,
+    fetchGroup,
+    fetchGroups,
+    groupUsers,
+    users,
+    handleGroupsUpdate,
+  ]);
 
   const table = useMemo(() => {
     return settings ? (
@@ -348,7 +374,7 @@ const GroupManagement: React.FC = () => {
         title="Groups">
         {canViewGroups && <div className={css.usersTable}>{table}</div>}
       </Section>
-      <CreateGroupModal.Component onClose={fetchGroups} />
+      <CreateGroupModal.Component onSuccess={handleGroupsUpdate} />
       {groupResult && (
         <RemoveUserFromGroupModal.Component
           fetchGroups={fetchGroups}

webui/react/src/pages/Admin/UserManagement.test.tsx

@@ -58,7 +58,7 @@ const Container: React.FC = () => {
     <SettingsProvider>
       <HelmetProvider>
         <BrowserRouter>
-          <UserManagement />;
+          <UserManagement onUserCreate={() => {}} />;
         </BrowserRouter>
       </HelmetProvider>
     </SettingsProvider>

webui/react/src/pages/Admin/UserManagement.tsx

@@ -173,8 +173,8 @@ const UserActionDropdown = ({ fetchUsers, user, groups, userManagementEnabled }:
       <Dropdown menu={menuItems} placement="bottomRight" onClick={handleDropdown}>
         <Button icon={<Icon name="overflow-vertical" size="small" title="Action menu" />} />
       </Dropdown>
-      <ViewUserModal.Component user={user} userRoles={userRoles} viewOnly onClose={fetchUsers} />
-      <EditUserModal.Component user={user} userRoles={userRoles} onClose={fetchUsers} />
+      <ViewUserModal.Component user={user} userRoles={userRoles} viewOnly onSuccess={fetchUsers} />
+      <EditUserModal.Component user={user} userRoles={userRoles} onSuccess={fetchUsers} />
       <ManageGroupsModal.Component
         groupOptions={groups}
         user={user}
@@ -207,7 +207,12 @@ const columnSettings = {
 };
 
 const userManagementSettings = userSettings.get(UserManagementSettings, 'user-management');
-const UserManagement: React.FC = () => {
+
+interface Props {
+  onUserCreate: () => void;
+}
+
+const UserManagement: React.FC<Props> = ({ onUserCreate }: Props) => {
   const [selectedUserIds, setSelectedUserIds] = useState<React.Key[]>([]);
   const [refresh, setRefresh] = useState<Record<string, never>>({});
   const [nameFilter, setNameFilter] = useState<string>('');
@@ -228,6 +233,11 @@ const UserManagement: React.FC = () => {
     [],
   );
 
+  const handleUserCreate = () => {
+    onUserCreate();
+    fetchUsers();
+  };
+
   const userResponse = useAsync(async () => {
     try {
       const params = {
@@ -560,7 +570,7 @@ const UserManagement: React.FC = () => {
           <SkeletonTable columns={columns.length} />
         )}
       </Section>
-      <CreateUserModal.Component onClose={fetchUsers} />
+      <CreateUserModal.Component onSuccess={handleUserCreate} />
       <ChangeUserStatusModal.Component
         clearTableSelection={clearTableSelection}
         fetchUsers={fetchUsers}

webui/react/src/pages/Admin/index.tsx

@@ -45,7 +45,7 @@ const SettingsContent: React.FC = () => {
   const getGroupTotal = useCallback(async () => {
     const response = await getGroups(
       {
-        limit: 1,
+        limit: 0,
         offset: 0,
       },
       { signal: canceler.current.signal },
@@ -65,6 +65,14 @@ const SettingsContent: React.FC = () => {
     [navigate],
   );
 
+  const handleUserCreate = () => {
+    userStore.fetchUsers();
+  };
+
+  const handleGroupsUpdate = useCallback(() => {
+    getGroupTotal();
+  }, [getGroupTotal]);
+
   const tabItems: PivotProps['items'] = useMemo(() => {
     const items: PivotProps['items'] = [];
 
@@ -73,7 +81,7 @@ const SettingsContent: React.FC = () => {
         _: () => null,
         Loaded: (users) => {
           items.push({
-            children: <UserManagement />,
+            children: <UserManagement onUserCreate={handleUserCreate} />,
             key: TAB_KEYS[TabType.UserManagement],
             label: `${TabType.UserManagement} (${users.length})`,
           });
@@ -83,14 +91,14 @@ const SettingsContent: React.FC = () => {
 
     if (rbacEnabled) {
       items.push({
-        children: <GroupManagement />,
+        children: <GroupManagement onGroupsUpdate={handleGroupsUpdate} />,
         key: TAB_KEYS[TabType.GroupManagement],
         label: `${TabType.GroupManagement} ${totalGroup !== undefined ? `(${totalGroup})` : ''}`,
       });
     }
 
     return items;
-  }, [canAdministrateUsers, rbacEnabled, totalGroup, loadableUsers]);
+  }, [canAdministrateUsers, rbacEnabled, totalGroup, loadableUsers, handleGroupsUpdate]);
 
   return (
     <Pivot