@centreon/ui 23.10.25-feature-MON-19319.0 → 23.10.25

package/src/ThemeProvider/palettes.ts

@@ -1,234 +1,208 @@
-import { equals } from 'ramda';
-
-import { alpha, PaletteOptions } from '@mui/material';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-declare module '@mui/material/styles/createPalette' {
-  interface TypeAction {
-    acknowledged: string;
-    acknowledgedBackground: string;
-    inDowntime: string;
-    inDowntimeBackground: string;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface Palette {
-    background: {
-      default: string;
-      listingHeader: string;
-      panelGroups: string;
-      paper: string;
-    };
-    pending: {
-      contrastText: string;
-      main: string;
-    };
-    statusBackground: StatusBackground;
-  }
-  interface StatusBackground {
-    error: string;
-    none: string;
-    pending: string;
-    success: string;
-    unknown: string;
-    warning: string;
-  }
-  interface PaletteOptions {
-    pending: {
-      contrastText: string;
-      main: string;
-    };
-    statusBackground: StatusBackground;
-  }
-
-  interface TypeBackground {
-    listingHeader: string;
-    panel: string;
-    panelGroups: string;
-  }
-}
-
-declare module '@mui/material/Button' {
-  interface ButtonPropsColorOverrides {
-    pending: true;
-  }
-}
-
-declare module '@mui/material/Badge' {
-  interface BadgePropsColorOverrides {
-    pending: true;
-  }
-}
-
-export const lightPalette: PaletteOptions = {
-  action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#F5F1E9',
-    activatedOpacity: 0.12,
-    active: '#666666',
-    disabled: '#999999',
-    disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    focus: 'rgba(0, 0, 0, 0.12)',
-    focusOpacity: 0.12,
-    hover: 'rgba(0, 0, 0, 0.06)',
-    hoverOpacity: 0.06,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#F0E9F8',
-    selected: 'rgba(102, 102, 102, 0.3)',
-    selectedOpacity: 0.3
-  },
-  background: {
-    default: '#F4F4F4',
-    listingHeader: '#666666',
-    panel: '#EDEDED',
-    panelGroups: '#F5F5F5',
-    paper: '#FFFFFF'
-  },
-  divider: '#E3E3E3',
-  error: {
-    contrastText: '#000',
-    main: '#FF4A4A'
-  },
-  info: {
-    contrastText: '#000',
-    main: '#1588D1'
-  },
-  mode: ThemeMode.light,
-  pending: {
-    contrastText: '#000',
-    main: '#1EBEB3'
-  },
-  primary: {
-    contrastText: '#fff',
-    dark: '#255891',
-    light: '#cde7fc',
-    main: '#2E68AA'
-  },
-  secondary: {
-    contrastText: '#fff',
-    main: '#C772D6'
-  },
-  statusBackground: {
-    error: '#FF6666',
-    none: alpha('#2E68AA', 0.1),
-    pending: '#1EBEB3',
-    success: '#88B922',
-    unknown: '#E3E3E3',
-    warning: '#FD9B27'
-  },
-  success: {
-    contrastText: '#000',
-    main: '#88B922'
-  },
-  text: {
-    disabled: '#999999',
-    primary: '#000000',
-    secondary: '#666666'
-  },
-  warning: {
-    contrastText: '#000',
-    main: '#FD9B27'
-  }
-};
-
-export const darkPalette: PaletteOptions = {
-  action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#67532C',
-    activatedOpacity: 0.3,
-    active: '#B5B5B5',
-    disabled: '#999999',
-    disabledBackground: '#555555',
-    focus: 'rgba(255, 255, 255, 0.30)',
-    focusOpacity: 0.3,
-    hover: 'rgba(255, 255, 255, 0.16)',
-    hoverOpacity: 0.16,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#4B2352',
-    selected: 'rgba(255, 255, 255, 0.5)',
-    selectedOpacity: 0.5
-  },
-  background: {
-    default: '#4a4a4a',
-    listingHeader: '#666666',
-    panel: '#4a4a4a',
-    panelGroups: '#252525',
-    paper: '#212121'
-  },
-  divider: '#666666',
-  error: {
-    contrastText: '#fff',
-    main: '#D60101'
-  },
-  header: {
-    page: {
-      action: {
-        background: {
-          active: '#1975D10F',
-          default: '#FFFFFF00'
-        },
-        color: {
-          active: '#1976D2',
-          default: '#696969'
-        }
-      },
-      border: '#bdbdbd',
-      description: '#bdbdbd',
-      title: '#fff'
-    }
-  },
-  info: {
-    contrastText: '#fff',
-    main: '#1CA9F4'
-  },
-  layout: {
-    body: {
-      background: '#F6F6F6'
-    },
-    header: {
-      background: '#FFFFFF',
-      border: '#E3E3E3'
-    }
-  },
-  mode: ThemeMode.dark,
-  pending: {
-    contrastText: '#fff',
-    main: '#118077'
-  },
-  primary: {
-    contrastText: '#000',
-    dark: '#4974A5',
-    light: '#8bbff9',
-    main: '#6eaff8'
-  },
-  secondary: {
-    contrastText: '#fff',
-    main: '#7C1FA2'
-  },
-  statusBackground: {
-    error: '#D60101',
-    none: alpha('#2E68AA', 0.1),
-    pending: '#118077',
-    success: '#5F8118',
-    unknown: '#666666',
-    warning: '#C55400'
-  },
-  success: {
-    contrastText: '#fff',
-    main: '#5F8118'
-  },
-  text: {
-    disabled: '#666666',
-    primary: '#FFFFFF',
-    secondary: '#CCCCCC'
-  },
-  warning: {
-    contrastText: '#fff',
-    main: '#C55400'
-  }
-};
-
-export const getPalette = (mode: ThemeMode): PaletteOptions =>
-  equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;
+import { equals } from 'ramda';
+
+import { alpha, PaletteOptions } from '@mui/material';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+declare module '@mui/material/styles/createPalette' {
+  interface TypeAction {
+    acknowledged: string;
+    acknowledgedBackground: string;
+    inDowntime: string;
+    inDowntimeBackground: string;
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    background: {
+      default: string;
+      listingHeader: string;
+      panelGroups: string;
+      paper: string;
+    };
+    pending: {
+      contrastText: string;
+      main: string;
+    };
+    statusBackground: StatusBackground;
+  }
+  interface StatusBackground {
+    error: string;
+    none: string;
+    pending: string;
+    success: string;
+    unknown: string;
+    warning: string;
+  }
+  interface PaletteOptions {
+    pending: {
+      contrastText: string;
+      main: string;
+    };
+    statusBackground: StatusBackground;
+  }
+
+  interface TypeBackground {
+    listingHeader: string;
+    panel: string;
+    panelGroups: string;
+  }
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    pending: true;
+  }
+}
+
+declare module '@mui/material/Badge' {
+  interface BadgePropsColorOverrides {
+    pending: true;
+  }
+}
+
+export const lightPalette: PaletteOptions = {
+  action: {
+    acknowledged: '#67532C',
+    acknowledgedBackground: '#F5F1E9',
+    activatedOpacity: 0.12,
+    active: '#666666',
+    disabled: '#999999',
+    disabledBackground: 'rgba(0, 0, 0, 0.12)',
+    focus: 'rgba(0, 0, 0, 0.12)',
+    focusOpacity: 0.12,
+    hover: 'rgba(0, 0, 0, 0.06)',
+    hoverOpacity: 0.06,
+    inDowntime: '#4B2352',
+    inDowntimeBackground: '#F0E9F8',
+    selected: 'rgba(102, 102, 102, 0.3)',
+    selectedOpacity: 0.3
+  },
+  background: {
+    default: '#F4F4F4',
+    listingHeader: '#666666',
+    panel: '#EDEDED',
+    panelGroups: '#F5F5F5',
+    paper: '#FFFFFF'
+  },
+  divider: '#E3E3E3',
+  error: {
+    contrastText: '#000',
+    main: '#FF4A4A'
+  },
+  info: {
+    contrastText: '#000',
+    main: '#1588D1'
+  },
+  mode: ThemeMode.light,
+  pending: {
+    contrastText: '#000',
+    main: '#1EBEB3'
+  },
+  primary: {
+    contrastText: '#fff',
+    dark: '#255891',
+    light: '#cde7fc',
+    main: '#2E68AA'
+  },
+  secondary: {
+    contrastText: '#fff',
+    main: '#C772D6'
+  },
+  statusBackground: {
+    error: '#FF6666',
+    none: alpha('#2E68AA', 0.1),
+    pending: '#1EBEB3',
+    success: '#88B922',
+    unknown: '#E3E3E3',
+    warning: '#FD9B27'
+  },
+  success: {
+    contrastText: '#000',
+    main: '#88B922'
+  },
+  text: {
+    disabled: '#999999',
+    primary: '#000000',
+    secondary: '#666666'
+  },
+  warning: {
+    contrastText: '#000',
+    main: '#FD9B27'
+  }
+};
+
+export const darkPalette: PaletteOptions = {
+  action: {
+    acknowledged: '#67532C',
+    acknowledgedBackground: '#67532C',
+    activatedOpacity: 0.3,
+    active: '#B5B5B5',
+    disabled: '#999999',
+    disabledBackground: '#555555',
+    focus: 'rgba(255, 255, 255, 0.30)',
+    focusOpacity: 0.3,
+    hover: 'rgba(255, 255, 255, 0.16)',
+    hoverOpacity: 0.16,
+    inDowntime: '#4B2352',
+    inDowntimeBackground: '#4B2352',
+    selected: 'rgba(255, 255, 255, 0.5)',
+    selectedOpacity: 0.5
+  },
+  background: {
+    default: '#4a4a4a',
+    listingHeader: '#666666',
+    panel: '#4a4a4a',
+    panelGroups: '#252525',
+    paper: '#212121'
+  },
+  divider: '#666666',
+  error: {
+    contrastText: '#fff',
+    main: '#D60101'
+  },
+  info: {
+    contrastText: '#fff',
+    main: '#1CA9F4'
+  },
+  mode: ThemeMode.dark,
+  pending: {
+    contrastText: '#fff',
+    main: '#118077'
+  },
+  primary: {
+    contrastText: '#000',
+    dark: '#4974A5',
+    light: '#8bbff9',
+    main: '#6eaff8'
+  },
+  secondary: {
+    contrastText: '#fff',
+    main: '#7C1FA2'
+  },
+  statusBackground: {
+    error: '#D60101',
+    none: alpha('#2E68AA', 0.1),
+    pending: '#118077',
+    success: '#5F8118',
+    unknown: '#666666',
+    warning: '#C55400'
+  },
+  success: {
+    contrastText: '#fff',
+    main: '#5F8118'
+  },
+  text: {
+    disabled: '#666666',
+    primary: '#FFFFFF',
+    secondary: '#CCCCCC'
+  },
+  warning: {
+    contrastText: '#fff',
+    main: '#C55400'
+  }
+};
+
+export const getPalette = (mode: ThemeMode): PaletteOptions =>
+  equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;

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

@@ -3,13 +3,8 @@ import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()((theme) => ({
   button: {
     '&[data-size="small"]': {
-      '&[data-variant="primary"], &[data-variant="secondary"]': {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
-      },
-      fontSize: '14px',
-      height: 'unset',
-      lineHeight: '22px'
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2)
     },
 
     '&[data-variant="primary"]:not(:disabled)': {

package/src/components/Button/Button.tsx

@@ -64,8 +64,8 @@ const Button = ({
       type={type}
       variant={muiVariantMap[variant]}
       onClick={(e) => onClick?.(e)}
-      {...attr}
       {...MuiOverrideProps}
+      {...attr}
     >
       {children}
     </MuiButton>

package/src/components/Form/Dashboard/Dashboard.resource.ts

@@ -1,4 +1,4 @@
 export type DashboardResource = {
-  description?: string;
+  description?: string | null;
   name: string;
 };

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -11,7 +11,8 @@ import { useStyles } from './DashboardForm.styles';
 import {
   labelMustBeAtLeast,
   labelMustBeMost,
-  labelRequired
+  labelRequired,
+  labelCharacters
 } from './translatedLabels';
 import {
   DashboardFormActions,
@@ -43,7 +44,7 @@ const DashboardForm = ({
 
   const formProps = useMemo<FormProps<DashboardResource>>(
     () => ({
-      initialValues: resource ?? { name: '' },
+      initialValues: resource ?? { description: null, name: '' },
       inputs: [
         {
           fieldName: 'name',
@@ -55,7 +56,7 @@ const DashboardForm = ({
         {
           fieldName: 'description',
           group: 'main',
-          label: labels?.entity?.description,
+          label: labels?.entity?.description || '',
           text: {
             multilineRows: 3
           },
@@ -65,9 +66,12 @@ const DashboardForm = ({
       submit: (values, bag) => onSubmit?.(values, bag),
       validationSchema: Yup.object().shape({
         description: Yup.string()
-          .label(labels?.entity?.description)
-          .max(180, ({ max, label }) => t(labelMustBeMost, { label, max }))
-          .optional()
+          .label(labels?.entity?.description || '')
+          .max(
+            180,
+            (p) =>
+              `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
+          )
           .nullable(),
         name: Yup.string()
           .label(labels?.entity?.name)

package/src/components/Form/Dashboard/translatedLabels.ts

@@ -3,3 +3,4 @@ export const labelMustBeMost = '{{label}} can be at most {{max}} characters';
 export const labelMustBeAtLeast =
   '{{label}} should be at least {{min}} characters long';
 export const labelRequired = 'Required';
+export const labelCharacters = 'characters';

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Settings as SettingsIcon } from '@mui/icons-material';
+
+import { IconButton } from '../Button';
+
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  component: Header
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {
+    title: 'Header'
+  }
+};
+
+export const WithNav: Story = {
+  args: {
+    nav: <IconButton icon={<SettingsIcon />} size="small" variant="ghost" />,
+    title: 'Header with nav'
+  }
+};

package/src/components/Header/Header.styles.ts

@@ -0,0 +1,27 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  header: {
+    alignItems: 'flex-start',
+    borderBottom: `1px solid ${theme.palette.primary.main}`,
+    display: 'flex',
+    flexDirection: 'row',
+    h1: {
+      font: 'normal normal 600 24px/24px Roboto',
+      letterSpacing: '0.18px',
+      margin: theme.spacing(0, 0, 1.5, 0)
+    },
+    justifyContent: 'space-between',
+    marginBottom: theme.spacing(2.5),
+
+    nav: {
+      display: 'flex',
+      gap: theme.spacing(1),
+      justifyContent: 'flex-end'
+    },
+
+    padding: theme.spacing(0, 0, 1.5, 0)
+  }
+}));
+
+export { useStyles };

package/src/components/Header/Header.tsx

@@ -0,0 +1,23 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { Typography as MuiTypography } from '@mui/material';
+
+import { useStyles } from './Header.styles';
+
+type HeaderProps = {
+  nav?: ReactNode;
+  title: string;
+};
+
+const Header = ({ title, nav }: HeaderProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <header className={classes.header}>
+      <MuiTypography variant="h1">{title}</MuiTypography>
+      {nav && <nav>{nav}</nav>}
+    </header>
+  );
+};
+
+export { Header };

package/src/components/Header/index.ts

@@ -1 +1 @@
-export * from './PageHeader';
+export * from './Header';

package/src/components/index.ts

@@ -3,5 +3,3 @@ export * from './Modal';
 export * from './Form';
 export * from './Header';
 export * from './DataTable';
-export * from './Layout';
-export * from './Tooltip';

package/src/index.ts

@@ -140,6 +140,8 @@ export { default as ActionsList } from './ActionsList';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
 
+export * from './layout/TiledListingPage';
+
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
 export * from './Dashboard';

package/src/layout/TiledListingPage/TiledListingActions.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+import { useTiledListingActionsStyles } from './TiledListingPage.styles';
+
+interface TiledListingActionsProps {
+  children: Array<ReactNode> | ReactNode;
+}
+
+export const TiledListingActions = ({
+  children
+}: TiledListingActionsProps): JSX.Element => {
+  const { classes } = useTiledListingActionsStyles();
+
+  return <div className={classes.actions}>{children}</div>;
+};

package/src/layout/TiledListingPage/TiledListingContent.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import Responsive from '../../Responsive';
+
+import { useTiledListingActionsStyles } from './TiledListingPage.styles';
+
+interface TiledListingContentProps {
+  children: ReactNode;
+}
+
+export const TiledListingContent = ({
+  children
+}: TiledListingContentProps): JSX.Element => {
+  const { classes } = useTiledListingActionsStyles();
+
+  return (
+    <Responsive>
+      <div className={classes.actions}>{children}</div>
+    </Responsive>
+  );
+};

package/src/layout/TiledListingPage/TiledListingList.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+interface TiledListingListProps {
+  children: Array<ReactNode>;
+}
+
+export const TiledListingList = ({
+  children
+}: TiledListingListProps): JSX.Element => {
+  return <div>{children}</div>;
+};