Merge branch 'develop' into use-replica-set-#499

.github/workflows/ci-build.yml

@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - name: Checkout repo
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+        uses: actions/checkout@1d96c772d19495a3b5c517cd2bc0cb401ea0529f # v4
 
       - name: Setup Node.js
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
@@ -45,7 +45,7 @@ jobs:
 
     steps:
       - name: Checkout repo
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+        uses: actions/checkout@1d96c772d19495a3b5c517cd2bc0cb401ea0529f # v4
 
       - name: Setup Node.js
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
@@ -63,7 +63,7 @@ jobs:
 
       - name: Upload Cypress screenshots
         if: failure()
-        uses: actions/upload-artifact@5d5d22a31266ced268874388b861e4b58bb5c2f3 # v4
+        uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4
         with:
           name: Inventory management system Screenshots
           path: cypress/screenshots
@@ -122,7 +122,7 @@ jobs:
           harbor.stfc.ac.uk/inventory-management-system/ims-api:develop
 
       - name: Checkout repo
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
+        uses: actions/checkout@1d96c772d19495a3b5c517cd2bc0cb401ea0529f # v4
 
       - name: Setup Node.js
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4
@@ -148,7 +148,7 @@ jobs:
 
       - name: Upload Cypress screenshots
         if: failure()
-        uses: actions/upload-artifact@5d5d22a31266ced268874388b861e4b58bb5c2f3 # v4
+        uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4
         with:
           name: Inventory management system (with api) Screenshots
           path: cypress/screenshots

package.json

@@ -65,9 +65,9 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.21.8",
     "@testing-library/cypress": "^10.0.0",
-    "@testing-library/dom": "^9.3.0",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^15.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.0.0",

src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap

@@ -840,7 +840,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-1a4m6ib-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div

src/catalogue/items/catalogueItemsDialog.component.tsx

@@ -43,7 +43,7 @@ import { Autocomplete } from '@mui/material';
 import { useManufacturers } from '../../api/manufacturers';
 import ManufacturerDialog from '../../manufacturer/manufacturerDialog.component';
 import handleIMS_APIError from '../../handleIMS_APIError';
-import { trimStringValues } from '../../utils';
+import { sortDataList, trimStringValues } from '../../utils';
 
 export interface CatalogueItemsDialogProps {
   open: boolean;
@@ -785,7 +785,7 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
                     );
                   }}
                   id="manufacturer-autocomplete"
-                  options={manufacturerList ?? []}
+                  options={sortDataList(manufacturerList ?? [], 'name')}
                   size="small"
                   isOptionEqualToValue={(option, value) =>
                     option.name === value.name

src/catalogue/items/catalogueItemsTable.component.test.tsx

@@ -191,7 +191,18 @@ describe('Catalogue Items Table', () => {
     ]);
   });
 
-  it('displays descriptions tooltip on hover', async () => {
+  it('displays full description on hover', async () => {
+    // Mocking scrollWidth and clientWidth to make content overflow
+    const mockScrollWidth = 300;
+    const mockClientWidth = 200;
+
+    vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(
+      mockScrollWidth
+    );
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(
+      mockClientWidth
+    );
+
     createView();
 
     await waitFor(() => {
@@ -200,38 +211,38 @@ describe('Catalogue Items Table', () => {
 
     await ensureColumnsVisible(['Description']);
 
+    const infoIcon = screen.getByText(
+      'Precision energy meters for accurate measurements. 26'
+    );
+
     await waitFor(() => {
       expect(
-        screen.getByLabelText(
-          'Catalogue item description: Precision energy meters for accurate measurements. 26'
-        )
-      ).toBeInTheDocument();
+        screen.getAllByText(
+          'Precision energy meters for accurate measurements. 26'
+        ).length
+      ).toBe(1);
     });
 
-    const infoIcon = screen.getByLabelText(
-      'Catalogue item description: Precision energy meters for accurate measurements. 26'
-    );
-
     await user.hover(infoIcon);
 
     await waitFor(() => {
       expect(
-        screen.getByText(
+        screen.getAllByText(
           'Precision energy meters for accurate measurements. 26'
-        )
-      ).toBeInTheDocument();
+        ).length
+      ).toBe(2);
     });
 
     await user.unhover(infoIcon);
 
     await waitFor(() => {
       expect(
-        screen.queryByText(
+        screen.getAllByText(
           'Precision energy meters for accurate measurements. 26'
-        )
-      ).not.toBeInTheDocument();
+        ).length
+      ).toBe(1);
     });
-  });
+  }, 20000);
 
   it('displays notes tooltip on hover', async () => {
     createView();

src/catalogue/items/catalogueItemsTable.component.tsx

@@ -38,6 +38,7 @@ import {
 } from '../../app.types';
 import { usePreservedTableState } from '../../common/preservedTableState.component';
 import {
+  OverflowTip,
   formatDateTimeStrings,
   generateUniqueName,
   getPageHeightCalc,
@@ -302,17 +303,11 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
         id: 'catalogueItem.description',
         size: 250,
         enableGrouping: false,
-        Cell: ({ row }) =>
+        Cell: ({ cell, row }) =>
           row.original.catalogueItem.description && (
-            <Tooltip
-              title={row.original.catalogueItem.description}
-              placement="top"
-              enterTouchDelay={0}
-              arrow
-              aria-label={`Catalogue item description: ${row.original.catalogueItem.description}`}
-            >
-              <InfoOutlinedIcon />
-            </Tooltip>
+            <OverflowTip columnSize={cell.column.getSize()}>
+              {row.original.catalogueItem.description}
+            </OverflowTip>
           ),
       },
       {

src/utils.test.tsx

@@ -1,8 +1,13 @@
+import { screen, waitFor } from '@testing-library/react';
 import {
   generateUniqueName,
   trimStringValues,
   generateUniqueId,
+  OverflowTip,
+  sortDataList,
 } from './utils';
+import userEvent from '@testing-library/user-event';
+import { renderComponentWithRouterProvider } from './testUtils';
 
 describe('Utility functions', () => {
   afterEach(() => {
@@ -81,4 +86,86 @@ describe('Utility functions', () => {
       expect(id2.startsWith(prefix)).toBe(true);
     });
   });
+
+  describe('OverflowTip', () => {
+    it('renders children without tooltip when content does not overflow', async () => {
+      renderComponentWithRouterProvider(
+        <OverflowTip columnSize={200}>
+          {"Some text that doesn't overflow"}
+        </OverflowTip>
+      );
+
+      const overFlowTip = screen.getByText("Some text that doesn't overflow");
+
+      expect(
+        screen.getAllByText("Some text that doesn't overflow").length
+      ).toBe(1);
+
+      await userEvent.hover(overFlowTip);
+
+      expect(
+        screen.getAllByText("Some text that doesn't overflow").length
+      ).toBe(1);
+    });
+
+    it('renders children with tooltip when content overflows', async () => {
+      // Mocking scrollWidth and clientWidth to make content overflow
+      const mockScrollWidth = 300;
+      const mockClientWidth = 200;
+
+      vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(
+        mockScrollWidth
+      );
+      vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(
+        mockClientWidth
+      );
+
+      renderComponentWithRouterProvider(
+        <OverflowTip columnSize={200}>
+          Some long text that overflows
+        </OverflowTip>
+      );
+      const overFlowTip = screen.getByText('Some long text that overflows');
+
+      await waitFor(() => {
+        expect(
+          screen.getAllByText('Some long text that overflows').length
+        ).toBe(1);
+      });
+
+      await userEvent.hover(overFlowTip);
+
+      await waitFor(() => {
+        expect(
+          screen.getAllByText('Some long text that overflows').length
+        ).toBe(2);
+      });
+
+      await userEvent.unhover(overFlowTip);
+
+      await waitFor(() => {
+        expect(
+          screen.getAllByText('Some long text that overflows').length
+        ).toBe(1);
+      });
+    });
+  });
+
+  it('should sort data based on given value to be sorted on', () => {
+    const testList = [
+      { name: 'John' },
+      { name: 'Amanda' },
+      { name: 'Susan' },
+      { name: 'Jack' },
+    ];
+
+    const sortedList = sortDataList(testList, 'name');
+
+    expect(sortedList).toEqual([
+      { name: 'Amanda' },
+      { name: 'Jack' },
+      { name: 'John' },
+      { name: 'Susan' },
+    ]);
+  });
 });

src/utils.tsx

@@ -1,4 +1,6 @@
+import { Tooltip } from '@mui/material';
 import { format, parseISO } from 'date-fns';
+import React, { useRef } from 'react';
 
 /* Returns a name avoiding duplicates by appending _copy_n for nth copy */
 export const generateUniqueName = (
@@ -88,6 +90,41 @@ export const formatDateTimeStrings = (
   return formattedDate;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const OverflowTip = ({ children, columnSize }: any) => {
+  const [isOverflowed, setIsOverflow] = React.useState(false);
+  const overflowElementRef = useRef<HTMLInputElement | null>(null);
+  React.useEffect(() => {
+    if (overflowElementRef.current) {
+      setIsOverflow(
+        overflowElementRef.current.scrollWidth >
+          overflowElementRef.current.clientWidth
+      );
+    }
+  }, [columnSize]);
+  return (
+    <Tooltip
+      role="tooltip"
+      title={children}
+      disableHoverListener={!isOverflowed}
+      placement="top"
+      enterTouchDelay={0}
+      arrow
+    >
+      <div
+        ref={overflowElementRef}
+        style={{
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
 let lastId = 0;
 
 export function generateUniqueId(prefix: string = 'id_'): string {
@@ -98,3 +135,8 @@ export function generateUniqueId(prefix: string = 'id_'): string {
 export const resetUniqueIdCounter = () => {
   lastId = 0;
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function sortDataList(data: any[], sortedValue: string) {
+  return data.sort((a, b) => a[sortedValue].localeCompare(b[sortedValue]));
+}