Merge branch 'develop' into upgrade-testing-library-jest-dom

.github/workflows/check-tsdoc.js

@@ -0,0 +1,68 @@
+import fs from 'fs/promises'; // Import fs.promises for async operations
+import path from 'path';
+
+// List of files to skip
+const filesToSkip = [
+    'index.tsx', 
+    'EventActionItems.tsx',
+    'OrgPostCard.tsx',
+    'UsersTableItem.tsx',
+    'FundCampaignPledge.tsx'
+];
+
+// Recursively find all .tsx files, excluding files listed in filesToSkip
+async function findTsxFiles(dir) {
+  let results = [];
+  try {
+    const list = await fs.readdir(dir);
+    for (const file of list) {
+      const filePath = path.join(dir, file);
+      const stat = await fs.stat(filePath);
+      if (stat.isDirectory()) {
+        results = results.concat(await findTsxFiles(filePath));
+      } else if (
+        filePath.endsWith('.tsx') &&
+        !filePath.endsWith('.test.tsx') &&
+        !filesToSkip.includes(path.relative(dir, filePath))
+      ) {
+        results.push(filePath);
+      }
+    }
+  } catch (err) {
+    console.error(`Error reading directory ${dir}: ${err.message}`);
+  }
+  return results;
+}
+
+// Check if a file contains at least one TSDoc comment
+async function containsTsDocComment(filePath) {
+  try {
+    const content = await fs.readFile(filePath, 'utf8');
+    return /\/\*\*[\s\S]*?\*\//.test(content);
+  } catch (err) {
+    console.error(`Error reading file ${filePath}: ${err.message}`);
+    return false;
+  }
+}
+
+// Main function to run the validation
+async function run() {
+  const dir = process.argv[2] || './src'; // Allow directory path as a command-line argument
+  const files = await findTsxFiles(dir);
+  const filesWithoutTsDoc = [];
+
+  for (const file of files) {
+    if (!await containsTsDocComment(file)) {
+      filesWithoutTsDoc.push(file);
+    }
+  }
+
+  if (filesWithoutTsDoc.length > 0) {
+    filesWithoutTsDoc.forEach(file => {
+      console.error(`No TSDoc comment found in file: ${file}`);
+    });
+    process.exit(1);
+  }
+}
+
+run();

.github/workflows/pull-request.yml

@@ -58,6 +58,9 @@ jobs:
           CHANGED_FILES: ${{ steps.changed_files.outputs.all_changed_files }}
         run: npx eslint ${CHANGED_FILES} 
 
+      - name: Check for TSDoc comments
+        run: npm run check-tsdoc # Run the TSDoc check script
+
       - name: Check for localStorage Usage
         run: |
           chmod +x scripts/githooks/check-localstorage-usage.js

package.json

@@ -28,7 +28,7 @@
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.16.0",
     "history": "^5.3.0",
-    "i18next": "^21.8.14",
+    "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
     "inquirer": "^8.0.0",
@@ -67,6 +67,7 @@
     "lint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
     "format:fix": "prettier --write \"**/*.{ts,tsx,json,scss,css}\"",
     "format:check": "prettier --check \"**/*.{ts,tsx,json,scss,css}\"",
+    "check-tsdoc": "node .github/workflows/check-tsdoc.js",
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "prepare": "husky install",
     "jest-preview": "jest-preview",

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

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) {

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);

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();

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}
 

src/screens/OrganizationTags/OrganizationTags.module.css

@@ -134,3 +134,8 @@
 .subTagsLink:hover i {
   visibility: visible;
 }
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+}