changed table to use system name and not id #497

src/api/systems.test.tsx

@@ -17,6 +17,7 @@ import {
   useEditSystem,
   useMoveToSystem,
   useSystem,
+  useSystemIds,
   useSystems,
   useSystemsBreadcrumbs,
 } from './systems';
@@ -106,6 +107,36 @@ describe('System api functions', () => {
     });
   });
 
+  describe('useSystemIds', () => {
+    it('sends a request to fetch system data and returns a successful response', async () => {
+      const { result } = renderHook(
+        () =>
+          useSystemIds([
+            '65328f34a40ff5301575a4e3',
+            '656ef565ed0773f82e44bc6d',
+          ]),
+        {
+          wrapper: hooksWrapperWithProviders(),
+        }
+      );
+
+      await waitFor(() => {
+        result.current.forEach((query) => expect(query.isSuccess).toBeTruthy());
+      });
+
+      expect(result.current[0].data).toEqual(
+        SystemsJSON.filter(
+          (system) => system.id === '65328f34a40ff5301575a4e3'
+        )[0]
+      );
+      expect(result.current[1].data).toEqual(
+        SystemsJSON.filter(
+          (system) => system.id === '656ef565ed0773f82e44bc6d'
+        )[0]
+      );
+    });
+  });
+
   describe('useSystemsBreadcrumbs', () => {
     it('does not send a request to fetch breadcrumbs data for a system when its id is null', async () => {
       const { result } = renderHook(() => useSystemsBreadcrumbs(null), {

src/api/systems.tsx

@@ -2,6 +2,7 @@ import {
   UseMutationResult,
   UseQueryResult,
   useMutation,
+  useQueries,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
@@ -44,6 +45,15 @@ const fetchSystems = async (parent_id?: string): Promise<System[]> => {
   });
 };
 
+export const useSystemIds = (ids: string[]): UseQueryResult<System>[] => {
+  return useQueries({
+    queries: ids.map((id) => ({
+      queryKey: ['System', id],
+      queryFn: () => fetchSystem(id),
+    })),
+  });
+};
+
 export const useSystems = (
   parent_id?: string
 ): UseQueryResult<System[], AxiosError> => {

src/items/__snapshots__/itemsDetailsPanel.component.test.tsx.snap

@@ -219,6 +219,24 @@ exports[`Catalogue Items details panel > renders details panel correctly (None v
                         scrapped
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/undefined"
+                          target="_blank"
+                        />
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -739,6 +757,24 @@ exports[`Catalogue Items details panel > renders details panel correctly (no dat
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/undefined"
+                          target="_blank"
+                        />
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -1259,6 +1295,24 @@ exports[`Catalogue Items details panel > renders details panel correctly (when t
                         new
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/undefined"
+                          target="_blank"
+                        />
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -1779,6 +1833,24 @@ exports[`Catalogue Items details panel > renders details panel correctly 1`] = `
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/undefined"
+                          target="_blank"
+                        />
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -2309,6 +2381,26 @@ exports[`Catalogue Items details panel > renders manufacturer panel correctly 1`
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/65328f34a40ff5301575a4e3"
+                          target="_blank"
+                        >
+                          Giant laser
+                        </a>
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -2856,6 +2948,26 @@ exports[`Catalogue Items details panel > renders notes panel correctly 1`] = `
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/65328f34a40ff5301575a4e3"
+                          target="_blank"
+                        >
+                          Giant laser
+                        </a>
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >
@@ -3403,6 +3515,26 @@ exports[`Catalogue Items details panel > renders properties panel correctly 1`]
                         inUse
                       </p>
                     </div>
+                    <div
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+                    >
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1gqyz35-MuiTypography-root"
+                      >
+                        System
+                      </p>
+                      <p
+                        class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
+                      >
+                        <a
+                          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-11iau0r-MuiTypography-root-MuiLink-root"
+                          href="/systems/65328f34a40ff5301575a4e3"
+                          target="_blank"
+                        >
+                          Giant laser
+                        </a>
+                      </p>
+                    </div>
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
                     >

src/items/__snapshots__/itemsTable.component.test.tsx.snap

@@ -246,7 +246,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
-          style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-serial_number-size: 250; --col-serial_number-size: 250; --header-modified_time-size: 350; --col-modified_time-size: 350; --header-asset_number-size: 250; --col-asset_number-size: 250; --header-purchase_order_number-size: 350; --col-purchase_order_number-size: 350; --header-warranty_end_date-size: 350; --col-warranty_end_date-size: 350; --header-delivered_date-size: 350; --col-delivered_date-size: 350; --header-is_defective-size: 200; --col-is_defective-size: 200; --header-usage_status-size: 200; --col-usage_status-size: 200; --header-notes-size: 250; --col-notes-size: 250; --header-system_id-size: 250; --col-system_id-size: 250; --header-row_catalogueItem_properties_1-size: 250; --col-row_catalogueItem_properties_1-size: 250; --header-row_catalogueItem_properties_2-size: 250; --col-row_catalogueItem_properties_2-size: 250; --header-row_catalogueItem_properties_3-size: 250; --col-row_catalogueItem_properties_3-size: 250; --header-row_catalogueItem_properties_4-size: 250; --col-row_catalogueItem_properties_4-size: 250; --header-row_catalogueItem_properties_5-size: 250; --col-row_catalogueItem_properties_5-size: 250; --header-row_catalogueItem_properties_6-size: 250; --col-row_catalogueItem_properties_6-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
+          style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-serial_number-size: 250; --col-serial_number-size: 250; --header-modified_time-size: 350; --col-modified_time-size: 350; --header-asset_number-size: 250; --col-asset_number-size: 250; --header-purchase_order_number-size: 350; --col-purchase_order_number-size: 350; --header-warranty_end_date-size: 350; --col-warranty_end_date-size: 350; --header-delivered_date-size: 350; --col-delivered_date-size: 350; --header-is_defective-size: 200; --col-is_defective-size: 200; --header-usage_status-size: 200; --col-usage_status-size: 200; --header-notes-size: 250; --col-notes-size: 250; --header-system_name-size: 250; --col-system_name-size: 250; --header-row_catalogueItem_properties_1-size: 250; --col-row_catalogueItem_properties_1-size: 250; --header-row_catalogueItem_properties_2-size: 250; --col-row_catalogueItem_properties_2-size: 250; --header-row_catalogueItem_properties_3-size: 250; --col-row_catalogueItem_properties_3-size: 250; --header-row_catalogueItem_properties_4-size: 250; --col-row_catalogueItem_properties_4-size: 250; --header-row_catalogueItem_properties_5-size: 250; --col-row_catalogueItem_properties_5-size: 250; --header-row_catalogueItem_properties_6-size: 250; --col-row_catalogueItem_properties_6-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
         >
           <thead
             class="MuiTableHead-root css-q4cnup-MuiTableHead-root"

src/items/itemDialog.component.tsx

@@ -173,7 +173,7 @@ function ItemDialog(props: ItemDialogProps) {
     if (selectedItem && open) {
       setItemDetails({
         catalogue_item_id: null,
-        system_id: null,
+        system_id: selectedItem.system_id,
         purchase_order_number: selectedItem.purchase_order_number,
         is_defective: selectedItem.is_defective ? 'true' : 'false',
         usage_status: UsageStatusType[selectedItem.usage_status],

src/items/itemsDetailsPanel.component.tsx

@@ -12,6 +12,7 @@ import { Link } from 'react-router-dom';
 import { CatalogueItem, Item, UsageStatusType } from '../app.types';
 import { useManufacturer } from '../api/manufacturers';
 import { formatDateTimeStrings } from '../utils';
+import { useSystem } from '../api/systems';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function TabPanel(props: any) {
@@ -45,6 +46,8 @@ function ItemsDetailsPanel(props: ItemsDetailsPanelProps) {
   const { data: manufacturerData } = useManufacturer(
     catalogueItemIdData.manufacturer_id
   );
+  const { data: systemData } = useSystem(itemData.system_id);
+
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue);
   };
@@ -133,13 +136,27 @@ function ItemsDetailsPanel(props: ItemsDetailsPanelProps) {
               </Grid>
 
               <Grid item xs={12} sm={6} key={7}>
+                <Typography color="text.primary">System</Typography>
+                <Typography color="text.secondary">
+                  <MuiLink
+                    component={Link}
+                    underline="hover"
+                    target="_blank"
+                    to={'/systems/' + systemData?.id}
+                  >
+                    {systemData?.name}
+                  </MuiLink>
+                </Typography>
+              </Grid>
+
+              <Grid item xs={12} sm={6} key={8}>
                 <Typography color="text.primary">Last Modified</Typography>
                 <Typography color="text.secondary">
                   {formatDateTimeStrings(itemData.modified_time, true)}
                 </Typography>
               </Grid>
 
-              <Grid item xs={12} sm={6} key={8}>
+              <Grid item xs={12} sm={6} key={9}>
                 <Typography color="text.primary">Created</Typography>
                 <Typography color="text.secondary">
                   {formatDateTimeStrings(itemData.created_time, true)}

src/items/itemsLandingPage.component.test.tsx

@@ -52,7 +52,7 @@ describe('Items Landing Page', () => {
 
     expect(screen.getByText('Asset Number')).toBeInTheDocument();
 
-    expect(screen.getByText('System ID')).toBeInTheDocument();
+    expect(screen.getByText('System')).toBeInTheDocument();
   });
 
   it('navigates to the system when the system id is clicked', async () => {
@@ -61,8 +61,8 @@ describe('Items Landing Page', () => {
       expect(screen.getByText('Cameras 1')).toBeInTheDocument();
     });
 
-    const systemID = screen.getByText('65328f34a40ff5301575a4e3');
-    expect(systemID).toHaveAttribute(
+    const systemName = screen.getByText('Giant laser');
+    expect(systemName).toHaveAttribute(
       'href',
       '/systems/65328f34a40ff5301575a4e3'
     );

src/items/itemsLandingPage.component.tsx

@@ -26,6 +26,7 @@ import Breadcrumbs from '../view/breadcrumbs.component';
 import ItemDialog from './itemDialog.component';
 import { useNavigateToCatalogue } from '../catalogue/catalogue.component';
 import { formatDateTimeStrings } from '../utils';
+import { useSystem } from '../api/systems';
 
 function ItemsLandingPage() {
   // Navigation
@@ -47,6 +48,8 @@ function ItemsLandingPage() {
     catalogueItemData?.catalogue_category_id
   );
 
+  const { data: systemData } = useSystem(itemData?.system_id);
+
   const [itemLandingBreadcrumbs, setItemLandingBreadcrumbs] = React.useState<
     BreadcrumbsInfo | undefined
   >(catalogueBreadcrumbs);
@@ -261,15 +264,15 @@ function ItemsLandingPage() {
                   </Grid>
                   <Grid item xs={12} sm={6} md={4}>
                     <Typography align="left" color="text.primary">
-                      System ID
+                      System
                     </Typography>
                     <Typography align="left" color="text.secondary">
                       <MuiLink
                         underline="hover"
                         component={Link}
-                        to={'/systems/' + itemData.system_id}
+                        to={'/systems/' + systemData?.id}
                       >
-                        {itemData.system_id}
+                        {systemData?.name}
                       </MuiLink>
                     </Typography>
                   </Grid>

src/items/itemsTable.component.test.tsx

@@ -56,7 +56,7 @@ describe('Items Table', () => {
     const view = createView();
 
     await waitFor(() => {
-      expect(screen.getByText('Serial Number')).toBeInTheDocument();
+      expect(screen.getByText('5YUQDDjKpz2z')).toBeInTheDocument();
     });
     expect(view.asFragment()).toMatchSnapshot();
   });
@@ -74,9 +74,9 @@ describe('Items Table', () => {
 
   it('renders correctly part 3 due column virtualisation and checks that the href is correct for the system ID', async () => {
     createView();
-    await ensureColumnsVisible(['Warranty End Date', 'System ID', 'Created']);
+    await ensureColumnsVisible(['Warranty End Date', 'System', 'Created']);
 
-    const systemID = screen.getAllByText('65328f34a40ff5301575a4e3');
+    const systemID = screen.getAllByText('Giant laser');
     expect(systemID[0]).toHaveAttribute(
       'href',
       '/systems/65328f34a40ff5301575a4e3'