feat: Add filtering and sorting on userTag screens (GSoC)

.github/workflows/pull-request.yml

@@ -38,7 +38,7 @@ jobs:
       - name: Count number of lines
         run: |
           chmod +x ./.github/workflows/countline.py
-          ./.github/workflows/countline.py --lines 600 --exclude_files src/screens/LoginPage/LoginPage.tsx src/GraphQl/Queries/Queries.ts src/screens/OrgList/OrgList.tsx src/GraphQl/Mutations/mutations.ts src/components/EventListCard/EventListCardModals.tsx
+          ./.github/workflows/countline.py --lines 600 --exclude_files src/screens/LoginPage/LoginPage.tsx src/GraphQl/Queries/Queries.ts src/screens/OrgList/OrgList.tsx src/GraphQl/Mutations/mutations.ts src/components/EventListCard/EventListCardModals.tsx src/components/TagActions/TagActionsMocks.ts
 
       - name: Get changed TypeScript files
         id: changed-files

public/locales/en/translation.json

@@ -320,7 +320,8 @@
     "noTagsFound": "No tags found",
     "removeUserTag": "Delete Tag",
     "removeUserTagMessage": "Do you want to delete this tag?",
-    "addChildTag": "Add a Sub Tag"
+    "addChildTag": "Add a Sub Tag",
+    "enterTagName": "Enter Tag Name"
   },
   "manageTag": {
     "title": "Tag Details",

public/locales/fr/translation.json

@@ -320,7 +320,8 @@
     "noTagsFound": "Aucune étiquette trouvée",
     "removeUserTag": "Supprimer l'Étiquette",
     "removeUserTagMessage": "Voulez-vous supprimer cette étiquette ?",
-    "addChildTag": "Ajouter une Sous-Étiquette"
+    "addChildTag": "Ajouter une Sous-Étiquette",
+    "enterTagName": "Entrez le nom du étiquette"
   },
   "manageTag": {
     "title": "Détails de l'étiquette",

public/locales/hi/translation.json

@@ -320,7 +320,8 @@
     "noTagsFound": "कोई टैग नहीं मिला",
     "removeUserTag": "टैग हटाएँ",
     "removeUserTagMessage": "क्या आप इस टैग को हटाना चाहते हैं?",
-    "addChildTag": "उप-टैग जोड़ें"
+    "addChildTag": "उप-टैग जोड़ें",
+    "enterTagName": "टैग का नाम दर्ज करें"
   },
   "manageTag": {
     "title": "टैग विवरण",

public/locales/sp/translation.json

@@ -320,7 +320,8 @@
     "noTagsFound": "No se encontraron etiquetas",
     "removeUserTag": "Eliminar Etiqueta",
     "removeUserTagMessage": "¿Desea eliminar esta etiqueta?",
-    "addChildTag": "Agregar una Sub Etiqueta"
+    "addChildTag": "Agregar una Sub Etiqueta",
+    "enterTagName": "Ingrese el nombre de la etiqueta"
   },
   "manageTag": {
     "title": "Detalles de la Etiqueta",

public/locales/zh/translation.json

@@ -320,7 +320,8 @@
     "noTagsFound": "未找到标签",
     "removeUserTag": "删除标签",
     "removeUserTagMessage": "您确定要删除此标签吗？",
-    "addChildTag": "添加子标签"
+    "addChildTag": "添加子标签",
+    "enterTagName": "输入标签名称"
   },
   "manageTag": {
     "title": "标签详情",

src/GraphQl/Queries/OrganizationQueries.ts

@@ -89,19 +89,35 @@ export const ORGANIZATION_USER_TAGS_LIST = gql`
     $before: String
     $first: PositiveInt
     $last: PositiveInt
+    $where: UserTagWhereInput
+    $sortedBy: UserTagSortedByInput
   ) {
     organizations(id: $id) {
-      userTags(after: $after, before: $before, first: $first, last: $last) {
+      userTags(
+        after: $after
+        before: $before
+        first: $first
+        last: $last
+        where: $where
+        sortedBy: $sortedBy
+      ) {
         edges {
           node {
             _id
             name
+            parentTag {
+              _id
+            }
             usersAssignedTo(first: $first, last: $last) {
               totalCount
             }
             childTags(first: $first, last: $last) {
               totalCount
             }
+            ancestorTags {
+              _id
+              name
+            }
           }
           cursor
         }

src/GraphQl/Queries/userTagQueries.ts

@@ -14,6 +14,8 @@ export const USER_TAGS_ASSIGNED_MEMBERS = gql`
     $before: String
     $first: PositiveInt
     $last: PositiveInt
+    $where: UserTagUsersAssignedToWhereInput
+    $sortedBy: UserTagUsersAssignedToSortedByInput
   ) {
     getAssignedUsers: getUserTag(id: $id) {
       name
@@ -22,6 +24,8 @@ export const USER_TAGS_ASSIGNED_MEMBERS = gql`
         before: $before
         first: $first
         last: $last
+        where: $where
+        sortedBy: $sortedBy
       ) {
         edges {
           node {
@@ -38,6 +42,10 @@ export const USER_TAGS_ASSIGNED_MEMBERS = gql`
         }
         totalCount
       }
+      ancestorTags {
+        _id
+        name
+      }
     }
   }
 `;
@@ -56,10 +64,19 @@ export const USER_TAG_SUB_TAGS = gql`
     $before: String
     $first: PositiveInt
     $last: PositiveInt
+    $where: UserTagWhereInput
+    $sortedBy: UserTagSortedByInput
   ) {
     getChildTags: getUserTag(id: $id) {
       name
-      childTags(after: $after, before: $before, first: $first, last: $last) {
+      childTags(
+        after: $after
+        before: $before
+        first: $first
+        last: $last
+        where: $where
+        sortedBy: $sortedBy
+      ) {
         edges {
           node {
             _id
@@ -70,6 +87,10 @@ export const USER_TAG_SUB_TAGS = gql`
             childTags(first: $first, last: $last) {
               totalCount
             }
+            ancestorTags {
+              _id
+              name
+            }
           }
         }
         pageInfo {
@@ -80,6 +101,10 @@ export const USER_TAG_SUB_TAGS = gql`
         }
         totalCount
       }
+      ancestorTags {
+        _id
+        name
+      }
     }
   }
 `;
@@ -98,6 +123,7 @@ export const USER_TAGS_MEMBERS_TO_ASSIGN_TO = gql`
     $before: String
     $first: PositiveInt
     $last: PositiveInt
+    $where: UserTagUsersToAssignToWhereInput
   ) {
     getUsersToAssignTo: getUserTag(id: $id) {
       name
@@ -106,6 +132,7 @@ export const USER_TAGS_MEMBERS_TO_ASSIGN_TO = gql`
         before: $before
         first: $first
         last: $last
+        where: $where
       ) {
         edges {
           node {
@@ -125,19 +152,3 @@ export const USER_TAGS_MEMBERS_TO_ASSIGN_TO = gql`
     }
   }
 `;
-
-/**
- * GraphQL query to retrieve the ancestor tags of a certain tag.
- *
- * @param id - The ID of the current tag.
- * @returns The list of ancestor tags.
- */
-
-export const USER_TAG_ANCESTORS = gql`
-  query GetUserTagAncestors($id: ID!) {
-    getUserTagAncestors(id: $id) {
-      _id
-      name
-    }
-  }
-`;

src/components/AddPeopleToTag/AddPeopleToTag.module.css

@@ -28,7 +28,7 @@
 }
 
 .scrollContainer {
-  max-height: 100px;
+  height: 100px;
   overflow-y: auto;
   margin-bottom: 1rem;
 }
@@ -45,3 +45,10 @@
 .removeFilterIcon {
   cursor: pointer;
 }
+
+.loadingDiv {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/AddPeopleToTag/AddPeopleToTag.test.tsx

@@ -17,7 +17,7 @@ import { store } from 'state/store';
 import userEvent from '@testing-library/user-event';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { toast } from 'react-toastify';
-import type { ApolloLink } from '@apollo/client';
+import { InMemoryCache, type ApolloLink } from '@apollo/client';
 import type { InterfaceAddPeopleToTagProps } from './AddPeopleToTag';
 import AddPeopleToTag from './AddPeopleToTag';
 import i18n from 'utils/i18nForTest';
@@ -63,12 +63,39 @@ const props: InterfaceAddPeopleToTagProps = {
   >,
 };
 
+const cache = new InMemoryCache({
+  typePolicies: {
+    Query: {
+      fields: {
+        getUserTag: {
+          merge(existing = {}, incoming) {
+            const merged = {
+              ...existing,
+              ...incoming,
+              usersToAssignTo: {
+                ...existing.usersToAssignTo,
+                ...incoming.usersToAssignTo,
+                edges: [
+                  ...(existing.usersToAssignTo?.edges || []),
+                  ...(incoming.usersToAssignTo?.edges || []),
+                ],
+              },
+            };
+
+            return merged;
+          },
+        },
+      },
+    },
+  },
+});
+
 const renderAddPeopleToTagModal = (
   props: InterfaceAddPeopleToTagProps,
   link: ApolloLink,
 ): RenderResult => {
   return render(
-    <MockedProvider addTypename={false} link={link}>
+    <MockedProvider cache={cache} addTypename={false} link={link}>
       <MemoryRouter initialEntries={['/orgtags/123/manageTag/1']}>
         <Provider store={store}>
           <I18nextProvider i18n={i18n}>
@@ -91,7 +118,7 @@ describe('Organisation Tags Page', () => {
       ...jest.requireActual('react-router-dom'),
       useParams: () => ({ orgId: 'orgId' }),
     }));
-    // cache.reset();
+    cache.reset();
   });
 
   afterEach(() => {
@@ -147,6 +174,72 @@ describe('Organisation Tags Page', () => {
     userEvent.click(screen.getAllByTestId('deselectMemberBtn')[0]);
   });
 
+  test('searchs for tags where the firstName matches the provided firstName search input', async () => {
+    renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.firstName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.firstName);
+    fireEvent.change(input, { target: { value: 'usersToAssignTo' } });
+
+    // should render the two users from the mock data
+    // where firstName starts with "usersToAssignTo"
+    await waitFor(() => {
+      const members = screen.getAllByTestId('memberName');
+      expect(members.length).toEqual(2);
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
+        'usersToAssignTo user1',
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[1]).toHaveTextContent(
+        'usersToAssignTo user2',
+      );
+    });
+  });
+
+  test('searchs for tags where the lastName matches the provided lastName search input', async () => {
+    renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.lastName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.lastName);
+    fireEvent.change(input, { target: { value: 'userToAssignTo' } });
+
+    // should render the two users from the mock data
+    // where lastName starts with "usersToAssignTo"
+    await waitFor(() => {
+      const members = screen.getAllByTestId('memberName');
+      expect(members.length).toEqual(2);
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
+        'first userToAssignTo',
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[1]).toHaveTextContent(
+        'second userToAssignTo',
+      );
+    });
+  });
+
   test('Renders more members with infinite scroll', async () => {
     const { getByText } = renderAddPeopleToTagModal(props, link);
 
@@ -157,13 +250,15 @@ describe('Organisation Tags Page', () => {
     });
 
     // Find the infinite scroll div by test ID or another selector
-    const scrollableDiv = screen.getByTestId('scrollableDiv');
+    const addPeopleToTagScrollableDiv = screen.getByTestId(
+      'addPeopleToTagScrollableDiv',
+    );
 
     const initialMemberDataLength = screen.getAllByTestId('memberName').length;
 
     // Set scroll position to the bottom
-    fireEvent.scroll(scrollableDiv, {
-      target: { scrollY: scrollableDiv.scrollHeight },
+    fireEvent.scroll(addPeopleToTagScrollableDiv, {
+      target: { scrollY: addPeopleToTagScrollableDiv.scrollHeight },
     });
 
     await waitFor(() => {
@@ -179,6 +274,16 @@ describe('Organisation Tags Page', () => {
 
     await wait();
 
+    // gives error if no user is selected
+    await waitFor(() => {
+      expect(screen.getByTestId('assignPeopleBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('assignPeopleBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(translations.noOneSelected);
+    });
+
     await waitFor(() => {
       expect(screen.getAllByTestId('selectMemberBtn')[0]).toBeInTheDocument();
     });