fix failing test and fix systems

ral-facilities · Oct 16, 2023 · 86b1d72 · 86b1d72
1 parent dd24bec
commit 86b1d72
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 34 deletions.
diff --git a/src/api/system.tsx b/src/api/system.tsx
@@ -1,6 +1,6 @@
 import axios, { AxiosError } from 'axios';
 import { settings } from '../settings';
-import { System } from '../app.types';
+import { BreadcrumbsInfo, System } from '../app.types';
 import { UseQueryResult, useQuery } from '@tanstack/react-query';
 
 const fetchSystems = async (
@@ -41,3 +41,37 @@ export const useSystems = (
     }
   );
 };
+
+const fetchSystemsBreadcrumbs = async (
+  id: string
+): Promise<BreadcrumbsInfo> => {
+  let apiUrl: string;
+  apiUrl = '';
+  const settingsResult = await settings;
+  if (settingsResult) {
+    apiUrl = settingsResult['apiUrl'];
+  }
+
+  return axios
+    .get(`${apiUrl}/v1/systems/${id}/breadcrumbs`, {})
+    .then((response) => {
+      return response.data;
+    });
+};
+
+export const useSystemsBreadcrumbs = (
+  id: string
+): UseQueryResult<BreadcrumbsInfo, AxiosError> => {
+  return useQuery<BreadcrumbsInfo, AxiosError>(
+    ['SystemBreadcrumbs', id],
+    (params) => {
+      return fetchSystemsBreadcrumbs(id);
+    },
+    {
+      onError: (error) => {
+        console.log('Got error ' + error.message);
+      },
+      enabled: id !== '',
+    }
+  );
+};
diff --git a/src/catalogue/catalogue.component.tsx b/src/catalogue/catalogue.component.tsx
@@ -173,6 +173,7 @@ function Catalogue() {
               onChangeNavigateHome={() => {
                 navigate('/inventory-management-system/catalogue');
               }}
+              navigateHomeAriaLabel={'navigate to catalogue home'}
             />
             <NavigateNext
               fontSize="medium"

diff --git a/src/systems/systems.component.tsx b/src/systems/systems.component.tsx
@@ -1,6 +1,5 @@
 import { NavigateNext } from '@mui/icons-material';
 import AddIcon from '@mui/icons-material/Add';
-import HomeIcon from '@mui/icons-material/Home';
 import {
   Box,
   Divider,
@@ -14,18 +13,16 @@ import {
 } from '@mui/material';
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useSystems } from '../api/system';
+import { useSystemsBreadcrumbs, useSystems } from '../api/system';
 import Breadcrumbs from '../view/breadcrumbs.component';
 
 function Systems() {
   // Navigation setup
-  const [currNode, setCurrNode] = React.useState('/');
   const navigate = useNavigate();
   const location = useLocation();
   const onChangeNode = React.useCallback(
-    (newNode: string) => {
-      setCurrNode(newNode);
-      navigate(`/inventory-management-system/systems${newNode}`);
+    (newId: string) => {
+      navigate(`/inventory-management-system/systems${newId}`);
     },
     [navigate]
   );
@@ -40,6 +37,10 @@ function Systems() {
     systemsLocation === '' ? '/' : systemsLocation
   );
 
+  const { data: systemsBreadcrumbs } = useSystemsBreadcrumbs(
+    systemsLocation.replace('/', '')
+  );
+
   return systemsDataLoading && subsystemsData !== undefined ? null : (
     <Grid container>
       <Grid
@@ -55,16 +56,14 @@ function Systems() {
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center' }}>
-          <IconButton
-            sx={{ margin: '4px' }}
-            onClick={() => {
+          <Breadcrumbs
+            breadcrumbsInfo={systemsBreadcrumbs}
+            onChangeNode={onChangeNode}
+            onChangeNavigateHome={() => {
               navigate('/inventory-management-system/systems');
             }}
-            aria-label="navigate to systems home"
-          >
-            <HomeIcon />
-          </IconButton>
-          <Breadcrumbs currNode={currNode} onChangeNode={onChangeNode} />
+            navigateHomeAriaLabel={'navigate to systems home'}
+          />
           <NavigateNext
             fontSize="medium"
             sx={{ color: 'rgba(0, 0, 0, 0.6)', margin: '4px' }}
@@ -110,9 +109,7 @@ function Systems() {
               margin: 1,
             }}
           >
-            <Typography variant="h3">
-              Please select a system
-            </Typography>
+            <Typography variant="h3">Please select a system</Typography>
           </Box>
         </Grid>
       </Grid>

diff --git a/src/view/__snapshots__/breadcrumbs.component.test.tsx.snap b/src/view/__snapshots__/breadcrumbs.component.test.tsx.snap
@@ -64,7 +64,7 @@ exports[`Channel Breadcrumbs should render correctly for path 1`] = `
             class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
             href="#"
           >
-            1
+            test
           </a>
         </li>
         <li
@@ -89,7 +89,7 @@ exports[`Channel Breadcrumbs should render correctly for path 1`] = `
           <p
             class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
           >
-            2
+            path
           </p>
         </li>
       </ol>
@@ -158,10 +158,21 @@ exports[`Channel Breadcrumbs should render correctly for path when the subtree l
         <li
           class="MuiBreadcrumbs-li"
         >
-          <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
-            href="#"
-          />
+          <div
+            class="MuiBox-root css-8zy5qf"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="MoreHorizIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+              />
+            </svg>
+          </div>
         </li>
         <li
           aria-hidden="true"
@@ -186,7 +197,7 @@ exports[`Channel Breadcrumbs should render correctly for path when the subtree l
             class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
             href="#"
           >
-            1
+            test
           </a>
         </li>
         <li
@@ -212,7 +223,7 @@ exports[`Channel Breadcrumbs should render correctly for path when the subtree l
             class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
             href="#"
           >
-            2
+            path
           </a>
         </li>
         <li
@@ -238,7 +249,7 @@ exports[`Channel Breadcrumbs should render correctly for path when the subtree l
             class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
             href="#"
           >
-            3
+            test
           </a>
         </li>
         <li
@@ -264,7 +275,7 @@ exports[`Channel Breadcrumbs should render correctly for path when the subtree l
             class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
             href="#"
           >
-            4
+            path
           </a>
         </li>
         <li
@@ -289,7 +300,7 @@ exports[`Channel Breadcrumbs should render correctly for path when the subtree l
           <p
             class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
           >
-            5
+            test
           </p>
         </li>
       </ol>

diff --git a/src/view/breadcrumbs.component.test.tsx b/src/view/breadcrumbs.component.test.tsx
@@ -17,6 +17,7 @@ describe('Channel Breadcrumbs', () => {
       onChangeNode: onChangeNode,
       onChangeNavigateHome: onChangeNavigateHome,
       breadcrumbsInfo: { trail: [], full_trail: true },
+      navigateHomeAriaLabel: 'navigate to catalogue home',
     };
   });
 
@@ -85,8 +86,8 @@ describe('Channel Breadcrumbs', () => {
       ...props,
       breadcrumbsInfo: {
         trail: [
-          ['test', '1'],
-          ['path', '2'],
+          ['1', 'test'],
+          ['2', 'path'],
         ],
         full_trail: true,
       },

diff --git a/src/view/breadcrumbs.component.tsx b/src/view/breadcrumbs.component.tsx
@@ -16,26 +16,32 @@ export interface BreadcrumbsProps {
   onChangeNode: (newId: string) => void;
   breadcrumbsInfo: BreadcrumbsInfo | undefined;
   onChangeNavigateHome: () => void;
+  navigateHomeAriaLabel: string;
 }
 
 const StyledBreadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => ({
   color: 'rgba(0, 0, 0, 0.6)',
 }));
 
 const Breadcrumbs = (props: BreadcrumbsProps) => {
-  const { onChangeNode, breadcrumbsInfo, onChangeNavigateHome } = props;
+  const {
+    onChangeNode,
+    breadcrumbsInfo,
+    onChangeNavigateHome,
+    navigateHomeAriaLabel,
+  } = props;
 
   const emptyElement = ['', ''];
 
   const trailPrefix =
     breadcrumbsInfo && !breadcrumbsInfo.full_trail
-      ? [emptyElement, [<MoreHorizIcon />, '']]
+      ? [emptyElement, ['', <MoreHorizIcon />]]
       : [emptyElement];
   return (
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <IconButton
         onClick={onChangeNavigateHome}
-        aria-label="navigate to catalogue home"
+        aria-label={navigateHomeAriaLabel}
       >
         <HomeIcon />
       </IconButton>