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

package/src/ThemeProvider/index.tsx

@@ -1,11 +1,12 @@
 import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
+import { equals, mergeDeepRight } from 'ramda';
 import { CSSInterpolation } from 'tss-react';
 
 import {
   ButtonProps,
   InputBaseProps,
   ThemeProvider as MuiThemeProvider,
+  PaletteOptions,
   StyledEngineProvider,
   Theme,
   createTheme
@@ -21,6 +22,7 @@ import RobotoLightWoff2 from '../fonts/roboto-light-webfont.woff2';
 import RobotoMediumWoff2 from '../fonts/roboto-medium-webfont.woff2';
 import RobotoRegularWoff2 from '../fonts/roboto-regular-webfont.woff2';
 
+import { GlobalStyles } from '@mui/system';
 import { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
@@ -146,46 +148,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        ::-webkit-scrollbar {
-          height: ${theme.spacing(1)};
-          width: ${theme.spacing(1)};
-          background-color: transparent;
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          };
-          border-radius: ${theme.spacing(0.5)};
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background-color: ${theme.palette.primary.main};
-        }
-        * {
-          scrollbar-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          } ${theme.palette.background.default};
-          scrollbar-width: thin;
-        }
-        html {
-          margin: 0;
-          padding: 0;
-          width: 100%;
-          height: 100%;
-          text-rendering: optimizeLegibility;
-        }
-        body {
-          background-color: ${theme.palette.background.paper};
-          height: 100%;
-          padding: 0;
-          width: 100%;
-        }
-        #root {
-          background-color: ${theme.palette.background.paper};
-        }
         @font-face {
           font-family: 'Roboto';
           font-style: normal;
@@ -210,6 +172,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           font-weight: 700;
           src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
         }
+        body {
+          background-color: ${theme.palette.background.paper};
+        }
       `
     },
     MuiInputBase: {
@@ -293,18 +258,27 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
 
 interface Props {
   children: ReactNode;
+  overrideTheme?: {
+    light: Partial<PaletteOptions>;
+    dark: Partial<PaletteOptions>;
+  };
 }
 
-const ThemeProvider = ({ children }: Props): JSX.Element => {
+const ThemeProvider = ({ children, overrideTheme }: Props): JSX.Element => {
   const { themeMode } = useAtomValue(userAtom);
 
-  const theme = useMemo(
-    () => createTheme(getTheme(themeMode || ThemeMode.light)),
-    [themeMode]
-  );
+  const theme = useMemo(() => {
+    const overrideThemeByMode = overrideTheme?.[themeMode || 'light'];
+    return createTheme(
+      mergeDeepRight(getTheme(themeMode || ThemeMode.light), {
+        palette: overrideThemeByMode || {}
+      })
+    );
+  }, [themeMode, overrideTheme]);
 
   return (
-    <StyledEngineProvider injectFirst>
+    <StyledEngineProvider injectFirst enableCssLayer>
+      <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
         {children}

package/src/ThemeProvider/palettes.ts

@@ -211,7 +211,7 @@ export const lightPalette: PaletteOptions = {
           default: '#696969'
         }
       },
-      border: '#4A4A4A',
+      border: '#EDEDED',
       description: '#4A4A4A',
       title: '#000000'
     }
@@ -295,7 +295,9 @@ export const lightPalette: PaletteOptions = {
   },
   warning: {
     contrastText: '#000',
-    main: '#FD9B27'
+    main: '#FD9B27',
+    light: '#FCC481',
+    dark: '#FC7E00'
   }
 };
 
@@ -353,7 +355,7 @@ export const darkPalette: PaletteOptions = {
           default: '#696969'
         }
       },
-      border: '#bdbdbd',
+      border: '#666666',
       description: '#bdbdbd',
       title: '#fff'
     }

package/src/ThemeProvider/tailwindcss.css

@@ -0,0 +1,230 @@
+@import "tailwindcss";
+@import "./base.css"; /* Base styles: scrollbar, html, body, #root */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Typography */
+  --font-body: Roboto, Arial, serif;
+
+  /* Spacing system */
+  --spacing: 4px;
+
+  --spacing-0: calc(var(--spacing) * 0);
+  --spacing-1: calc(var(--spacing) * 1);
+  --spacing-2: calc(var(--spacing) * 2);
+  --spacing-3: calc(var(--spacing) * 3);
+  --spacing-4: calc(var(--spacing) * 4);
+  --spacing-5: calc(var(--spacing) * 5);
+  --spacing-6: calc(var(--spacing) * 6);
+  --spacing-7: calc(var(--spacing) * 7);
+  --spacing-8: calc(var(--spacing) * 8);
+  --spacing-9: calc(var(--spacing) * 9);
+  --spacing-10: calc(var(--spacing) * 10);
+
+  /* =============
+     COLOR SYSTEM
+     ============= */
+
+  /* Action colors */
+  --color-action-acknowledged: #745f35;
+  --color-action-acknowledged-background: #dfd2b9;
+  --color-action-in-flapping: #064a3f;
+  --color-action-in-flapping-background: #d8f3ef;
+  --color-action-activated-opacity: 0.12;
+  --color-action-active: #666666;
+  --color-action-disabled: #999999;
+  --color-action-disabled-background: rgba(0, 0, 0, 0.12);
+  --color-action-focus: #dadada;
+  --color-action-focus-opacity: 0.12;
+  --color-action-hover: rgba(0, 0, 0, 0.06);
+  --color-action-hover-opacity: 0.06;
+  --color-action-in-downtime: #512980;
+  --color-action-in-downtime-background: #e5d8f3;
+  --color-action-selected: rgba(102, 102, 102, 0.3);
+  --color-action-selected-opacity: 0.3;
+
+  /* Background colors */
+  --color-background-default: #f4f4f4;
+  --color-background-listing-header: #666666;
+  --color-background-panel: #ededed;
+  --color-background-panel-groups: #f5f5f5;
+  --color-background-paper: #ffffff;
+  --color-background-tooltip: #434e58;
+  --color-background-widget: #f8f8f8;
+
+  /* Chip colors */
+  --color-chip-error: #ff6666;
+  --color-chip-info: #1588d1;
+  --color-chip-neutral: #6da4e4;
+  --color-chip-success: #88b922;
+  --color-chip-warning: #fd9b27;
+
+  /* Utility colors */
+  --color-divider: #e3e3e3;
+  --color-error-main: #ff4a4a;
+
+  /* Header colors */
+  --color-header-page-action-background-active: #1975d10f;
+  --color-header-page-action-background-default: #ffffff00;
+  --color-header-page-action-color-active: #1976d2;
+  --color-header-page-action-color-default: #696969;
+  --color-header-page-border: #ededed;
+  --color-header-page-description: #4a4a4a;
+  --color-header-page-title: #000000;
+  --color-header-info-main: #1588d1;
+  --color-header-layout-body-background: #f6f6f6;
+  --color-header-layout-header-background: #ffffff;
+  --color-header-layout-header-border: #e3e3e3;
+  --color-header-menu-background: #ffffff;
+  --color-header-menu-button-background-active: #ecf4fd;
+  --color-header-menu-button-background-default: transparent;
+  --color-header-menu-button-background-hover: #d2e4f9;
+  --color-header-menu-button-color-active: #3e85d5;
+  --color-header-menu-button-color-default: #8c98a6;
+  --color-header-menu-button-color-hover: #6f7b8a;
+  --color-header-menu-divider-border: #cad0d8;
+  --color-header-menu-item-background-active: #ecf4fd;
+  --color-header-menu-item-background-default: transparent;
+  --color-header-menu-item-background-hover: #eaedf0;
+  --color-header-menu-item-color-active: #3e85d5;
+  --color-header-menu-item-color-default: #1b2127;
+  --color-header-menu-item-color-hover: #101418;
+
+  /* State colors */
+  --color-pending-main: #1ebeb3;
+
+  /* Primary & Secondary colors */
+  --color-primary-main: #2e68aa;
+  --color-primary-light: #cde7fc;
+  --color-primary-dark: #255891;
+  --color-secondary-main: #c772d6;
+  --color-secondary-light: #e5a5f0;
+  --color-secondary-dark: #ac28c1;
+
+  /* Status colors */
+  --color-status-background-error: #ff6666;
+  --color-status-background-none: --alpha(#2e68aa / 10%);
+  --color-status-background-pending: #1ebeb3;
+  --color-status-background-success: #88b922;
+  --color-stauts-background-unknown: #e3e3e3;
+  --color-status-background-warning: #fd9b27;
+  --color-success-main: #88b922;
+
+  /* Text colors */
+  --color-text-disabled: #999999;
+  --color-text-primary: #000000;
+  --color-text-secondary: #666666;
+  --color-warning-main: #fd9b27;
+  --color-warning-light: #fcc481;
+  --color-warning-dark: #fc7e00;
+
+  /* Base colors */
+  --color-white: #ffffff;
+  --color-black: #000000;
+}
+
+@layer base {
+  @variant dark {
+    --color-action-acknowledged: #dfd2b9;
+    --color-action-acknowledged-background: #745f35;
+    --color-action-in-flapping: #d8f3ef;
+    --color-action-in-flapping-background: #064a3f;
+    --color-action-activated-opacity: 0.3;
+    --color-action-active: #b5b5b5;
+    --color-action-disabled: #999999;
+    --color-action-disabled-background: rgba(0, 0, 0, 0.12);
+    --color-action-focus: #6d6d6d;
+    --color-action-focus-opacity: 0.3;
+    --color-action-hover: rgba(255, 255, 255, 0.16);
+    --color-action-hover-opacity: 0.16;
+    --color-action-in-downtime: #e5d8f3;
+    --color-action-in-downtime-background: #512980;
+    --color-action-selected: rgba(255, 255, 255, 0.5);
+    --color-action-selected-opacity: 0.5;
+    --color-background-default: #4a4a4a;
+    --color-background-listing-header: #666666;
+    --color-background-panel: #4a4a4a;
+    --color-background-panel-groups: #252525;
+    --color-background-paper: #212121;
+    --color-background-tooltip: #aab4c0;
+    --color-background-widget: #2e2e2e;
+    --color-chip-error: #d60101;
+    --color-chip-info: #1ca9f4;
+    --color-chip-neutral: #434e5b;
+    --color-chip-success: #5f8118;
+    --color-chip-warning: #c55400;
+    --color-divider: #666666;
+    --color-error-main: #d60101;
+    --color-header-page-action-background-active: #1975d10f;
+    --color-header-page-action-background-default: #ffffff00;
+    --color-header-page-action-color-active: #1976d2;
+    --color-header-page-action-color-default: #696969;
+    --color-header-page-border: #666666;
+    --color-header-page-description: #bdbdbd;
+    --color-header-page-title: #ffffff;
+    --color-header-info-main: #1ca9f4;
+    --color-header-layout-body-background: #f6f6f6;
+    --color-header-layout-header-background: #ffffff;
+    --color-header-layout-header-border: #e3e3e3;
+    --color-header-menu-background: #101418;
+    --color-header-menu-button-background-active: #071d37;
+    --color-header-menu-button-background-default: transparent;
+    --color-header-menu-button-background-hover: #1b2127;
+    --color-header-menu-button-color-active: #205593;
+    --color-header-menu-button-color-default: #596573;
+    --color-header-menu-button-color-hover: #6f7b8a;
+    --color-header-menu-divider-border: #2f3741;
+    --color-header-menu-item-background-active: #071d37;
+    --color-header-menu-item-background-default: transparent;
+    --color-header-menu-item-background-hover: #1b2127;
+    --color-header-menu-item-color-active: #3e85d5;
+    --color-header-menu-item-color-default: #f9fafb;
+    --color-header-menu-item-color-hover: #ffffff;
+    --color-pending-main: #118077;
+    --color-primary-main: #6eaff8;
+    --color-primary-light: #8bbff9;
+    --color-primary-dark: #4974a5;
+    --color-secondary-main: #7c1fa2;
+    --color-status-background-error: #d60101;
+    --color-status-background-none: --alpha(#2e68aa / 10%);
+    --color-status-background-pending: #118077;
+    --color-status-background-success: #5f8118;
+    --color-stauts-background-unknown: #666666;
+    --color-status-background-warning: #c55400;
+    --color-success-main: #5f8118;
+    --color-text-disabled: #666666;
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #cccccc;
+    --color-warning-main: #c55400;
+  }
+}
+
+@layer components {
+  .flex-column {
+    @apply flex flex-col gap-1;
+  }
+
+  .flex-row {
+    @apply flex flex-row gap-1;
+  }
+
+  .flex-column-center {
+    @apply flex flex-col items-center;
+  }
+
+  .flex-column-start {
+    @apply flex flex-col items-start;
+  }
+
+  .flex-column-end {
+    @apply flex flex-col items-end;
+  }
+}
+
+#root {
+  transition-duration: var(--default-transition-duration);
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-timing-function: var(--default-transition-timing-function);
+}

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -10,8 +10,6 @@ import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
-import { userAtom } from '@centreon/ui-context';
-
 import DateTimePickerInput from '../../DateTimePickerInput';
 import { isInvalidDate } from '../../helpers';
 import {
@@ -20,6 +18,7 @@ import {
 } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
 
+import { useLocale } from '../../../utils';
 import ErrorText from './ErrorText';
 import {
   PickersStartEndDateDirection,
@@ -96,11 +95,10 @@ const PickersStartEndDate = ({
   changeDate,
   rangeStartDate,
   rangeEndDate,
-  direction = PickersStartEndDateDirection.column
+  direction = PickersStartEndDateDirection.column,
+  className
 }: PickersStartEndDateProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  const { locale } = useAtomValue(userAtom);
+  const locale = useLocale();
   const error = useAtomValue(errorTimePeriodAtom);
   const isError = error || isInvalidDate({ endDate, startDate });
 
@@ -109,16 +107,16 @@ const PickersStartEndDate = ({
   const maxEnd = rangeEndDate?.max;
   const minEnd = rangeEndDate?.min || startDate;
 
-  const styleContainer = equals(direction, PickersStartEndDateDirection.column)
-    ? classes.verticalDirection
-    : classes.horizontalDirection;
+  const isColumn = equals(direction, PickersStartEndDateDirection.column);
 
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
       dateAdapter={AdapterDayjs}
     >
-      <div className={styleContainer}>
+      <div
+        className={`flex ${isColumn ? 'flex-col justify-center' : 'flex-row items-center py-2 px-4'} gap-2 ${className}`}
+      >
         <PickerDateWithLabel
           changeDate={changeDate}
           date={startDate}
@@ -144,7 +142,7 @@ const PickersStartEndDate = ({
       {isError && (
         <ErrorText
           message="The end date must be greater than the start date"
-          style={classes.error}
+          style="text-center"
         />
       )}
     </LocalizationProvider>

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -71,4 +71,5 @@ export interface PickersStartEndDateProps
     PickersStartEndDateModel {
   direction?: PickersStartEndDateDirection;
   disabled?: DisabledPicker;
+  className?: string;
 }

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -13,6 +13,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { useLocale } from '../utils';
 import { CustomTimePeriodProperty } from './models';
 
 interface ChangeDateProps {
@@ -50,6 +51,7 @@ const DateTimePickerInput = ({
     '@media (min-width: 1024px) or (pointer: fine)';
 
   const user = useAtomValue(userAtom);
+  const localeToUse = useLocale();
 
   const isUTC = equals(timezone ?? user.timezone, 'UTC');
 
@@ -72,7 +74,7 @@ const DateTimePickerInput = ({
 
   return (
     <LocalizationProvider
-      adapterLocale={(locale ?? user.locale).substring(0, 2)}
+      adapterLocale={(locale ?? localeToUse).substring(0, 2)}
       dateAdapter={AdapterDayjs}
       dateLibInstance={dayjs}
     >

package/src/api/customFetch.ts

@@ -95,15 +95,6 @@ export const customFetch = <T>({
             };
           }
 
-          if (equals(response.status, 207)) {
-            return {
-              data: data.results,
-              isError: false,
-              message: '',
-              statusCode: response.status
-            };
-          }
-
           if (decoder) {
             return decoder.decodeToPromise(data).catch((error: string) => {
               catchError({

package/src/api/models.ts

@@ -8,3 +8,12 @@ export interface Listing<TEntity> {
   meta: ListingMeta;
   result: Array<TEntity>;
 }
+
+export interface ListingMap<TEntity> {
+  content: Array<TEntity>;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  number: number;
+  numberOfElements: number;
+}

package/src/api/useBulkResponse.ts

@@ -0,0 +1,58 @@
+import {
+  complement,
+  includes,
+  isEmpty,
+  isNil,
+  last,
+  length,
+  prop,
+  propEq,
+  split
+} from 'ramda';
+import useSnackbar from '../Snackbar/useSnackbar';
+
+const useBulkResponse = () => {
+  const { showSuccessMessage, showErrorMessage, showWarningMessage } =
+    useSnackbar();
+
+  const handleBulkResponse = ({
+    data,
+    labelSuccess,
+    labelWarning,
+    labelFailed,
+    items
+  }) => {
+    const successfullResponses =
+      data?.filter(propEq(204, 'status')) || isNil(data);
+
+    const failedResponses = data?.filter(complement(propEq(204, 'status')));
+
+    const failedResponsesIds = failedResponses
+      ?.map(prop('href'))
+      ?.map((item: string) =>
+        Number.parseInt(last(split('/', item || '')) as string, 10)
+      );
+
+    if (isEmpty(successfullResponses)) {
+      showErrorMessage(labelFailed);
+
+      return;
+    }
+
+    if (length(successfullResponses) < length(data)) {
+      const failedResponsesNames = items
+        ?.filter((item) => includes(item.id, failedResponsesIds))
+        .map((item) => item.name);
+
+      showWarningMessage(`${labelWarning}: ${failedResponsesNames.join(', ')}`);
+
+      return;
+    }
+
+    showSuccessMessage(labelSuccess);
+  };
+
+  return handleBulkResponse;
+};
+
+export default useBulkResponse;