@centreon/ui 26.12.1 → 26.12.3

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@centreon/ui",
-  "version": "26.12.1",
+  "version": "26.12.3",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
-    "type-check": "tsc --project tsconfig.typecheck.json",
+    "type-check": "tsc --project tsconfig.typecheck.json && tsc --project tsconfig.rstest.json",
     "type-check:staged": "node typecheck-staged.mjs",
     "lint": "biome check ./src/ --error-on-warnings",
     "lint:fix": "pnpm lint --fix",
@@ -21,7 +21,10 @@
     "cypress:install": "cypress install",
     "cypress:cli": "./cypress/scripts/cypress-cli.sh",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts",
-    "install:arm:binaries": "pnpm i -D @swc/core-linux-arm64-gnu@1.6.6 @rspack/binding-linux-arm64-gnu@1.1.6 -w && pnpm remove @swc/core-linux-arm64-gnu @rspack/binding-linux-arm64-gnu"
+    "install:arm:binaries": "pnpm i -D @swc/core-linux-arm64-gnu@1.6.6 @rspack/binding-linux-arm64-gnu@1.1.6 -w && pnpm remove @swc/core-linux-arm64-gnu @rspack/binding-linux-arm64-gnu",
+    "rstest:run": "TZ=Etc/UTC rstest run",
+    "rstest:ui": "TZ=Etc/UTC rstest run --browser.headless=false --pool.maxWorkers=1",
+    "rstest:install": "playwright install --with-deps --only-shell chromium"
   },
   "type": "module",
   "sideEffects": false,

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.14'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.7.3'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,26 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

package/src/Dashboard/Dashboard.browser.test.tsx

@@ -0,0 +1,107 @@
+import { Typography } from '@mui/material';
+
+import { render } from '@test-setup/render';
+import { screen, waitFor } from '@testing-library/react';
+import type { LayoutItem } from 'react-grid-layout';
+
+import { DashboardLayout } from '.';
+
+interface CustomLayout extends LayoutItem {
+  content: string;
+  shouldUseFluidTypography?: boolean;
+}
+
+const dashboardLayout: Array<CustomLayout> = [
+  {
+    content: 'Panel 1',
+    h: 4,
+    i: 'a',
+    shouldUseFluidTypography: false,
+    w: 6,
+    x: 0,
+    y: 0
+  },
+  {
+    content: 'Panel 2',
+    h: 3,
+    i: 'b',
+    minW: 2,
+    w: 7,
+    x: 1,
+    y: 7
+  },
+  {
+    content: 'Panel 3',
+    h: 7,
+    i: 'c',
+    w: 6,
+    x: 6,
+    y: 6
+  },
+  {
+    content: 'Panel 4',
+    h: 3,
+    i: 'd',
+    minW: 2,
+    w: 5,
+    x: 4,
+    y: 10
+  }
+];
+
+const initialize = (): void => {
+  render(
+    <DashboardLayout.Layout layout={dashboardLayout}>
+      {dashboardLayout.map(({ i, content }) => (
+        <DashboardLayout.Item header={<div>header</div>} id={i} key={i}>
+          {[<Typography key="content">{content}</Typography>]}
+        </DashboardLayout.Item>
+      ))}
+    </DashboardLayout.Layout>
+  );
+};
+
+const panelBox = (content: string): DOMRect =>
+  (
+    screen.getByText(content).closest('.react-grid-item') as HTMLElement
+  ).getBoundingClientRect();
+
+describe('Dashboard', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays placeholder when panels is out of viewport', async () => {
+    initialize();
+
+    // The four panels render with their header. Panels 1 and 3 share the
+    // first row (Panel 3 taller), Panel 2 sits below Panel 3 starting within
+    // Panel 1's width, and Panel 4 is below Panel 2.
+    expect(await screen.findByText('Panel 1')).toBeVisible();
+    expect(screen.getByText('Panel 2')).toBeVisible();
+    expect(screen.getByText('Panel 3')).toBeVisible();
+    expect(screen.getByText('Panel 4')).toBeInTheDocument();
+    expect(screen.getAllByText('header')).toHaveLength(4);
+
+    await waitFor(() => {
+      const panel1 = panelBox('Panel 1');
+      const panel3 = panelBox('Panel 3');
+
+      expect(panel1.width).toBeGreaterThan(0);
+      expect(panel3.top).toBe(panel1.top);
+      expect(panel3.left).toBeGreaterThan(panel1.right);
+      expect(panel3.width).toBe(panel1.width);
+      expect(panel3.height).toBeGreaterThan(panel1.height);
+    });
+
+    const panel1 = panelBox('Panel 1');
+    const panel2 = panelBox('Panel 2');
+    const panel3 = panelBox('Panel 3');
+    const panel4 = panelBox('Panel 4');
+
+    expect(panel2.top).toBeGreaterThan(panel3.bottom);
+    expect(panel2.left).toBeGreaterThan(panel1.left);
+    expect(panel2.left).toBeLessThan(panel1.right);
+    expect(panel4.top).toBeGreaterThan(panel2.bottom);
+  });
+});

package/src/Form/CollapsibleGroup.tsx

@@ -10,7 +10,6 @@ import {
 
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
 import type { Group } from './Inputs/models';
 
@@ -23,22 +22,6 @@ interface Props {
   isCollapsible: boolean;
 }
 
-const useStyles = makeStyles()((theme) => ({
-  expandCollapseIcon: {
-    justifySelf: 'flex-end'
-  },
-  groupTitleContainer: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  title: {},
-  tooltip: {
-    maxWidth: theme.spacing(60)
-  }
-}));
-
 const CollapsibleGroup = ({
   children,
   isCollapsible,
@@ -47,7 +30,6 @@ const CollapsibleGroup = ({
   defaultIsOpen = false,
   className
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -56,7 +38,7 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
-  const containerClassName = className || '';
+  const containerClassName = `flex items-center gap-x-2 ${className || ''}`;
 
   const CollapseIcon = isOpen ? ExpandLess : ExpandMore;
   const ContainerComponent = useCallback(
@@ -66,7 +48,7 @@ const CollapsibleGroup = ({
       isCollapsible ? (
         <ListItemButton
           aria-label={group?.name}
-          className={`${cx(classes.groupTitleContainer, containerClassName)} bg-background-listing-header`}
+          className={`${containerClassName} bg-background-listing-header rounded-lg`}
           dense
           disableGutters
           disableRipple
@@ -75,18 +57,9 @@ const CollapsibleGroup = ({
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
-          {containerComponentChildren}
-        </Box>
+        <Box className={containerClassName}>{containerComponentChildren}</Box>
       ),
-    [
-      isCollapsible,
-      classes.groupTitleContainer,
-      containerClassName,
-      cx,
-      group?.name,
-      toggle
-    ]
+    [isCollapsible, containerClassName, group?.name, toggle]
   );
 
   return (
@@ -100,7 +73,7 @@ const CollapsibleGroup = ({
             data-testid={`${group?.name}-header`}
           >
             <Typography
-              className="groupText scroll-m-12 snap-start"
+              className="groupText scroll-m-12 snap-start text-base font-medium"
               variant="h6"
               {...group?.titleAttributes}
               data-section-group-form-id={group?.name}
@@ -110,7 +83,7 @@ const CollapsibleGroup = ({
             {group?.EndIcon && (
               <Tooltip
                 classes={{
-                  tooltip: classes.tooltip
+                  tooltip: 'max-w-120'
                 }}
                 placement="top"
                 title={group?.TooltipContent ? <group.TooltipContent /> : ''}