add error component for tagNode subtags query

PalisadoesFoundation · Oct 28, 2024 · 2a49ea0 · 2a49ea0
1 parent d3e91ac
commit 2a49ea0
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 4 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -346,6 +346,7 @@
     "successfullyAssignedToTags": "Successfully Assigned to Tags",
     "successfullyRemovedFromTags": "Successfully Removed from Tags",
     "errorOccurredWhileLoadingOrganizationUserTags": "Error occurred while loading organization tags",
+    "errorOccurredWhileLoadingSubTags": "Error occurred while loading subTags tags",
     "removeUserTag": "Delete Tag",
     "removeUserTagMessage": "Do you want to delete this tag? It delete all the sub tags and all the associations.",
     "tagDetails": "Tag Details",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -346,6 +346,7 @@
     "successfullyAssignedToTags": "Attribué aux tags avec succès",
     "successfullyRemovedFromTags": "Retiré des tags avec succès",
     "errorOccurredWhileLoadingOrganizationUserTags": "Erreur lors du chargement des tags de l'organisation",
+    "errorOccurredWhileLoadingSubTags": "Une erreur s'est produite lors du chargement des sous-tags",
     "removeUserTag": "Supprimer le tag",
     "removeUserTagMessage": "Voulez-vous supprimer ce tag ? Cela supprimera tous les sous-tags et toutes les associations.",
     "tagDetails": "Détails du tag",

diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
@@ -346,6 +346,7 @@
     "successfullyAssignedToTags": "सफलतापूर्वक टैग्स को असाइन किया गया",
     "successfullyRemovedFromTags": "सफलतापूर्वक टैग्स से हटाया गया",
     "errorOccurredWhileLoadingOrganizationUserTags": "संगठन टैग्स को लोड करते समय त्रुटि हुई",
+    "errorOccurredWhileLoadingSubTags": "उप-टैग लोड करते समय त्रुटि हुई",
     "removeUserTag": "टैग हटाएं",
     "removeUserTagMessage": "क्या आप इस टैग को हटाना चाहते हैं? यह सभी उप-टैग्स और सभी संबंधों को हटा देगा।",
     "tagDetails": "टैग विवरण",

diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
@@ -346,6 +346,7 @@
     "successfullyAssignedToTags": "Asignado a etiquetas con éxito",
     "successfullyRemovedFromTags": "Eliminado de etiquetas con éxito",
     "errorOccurredWhileLoadingOrganizationUserTags": "Error al cargar las etiquetas de la organización",
+    "errorOccurredWhileLoadingSubTags": "Ocurrió un error al cargar las subetiquetas",
     "removeUserTag": "Eliminar etiqueta",
     "removeUserTagMessage": "¿Desea eliminar esta etiqueta? Esto eliminará todas las subetiquetas y todas las asociaciones.",
     "tagDetails": "Detalles de la etiqueta",

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -346,6 +346,7 @@
     "successfullyAssignedToTags": "成功分配到标签",
     "successfullyRemovedFromTags": "成功从标签中移除",
     "errorOccurredWhileLoadingOrganizationUserTags": "加载组织标签时出错",
+    "errorOccurredWhileLoadingSubTags": "加载子标签时发生错误",
     "removeUserTag": "删除标签",
     "removeUserTagMessage": "您要删除此标签吗？这将删除所有子标签和所有关联。",
     "tagDetails": "标签详情",

diff --git a/src/components/TagActions/TagActions.test.tsx b/src/components/TagActions/TagActions.test.tsx
@@ -22,10 +22,15 @@ import type { ApolloLink } from '@apollo/client';
 import type { InterfaceTagActionsProps } from './TagActions';
 import TagActions from './TagActions';
 import i18n from 'utils/i18nForTest';
-import { MOCKS, MOCKS_ERROR } from './TagActionsMocks';
+import {
+  MOCKS,
+  MOCKS_ERROR_ORGANIZATION_TAGS_QUERY,
+  MOCKS_ERROR_SUBTAGS_QUERY,
+} from './TagActionsMocks';
 
 const link = new StaticMockLink(MOCKS, true);
-const link2 = new StaticMockLink(MOCKS_ERROR, true);
+const link2 = new StaticMockLink(MOCKS_ERROR_ORGANIZATION_TAGS_QUERY, true);
+const link3 = new StaticMockLink(MOCKS_ERROR_SUBTAGS_QUERY, true);
 
 async function wait(ms = 500): Promise<void> {
   await act(() => {
@@ -132,6 +137,24 @@ describe('Organisation Tags Page', () => {
     });
   });
 
+  test('Renders error component when when subTags query is unsuccessful', async () => {
+    const { getByText } = renderTagActionsModal(props[0], link3);
+
+    await wait();
+
+    // expand tag 1 to list its subtags
+    await waitFor(() => {
+      expect(screen.getByTestId('expandSubTags1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('expandSubTags1'));
+
+    await waitFor(() => {
+      expect(
+        getByText(translations.errorOccurredWhileLoadingSubTags),
+      ).toBeInTheDocument();
+    });
+  });
+
   test('Renders more members with infinite scroll', async () => {
     const { getByText } = renderTagActionsModal(props[0], link);
 

diff --git a/src/components/TagActions/TagActionsMocks.ts b/src/components/TagActions/TagActionsMocks.ts
@@ -452,7 +452,7 @@ export const MOCKS = [
   },
 ];
 
-export const MOCKS_ERROR = [
+export const MOCKS_ERROR_ORGANIZATION_TAGS_QUERY = [
   {
     request: {
       query: ORGANIZATION_USER_TAGS_LIST,
@@ -461,6 +461,73 @@ export const MOCKS_ERROR = [
         first: TAGS_QUERY_LIMIT,
       },
     },
-    error: new Error('Mock Graphql Error'),
+    error: new Error('Mock Graphql Error for organization root tags query'),
+  },
+];
+
+export const MOCKS_ERROR_SUBTAGS_QUERY = [
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_LIMIT,
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'userTag 1',
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 11,
+                    },
+                  },
+                  cursor: '1',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'userTag 2',
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                  },
+                  cursor: '2',
+                },
+              ],
+              pageInfo: {
+                startCursor: '1',
+                endCursor: '2',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_LIMIT,
+      },
+    },
+    error: new Error('Mock Graphql Error for subTags query'),
   },
 ];
diff --git a/src/components/TagActions/TagNode.tsx b/src/components/TagActions/TagNode.tsx
@@ -9,6 +9,7 @@ import type {
 import { TAGS_QUERY_LIMIT } from 'utils/organizationTagsUtils';
 import styles from './TagActions.module.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import { WarningAmberRounded } from '@mui/icons-material';
 
 /**
  * Props for the `TagNode` component.
@@ -34,6 +35,7 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
   const {
     data: subTagsData,
     loading: subTagsLoading,
+    error: subTagsError,
     fetchMore: fetchMoreSubTags,
   }: {
     data?: {
@@ -62,6 +64,19 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
     skip: !expanded,
   });
 
+  if (subTagsError) {
+    return (
+      <div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
+        <div className={styles.errorMessage}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {t('errorOccurredWhileLoadingSubTags')}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
   const subTagsList = subTagsData?.getUserTag.childTags.edges.map(
     (edge) => edge.node,
   );