feat: add subTags UI (GSoC) (#2196)

* add subTags screen * minor correction * improve test coverage * minor changes * add ts-doc
PalisadoesFoundation · Aug 21, 2024 · 968c284 · 968c284
1 parent 989b154
commit 968c284
Show file tree

Hide file tree

Showing 14 changed files with 1,650 additions and 117 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -22,6 +22,7 @@ import OrganizationFunds from 'screens/OrganizationFunds/OrganizationFunds';
 import OrganizationPeople from 'screens/OrganizationPeople/OrganizationPeople';
 import OrganizationTags from 'screens/OrganizationTags/OrganizationTags';
 import ManageTag from 'screens/ManageTag/ManageTag';
+import SubTags from 'screens/SubTags/SubTags';
 import PageNotFound from 'screens/PageNotFound/PageNotFound';
 import Requests from 'screens/Requests/Requests';
 import Users from 'screens/Users/Users';
@@ -152,6 +153,7 @@ function app(): JSX.Element {
               path="orgtags/:orgId/managetag/:tagId"
               element={<ManageTag />}
             />
+            <Route path="orgtags/:orgId/subtags/:tagId" element={<SubTags />} />
             <Route path="/member/:orgId" element={<MemberDetail />} />
             <Route path="/orgevents/:orgId" element={<OrganizationEvents />} />
             <Route

diff --git a/src/GraphQl/Queries/userTagQueries.ts b/src/GraphQl/Queries/userTagQueries.ts
@@ -1,5 +1,12 @@
 import gql from 'graphql-tag';
 
+/**
+ * GraphQL query to retrieve organization members assigned a certain tag.
+ *
+ * @param id - The ID of the tag that is assigned.
+ * @returns The list of organization members.
+ */
+
 export const USER_TAGS_ASSIGNED_MEMBERS = gql`
   query UserTagDetails(
     $id: ID!
@@ -35,7 +42,14 @@ export const USER_TAGS_ASSIGNED_MEMBERS = gql`
   }
 `;
 
-export const USER_TAG_CHILD_TAGS = gql`
+/**
+ * GraphQL query to retrieve the sub tags of a certain tag.
+ *
+ * @param id - The ID of the parent tag.
+ * @returns The list of sub tags.
+ */
+
+export const USER_TAG_SUB_TAGS = gql`
   query GetChildTags(
     $id: ID!
     $after: String
@@ -70,6 +84,13 @@ export const USER_TAG_CHILD_TAGS = 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) {

diff --git a/src/screens/ManageTag/ManageTag.module.css b/src/screens/ManageTag/ManageTag.module.css
@@ -78,6 +78,24 @@
   }
 }
 
+.errorContainer {
+  min-height: 100vh;
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
 .tableHeader {
   background-color: var(--bs-primary);
   color: var(--bs-white);

diff --git a/src/screens/ManageTag/ManageTag.test.tsx b/src/screens/ManageTag/ManageTag.test.tsx
@@ -84,7 +84,7 @@ const renderManageTag = (link: ApolloLink): RenderResult => {
                 element={<ManageTag />}
               />
               <Route
-                path="/orgtags/:orgId/orgtagSubTags/:tagId"
+                path="/orgtags/:orgId/subtags/:tagId"
                 element={<div data-testid="subTagsScreen"></div>}
               />
               <Route
@@ -223,9 +223,11 @@ describe('Organisation Tags Page', () => {
     await wait();
 
     await waitFor(() => {
-      expect(screen.getAllByTestId('goToManageTag')[0]).toBeInTheDocument();
+      expect(
+        screen.getAllByTestId('redirectToManageTag')[0],
+      ).toBeInTheDocument();
     });
-    userEvent.click(screen.getAllByTestId('goToManageTag')[0]);
+    userEvent.click(screen.getAllByTestId('redirectToManageTag')[0]);
 
     await waitFor(() => {
       expect(screen.getByTestId('addPeopleToTagBtn')).toBeInTheDocument();

diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx
@@ -15,6 +15,7 @@ import { toast } from 'react-toastify';
 import type { InterfaceQueryUserTagsAssignedMembers } from 'utils/interfaces';
 import styles from './ManageTag.module.css';
 import { DataGrid } from '@mui/x-data-grid';
+import { dataGridStyle } from 'utils/organizationTagsUtils';
 import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
 import { Stack } from '@mui/material';
 import { UNASSIGN_USER_TAG } from 'GraphQl/Mutations/TagMutations';
@@ -23,26 +24,12 @@ import {
   USER_TAGS_ASSIGNED_MEMBERS,
 } from 'GraphQl/Queries/userTagQueries';
 
-const dataGridStyle = {
-  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
-    outline: 'none !important',
-  },
-  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
-    outline: 'none',
-  },
-  '& .MuiDataGrid-row:hover': {
-    backgroundColor: 'transparent',
-  },
-  '& .MuiDataGrid-row.Mui-hovered': {
-    backgroundColor: 'transparent',
-  },
-  '& .MuiDataGrid-root': {
-    borderRadius: '0.1rem',
-  },
-  '& .MuiDataGrid-main': {
-    borderRadius: '0.1rem',
-  },
-};
+/**
+ * Component that renders the Manage Tag screen when the app navigates to '/orgtags/:orgId/managetag/:tagId'.
+ *
+ * This component does not accept any props and is responsible for displaying
+ * the content associated with the corresponding route.
+ */
 
 function ManageTag(): JSX.Element {
   const { t } = useTranslation('translation', {
@@ -54,7 +41,7 @@ function ManageTag(): JSX.Element {
     useState(false);
   const [unassignTagModalIsOpen, setUnassignTagModalIsOpen] = useState(false);
 
-  const { orgId: currentUrl, tagId: currentTagId } = useParams();
+  const { orgId, tagId: currentTagId } = useParams();
   const navigate = useNavigate();
   const [after, setAfter] = useState<string | null | undefined>(null);
   const [before, setBefore] = useState<string | null | undefined>(null);
@@ -131,7 +118,6 @@ function ManageTag(): JSX.Element {
       /* istanbul ignore next */
       if (error instanceof Error) {
         toast.error(error.message);
-        console.log(error.message);
       }
     }
   };
@@ -165,12 +151,12 @@ function ManageTag(): JSX.Element {
 
   const orgUserTagAncestors = orgUserTagAncestorsData?.getUserTagAncestors;
 
-  const goToSubTags = (tagId: string): void => {
-    navigate(`/orgtags/${currentUrl}/orgtagSubTags/${tagId}`);
+  const redirectToSubTags = (tagId: string): void => {
+    navigate(`/orgtags/${orgId}/subTags/${tagId}`);
   };
 
-  const handleClick = (tagId: string): void => {
-    navigate(`/orgtags/${currentUrl}/managetag/${tagId}`);
+  const redirectToManageTag = (tagId: string): void => {
+    navigate(`/orgtags/${orgId}/managetag/${tagId}`);
   };
 
   const handleNextPage = (): void => {
@@ -239,7 +225,7 @@ function ManageTag(): JSX.Element {
         return (
           <div className="d-flex justify-content-center align-items-center">
             <Link
-              to={`/member/${currentUrl}`}
+              to={`/member/${orgId}`}
               state={{ id: params.row._id }}
               className={styles.membername}
               data-testid="viewProfileBtn"
@@ -313,7 +299,7 @@ function ManageTag(): JSX.Element {
 
               <Button
                 variant="success"
-                onClick={() => goToSubTags(currentTagId as string)}
+                onClick={() => redirectToSubTags(currentTagId as string)}
                 className="mx-4"
                 data-testid="subTagsBtn"
               >
@@ -340,7 +326,7 @@ function ManageTag(): JSX.Element {
                 </div>
 
                 <div
-                  onClick={() => navigate(`/orgtags/${currentUrl}`)}
+                  onClick={() => navigate(`/orgtags/${orgId}`)}
                   className={`fs-6 ms-3 my-1 ${styles.tagsBreadCrumbs}`}
                   data-testid="allTagsBtn"
                 >
@@ -352,8 +338,8 @@ function ManageTag(): JSX.Element {
                   <div
                     key={index}
                     className={`ms-2 my-1 ${tag._id === currentTagId ? `fs-4 fw-semibold text-secondary` : `${styles.tagsBreadCrumbs} fs-6`}`}
-                    onClick={() => handleClick(tag._id as string)}
-                    data-testid="goToManageTag"
+                    onClick={() => redirectToManageTag(tag._id as string)}
+                    data-testid="redirectToManageTag"
                   >
                     {tag.name}
 

diff --git a/src/screens/OrganizationTags/OrganizationTags.module.css b/src/screens/OrganizationTags/OrganizationTags.module.css
@@ -134,3 +134,8 @@
 .subTagsLink:hover i {
   visibility: visible;
 }
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+}
diff --git a/src/screens/OrganizationTags/OrganizationTags.test.tsx b/src/screens/OrganizationTags/OrganizationTags.test.tsx
@@ -63,7 +63,7 @@ const renderOrganizationTags = (link: ApolloLink): RenderResult => {
                 element={<div data-testid="manageTagScreen"></div>}
               />
               <Route
-                path="/orgtags/:orgId/orgtagChildTags/:tagId"
+                path="/orgtags/:orgId/subtags/:tagId"
                 element={<div data-testid="subTagsScreen"></div>}
               />
             </Routes>
@@ -151,6 +151,21 @@ describe('Organisation Tags Page', () => {
     );
   });
 
+  test('navigates to sub tags screen after clicking on a tag', async () => {
+    renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('tagName')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('subTagsScreen')).toBeInTheDocument();
+    });
+  });
+
   test('navigates to manage tag page after clicking manage tag option', async () => {
     renderOrganizationTags(link);