@centreon/ui 25.3.4 → 25.4.0-MON-191119-npm-develop.0

package/src/Listing/useStyleTable.ts

@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, isNil, pick, type } from 'ramda';
+import { equals, isEmpty, isNil, pick, type, update } from 'ramda';
 import { CSSObject } from 'tss-react';
 
 import { Theme } from '@mui/material';
@@ -12,14 +12,11 @@ import { Column, TableStyleAtom as Style } from './models';
 import { tableStyleAtom, tableStyleDerivedAtom } from './tableAtoms';
 
 interface TableStyle {
-  checkable?: boolean;
-  currentVisibleColumns?: Array<Column>;
   listingVariant?: ListingVariant;
 }
 
 interface TableStyleState {
   dataStyle: Style;
-  getGridTemplateColumn: string;
 }
 
 const isCompactMode = equals<ListingVariant | undefined>(
@@ -40,35 +37,11 @@ export const getTextStyleByViewMode = ({
     theme.typography[isCompactMode(listingVariant) ? 'body2' : 'body1']
   );
 
-const useStyleTable = ({
-  checkable,
-  currentVisibleColumns,
-  listingVariant
-}: TableStyle): TableStyleState => {
+const useStyleTable = ({ listingVariant }: TableStyle): TableStyleState => {
   const dataStyle = useAtomValue(tableStyleAtom);
 
   const updateStyleTable = useSetAtom(tableStyleDerivedAtom);
 
-  const getGridTemplateColumn = (): string => {
-    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
-
-    const columnTemplate = currentVisibleColumns
-      ?.filter((column) => column)
-      ?.map(({ width, shortLabel }) => {
-        if (!isNil(shortLabel)) {
-          return 'min-content';
-        }
-        if (isNil(width)) {
-          return 'auto';
-        }
-
-        return equals(type(width), 'Number') ? `${width}px` : width;
-      })
-      .join(' ');
-
-    return `${checkbox}${columnTemplate}`;
-  };
-
   useEffect(() => {
     if (listingVariant) {
       updateStyleTable({ listingVariant });
@@ -76,9 +49,62 @@ const useStyleTable = ({
   }, [listingVariant]);
 
   return {
-    dataStyle,
-    getGridTemplateColumn: getGridTemplateColumn()
+    dataStyle
   };
 };
 
 export default useStyleTable;
+
+interface UseColumnStyleProps {
+  checkable?: boolean;
+  currentVisibleColumns?: Array<Column>;
+}
+
+export const useColumnStyle = ({
+  checkable,
+  currentVisibleColumns
+}: UseColumnStyleProps): string => {
+  const gridTemplateColumn = useMemo((): string => {
+    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
+
+    const columnTemplate: Array<string> =
+      currentVisibleColumns
+        ?.filter((column) => column)
+        ?.map(({ width, shortLabel }) => {
+          if (!isNil(shortLabel)) {
+            return 'min-content';
+          }
+          if (isNil(width)) {
+            return 'auto';
+          }
+
+          return (
+            equals(type(width), 'Number') ? `${width}px` : width
+          ) as string;
+        }) || [];
+
+    const hasOnlyContainerResponsiveColumns =
+      !isEmpty(columnTemplate) &&
+      columnTemplate.every(
+        (width: string) =>
+          width.includes('auto') ||
+          width.includes('fr') ||
+          width.includes('%') ||
+          width.includes('px')
+      );
+
+    if (!hasOnlyContainerResponsiveColumns) {
+      const fixedColumnTemplate = update(
+        columnTemplate.length - 1,
+        'auto',
+        columnTemplate
+      );
+
+      return `${checkbox}${fixedColumnTemplate.join(' ')}`;
+    }
+
+    return `${checkbox}${columnTemplate.join(' ')}`;
+  }, [checkable, currentVisibleColumns]);
+
+  return gridTemplateColumn;
+};

package/src/ListingPage/index.stories.tsx

@@ -15,6 +15,7 @@ import Panel from '../Panel';
 import Filter from './Filter';
 
 import ListingPage, { ListingPageProps } from '.';
+import '../ThemeProvider/tailwindcss.css';
 
 export default { title: 'Listing Page' };
 

package/src/Module/index.tsx

@@ -3,6 +3,7 @@ import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { StylesProvider, createGenerateClassName } from '@mui/styles';
 
+import { ThemeOptions } from '@mui/material';
 import { QueryProvider, ThemeProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
@@ -12,6 +13,10 @@ export interface ModuleProps {
   queryClient?: QueryClient;
   seedName: string;
   store: ReturnType<typeof createStore>;
+  overrideTheme?: {
+    light: Partial<ThemeOptions>;
+    dark: Partial<ThemeOptions>;
+  };
 }
 
 const Module = ({
@@ -19,7 +24,8 @@ const Module = ({
   seedName,
   maxSnackbars = 3,
   store,
-  queryClient
+  queryClient,
+  overrideTheme
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({
     seed: seedName
@@ -29,7 +35,7 @@ const Module = ({
     <QueryProvider queryClient={queryClient}>
       <JotaiProvider store={store}>
         <StylesProvider generateClassName={generateClassName}>
-          <ThemeProvider>
+          <ThemeProvider overrideTheme={overrideTheme}>
             <SnackbarProvider maxSnackbars={maxSnackbars}>
               {children}
             </SnackbarProvider>

package/src/MultiSelectEntries/index.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import MultiSelectEntries from '.';
+import '../ThemeProvider/tailwindcss.css';
 
 export default {
   argTypes: {

package/src/MultiSelectEntries/index.tsx

@@ -63,7 +63,7 @@ const EntryChip = ({
   const { classes } = useStyles();
 
   return (
-    <Grid item xs={gridWidth}>
+    <Grid item size={gridWidth}>
       <Chip
         className={classes.chip}
         label={<div className={classes.labelChip}>{label}</div>}

package/src/Pagination/Pagination.cypress.spec.tsx

@@ -0,0 +1,137 @@
+import { labelNextPage, labelPreviousPage } from '../Listing/translatedLabels';
+import TestQueryProvider from '../api/TestQueryProvider';
+import { Method } from '../api/useMutationQuery';
+import Pagination from './Pagination';
+import { generateItems } from './utils';
+
+const defaultTotalItems = 25;
+const itemsPerPage = 6;
+const totalPages = Math.ceil(defaultTotalItems / itemsPerPage);
+
+const initialize = ({
+  total = defaultTotalItems,
+  currentPage = 1
+}: { total?: number; currentPage?: number }) => {
+  cy.interceptAPIRequest({
+    alias: 'list',
+    method: Method.GET,
+    path: '**/listing**',
+    response: {
+      result: generateItems(itemsPerPage),
+      meta: {
+        page: currentPage,
+        total,
+        limit: itemsPerPage
+      }
+    }
+  });
+
+  cy.mount({
+    Component: (
+      <div
+        style={{
+          width: '100%',
+          height: '100vh',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}
+      >
+        <div
+          style={{
+            height: '176px',
+            boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.2)'
+          }}
+        >
+          <TestQueryProvider>
+            <Pagination
+              api={{ baseEndpoint: '/test/listing', queryKey: ['test'] }}
+            />
+          </TestQueryProvider>
+        </div>
+      </div>
+    )
+  });
+};
+
+describe('Pagination Component', () => {
+  it('render with correct initial state', () => {
+    initialize({});
+    cy.waitForRequest('@list');
+
+    cy.findByTestId(labelPreviousPage).should('be.disabled');
+
+    cy.findByTestId(labelNextPage).should('not.be.disabled');
+
+    cy.contains(`Page 1/${totalPages}`);
+
+    cy.makeSnapshot();
+  });
+
+  it('hides pagination controls when only one page exists', () => {
+    initialize({ total: itemsPerPage });
+    cy.waitForRequest('@list');
+
+    cy.findByTestId(labelPreviousPage).should('not.exist');
+    cy.findByTestId(labelNextPage).should('not.exist');
+    cy.contains(/Page \d+\/\d+/).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('navigates forward through pages correctly', () => {
+    initialize({});
+    cy.waitForRequest('@list');
+
+    cy.contains(`Page 1/${totalPages}`);
+
+    Array.from({ length: totalPages - 1 }).forEach((_, index) => {
+      cy.findByTestId(labelNextPage).click();
+      cy.waitForRequest('@list');
+
+      cy.contains(`Page ${index + 2}/${totalPages}`);
+    });
+
+    cy.findByTestId(labelNextPage).should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('navigates backward through pages correctly', () => {
+    initialize({});
+
+    cy.waitForRequest('@list');
+
+    Array.from({ length: totalPages - 1 }).forEach(() => {
+      cy.findByTestId(labelNextPage).click();
+
+      cy.waitForRequest('@list');
+    });
+
+    Array.from({ length: totalPages - 1 }).forEach((_, index) => {
+      cy.findByTestId(labelPreviousPage).click();
+      cy.waitForRequest('@list');
+
+      cy.contains(`Page ${totalPages - index - 1}/${totalPages}`);
+    });
+
+    cy.findByTestId(labelPreviousPage).should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('enables both buttons when on middle page', () => {
+    initialize({});
+
+    cy.waitForRequest('@list');
+
+    cy.findByTestId(labelNextPage).click();
+
+    cy.waitForRequest('@list');
+
+    cy.findByTestId(labelPreviousPage).should('not.be.disabled');
+    cy.findByTestId(labelNextPage).should('not.be.disabled');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Pagination/Pagination.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { http, HttpResponse } from 'msw';
+import Pagination from '.';
+import { generateItems } from './utils';
+
+const mockedListing = {
+  result: generateItems(6),
+  meta: {
+    page: 1,
+    total: 35,
+    limit: 6
+  }
+};
+
+const meta: Meta<typeof Pagination> = {
+  args: {},
+  component: Pagination,
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('**/listing**', () => {
+          return HttpResponse.json(mockedListing);
+        })
+      ]
+    }
+  },
+  render: (args) => {
+    return (
+      <div
+        style={{
+          width: '240px',
+          background: '#EDEDED'
+        }}
+      >
+        <Pagination {...args} />
+      </div>
+    );
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+  args: { api: { baseEndpoint: '/test/listing', queryKey: ['pagination'] } }
+};

package/src/Pagination/Pagination.styles.ts

@@ -0,0 +1,56 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  container: {
+    height: theme.spacing(22),
+    width: theme.spacing(30),
+    padding: theme.spacing(1),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(2)
+  },
+  notFound: {
+    height: theme.spacing(10),
+    width: theme.spacing(30),
+    padding: theme.spacing(1)
+  },
+  body: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: theme.spacing(1)
+  },
+  content: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5)
+  },
+  page: {
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  arrowContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  icon: {
+    color: theme.palette.text.primary
+  },
+  arrow: {
+    fontSize: theme.spacing(2)
+  },
+  item: {
+    color: 'inherit',
+    textDecoration: 'none'
+  },
+  link: {
+    '&:hover': {
+      cursor: 'pointer',
+      color: theme.palette.primary.main
+    }
+  }
+}));

package/src/Pagination/Pagination.tsx

@@ -0,0 +1,146 @@
+import { CircularProgress, Link, Typography } from '@mui/material';
+import { equals, isEmpty, isNil } from 'ramda';
+import { useMemo, useState } from 'react';
+
+import ArrowBackIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForwardIos';
+import { useTranslation } from 'react-i18next';
+import IconButton from '../Button/Icon';
+import {
+  labelNextPage,
+  labelNoResultFound,
+  labelPreviousPage
+} from '../Listing/translatedLabels';
+import buildListingEndpoint from '../api/buildListingEndpoint';
+import { Listing } from '../api/models';
+import useFetchQuery from '../api/useFetchQuery';
+import { truncate } from '../utils';
+import { useStyles } from './Pagination.styles';
+
+interface Props {
+  api: {
+    baseEndpoint: string;
+    queryKey: Array<string>;
+    searchConditions?;
+  };
+  labelHasNoElements?: string;
+  onItemClick?: ({ id }: { id: number }) => void;
+}
+
+const limit = 6;
+
+const Pagination = ({
+  api: { baseEndpoint, queryKey, searchConditions },
+  labelHasNoElements = labelNoResultFound,
+  onItemClick
+}: Props) => {
+  const { t } = useTranslation();
+  const { cx, classes } = useStyles();
+  const [page, setPage] = useState(1);
+
+  const { data, isLoading } = useFetchQuery<
+    Listing<{ id: number; name: string }>
+  >({
+    getEndpoint: (parameters): string =>
+      buildListingEndpoint({
+        baseEndpoint: baseEndpoint,
+        parameters: {
+          ...parameters,
+          page,
+          limit,
+          ...(searchConditions
+            ? {
+                search: {
+                  conditions: searchConditions
+                }
+              }
+            : {}),
+          sort: { status: 'DESC' }
+        }
+      }),
+    getQueryKey: () => [...queryKey, page],
+    queryOptions: {
+      suspense: false
+    }
+  });
+
+  const pagesCount = Math.ceil(data?.meta.total / limit);
+  const arePaginationComponentsDisplayed = !equals(pagesCount, 1);
+
+  const hasNoElements = useMemo(
+    () => isEmpty(data?.result) || isNil(data?.result),
+    [data]
+  );
+
+  if (hasNoElements) {
+    return (
+      <div className={classes.notFound}>
+        <Typography color="disabled">{t(labelHasNoElements)}</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.container}>
+      <div className={classes.body}>
+        {arePaginationComponentsDisplayed && (
+          <div className={classes.arrowContainer}>
+            <IconButton
+              onClick={() => setPage(page - 1)}
+              disabled={equals(page, 1)}
+              dataTestid={labelPreviousPage}
+              className={classes.icon}
+            >
+              <ArrowBackIcon className={classes.arrow} />
+            </IconButton>
+          </div>
+        )}
+
+        <div className={classes.content}>
+          {isLoading ? (
+            <CircularProgress color="inherit" size={25} />
+          ) : (
+            data?.result.map(({ id, name }) => (
+              <Link
+                key={id}
+                variant="body2"
+                className={cx({
+                  [classes.item]: true,
+                  [classes.link]: !!onItemClick
+                })}
+                onClick={() => onItemClick?.({ id })}
+              >
+                {truncate({
+                  content: name,
+                  maxLength: 25
+                })}
+              </Link>
+            ))
+          )}
+        </div>
+
+        {arePaginationComponentsDisplayed && (
+          <div className={classes.arrowContainer}>
+            <IconButton
+              onClick={() => setPage(page + 1)}
+              disabled={equals(pagesCount, page)}
+              className={classes.icon}
+              dataTestid={labelNextPage}
+            >
+              <ArrowForwardIcon className={classes.arrow} />
+            </IconButton>
+          </div>
+        )}
+      </div>
+
+      {arePaginationComponentsDisplayed && (
+        <Typography
+          className={classes.page}
+          variant="body2"
+        >{`Page ${page}/${pagesCount}`}</Typography>
+      )}
+    </div>
+  );
+};
+
+export default Pagination;

package/src/Pagination/index.ts

@@ -0,0 +1,3 @@
+import Pagination from './Pagination';
+
+export default Pagination;

package/src/Pagination/utils.ts

@@ -0,0 +1,7 @@
+export const generateItems = (count: number) =>
+  Array(count)
+    .fill(0)
+    .map((_, idx) => ({
+      id: idx,
+      name: `Item Item Item ${idx}`
+    }));

package/src/SortableItems/index.stories.tsx

@@ -230,7 +230,7 @@ const ContentWithGrid = ({
   const { classes } = useContentStyles({ isDragging });
 
   return (
-    <Grid item style={style} xs={xs} {...listeners} {...attributes}>
+    <Grid item style={style} size={xs} {...listeners} {...attributes}>
       <Paper className={classes.content} ref={itemRef}>
         <Typography>{name as string}</Typography>
       </Paper>
@@ -244,7 +244,7 @@ const RootComponent = ({
 }: RootComponentProps): JSX.Element => (
   <Grid container spacing={1} style={{ width: '550px' }}>
     {not(isInDragOverlay) && (
-      <Grid item xs={12}>
+      <Grid item size={12}>
         <Typography align="center">This item cannot move</Typography>
       </Grid>
     )}

package/src/StoryBookThemeProvider/index.tsx

@@ -9,6 +9,7 @@ import {
 
 import { ThemeMode } from '@centreon/ui-context';
 
+import { GlobalStyles } from '@mui/system';
 import { getTheme } from '../ThemeProvider';
 
 interface Props {
@@ -23,7 +24,8 @@ const StoryBookThemeProvider = ({
   const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
 
   return (
-    <StyledEngineProvider injectFirst>
+    <StyledEngineProvider injectFirst enableCssLayer>
+      <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
       <MuiThemeProvider theme={theme}>
         {children}
         <CssBaseline />

package/src/ThemeProvider/base.css

@@ -0,0 +1,49 @@
+@layer base {
+  ::-webkit-scrollbar {
+    height: var(--spacing-2);
+    width: var(--spacing-2);
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--color-text-disabled);
+    border-radius: var(--spacing-1);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-primary-main);
+  }
+
+  * {
+    scrollbar-color: var(--color-text-disabled) var(--color-background-default);
+    scrollbar-width: thin;
+  }
+
+  html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    background-color: var(--color-background-paper);
+    height: 100%;
+    padding: 0;
+    width: 100%;
+  }
+
+  #root {
+    background-color: var(--color-background-paper) !important;
+  }
+
+  @variant dark {
+    ::-webkit-scrollbar-thumb {
+      background-color: var(--color-divider);
+    }
+    * {
+      scrollbar-color: var(--color-divider) var(--color-background-default);
+    }
+  }
+}