@centreon/ui 24.5.3 → 24.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.5.3",
+  "version": "24.5.5",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Dashboard/Dashboard.cypress.spec.tsx

@@ -0,0 +1,68 @@
+import { Typography } from '@mui/material';
+
+import { DashboardLayout } from '.';
+
+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 => {
+  cy.mount({
+    Component: (
+      <DashboardLayout.Layout layout={dashboardLayout}>
+        {dashboardLayout.map(({ i, content }) => (
+          <DashboardLayout.Item header={<div>header</div>} id={i} key={i}>
+            <Typography>{content}</Typography>
+          </DashboardLayout.Item>
+        ))}
+      </DashboardLayout.Layout>
+    )
+  });
+};
+
+describe('Dashboard', () => {
+  it('displays placeholder when panels is out of viewport', () => {
+    initialize();
+
+    cy.get('[data-widget-skeleton="a"]').should('not.exist');
+    cy.get('[data-widget-skeleton="b"]').should('not.exist');
+    cy.get('[data-widget-skeleton="c"]').should('not.exist');
+    cy.get('[data-widget-skeleton="d"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Dashboard/Item.tsx

@@ -3,14 +3,16 @@ import {
   ForwardedRef,
   forwardRef,
   MouseEvent,
-  ReactElement
+  ReactElement,
+  useEffect
 } from 'react';
 
 import { isNil, prop } from 'ramda';
 
 import { Card, useTheme } from '@mui/material';
 
-import { useMemoComponent } from '../utils';
+import { useMemoComponent, useViewportIntersection } from '../utils';
+import LoadingSkeleton from '../LoadingSkeleton';
 
 import { useDashboardItemStyles } from './Dashboard.styles';
 
@@ -45,6 +47,9 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
+    const { isInViewport, setElement } = useViewportIntersection({
+      rootMargin: '140px 0px 140px 0px'
+    });
     const hasHeader = !isNil(header);
 
     const { classes, cx } = useDashboardItemStyles({ hasHeader });
@@ -58,6 +63,14 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
 
     const cardContainerListeners = !hasHeader ? listeners : {};
 
+    useEffect(() => {
+      if (isNil(ref)) {
+        return;
+      }
+
+      setElement(ref.current);
+    }, [ref]);
+
     return useMemoComponent({
       Component: (
         <div
@@ -89,19 +102,31 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
                 !disablePadding && classes.widgetPadding
               )}
             >
-              {children}
+              {!isInViewport ? (
+                <LoadingSkeleton
+                  animation={false}
+                  data-widget-skeleton={id}
+                  height="100%"
+                  width="100%"
+                />
+              ) : (
+                children
+              )}
             </div>
           </Card>
         </div>
       ),
-      memoProps: [
-        style,
-        className,
-        header,
-        theme.palette.mode,
-        canMove,
-        ...additionalMemoProps
-      ]
+      memoProps: isInViewport
+        ? [
+            style,
+            className,
+            header,
+            theme.palette.mode,
+            canMove,
+            isInViewport,
+            ...additionalMemoProps
+          ]
+        : [isInViewport, theme.palette.mode, style]
     });
   }
 );

package/src/api/useFetchQuery/index.ts

@@ -8,7 +8,7 @@ import {
   UseQueryOptions
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
-import { has, includes, isNil, not, omit } from 'ramda';
+import { equals, has, includes, isNil, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
@@ -32,6 +32,7 @@ export interface UseFetchQueryProps<T> {
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
+  useLongCache?: boolean;
 }
 
 export type UseFetchQueryState<T> = {
@@ -58,12 +59,18 @@ const useFetchQuery = <T extends object>({
   queryOptions,
   httpCodesBypassErrorSnackbar = [],
   baseEndpoint,
-  doNotCancelCallsOnUnmount = false
+  doNotCancelCallsOnUnmount = false,
+  useLongCache
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
   const dataRef = useRef<T | undefined>(undefined);
 
   const { showErrorMessage } = useSnackbar();
 
+  const isCypressTest = equals(window.Cypress?.testingType, 'component');
+
+  const cacheOptions =
+    !isCypressTest && useLongCache ? { gcTime: 60 * 1000 } : {};
+
   const queryData = useQuery<T | ResponseError, Error>({
     queryFn: ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
@@ -76,6 +83,7 @@ const useFetchQuery = <T extends object>({
         signal
       }),
     queryKey: getQueryKey(),
+    ...cacheOptions,
     ...queryOptions
   });
 

package/src/api/useGraphQuery/index.ts

@@ -149,7 +149,8 @@ const useGraphQuery = ({
       enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
       refetchInterval: refreshInterval,
       suspense: false
-    }
+    },
+    useLongCache: true
   });
 
   const data = useRef<PerformanceGraphData | undefined>(undefined);