[frontend] update frontend when adding a user to a group (#6703)

OpenCTI-Platform · Apr 17, 2024 · c7ac408 · c7ac408
1 parent c4eba0a
commit c7ac408
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/...i-platform/opencti-front/src/private/components/settings/groups/GroupEditionContainer.tsx b/...i-platform/opencti-front/src/private/components/settings/groups/GroupEditionContainer.tsx
@@ -6,6 +6,7 @@ import { graphql, PreloadedQuery, useFragment, usePreloadedQuery } from 'react-r
 import Drawer, { DrawerVariant } from '@components/common/drawer/Drawer';
 import { usersLinesSearchQuery } from '@components/settings/users/UsersLines';
 import { UsersLinesSearchQuery } from '@components/settings/users/__generated__/UsersLinesSearchQuery.graphql';
+import { GroupUsersLinesQuery$variables } from '@components/settings/users/__generated__/GroupUsersLinesQuery.graphql';
 import GroupEditionOverview from './GroupEditionOverview';
 import Loader, { LoaderVariant } from '../../../../components/Loader';
 import GroupEditionRoles, { groupEditionRolesLinesSearchQuery } from './GroupEditionRoles';
@@ -17,6 +18,7 @@ import { GroupEditionContainerQuery } from './__generated__/GroupEditionContaine
 import { GroupEditionContainer_group$key } from './__generated__/GroupEditionContainer_group.graphql';
 import GroupEditionMarkings from './GroupEditionMarkings';
 import ErrorNotFound from '../../../../components/ErrorNotFound';
+import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
 
 export const groupEditionContainerQuery = graphql`
   query GroupEditionContainerQuery($id: String!) {
@@ -82,6 +84,22 @@ const GroupEditionContainer: FunctionComponent<GroupEditionContainerProps> = ({
     return <ErrorNotFound />;
   }
 
+  const { paginationOptions: paginationOptionsForUserEdition } = usePaginationLocalStorage<GroupUsersLinesQuery$variables>(
+    `group-${group.id}-users`,
+    {
+      id: group.id,
+      searchTerm: '',
+      sortBy: 'name',
+      orderAsc: true,
+      count: 25,
+      numberOfElements: {
+        number: 0,
+        symbol: '',
+      },
+    },
+    true,
+  );
+
   const { editContext } = group;
   return (
     <Drawer
@@ -115,7 +133,7 @@ const GroupEditionContainer: FunctionComponent<GroupEditionContainerProps> = ({
           <React.Suspense
             fallback={<Loader variant={LoaderVariant.inElement} />}
           >
-            <GroupEditionUsers group={group} queryRef={userQueryRef} />
+            <GroupEditionUsers group={group} queryRef={userQueryRef} paginationOptionsForUpdater={paginationOptionsForUserEdition} />
           </React.Suspense>
         )}
       </>

diff --git a/opencti-platform/opencti-front/src/private/components/settings/groups/GroupEditionUsers.tsx b/opencti-platform/opencti-front/src/private/components/settings/groups/GroupEditionUsers.tsx
@@ -11,7 +11,9 @@ import { PersonOutlined } from '@mui/icons-material';
 import makeStyles from '@mui/styles/makeStyles';
 import { UsersLinesSearchQuery } from '@components/settings/users/__generated__/UsersLinesSearchQuery.graphql';
 import { GroupEditionContainer_group$data } from '@components/settings/groups/__generated__/GroupEditionContainer_group.graphql';
+import { GroupUsersLinesQuery$variables } from '@components/settings/users/__generated__/GroupUsersLinesQuery.graphql';
 import { usersLinesSearchQuery } from '../users/UsersLines';
+import { deleteNodeFromId, insertNode } from '../../../../utils/store';
 
 const useStyles = makeStyles<Theme>((theme) => ({
   list: {
@@ -60,9 +62,10 @@ const userMutationRelationDelete = graphql`
 interface GroupEditionUsersProps {
   group: GroupEditionContainer_group$data,
   queryRef: PreloadedQuery<UsersLinesSearchQuery>,
+  paginationOptionsForUpdater: GroupUsersLinesQuery$variables,
 }
 
-const GroupEditionUsers: FunctionComponent<GroupEditionUsersProps> = ({ group, queryRef }) => {
+const GroupEditionUsers: FunctionComponent<GroupEditionUsersProps> = ({ group, queryRef, paginationOptionsForUpdater }) => {
   const classes = useStyles();
   const groupId = group.id;
   const groupUsers = group?.members?.edges?.map((n) => ({ id: n.node.id })) ?? [];
@@ -72,14 +75,27 @@ const GroupEditionUsers: FunctionComponent<GroupEditionUsersProps> = ({ group, q
   const [commitAddUser] = useMutation(userMutationRelationAdd);
   const [commitRemoveUser] = useMutation(userMutationRelationDelete);
   const handleToggle = (userId: string, groupUser: { id: string } | undefined, event: React.ChangeEvent<HTMLInputElement>) => {
+    const input = {
+      fromId: userId,
+      relationship_type: 'member-of',
+    };
     if (event.target.checked) {
       commitAddUser({
         variables: {
           id: groupId,
-          input: {
-            fromId: userId,
-            relationship_type: 'member-of',
-          },
+          input,
+        },
+        updater: (store) => {
+          insertNode(
+            store,
+            'Pagination_group_members',
+            paginationOptionsForUpdater,
+            'groupEdit',
+            groupId,
+            'relationAdd',
+            { input },
+            'from',
+          );
         },
       });
     } else if (groupUser !== undefined) {
@@ -89,6 +105,9 @@ const GroupEditionUsers: FunctionComponent<GroupEditionUsersProps> = ({ group, q
           fromId: groupUser.id,
           relationship_type: 'member-of',
         },
+        updater: (store) => {
+          deleteNodeFromId(store, groupId, 'Pagination_group_members', paginationOptionsForUpdater, groupUser.id);
+        },
       });
     }
   };