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

package/src/components/Layout/PageLayout/PageLayout.stories.tsx

@@ -4,6 +4,7 @@ import { Default as DefaultPageHeaderStory } from '../../Header/PageHeader/PageH
 import { AreaIndicator } from '../AreaIndicator';
 
 import { PageLayout } from './index';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof PageLayout> = {
   argTypes: {

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -29,7 +29,7 @@ export const useStyles = makeStyles()((theme) => ({
     display: 'grid',
     gridTemplateRows: 'auto',
     overflow: 'hidden',
-    padding: theme.spacing(1.5, 3, 1.5)
+    padding: theme.spacing(0, 3, 1.5)
   },
   pageLayoutHeader: {
     '[data-variant="fixed-header"] &': {

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -5,16 +5,22 @@ import { useStyles } from './PageLayout.styles';
 type PageLayoutProps = {
   children: Array<ReactNode> | ReactNode;
   variant?: 'default' | 'fixed-header';
+  className?: string;
 };
 
 export const PageLayout = ({
   children,
-  variant = 'default'
+  variant = 'default',
+  className
 }: PageLayoutProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
-    <section className={classes.pageLayout} data-variant={variant} id="page">
+    <section
+      className={cx(classes.pageLayout, className)}
+      data-variant={variant}
+      id="page"
+    >
       {children}
     </section>
   );

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -5,17 +5,19 @@ import { useStyles } from './PageLayout.styles';
 interface PageLayoutActionsProps {
   children: Array<ReactNode> | ReactNode;
   rowReverse?: boolean;
+  className?: string;
 }
 
 export const PageLayoutActions = ({
   children,
-  rowReverse
+  rowReverse,
+  className
 }: PageLayoutActionsProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
     <section
-      className={classes.pageLayoutActions}
+      className={cx(classes.pageLayoutActions, className)}
       data-row-reverse={rowReverse}
       id="actions"
     >

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -5,17 +5,19 @@ import { useStyles } from './PageLayout.styles';
 type PageLayoutBodyProps = {
   children: Array<ReactNode> | ReactNode;
   hasBackground?: boolean;
+  className?: string;
 };
 
 export const PageLayoutBody = ({
   children,
-  hasBackground = false
+  hasBackground = false,
+  className
 }: PageLayoutBodyProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
     <section
-      className={classes.pageLayoutBody}
+      className={cx(classes.pageLayoutBody, className)}
       data-has-background={hasBackground}
       data-has-actions={!!children?.length}
       id="page-body"

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -4,15 +4,17 @@ import { useStyles } from './PageLayout.styles';
 
 type PageLayoutHeaderProps = {
   children: Array<ReactNode> | ReactNode;
+  className?: string;
 };
 
 export const PageLayoutHeader = ({
-  children
+  children,
+  className
 }: PageLayoutHeaderProps): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
-    <header className={classes.pageLayoutHeader} id="header">
+    <header className={cx(classes.pageLayoutHeader, className)} id="header">
       {children}
     </header>
   );

package/src/components/Layout/PageLayout/PageQuickAccess.tsx

@@ -11,10 +11,11 @@ interface NamedEntity {
 }
 
 type Props = {
-  create: () => void;
+  create?: () => void;
   elements: Array<NamedEntity>;
   goBack: () => void;
   isActive: (id: number | string) => boolean;
+  isDisabled?: (id: number | string) => boolean;
   labels: {
     create: string;
     goBack: string;
@@ -25,6 +26,7 @@ type Props = {
 export const PageQuickAccess = ({
   elements,
   isActive,
+  isDisabled,
   navigateToElement,
   goBack,
   create,
@@ -40,25 +42,23 @@ export const PageQuickAccess = ({
           <Menu.Item
             key={`${element.id}`}
             onClick={navigateToElement(element.id)}
-            {...(isActive(element.id) && {
-              isActive: true,
-              isDisabled: true
-            })}
+            isActive={isActive(element.id)}
+            isDisabled={isDisabled?.(element.id)}
           >
             {element.name}
           </Menu.Item>
         ))}
         <Menu.Divider key="divider" />
-        <Menu.Item key="create">
-          <>
-            <Button
-              icon={<ArrowBackIcon />}
-              iconVariant="start"
-              variant="ghost"
-              onClick={goBack}
-            >
-              {t(labels.goBack)}
-            </Button>
+        <div className="px-2 pb-2 flex gap-4">
+          <Button
+            icon={<ArrowBackIcon />}
+            iconVariant="start"
+            variant="ghost"
+            onClick={goBack}
+          >
+            {t(labels.goBack)}
+          </Button>
+          {create && (
             <Button
               icon={<AddIcon />}
               iconVariant="start"
@@ -67,8 +67,8 @@ export const PageQuickAccess = ({
             >
               {t(labels.create)}
             </Button>
-          </>
-        </Menu.Item>
+          )}
+        </div>
       </Menu.Items>
     </Menu>
   );

package/src/components/Menu/Button/MenuButton.tsx

@@ -10,8 +10,6 @@ import { DataTestAttributes } from '../../../@types/data-attributes';
 import { Button, ButtonProps } from '../../Button';
 import { useMenu } from '../useMenu';
 
-import { useStyles } from './MenuButton.styles';
-
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;
@@ -33,8 +31,6 @@ const MenuButton = ({
   className,
   ...attr
 }: MenuButtonProps): ReactElement => {
-  const { cx, classes } = useStyles();
-
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
   const onToggle = useCallback(
@@ -52,14 +48,18 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={cx(classes.menuButton, className)}
+      className={`${isMenuOpen ? 'bg-primary-main/8 text-text-primary-main' : 'text-text-secondary'} ${className}`}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}
       onClick={onToggle}
     >
       {children || <MenuIcon />}
-      {hasArrow && <ArrowDropDownIcon className={classes.buttonIcon} />}
+      {hasArrow && (
+        <ArrowDropDownIcon
+          className={`transform-gpu transition-[rotate] ${isMenuOpen ? 'rotate-180' : 'rotate-0'}`}
+        />
+      )}
     </Button>
   );
 };

package/src/components/Menu/MenuDivider.tsx

@@ -2,12 +2,8 @@ import { ReactElement } from 'react';
 
 import { Divider as MuiDivider } from '@mui/material';
 
-import { useStyles } from './Menu.styles';
-
 const MenuDivider = (): ReactElement => {
-  const { classes } = useStyles();
-
-  return <MuiDivider className={classes.menuDivider} />;
+  return <MuiDivider />;
 };
 
 export { MenuDivider };

package/src/components/Menu/MenuItem.tsx

@@ -2,8 +2,6 @@ import { ReactElement, ReactNode } from 'react';
 
 import { MenuItem as MuiMenuItem } from '@mui/material';
 
-import { useStyles } from './Menu.styles';
-
 type MenuItemProps = {
   children?: ReactNode;
   className?: string;
@@ -19,11 +17,9 @@ const MenuItem = ({
   isDisabled = false,
   className
 }: MenuItemProps): ReactElement => {
-  const { cx, classes } = useStyles();
-
   return (
     <MuiMenuItem
-      className={cx(classes.menuItem, className)}
+      className={className}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}

package/src/components/Menu/MenuItems.tsx

@@ -2,7 +2,6 @@ import { ReactElement, ReactNode } from 'react';
 
 import { Menu as MuiMenu } from '@mui/material';
 
-import { useStyles } from './Menu.styles';
 import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
@@ -10,8 +9,6 @@ type MenuItemsProps = {
   className?: string;
 };
 const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
-  const { cx, classes } = useStyles();
-
   const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
 
   const onCloseMenu = (): void => {
@@ -22,7 +19,11 @@ const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={cx(classes.menuItems, className)}
+      className={className}
+      classes={{
+        paper:
+          'rounded-sm shadow-lg min-w-[240px] bg-background-paper border-1 border-divider'
+      }}
       open={isMenuOpen}
       variant="menu"
       onClick={onCloseMenu}

package/src/components/Modal/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -4,6 +4,7 @@ import { Provider, atom, createStore, useSetAtom } from 'jotai';
 import { Button } from '../../Button';
 
 import { ConfirmationModal } from './ConfirmationModal';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof ConfirmationModal> = {
   component: ConfirmationModal

package/src/components/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -19,6 +19,7 @@ export interface ConfirmationModalProps<TAtom> {
   onCancel?: (atomData: Awaited<TAtom> | null) => void;
   onClose?: (atomData: Awaited<TAtom> | null) => void;
   onConfirm?: (atomData: Awaited<TAtom> | null) => void;
+  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
 }
 
 interface GetLabelProps<TAtom> {
@@ -39,7 +40,8 @@ export const ConfirmationModal = <TAtom,>({
   onClose,
   hasCloseButton = true,
   isDanger,
-  disabled
+  disabled,
+  size
 }: ConfirmationModalProps<TAtom>): JSX.Element => {
   const [atomData, setAtomData] = useAtom<TAtom | null>(atom);
 
@@ -72,6 +74,7 @@ export const ConfirmationModal = <TAtom,>({
       hasCloseButton={hasCloseButton}
       open={Boolean(atomData)}
       onClose={closeModal}
+      size={size}
     >
       <Modal.Header>{formattedLabels.title}</Modal.Header>
       <Modal.Body>{formattedLabels.description}</Modal.Body>

package/src/components/Modal/Modal.stories.tsx

@@ -3,6 +3,8 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../Button';
 
 import { Modal } from '.';
+import '../../ThemeProvider/tailwindcss.css';
+import { basicFormWithCollapsibleGroups } from '../../Form/Form.stories';
 
 const meta: Meta<typeof Modal> = {
   argTypes: {
@@ -44,6 +46,25 @@ export const Default: Story = {
   )
 };
 
+export const WithForm: Story = {
+  args: {
+    ...Default.args
+  },
+
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>{basicFormWithCollapsibleGroups()}</Modal.Body>
+      <Modal.Actions
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};
+
 export const AsDangerAction: Story = {
   args: {
     ...Default.args

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 {
@@ -133,6 +136,7 @@ export {
 } from './api/useGraphQuery';
 export { WidgetResourceType as ResourceType } from './api/useGraphQuery/models';
 export { default as QueryProvider, client } from './api/QueryProvider';
+export { default as useBulkResponse } from './api/useBulkResponse';
 export {
   default as FileDropZone,
   transformFileListToArray

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;
+};