refactoring

src/GraphQl/Queries/userTagQueries.ts

@@ -15,7 +15,7 @@ export const USER_TAGS_ASSIGNED_MEMBERS = gql`
     $first: PositiveInt
     $last: PositiveInt
   ) {
-    getUserTag(id: $id) {
+    getAssignedUsers: getUserTag(id: $id) {
       name
       usersAssignedTo(
         after: $after
@@ -57,7 +57,7 @@ export const USER_TAG_SUB_TAGS = gql`
     $first: PositiveInt
     $last: PositiveInt
   ) {
-    getUserTag(id: $id) {
+    getChildTags: getUserTag(id: $id) {
       name
       childTags(after: $after, before: $before, first: $first, last: $last) {
         edges {
@@ -99,7 +99,7 @@ export const USER_TAGS_MEMBERS_TO_ASSIGN_TO = gql`
     $first: PositiveInt
     $last: PositiveInt
   ) {
-    getUserTag(id: $id) {
+    getUsersToAssignTo: getUserTag(id: $id) {
       name
       usersToAssignTo(
         after: $after

src/components/AddPeopleToTag/AddPeopleToTag.tsx

@@ -67,6 +67,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
         first: TAGS_QUERY_PAGE_SIZE,
       },
       skip: !addPeopleToTagModalIsOpen,
+      fetchPolicy: 'no-cache',
     },
   );
 
@@ -75,29 +76,31 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
       variables: {
         first: TAGS_QUERY_PAGE_SIZE,
         after:
-          userTagsMembersToAssignToData?.getUserTag.usersToAssignTo.pageInfo
-            .endCursor, // Fetch after the last loaded cursor
+          userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo
+            .pageInfo.endCursor, // Fetch after the last loaded cursor
       },
       updateQuery: (
-        prevResult: { getUserTag: InterfaceQueryUserTagsMembersToAssignTo },
+        prevResult: {
+          getUsersToAssignTo: InterfaceQueryUserTagsMembersToAssignTo;
+        },
         {
           fetchMoreResult,
         }: {
           fetchMoreResult: {
-            getUserTag: InterfaceQueryUserTagsMembersToAssignTo;
+            getUsersToAssignTo: InterfaceQueryUserTagsMembersToAssignTo;
           };
         },
       ) => {
         if (!fetchMoreResult) return prevResult;
 
         return {
-          getUserTag: {
-            ...fetchMoreResult.getUserTag,
+          getUsersToAssignTo: {
+            ...fetchMoreResult.getUsersToAssignTo,
             usersToAssignTo: {
-              ...fetchMoreResult.getUserTag.usersToAssignTo,
+              ...fetchMoreResult.getUsersToAssignTo.usersToAssignTo,
               edges: [
-                ...prevResult.getUserTag.usersToAssignTo.edges,
-                ...fetchMoreResult.getUserTag.usersToAssignTo.edges,
+                ...prevResult.getUsersToAssignTo.usersToAssignTo.edges,
+                ...fetchMoreResult.getUsersToAssignTo.usersToAssignTo.edges,
               ],
             },
           },
@@ -106,8 +109,13 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
     });
   };
 
+  // const userTagMembersToAssignTo =
+  //   userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo.edges.map(
+  //     (edge) => edge.node,
+  //   );
+
   const userTagMembersToAssignTo =
-    userTagsMembersToAssignToData?.getUserTag.usersToAssignTo.edges.map(
+    userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo.edges.map(
       (edge) => edge.node,
     );
 
@@ -289,8 +297,8 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                     dataLength={userTagMembersToAssignTo?.length ?? 0} // This is important field to render the next data
                     next={loadMoreMembersToAssignTo}
                     hasMore={
-                      userTagsMembersToAssignToData?.getUserTag.usersToAssignTo
-                        .pageInfo.hasNextPage ?? false
+                      userTagsMembersToAssignToData?.getUsersToAssignTo
+                        .usersToAssignTo.pageInfo.hasNextPage ?? false
                     }
                     loader={<InfiniteScrollLoader />}
                     scrollableTarget="scrollableDiv"

src/components/AddPeopleToTag/AddPeopleToTagsMocks.ts

@@ -13,7 +13,7 @@ export const MOCKS = [
     },
     result: {
       data: {
-        getUserTag: {
+        getUsersToAssignTo: {
           name: 'tag1',
           usersToAssignTo: {
             edges: [
@@ -121,7 +121,7 @@ export const MOCKS = [
     },
     result: {
       data: {
-        getUserTag: {
+        getUsersToAssignTo: {
           name: 'tag1',
           usersToAssignTo: {
             edges: [

src/components/TagActions/TagActions.test.tsx

@@ -50,15 +50,15 @@ const translations = {
 
 const props: InterfaceTagActionsProps[] = [
   {
-    assignToTagsModalIsOpen: true,
-    hideAssignToTagsModal: () => {},
+    tagActionsModalIsOpen: true,
+    hideTagActionsModal: () => {},
     tagActionType: 'assignToTags',
     t: (key: string) => translations[key],
     tCommon: (key: string) => translations[key],
   },
   {
-    assignToTagsModalIsOpen: true,
-    hideAssignToTagsModal: () => {},
+    tagActionsModalIsOpen: true,
+    hideTagActionsModal: () => {},
     tagActionType: 'removeFromTags',
     t: (key: string) => translations[key],
     tCommon: (key: string) => translations[key],
@@ -120,6 +120,31 @@ describe('Organisation Tags Page', () => {
     });
   });
 
+  test('Component calls hideTagActionsModal when modal is closed', async () => {
+    const hideTagActionsModalMock = jest.fn();
+
+    const props2: InterfaceTagActionsProps = {
+      tagActionsModalIsOpen: true,
+      hideTagActionsModal: hideTagActionsModalMock,
+      tagActionType: 'assignToTags',
+      t: (key: string) => key,
+      tCommon: (key: string) => key,
+    };
+
+    renderTagActionsModal(props2, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('closeTagActionsModalBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('closeTagActionsModalBtn'));
+
+    await waitFor(() => {
+      expect(hideTagActionsModalMock).toHaveBeenCalled();
+    });
+  });
+
   test('Renders error component when when query is unsuccessful', async () => {
     const { queryByText } = renderTagActionsModal(props[0], link2);
 

src/components/TagActions/TagActions.tsx

@@ -35,16 +35,16 @@ interface InterfaceUserTagsAncestorData {
  * Props for the `AssignToTags` component.
  */
 export interface InterfaceTagActionsProps {
-  assignToTagsModalIsOpen: boolean;
-  hideAssignToTagsModal: () => void;
+  tagActionsModalIsOpen: boolean;
+  hideTagActionsModal: () => void;
   tagActionType: TagActionType;
   t: (key: string) => string;
   tCommon: (key: string) => string;
 }
 
 const TagActions: React.FC<InterfaceTagActionsProps> = ({
-  assignToTagsModalIsOpen,
-  hideAssignToTagsModal,
+  tagActionsModalIsOpen,
+  hideTagActionsModal,
   tagActionType,
   t,
   tCommon,
@@ -61,7 +61,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
       id: orgId,
       first: TAGS_QUERY_PAGE_SIZE,
     },
-    skip: !assignToTagsModalIsOpen,
+    skip: !tagActionsModalIsOpen,
   });
 
   const loadMoreUserTags = (): void => {
@@ -244,7 +244,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
 
       if (data) {
         toast.success(t('successfullyAssignedToTags'));
-        hideAssignToTagsModal();
+        hideTagActionsModal();
       }
     } catch (error: unknown) {
       /* istanbul ignore next */
@@ -271,7 +271,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
 
       if (data) {
         toast.success(t('successfullyRemovedFromTags'));
-        hideAssignToTagsModal();
+        hideTagActionsModal();
       }
     } catch (error: unknown) {
       /* istanbul ignore next */
@@ -299,8 +299,8 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
   return (
     <>
       <Modal
-        show={assignToTagsModalIsOpen}
-        onHide={hideAssignToTagsModal}
+        show={tagActionsModalIsOpen}
+        onHide={hideTagActionsModal}
         backdrop="static"
         aria-labelledby="contained-modal-title-vcenter"
         centered
@@ -398,7 +398,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
           <Modal.Footer>
             <Button
               variant="secondary"
-              onClick={(): void => hideAssignToTagsModal()}
+              onClick={(): void => hideTagActionsModal()}
               data-testid="closeTagActionsModalBtn"
             >
               {tCommon('cancel')}

src/components/TagActions/TagActionsMocks.ts

@@ -230,7 +230,7 @@ export const MOCKS = [
     },
     result: {
       data: {
-        getUserTag: {
+        getChildTags: {
           name: 'userTag 1',
           childTags: {
             edges: [
@@ -388,7 +388,7 @@ export const MOCKS = [
     },
     result: {
       data: {
-        getUserTag: {
+        getChildTags: {
           name: 'tag1',
           childTags: {
             edges: [

src/components/TagActions/TagNode.tsx

@@ -42,26 +42,26 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
     fetchMoreSubTags({
       variables: {
         first: TAGS_QUERY_PAGE_SIZE,
-        after: subTagsData?.getUserTag.childTags.pageInfo.endCursor,
+        after: subTagsData?.getChildTags.childTags.pageInfo.endCursor,
       },
       updateQuery: (
-        prevResult: { getUserTag: InterfaceQueryUserTagChildTags },
+        prevResult: { getChildTags: InterfaceQueryUserTagChildTags },
         {
           fetchMoreResult,
         }: {
-          fetchMoreResult?: { getUserTag: InterfaceQueryUserTagChildTags };
+          fetchMoreResult?: { getChildTags: InterfaceQueryUserTagChildTags };
         },
       ) => {
         if (!fetchMoreResult) return prevResult;
 
         return {
-          getUserTag: {
-            ...fetchMoreResult.getUserTag,
+          getChildTags: {
+            ...fetchMoreResult.getChildTags,
             childTags: {
-              ...fetchMoreResult.getUserTag.childTags,
+              ...fetchMoreResult.getChildTags.childTags,
               edges: [
-                ...prevResult.getUserTag.childTags.edges,
-                ...fetchMoreResult.getUserTag.childTags.edges,
+                ...prevResult.getChildTags.childTags.edges,
+                ...fetchMoreResult.getChildTags.childTags.edges,
               ],
             },
           },
@@ -70,7 +70,7 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
     });
   };
 
-  const subTagsList = subTagsData?.getUserTag.childTags.edges.map(
+  const subTagsList = subTagsData?.getChildTags.childTags.edges.map(
     (edge) => edge.node,
   );
 
@@ -151,7 +151,8 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
               dataLength={subTagsList?.length ?? 0}
               next={loadMoreSubTags}
               hasMore={
-                subTagsData?.getUserTag.childTags.pageInfo.hasNextPage ?? false
+                subTagsData?.getChildTags.childTags.pageInfo.hasNextPage ??
+                false
               }
               loader={<InfiniteScrollLoader />}
               scrollableTarget={`subTagsScrollableDiv${tag._id}`}