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

package/src/components/Button/Button.tsx

@@ -7,8 +7,7 @@ import {
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { DataTestAttributes } from '../../@types/data-attributes';
-
-import { useStyles } from './Button.styles';
+import { button } from './Button.module.css';
 
 const muiVariantMap: Record<
   Required<ButtonProps>['variant'],
@@ -48,8 +47,6 @@ const Button = ({
   className = '',
   ...attr
 }: ButtonProps): ReactElement => {
-  const { classes, cx } = useStyles();
-
   const MuiOverrideProps = useMemo(
     () => ({
       color: 'primary' as const,
@@ -61,7 +58,7 @@ const Button = ({
 
   return (
     <MuiButton
-      className={cx(classes.button, className)}
+      className={`${button} ${className}`}
       data-icon-variant={iconVariant}
       data-is-danger={isDanger}
       data-size={size}

package/src/components/CrudPage/CrudPage.stories.tsx

@@ -7,6 +7,7 @@ import { ChangeEvent, useEffect } from 'react';
 import { CrudPage } from '.';
 import { SnackbarProvider } from '../../';
 import { Column, ColumnType } from '../../Listing/models';
+import '../../ThemeProvider/tailwindcss.css';
 
 interface Item {
   id: number;

package/src/components/CrudPage/CrudPageRoot.tsx

@@ -97,7 +97,7 @@ export const CrudPageRoot = <
             {isDataEmpty && !isLoading ? (
               <DataTable.EmptyState
                 aria-label="create"
-                data-testid="create-agent-configuration"
+                buttonCreateTestId="create-crudpage"
                 labels={{
                   title: labels.welcome.title,
                   description: labels.welcome.description,

package/src/components/DataTable/DataTable.stories.tsx

@@ -5,6 +5,7 @@ import { Box } from '@mui/material';
 import { ColumnType } from '../../Listing/models';
 
 import { DataTable } from './index';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTable> = {
   component: DataTable

package/src/components/DataTable/EmptyState/DataTableEmptyState.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableEmptyState } from './DataTableEmptyState';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTableEmptyState> = {
   component: DataTableEmptyState

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -6,6 +6,7 @@ const useStyles = makeStyles()((theme) => ({
     flexDirection: 'row'
   },
   dataTableEmptyState: {
+    marginTop: theme.spacing(3),
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
@@ -21,7 +22,8 @@ const useStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   description: {
-    maxWidth: '65%'
+    maxWidth: '65%',
+    textAlign: 'center'
   }
 }));
 

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -19,12 +19,14 @@ type ListEmptyStateProps = {
     description?: string;
   };
   onCreate?: () => void;
+  buttonCreateTestId?: string;
 };
 
 const DataTableEmptyState = ({
   labels,
   onCreate,
-  canCreate = true
+  canCreate = true,
+  buttonCreateTestId
 }: ListEmptyStateProps): ReactElement => {
   const { classes } = useStyles();
   const { t } = useTranslation();
@@ -47,6 +49,7 @@ const DataTableEmptyState = ({
             icon={<AddIcon />}
             iconVariant="start"
             onClick={() => onCreate?.()}
+            data-testid={buttonCreateTestId}
           >
             {t(labels.actions?.create || '')}
           </Button>

package/src/components/DataTable/Item/DataTableItem.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableItem } from './DataTableItem';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTableItem> = {
   component: DataTableItem

package/src/components/Form/AccessRights/AccessRights.stories.tsx

@@ -12,6 +12,7 @@ import {
   labels,
   roles
 } from './storiesData';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof AccessRights> = {
   component: AccessRights,

package/src/components/Form/AccessRights/ShareInput/ShareInput.tsx

@@ -8,6 +8,7 @@ import { SelectEntry, SingleConnectedAutocompleteField } from '../../../..';
 import RoleSelectField from '../common/RoleSelectField';
 import { Endpoints, Labels } from '../models';
 
+import { ReactElement } from 'react';
 import ContactSwitch from './ContactSwitch';
 import { useShareInputStyles } from './ShareInput.styles';
 import useShareInput from './useShareInput';
@@ -18,18 +19,18 @@ interface Props {
   roles: Array<SelectEntry>;
 }
 
-const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
+const ShareInput = ({ labels, endpoints, roles }: Props): ReactElement => {
   const { t } = useTranslation();
   const { classes } = useShareInputStyles();
 
   const {
-    renderOption,
     selectedContact,
     getOptionDisabled,
     getEndpoint,
     selectContact,
     isContactGroup,
     selectedRole,
+    getRenderedOptionText,
     setSelectedRole,
     add,
     changeIdValue
@@ -46,6 +47,7 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
           disableClearable={false}
           field="name"
           getEndpoint={getEndpoint}
+          getRenderedOptionText={getRenderedOptionText}
           getOptionDisabled={getOptionDisabled}
           label={t(
             isContactGroup
@@ -53,7 +55,6 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
               : t(labels.autocompleteContact)
           )}
           queryKey={isContactGroup ? labels.contactGroup : labels.contact}
-          renderOption={renderOption}
           value={selectedContact}
           onChange={selectContact}
         />

package/src/components/Form/AccessRights/ShareInput/useShareInput.tsx

@@ -1,10 +1,15 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import {
+  Dispatch,
+  ReactElement,
+  SetStateAction,
+  useEffect,
+  useState
+} from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 import { equals, includes, isNil } from 'ramda';
 
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { ListItemText, MenuItem } from '@mui/material';
 
 import { SelectEntry, buildListingEndpoint } from '../../../..';
 import {
@@ -20,7 +25,7 @@ interface UseShareInputState {
   getEndpoint: (parameters) => string;
   getOptionDisabled: (option) => boolean;
   isContactGroup: boolean;
-  renderOption: (attr, option) => JSX.Element;
+  getRenderedOptionText: (option: unknown) => ReactElement | string;
   selectContact: (_, entry) => void;
   selectedContact: AccessRightInitialValues | null;
   selectedRole: string;
@@ -40,7 +45,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
-    if (equals('editor', entry.most_permissive_role)) {
+    if (equals('editor', entry?.most_permissive_role)) {
       return;
     }
     setSelectedRole('viewer');
@@ -71,14 +76,14 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
       }
     });
 
-  const renderOption = (attr, option): JSX.Element => {
+  const getRenderedOptionText = (option): ReactElement => {
     return (
-      <MenuItem {...attr}>
-        <ListItemText>{option.name}</ListItemText>
-        {includes(option.id, accessRightIds) && (
+      <>
+        {option?.name}
+        {includes(option?.id, accessRightIds) && (
           <CheckCircleIcon color="success" />
         )}
-      </MenuItem>
+      </>
     );
   };
 
@@ -102,7 +107,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
     getEndpoint,
     getOptionDisabled,
     isContactGroup,
-    renderOption,
+    getRenderedOptionText,
     selectContact,
     selectedContact,
     selectedRole,

package/src/components/Form/FormActions.tsx

@@ -12,6 +12,8 @@ export type FormActionsProps = {
   labels: FormActionsLabels;
   onCancel: () => void;
   variant: FormVariant;
+  isCancelButtonVisible?: boolean;
+  disableSubmit?: boolean;
 };
 
 export type FormActionsLabels = {
@@ -23,27 +25,34 @@ const FormActions = <TResource extends object>({
   labels,
   onCancel,
   variant,
-  enableSubmitWhenNotDirty
+  enableSubmitWhenNotDirty,
+  isCancelButtonVisible = true,
+  disableSubmit = false
 }: FormActionsProps): ReactElement => {
   const { classes } = useStyles();
   const { isSubmitting, dirty, isValid, submitForm } =
     useFormikContext<TResource>();
 
   const isSubmitDisabled =
-    isSubmitting || (!dirty && !enableSubmitWhenNotDirty) || !isValid;
+    disableSubmit ||
+    isSubmitting ||
+    (!dirty && !enableSubmitWhenNotDirty) ||
+    !isValid;
 
   return (
     <div className={classes.actions}>
-      <Button
-        aria-label={labels.cancel}
-        data-testid="cancel"
-        disabled={isSubmitting}
-        size="medium"
-        variant="secondary"
-        onClick={() => onCancel?.()}
-      >
-        {labels.cancel}
-      </Button>
+      {isCancelButtonVisible && (
+        <Button
+          aria-label={labels.cancel}
+          data-testid="cancel"
+          disabled={isSubmitting}
+          size="medium"
+          variant="secondary"
+          onClick={() => onCancel?.()}
+        >
+          {labels.cancel}
+        </Button>
+      )}
       <Button
         aria-label={labels.submit[variant]}
         data-testid="submit"

package/src/components/Layout/AreaIndicator.tsx

@@ -1,7 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { useStyles } from './AreaIndicator.styles';
-
 type AreaIndicatorProps = {
   children?: ReactNode | Array<ReactNode>;
   depth?: number;
@@ -17,16 +15,16 @@ const AreaIndicator = ({
   height = '100%',
   depth = 0
 }: AreaIndicatorProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
     <div
-      className={classes.areaIndicator}
+      className={'bg-secondary-main/25 min-h-8 grid grid-cols-[3fr_1fr]'}
       data-depth={depth}
       style={{ height, width }}
     >
       {/* biome-ignore lint/a11y: */}
-      <label>{name}</label>
+      <label className="left-2 rounded-sm border border-[#9747FF7F] border-dashed text-[#9747FF] text-[0.75rem] font-medium left-2 top-1.5 px-2 py-0.5">
+        {name}
+      </label>
       {children}
     </div>
   );

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.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