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

package/src/components/Modal/Modal.styles.ts

@@ -8,7 +8,7 @@ const useStyles = makeStyles<{
 }>()((theme, props) => ({
   modal: {
     '& .MuiDialog-paper': {
-      gap: theme.spacing(2),
+      gap: theme.spacing(3),
       padding: theme.spacing(2.5)
     },
     '&[data-size="fullscreen"]': {
@@ -65,15 +65,6 @@ const useStyles = makeStyles<{
     right: 0,
     zIndex: theme.zIndex.modal
   },
-  modalBody: {
-    '& > p': {
-      '&:first-of-type': {
-        margin: theme.spacing(0, 0, 1, 0)
-      },
-      margin: theme.spacing(1, 0, 1, 0),
-      width: '90%'
-    }
-  },
   modalCloseButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -81,15 +72,6 @@ const useStyles = makeStyles<{
       opacity: 0.6
     },
     top: theme.spacing(1)
-  },
-  modalHeader: {
-    '& .MuiDialogTitle-root': {
-      padding: theme.spacing(0)
-    },
-    display: 'flex',
-    gap: theme.spacing(2),
-
-    justifyContent: 'space-between'
   }
 }));
 

package/src/components/Modal/Modal.tsx

@@ -54,7 +54,7 @@ const Modal = ({
       TransitionProps={{
         direction: 'up'
       }}
-      className={classes.modal}
+      className={`${classes.modal} gap-6`}
       data-size={size}
       open={open}
       onClose={onClose}

package/src/components/Modal/ModalBody.tsx

@@ -1,15 +1,17 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { useStyles } from './Modal.styles';
+import { modalBody } from './modal.module.css';
 
 export type ModalHeaderProps = {
   children?: ReactNode;
 };
 
 const ModalBody = ({ children }: ModalHeaderProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <div className={classes.modalBody}>{children}</div>;
+  return (
+    <div className={modalBody} data-testid="modal-body">
+      {children}
+    </div>
+  );
 };
 
 export { ModalBody };

package/src/components/Modal/ModalHeader.tsx

@@ -2,7 +2,9 @@ import { ReactElement, ReactNode } from 'react';
 
 import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
 
-import { useStyles } from './Modal.styles';
+import '../../../src/ThemeProvider/tailwindcss.css';
+
+import { modalHeader } from './modal.module.css';
 
 export type ModalHeaderProps = {
   children?: ReactNode;
@@ -12,11 +14,13 @@ const ModalHeader = ({
   children,
   ...rest
 }: ModalHeaderProps & DialogTitleProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
-    <div className={classes.modalHeader}>
-      <MuiDialogTitle color="primary" {...rest}>
+    <div className={modalHeader}>
+      <MuiDialogTitle
+        className="p-0 font-bold text-2xl"
+        color="primary"
+        {...rest}
+      >
         {children}
       </MuiDialogTitle>
     </div>

package/src/components/Modal/modal.module.css

@@ -0,0 +1,16 @@
+.modalHeader {
+  & .MuiDialogTitle-root {
+    padding: 0;
+  }
+
+  display: flex;
+  gap: var(--spacing-4);
+  justify-content: space-between;
+}
+
+.modalBody {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  padding-right: var(--spacing-4); /* To prevent scrollbar from overlapping content */
+}

package/src/components/Tabs/Tab.styles.ts

@@ -5,12 +5,6 @@ export const useTabsStyles = makeStyles()((theme) => ({
     bottom: 'unset'
   },
   tab: {
-    '&[aria-selected="true"]': {
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightBold
-    },
-    color: theme.palette.text.primary,
-    fontWeight: theme.typography.fontWeightRegular,
     marginRight: theme.spacing(2),
     minHeight: 0,
     minWidth: 0,

package/src/components/Tabs/Tabs.tsx

@@ -1,54 +1,76 @@
 import { useCallback, useState } from 'react';
 
-import { TabContext, TabList, TabListProps } from '@mui/lab';
-import { Tab } from '@mui/material';
+import { TabContext } from '@mui/lab';
+import { Tabs as MuiTabs, Tab, TabsProps } from '@mui/material';
 
 import { useTabsStyles } from './Tab.styles';
 
+import '../../ThemeProvider/tailwindcss.css';
+
+export interface TabI {
+  label: string;
+  value: string;
+}
+
 type Props = {
-  children: Array<JSX.Element>;
+  children?: Array<JSX.Element>;
   defaultTab: string;
-  tabList?: TabListProps;
-  tabs: Array<{
-    label: string;
-    value: string;
-  }>;
+  tabList?: TabsProps;
+  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  scrollButtons?: boolean | 'auto';
+  tabs: TabI[];
+  onChange?: (newValue: string) => void;
 };
 
 export const Tabs = ({
   children,
   defaultTab,
   tabs,
-  tabList
+  tabList,
+  variant,
+  scrollButtons = 'auto',
+  onChange
 }: Props): JSX.Element => {
   const { classes } = useTabsStyles();
 
   const [selectedTab, setSelectedTab] = useState(defaultTab);
 
-  const changeTab = useCallback((_, newValue: string): void => {
-    setSelectedTab(newValue);
-  }, []);
+  const changeTab = useCallback(
+    (_, newValue: string): void => {
+      if (onChange) onChange(newValue);
+
+      setSelectedTab(newValue);
+    },
+    [onChange]
+  );
+
+  const selectedTabStyle = ' font-bold text-primary-main';
+  const defaultTabStyle = ' font-normal';
 
   return (
     <TabContext value={selectedTab}>
-      <TabList
+      <MuiTabs
+        scrollButtons={scrollButtons}
+        variant={variant}
         classes={{
           indicator: classes.indicator,
           root: classes.tabs
         }}
         onChange={changeTab}
+        value={selectedTab}
         {...tabList}
       >
         {tabs.map(({ value, label }) => (
           <Tab
             aria-label={label}
-            className={classes.tab}
+            className={`${classes.tab} ${selectedTab === value ? selectedTabStyle : defaultTabStyle}`}
             key={value}
             label={label}
             value={value}
+            data-testid={`tab-${value}`}
           />
         ))}
-      </TabList>
+      </MuiTabs>
       {children}
     </TabContext>
   );

package/src/index.ts

@@ -1,6 +1,7 @@
 import type { Props as SingleAutocompleteFieldProps } from './InputField/Select/Autocomplete';
 
 export { default as IconButton } from './Button/Icon';
+export { default as Pagination } from './Pagination';
 
 export { Checkbox, CheckboxGroup } from './Checkbox';
 
@@ -71,6 +72,7 @@ export { default as StatusChip } from './StatusChip';
 export type { Props as StatusChipProps } from './StatusChip';
 
 export type { Listing as ListingModel } from './api/models';
+export type { ListingMap as ListingMapModel } from './api/models';
 
 export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
@@ -87,6 +89,7 @@ export type {
   SearchMatch
 } from './api/buildListingEndpoint/models';
 export { default as buildListingDecoder } from './api/buildListingDecoder';
+export { customFetch } from './api/customFetch';
 
 export { default as ContentWithCircularLoading } from './ContentWithCircularProgress';
 export {

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs, startsWith } from 'ramda';
+import { equals, fromPairs, startsWith } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,7 +25,12 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
-      if (startsWith('/', value)) {
+      if (
+        startsWith('/', value) ||
+        (!equals('false', value) &&
+          !equals('true', value) &&
+          !equals(value.match(/^[a-zA-Z]/), null))
+      ) {
         return [key, value];
       }
 

package/src/utils/index.ts

@@ -28,3 +28,4 @@ export * from '../Graph/Chart/InteractiveComponents/TimeShiftZones/useTimeShiftZ
 export * from '../TimePeriods/helpers';
 export { lastDayPeriod, type Parameters } from '../TimePeriods/models';
 export * from './useLocaleTimezoneDate/useLocaleTimezoneDate';
+export * from './useLocale';

package/src/utils/useLocale/index.ts

@@ -0,0 +1,9 @@
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+import { useAtomValue } from 'jotai';
+
+export const useLocale = () => {
+  const user = useAtomValue(userAtom);
+  const browserLocale = useAtomValue(browserLocaleAtom);
+
+  return user.locale || browserLocale;
+};

package/src/utils/useLocale/useLocale.cypress.spec.tsx

@@ -0,0 +1,38 @@
+import { browserLocaleAtom, userAtom } from '@centreon/ui-context';
+import { Provider, createStore } from 'jotai';
+import { useLocale } from '.';
+
+const TestComponent = () => {
+  const locale = useLocale();
+
+  return <p>{locale}</p>;
+};
+
+const initialize = ({ userLocale, browserLocale }) => {
+  const store = createStore();
+
+  store.set(userAtom, { locale: userLocale });
+  store.set(browserLocaleAtom, browserLocale);
+
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <TestComponent />
+      </Provider>
+    )
+  });
+};
+
+describe('useLocale', () => {
+  it('displays the user locale when the corresponding atom is set', () => {
+    initialize({ userLocale: 'fi', browserLocale: 'en' });
+
+    cy.contains('fi').should('be.visible');
+  });
+
+  it('displays the browser locale when the user locale is not set', () => {
+    initialize({ browserLocale: 'de', userLocale: null });
+
+    cy.contains('de').should('be.visible');
+  });
+});

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -5,6 +5,7 @@ import { useAtomValue } from 'jotai';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { useLocale } from '../useLocale';
 import shortLocales from './sortLocales';
 
 interface FormatParameters {
@@ -28,10 +29,11 @@ const timeFormat = 'LT';
 const dateTimeFormat = `${dateFormat} ${timeFormat}`;
 
 const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
-  const { locale, timezone } = useAtomValue(userAtom);
+  const locale = useLocale();
+  const { timezone } = useAtomValue(userAtom);
 
   const format = ({ date, formatString }: FormatParameters): string => {
-    const normalizedLocale = locale.substring(0, 2);
+    const normalizedLocale = locale?.substring(0, 2);
 
     const timezoneDate = dayjs(
       new Date(date).toLocaleString('en', { timeZone: timezone })

package/src/utils/usePluralizedTranslation.ts

@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
 
-import { useAtomValue } from 'jotai';
 import pluralize from 'pluralize';
 import { equals, includes } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { userAtom } from '@centreon/ui-context';
+import { useLocale } from './useLocale';
 
 interface TProps {
   count: number;
@@ -16,7 +15,7 @@ export const usePluralizedTranslation = (): {
   pluralizedT: (props: TProps) => string;
 } => {
   const translation = useTranslation();
-  const { locale } = useAtomValue(userAtom);
+  const locale = useLocale();
 
   const isNotPartitiveLocale = includes('fr', locale);
 

package/src/Listing/Cell/DataCell.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  cell: {
-    alignItems: 'center',
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  },
-  clickable: {
-    cursor: 'default'
-  },
-  componentColumn: {
-    width: theme.spacing(2.75)
-  },
-  rowNotHovered: {
-    color: theme.palette.text.secondary
-  },
-  text: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
-export { useStyles };

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -1,71 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { getTextStyleByViewMode } from '../../useStyleTable';
-
-interface StylesProps {
-  isDragging?: boolean;
-  isInDragOverlay?: boolean;
-  listingVariant?: ListingVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, listingVariant }) => ({
-    active: {
-      '&, &:hover, &:focus': {
-        color: theme.palette.common.white
-      },
-      '&.Mui-active': {
-        '& .MuiTableSortLabel-icon': {
-          color: theme.palette.common.white
-        },
-        color: theme.palette.common.white
-      }
-    },
-    content: {
-      alignItems: 'center',
-      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
-      color: theme.palette.common.white,
-      display: 'flex',
-      height: '100%',
-      justifyContent: 'space-between'
-    },
-    dragHandle: {
-      '&, &.Mui-focus, &:focus': {
-        color: theme.palette.common.white
-      },
-      color: theme.palette.common.white,
-
-      cursor: isDragging ? 'grabbing' : 'grab',
-      opacity: 0,
-      padding: 0
-    },
-    simpleHeaderCellContent: {
-      alignItems: 'center',
-      display: 'inline-flex',
-      marginRight: theme.spacing(2),
-      userSelect: 'none'
-    },
-    tableCell: {
-      backgroundColor: isInDragOverlay
-        ? 'transparent'
-        : theme.palette.background.listingHeader,
-      borderBottom: 'none',
-      height: 'inherit',
-      padding: theme.spacing(0, 1),
-      ...getTextStyleByViewMode({ listingVariant, theme }),
-      '&:hover, &:focus-within, &[data-isdragging=true]': {
-        '& .dragHandle': {
-          opacity: 1
-        }
-      },
-      '&[data-isindragoverlay=true]': {
-        display: 'block',
-        opacity: 0.7
-      }
-    }
-  })
-);
-
-export { useStyles, type StylesProps };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts

@@ -1,26 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    '&.Mui-checked': {
-      color: theme.palette.common.white
-    },
-    '&.MuiCheckbox-indeterminate': {
-      color: theme.palette.common.white
-    },
-    color: theme.palette.common.white
-  },
-  checkboxHeaderCell: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.listingHeader,
-    borderBottom: 'none',
-    display: 'flex',
-    justifyContent: 'start',
-    lineHeight: 'inherit'
-  },
-  predefinedRowsMenu: {
-    color: theme.palette.common.white
-  }
-}));
-
-export { useStyles };

package/src/Listing/Header/ListingHeader.styles.ts

@@ -1,16 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  headerLabelDragging: {
-    cursor: 'grabbing'
-  },
-  root: {
-    height: '100%',
-    padding: theme.spacing(0, 1)
-  },
-  row: {
-    display: 'contents'
-  }
-}));
-
-export { useStyles };

package/src/Listing/Listing.styles.ts

@@ -1,78 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { TableStyleAtom as TableStyle } from './models';
-
-const loadingIndicatorHeight = 3;
-
-interface StylesProps {
-  dataStyle: TableStyle;
-  getGridTemplateColumn: string;
-  isResponsive: string;
-  rows: Array<unknown>;
-}
-
-const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
-    actionBar: {
-      alignItems: 'center',
-      display: 'flex'
-    },
-    checkbox: {
-      justifyContent: 'start'
-    },
-    container: {
-      background: 'none',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      width: '100%'
-    },
-    listingContainer: {
-      height: '100%',
-      overflow: 'hidden',
-      width: '100%'
-    },
-    loadingIndicator: {
-      height: loadingIndicatorHeight,
-      width: '100%'
-    },
-    table: {
-      '.listingHeader': {
-        backgroundColor: theme.palette.background.listingHeader,
-        padding: theme.spacing(0, 1)
-      },
-      '.listingHeader > div > div': {
-        backgroundColor: theme.palette.background.listingHeader,
-        height: theme.spacing(dataStyle.header.height / 8)
-      },
-      '.listingHeader > div > div:first-of-type': {
-        height: '100%',
-        padding: theme.spacing(0, 0.5, 0, 1.5)
-      },
-      alignItems: 'center',
-      display: 'grid',
-      gridTemplateColumns: getGridTemplateColumn,
-      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length || 1
-      }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
-      position: 'relative'
-    },
-    tableBody: {
-      '.MuiTableRow-root > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-
-      display: 'contents',
-      'div:first-of-type': {
-        gridColumnStart: 1
-      },
-      position: 'relative'
-    },
-    tableWrapper: {
-      borderBottom: 'none',
-      overflow: 'auto'
-    }
-  })
-);
-
-export { useListingStyles, loadingIndicatorHeight };

package/src/Listing/Row/EmptyRow.styles.ts

@@ -1,14 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()(() => ({
-  emptyDataCell: {
-    flexDirection: 'column',
-    gridColumn: 'auto / -1',
-    justifyContent: 'center'
-  },
-  emptyDataRow: {
-    display: 'contents'
-  }
-}));
-
-export { useStyles };

package/src/components/Button/Button.styles.ts

@@ -1,44 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  button: {
-    '&[data-size="medium"]': {
-      fontSize: '16px',
-      height: 'unset',
-      lineHeight: '24px'
-    },
-
-    '&[data-size="small"]': {
-      '&[data-variant="primary"], &[data-variant="secondary"]': {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
-      },
-      fontSize: '14px',
-      height: 'unset',
-      lineHeight: '22px'
-    },
-
-    '&[data-variant="primary"]:not(:disabled)': {
-      '&[data-is-danger="true"]': {
-        backgroundColor: theme.palette.error.main
-      },
-
-      backgroundColor: theme.palette.primary.main
-    },
-
-    '&[data-variant="secondary"]:not(:disabled)': {
-      '&[data-is-danger="true"]': {
-        borderColor: theme.palette.error.main,
-        color: theme.palette.error.main
-      },
-
-      borderColor: theme.palette.primary.main,
-      color: theme.palette.primary.main
-    },
-
-    textWrap: 'noWrap',
-    transition: 'unset'
-  }
-}));
-
-export { useStyles };