redesign landing page systems #1024

cypress/e2e/with_api/catalogueItems/functions.ts

@@ -170,6 +170,7 @@ const modifyCatalogueItem = (
       cy.findByText(values.notes).should('exist');
     }
     cy.go('back');
+    cy.go('back');
   }
 };
 

cypress/e2e/with_mock_data/systems.cy.ts

@@ -238,7 +238,7 @@ describe('Systems', () => {
     cy.findByRole('link', { name: 'Pulse Laser' }).should('be.visible');
     cy.findByRole('link', { name: 'Laser Tech' }).should('be.visible');
     cy.findByRole('link', { name: 'Laser Star' }).should('be.visible');
-    cy.findByRole('link', { name: "Laser Xpress" }).should('be.visible');
+    cy.findByRole('link', { name: 'Laser Xpress' }).should('be.visible');
 
     // One in title, one in breadcrumbs
     cy.findAllByText('Plasma Beam').should('have.length', 2);
@@ -580,7 +580,8 @@ describe('Systems', () => {
   it('edits a system from a landing page', () => {
     cy.visit('/systems/65328f34a40ff5301575a4e3');
 
-    cy.findByRole('button', { name: 'Edit System' }).click();
+    cy.findByRole('button', { name: 'systems page actions menu' }).click();
+    cy.findByText('Edit').click();
 
     cy.findByLabelText('Name *').clear();
     cy.findByLabelText('Name *').type('System name');

src/catalogue/items/catalogueItemsLandingPage.component.tsx

@@ -1,4 +1,5 @@
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import InventoryOutlinedIcon from '@mui/icons-material/InventoryOutlined';
 import NotesIcon from '@mui/icons-material/Notes';
 import {
   Box,
@@ -11,7 +12,11 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { BreadcrumbsInfo } from '../../api/api.types';
+import {
+  BreadcrumbsInfo,
+  CatalogueCategory,
+  CatalogueItem,
+} from '../../api/api.types';
 import {
   useGetCatalogueBreadcrumbs,
   useGetCatalogueCategory,
@@ -26,6 +31,33 @@ import Breadcrumbs from '../../view/breadcrumbs.component';
 import { useNavigateToCatalogue } from '../catalogue.component';
 import CatalogueItemsDialog from './catalogueItemsDialog.component';
 
+const CatalogueItemsActionMenu = (props: {
+  catalogueItem: CatalogueItem;
+  catalogueCategory: CatalogueCategory;
+}) => {
+  const { catalogueItem, catalogueCategory } = props;
+  const [editItemDialogOpen, setEditItemDialogOpen] =
+    React.useState<boolean>(false);
+  return (
+    <ActionMenu
+      ariaLabelPrefix="catalogue items landing page"
+      printMenuItem
+      editMenuItem={{
+        onClick: () => setEditItemDialogOpen(true),
+        dialog: (
+          <CatalogueItemsDialog
+            open={editItemDialogOpen}
+            onClose={() => setEditItemDialogOpen(false)}
+            parentInfo={catalogueCategory}
+            selectedCatalogueItem={catalogueItem}
+            requestType="patch"
+          />
+        ),
+      }}
+    />
+  );
+};
+
 function CatalogueItemsLandingPage() {
   const { catalogue_item_id: catalogueItemId } = useParams();
   const navigateToCatalogue = useNavigateToCatalogue();
@@ -58,9 +90,6 @@ function CatalogueItemsLandingPage() {
     catalogueItemIdData?.manufacturer_id
   );
 
-  const [editItemDialogOpen, setEditItemDialogOpen] =
-    React.useState<boolean>(false);
-
   return (
     <Grid container flexDirection="column">
       <Grid
@@ -88,7 +117,7 @@ function CatalogueItemsLandingPage() {
           />
         </Grid>
       </Grid>
-      {catalogueItemIdData && (
+      {catalogueItemIdData && catalogueCategoryData && (
         <Grid item container justifyContent="center" xs={12}>
           <Grid
             item
@@ -137,21 +166,9 @@ function CatalogueItemsLandingPage() {
               <Grid item container justifyContent={'flex-end'} xs={12} sm={2}>
                 {/* Actions Section */}
                 <Grid item>
-                  <ActionMenu
-                    ariaLabelPrefix="catalogue items landing page"
-                    printMenuItem
-                    editMenuItem={{
-                      onClick: () => setEditItemDialogOpen(true),
-                      dialog: (
-                        <CatalogueItemsDialog
-                          open={editItemDialogOpen}
-                          onClose={() => setEditItemDialogOpen(false)}
-                          parentInfo={catalogueCategoryData}
-                          selectedCatalogueItem={catalogueItemIdData}
-                          requestType="patch"
-                        />
-                      ),
-                    }}
+                  <CatalogueItemsActionMenu
+                    catalogueItem={catalogueItemIdData}
+                    catalogueCategory={catalogueCategoryData}
                   />
                 </Grid>
                 <Grid item>
@@ -160,6 +177,7 @@ function CatalogueItemsLandingPage() {
                     variant="outlined"
                     component={Link}
                     to={'items'}
+                    startIcon={<InventoryOutlinedIcon />}
                   >
                     Items
                   </Button>
@@ -171,7 +189,9 @@ function CatalogueItemsLandingPage() {
               defaultTab="Information"
               ariaLabelPrefix="catalogue items landing page"
               galleryEntityId={catalogueItemIdData.id}
+              galleryOrder={1}
               attachmentsEntityId={catalogueItemIdData.id}
+              attachmentsOrder={2}
               tabData={[
                 {
                   value: 'Information',
@@ -495,6 +515,7 @@ function CatalogueItemsLandingPage() {
                       )}
                     </Grid>
                   ),
+                  order: 0,
                 },
                 {
                   value: 'Notes',
@@ -513,6 +534,7 @@ function CatalogueItemsLandingPage() {
                       {catalogueItemIdData.notes ?? 'None'}
                     </Typography>
                   ),
+                  order: 3,
                 },
               ]}
             />
@@ -543,14 +565,6 @@ function CatalogueItemsLandingPage() {
           <LinearProgress />
         </Box>
       )}
-
-      <CatalogueItemsDialog
-        open={editItemDialogOpen}
-        onClose={() => setEditItemDialogOpen(false)}
-        parentInfo={catalogueCategoryData}
-        selectedCatalogueItem={catalogueItemIdData}
-        requestType="patch"
-      />
     </Grid>
   );
 }

src/common/actionMenu.component.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 export interface ActionMenuProps {
   ariaLabelPrefix: string;
   editMenuItem: { onClick: () => void; dialog: React.ReactNode };
-  printMenuItem: boolean;
+  printMenuItem?: boolean;
 }
 function ActionMenu(props: ActionMenuProps) {
   const { editMenuItem, printMenuItem, ariaLabelPrefix } = props;

src/common/tab/__snapshots__/tabView.component.test.tsx.snap

@@ -40,6 +40,25 @@ exports[`TabView Component > renders correctly 1`] = `
                   class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                 />
               </button>
+              <button
+                aria-controls="tab3-tabpanel"
+                aria-selected="false"
+                class="MuiButtonBase-root MuiTab-root MuiTab-labelIcon MuiTab-textColorPrimary css-12xzlyc-MuiButtonBase-root-MuiTab-root"
+                id="tab3-tab"
+                role="tab"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  class="MuiTab-iconWrapper"
+                >
+                  icon 3
+                </div>
+                tab3
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
               <button
                 aria-controls="tab2-tabpanel"
                 aria-selected="false"
@@ -60,20 +79,51 @@ exports[`TabView Component > renders correctly 1`] = `
                 />
               </button>
               <button
-                aria-controls="tab3-tabpanel"
+                aria-controls="Gallery-tabpanel"
                 aria-selected="false"
                 class="MuiButtonBase-root MuiTab-root MuiTab-labelIcon MuiTab-textColorPrimary css-12xzlyc-MuiButtonBase-root-MuiTab-root"
-                id="tab3-tab"
+                id="Gallery-tab"
                 role="tab"
                 tabindex="-1"
                 type="button"
               >
-                <div
-                  class="MuiTab-iconWrapper"
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTab-iconWrapper css-i4bv87-MuiSvgIcon-root"
+                  data-testid="CollectionsOutlinedIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
                 >
-                  icon 3
-                </div>
-                tab3
+                  <path
+                    d="M20 4v12H8V4zm0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6z"
+                  />
+                </svg>
+                Gallery
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
+              <button
+                aria-controls="Attachments-tabpanel"
+                aria-selected="false"
+                class="MuiButtonBase-root MuiTab-root MuiTab-labelIcon MuiTab-textColorPrimary css-12xzlyc-MuiButtonBase-root-MuiTab-root"
+                id="Attachments-tab"
+                role="tab"
+                tabindex="-1"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTab-iconWrapper css-i4bv87-MuiSvgIcon-root"
+                  data-testid="AttachmentOutlinedIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M18.5 16H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h12.5c1.38 0 2.5 1.12 2.5 2.5S20.88 13 19.5 13H9c-.55 0-1-.45-1-1s.45-1 1-1h9.5V9.5H9c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5h10.5c2.21 0 4-1.79 4-4s-1.79-4-4-4H7c-3.04 0-5.5 2.46-5.5 5.5s2.46 5.5 5.5 5.5h11.5z"
+                  />
+                </svg>
+                Attachments
                 <span
                   class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                 />
@@ -103,6 +153,13 @@ exports[`TabView Component > renders correctly 1`] = `
             </div>
           </div>
         </div>
+        <div
+          aria-labelledby="tab3-tab"
+          hidden=""
+          id="tab3-tabpanel"
+          role="tabpanel"
+          style="height: 100%;"
+        />
         <div
           aria-labelledby="tab2-tab"
           hidden=""
@@ -111,9 +168,16 @@ exports[`TabView Component > renders correctly 1`] = `
           style="height: 100%;"
         />
         <div
-          aria-labelledby="tab3-tab"
+          aria-labelledby="Gallery-tab"
           hidden=""
-          id="tab3-tabpanel"
+          id="Gallery-tabpanel"
+          role="tabpanel"
+          style="height: 100%;"
+        />
+        <div
+          aria-labelledby="Attachments-tab"
+          hidden=""
+          id="Attachments-tabpanel"
           role="tabpanel"
           style="height: 100%;"
         />

src/common/tab/tabPanel.component.tsx

@@ -6,12 +6,7 @@ export interface TabPanelProps<T> {
   label: T | false;
 }
 
-export function TabPanel<T>({
-  children,
-  value,
-  label,
-  ...other
-}: TabPanelProps<T>) {
+function TabPanel<T>({ children, value, label, ...other }: TabPanelProps<T>) {
   return (
     <div
       role="tabpanel"

src/common/tab/tabView.component.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from '@testing-library/react';
-
 import userEvent from '@testing-library/user-event';
 import { act } from 'react';
 import { renderComponentWithRouterProvider } from '../../testUtils';
@@ -25,18 +24,25 @@ describe('TabView Component', () => {
           value: 'tab1',
           icon: <div>icon 1</div>,
           component: <div>Content for Tab 1</div>,
+          order: 1,
         },
         {
           value: 'tab2',
           icon: <div>icon 2</div>,
           component: <div>Content for Tab 2</div>,
+          order: 3,
         },
         {
           value: 'tab3',
           icon: <div>icon 3</div>,
           component: <div>Content for Tab 3</div>,
+          order: 2,
         },
       ],
+      galleryEntityId: '1',
+      galleryOrder: 4,
+      attachmentsEntityId: '1',
+      attachmentsOrder: 5,
     };
   });
 
@@ -47,9 +53,9 @@ describe('TabView Component', () => {
     });
     expect(baseElement).toMatchSnapshot();
   });
+
   it('renders correctly with default tab', () => {
     createView('/catalogue/item/1');
-
     expect(screen.getByText('Content for Tab 1')).toBeInTheDocument();
   });
 
@@ -73,9 +79,24 @@ describe('TabView Component', () => {
     expect(router.state.location.search).toBe('');
   });
 
-  it('load tab from url', () => {
+  it('loads tab from URL', () => {
     createView('/catalogue/item/1?tab=tab2');
-
     expect(screen.getByText('Content for Tab 2')).toBeInTheDocument();
   });
+
+  it('renders tabs in correct order', () => {
+    createView('/catalogue/item/1');
+
+    const tabs = screen.getAllByRole('tab');
+    const tabLabels = tabs.map((tab) => tab.textContent);
+
+    // Check that the tabs are ordered as expected
+    expect(tabLabels).toEqual([
+      'icon 1tab1',
+      'icon 3tab3',
+      'icon 2tab2',
+      'Gallery',
+      'Attachments',
+    ]);
+  });
 });