@centreon/ui 24.4.72 → 24.4.74

package/src/ThemeProvider/index.tsx

@@ -1,31 +1,31 @@
-import * as React from 'react';
+import { ReactNode, useMemo } from 'react';
 
 import { useAtomValue } from 'jotai';
-import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
+import { CSSInterpolation } from 'tss-react';
 
 import {
   ButtonProps,
-  createTheme,
   InputBaseProps,
+  ThemeProvider as MuiThemeProvider,
   StyledEngineProvider,
   Theme,
-  ThemeProvider as MuiThemeProvider
+  createTheme
 } from '@mui/material';
-import CssBaseline from '@mui/material/CssBaseline';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
+import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeOptions } from '@mui/material/styles/createTheme';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
-import RobotoLightWoff2 from '@centreon/ui/fonts/roboto-light-webfont.woff2';
-import RobotoRegularWoff2 from '@centreon/ui/fonts/roboto-regular-webfont.woff2';
-import RobotoMediumWoff2 from '@centreon/ui/fonts/roboto-medium-webfont.woff2';
-import RobotoBoldWoff2 from '@centreon/ui/fonts/roboto-bold-webfont.woff2';
+
+import RobotoBoldWoff2 from '../fonts/roboto-bold-webfont.woff2';
+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 { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 
@@ -293,13 +293,13 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
 });
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const ThemeProvider = ({ children }: Props): JSX.Element => {
   const { themeMode } = useAtomValue(userAtom);
 
-  const theme = React.useMemo(
+  const theme = useMemo(
     () => createTheme(getTheme(themeMode || ThemeMode.light)),
     [themeMode]
   );

package/src/ThemeProvider/palettes.ts

@@ -1,6 +1,9 @@
 import { equals } from 'ramda';
 
-import { alpha, PaletteOptions } from '@mui/material';
+import {
+  type PaletteOptions as PaletteOptionsModel,
+  alpha
+} from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
 
@@ -140,9 +143,9 @@ declare module '@mui/material/Badge' {
   }
 }
 
-export const lightPalette: PaletteOptions = {
+export const lightPalette: PaletteOptionsModel = {
   action: {
-    acknowledged: '#67532C',
+    acknowledged: '#745F35',
     acknowledgedBackground: '#DFD2B9',
     activatedOpacity: 0.12,
     active: '#666666',
@@ -152,7 +155,7 @@ export const lightPalette: PaletteOptions = {
     focusOpacity: 0.12,
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
-    inDowntime: '#4B2352',
+    inDowntime: '#512980',
     inDowntimeBackground: '#E5D8F3',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
@@ -280,9 +283,9 @@ export const lightPalette: PaletteOptions = {
   }
 };
 
-export const darkPalette: PaletteOptions = {
+export const darkPalette: PaletteOptionsModel = {
   action: {
-    acknowledged: '#67532C',
+    acknowledged: '#DFD2B9',
     acknowledgedBackground: '#745F35',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
@@ -292,7 +295,7 @@ export const darkPalette: PaletteOptions = {
     focusOpacity: 0.3,
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
-    inDowntime: '#4B2352',
+    inDowntime: '#E5D8F3',
     inDowntimeBackground: '#512980',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5
@@ -418,5 +421,5 @@ export const darkPalette: PaletteOptions = {
   }
 };
 
-export const getPalette = (mode: ThemeMode): PaletteOptions =>
+export const getPalette = (mode: ThemeMode): PaletteOptionsModel =>
   equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;

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

@@ -10,14 +10,13 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 
-import { userAtom } from '@centreon/ui-context';
-
 import DateTimePickerInput from '../../DateTimePickerInput';
 import {
   CustomTimePeriodProperty,
   DateTimePickerInputModel
 } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
+import { useLocale } from '../../../utils';
 
 import ErrorText from './ErrorText';
 import { PickersData, PickersStartEndDateDirection } from './models';
@@ -111,7 +110,7 @@ const PickersStartEndDate = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
-  const { locale } = useAtomValue(userAtom);
+  const locale = useLocale();
   const error = useAtomValue(errorTimePeriodAtom);
 
   const maxStart = rangeStartDate?.max || endDate;

package/src/TimePeriods/DateTimePickerInput.tsx

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

package/src/TopCounterElements/TopCounterLayout.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import type { SvgIcon } from '@mui/material';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { Badge, ClickAwayListener } from '@mui/material';
+import type { SvgIcon } from '@mui/material';
 
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
 
@@ -115,6 +115,7 @@ const TopCounterLayout = ({
 }: TopCounterLayoutProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const [toggled, setToggled] = useState(false);
+
   const subMenuId = title.replace(/[^A-Za-z]/, '-');
   useCloseOnLegacyPage({ setToggled });
 

package/src/TopCounterElements/useCloseOnLegacyPage.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
 
+import { isNil } from 'ramda';
 import { useLocation } from 'react-router-dom';
 
 interface Props {
@@ -14,21 +15,23 @@ const useCloseOnLegacyPage = ({ setToggled }: Props): void => {
   };
 
   useEffect(() => {
-    const iframe = document.getElementById('main-content') as HTMLIFrameElement;
+    const iframe = document.getElementById(
+      'main-content'
+    ) as HTMLIFrameElement | null;
 
-    if (!isLegacyRoute) {
+    if (!isLegacyRoute || isNil(iframe)) {
       return () => undefined;
     }
 
     const closeSubMenuOnLegacyPage = (): void => {
-      iframe.contentWindow?.document?.addEventListener('click', closeSubMenu);
+      iframe?.contentWindow?.document?.addEventListener('click', closeSubMenu);
     };
 
-    iframe.addEventListener('load', closeSubMenuOnLegacyPage);
+    iframe?.addEventListener('load', closeSubMenuOnLegacyPage);
 
     return () => {
-      iframe.removeEventListener('load', closeSubMenuOnLegacyPage);
-      iframe.contentWindow?.document?.removeEventListener(
+      iframe?.removeEventListener('load', closeSubMenuOnLegacyPage);
+      iframe?.contentWindow?.document?.removeEventListener(
         'click',
         closeSubMenu
       );

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -93,8 +93,14 @@ const getConditionsSearchQueryParameterValue = (
       equals(listField, field)
     );
 
+    const globalOperator = filteredItems.every(({ operator }) =>
+      equals(operator, filteredItems[0].operator)
+    )
+      ? filteredItems[0].operator || '$or'
+      : '$or';
+
     return {
-      $or: flatten(
+      [globalOperator]: flatten(
         filteredItems.map(({ value, values }) => {
           if (!isNil(value)) {
             return [

package/src/api/buildListingEndpoint/models.ts

@@ -61,6 +61,7 @@ export type ConditionValue = {
 
 export interface ConditionsSearchParameter {
   field: string;
+  operator?: '$and' | '$or';
   value?: unknown;
   values?: ConditionValue;
 }

package/src/api/useGraphQuery/index.ts

@@ -24,7 +24,6 @@ interface CustomTimePeriod {
 interface UseMetricsQueryProps {
   baseEndpoint: string;
   bypassMetricsExclusion?: boolean;
-  bypassQueryParams?: boolean;
   includeAllResources?: boolean;
   metrics: Array<Metric>;
   refreshCount?: number;
@@ -91,8 +90,7 @@ const useGraphQuery = ({
     timePeriodType: 1
   },
   refreshInterval = false,
-  refreshCount,
-  bypassQueryParams = false
+  refreshCount
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -116,10 +114,6 @@ const useGraphQuery = ({
     isLoading
   } = useFetchQuery<PerformanceGraphData>({
     getEndpoint: () => {
-      if (bypassQueryParams) {
-        return baseEndpoint;
-      }
-
       const endpoint = buildListingEndpoint({
         baseEndpoint,
         parameters: {

package/src/components/Form/AccessRights/AccessRights.cypress.spec.tsx

@@ -15,11 +15,11 @@ import {
 
 const initialize = ({
   initialValues = simpleAccessRights,
-  loading = false
+  loading = false,
+  link = 'link'
 }): unknown => {
   const cancel = cy.stub();
   const save = cy.stub();
-  const change = cy.stub();
 
   cy.interceptAPIRequest({
     alias: 'getContacts',
@@ -47,10 +47,10 @@ const initialize = ({
               }}
               initialValues={initialValues}
               labels={labels}
+              link={link}
               loading={loading}
               roles={roles}
               submit={save}
-              onChange={change}
             />
           </Provider>
         </TestQueryProvider>
@@ -60,7 +60,6 @@ const initialize = ({
 
   return {
     cancel,
-    change,
     save
   };
 };
@@ -75,12 +74,21 @@ describe('Access rights', () => {
     cy.findByLabelText('Add a contact').should('be.visible');
     cy.findByTestId('add_role').should('be.disabled');
     cy.findByTestId('add').should('be.disabled');
+    cy.findByLabelText('Copy link').should('be.visible');
     cy.findByLabelText('Cancel').should('be.visible');
     cy.findByLabelText('Save').should('be.visible');
 
     cy.makeSnapshot();
   });
 
+  it('displays the access rights without link', () => {
+    initialize({ link: null });
+
+    cy.findByLabelText('Copy link').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
   it('displays the access rights with an empty list', () => {
     initialize({ initialValues: emptyAccessRights });
 
@@ -89,7 +97,7 @@ describe('Access rights', () => {
     cy.makeSnapshot();
   });
 
-  it('displays the access rights list', () => {
+  it('displays the access rights with an empty list', () => {
     initialize({});
 
     simpleAccessRights.forEach(({ name, email, isContactGroup, role }) => {
@@ -362,26 +370,4 @@ describe('Access rights', () => {
 
     cy.makeSnapshot();
   });
-
-  it('calls the change function when the corresponding prop is set and the form is updated', () => {
-    const { change } = initialize({});
-
-    cy.contains(labels.add.contact).click();
-    cy.findByLabelText(labels.add.autocompleteContact).click();
-
-    cy.waitForRequest('@getContacts');
-
-    cy.contains('Entity 10').click();
-
-    cy.findByTestId('add').click();
-
-    cy.contains('Entity 10').should('be.visible');
-
-    cy.findByTestId('role-Entity 10').should('have.value', 'viewer');
-    cy.contains(labels.list.added)
-      .should('be.visible')
-      .then(() => {
-        expect(change).to.have.callCount(2);
-      });
-  });
 });

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

@@ -47,6 +47,7 @@ export const Default: Story = {
     },
     initialValues: defaultAccessRights,
     labels,
+    link: 'link',
     roles,
     submit: () => undefined
   },
@@ -62,6 +63,7 @@ export const AccessRightsWithStates: Story = {
     },
     initialValues: accessRightsWithStates,
     labels,
+    link: 'link',
     roles,
     submit: () => undefined
   },
@@ -77,6 +79,22 @@ export const withEmptyState: Story = {
     },
     initialValues: emptyAccessRights,
     labels,
+    link: 'link',
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};
+
+export const withoutLink: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: defaultAccessRights,
+    labels,
     roles,
     submit: () => undefined
   },
@@ -92,6 +110,7 @@ export const loading: Story = {
     },
     initialValues: emptyAccessRights,
     labels,
+    link: 'link',
     loading: true,
     roles,
     submit: () => undefined

package/src/components/Form/AccessRights/AccessRights.styles.ts

@@ -5,6 +5,6 @@ export const useAccessRightsStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(3),
-    width: '100%'
+    maxWidth: '520px'
   }
 }));

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

@@ -8,17 +8,16 @@ import Provider from './Provider';
 import ShareInput from './ShareInput/ShareInput';
 import Stats from './Stats/Stats';
 import { AccessRightInitialValues, Endpoints, Labels } from './models';
-import { useAccessRightsChange } from './useAccessRightsChange';
 import { useAccessRightsInitValues } from './useAccessRightsInitValues';
 
 interface Props {
-  cancel?: ({ dirty, values }) => void;
+  cancel: ({ dirty, values }) => void;
   endpoints: Endpoints;
   initialValues: Array<AccessRightInitialValues>;
   isSubmitting?: boolean;
   labels: Labels;
+  link?: string;
   loading?: boolean;
-  onChange?: (values: Array<AccessRightInitialValues>) => void;
   roles: Array<SelectEntry>;
   submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
 }
@@ -29,14 +28,13 @@ export const AccessRights = ({
   endpoints,
   submit,
   cancel,
+  link,
   loading,
   labels,
-  isSubmitting,
-  onChange
+  isSubmitting
 }: Props): JSX.Element => {
   const { classes } = useAccessRightsStyles();
   const clear = useAccessRightsInitValues({ initialValues });
-  useAccessRightsChange(onChange);
 
   return (
     <div className={classes.container}>
@@ -48,6 +46,7 @@ export const AccessRights = ({
         clear={clear}
         isSubmitting={isSubmitting}
         labels={labels.actions}
+        link={link}
         submit={submit}
       />
     </div>

package/src/components/Form/AccessRights/Actions/Actions.styles.ts

@@ -1,10 +1,14 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useActionsStyles = makeStyles()((theme) => ({
+  actions: {
+    backgroundColor: theme.palette.background.paper,
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
   cancelAndSave: {
     display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(2),
-    justifyContent: 'flex-end'
+    flex: 'row',
+    gap: theme.spacing(2)
   }
 }));

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

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
+import LinkIcon from '@mui/icons-material/Link';
 import { CircularProgress } from '@mui/material';
 
 import { Button } from '../../..';
@@ -9,10 +10,11 @@ import { useActions } from './useActions';
 import { useActionsStyles } from './Actions.styles';
 
 interface Props {
-  cancel?: ({ dirty, values }) => void;
+  cancel: ({ dirty, values }) => void;
   clear: () => void;
   isSubmitting?: boolean;
   labels: Labels['actions'];
+  link?: string;
   submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
 }
 
@@ -20,15 +22,17 @@ const Actions = ({
   labels,
   cancel,
   submit,
+  link,
   isSubmitting,
   clear
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useActionsStyles();
 
-  const { dirty, save, formattedValues } = useActions({
+  const { dirty, copyLink, save, formattedValues } = useActions({
     clear,
     labels,
+    link,
     submit
   });
 
@@ -37,8 +41,21 @@ const Actions = ({
   };
 
   return (
-    <div className={classes.cancelAndSave}>
-      {cancel && (
+    <div className={classes.actions}>
+      {link ? (
+        <Button
+          aria-label={t(labels.copyLink)}
+          icon={<LinkIcon />}
+          iconVariant="start"
+          variant="ghost"
+          onClick={copyLink}
+        >
+          {t(labels.copyLink)}
+        </Button>
+      ) : (
+        <div />
+      )}
+      <div className={classes.cancelAndSave}>
         <Button
           aria-label={t(labels.cancel)}
           variant="secondary"
@@ -46,17 +63,17 @@ const Actions = ({
         >
           {t(labels.cancel)}
         </Button>
-      )}
-      <Button
-        aria-label={t(labels.save)}
-        disabled={isSubmitting || !dirty}
-        icon={isSubmitting ? <CircularProgress size={24} /> : null}
-        iconVariant={isSubmitting ? 'start' : 'none'}
-        variant="primary"
-        onClick={save}
-      >
-        {t(labels.save)}
-      </Button>
+        <Button
+          aria-label={t(labels.save)}
+          disabled={isSubmitting || !dirty}
+          icon={isSubmitting ? <CircularProgress size={24} /> : null}
+          iconVariant={isSubmitting ? 'start' : 'none'}
+          variant="primary"
+          onClick={save}
+        >
+          {t(labels.save)}
+        </Button>
+      </div>
     </div>
   );
 };

package/src/components/Form/AccessRights/Actions/useActions.ts

@@ -1,32 +1,64 @@
 import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
+import { equals, omit } from 'ramda';
 
 import { initialValuesAtom, valuesAtom } from '../atoms';
-import { AccessRightInitialValues, Labels } from '../models';
-import { formatValue, formatValueForSubmition } from '../utils';
+import { AccessRight, AccessRightInitialValues, Labels } from '../models';
+import { useCopyToClipboard } from '../../../..';
+
+const formatValue = (accessRight: AccessRight): AccessRightInitialValues => {
+  return omit(['isAdded', 'isUpdated', 'isRemoved'], accessRight);
+};
+
+const formatValueForSubmition = (
+  accessRight: AccessRight
+): AccessRightInitialValues => {
+  return {
+    ...formatValue(accessRight),
+    id: Number((accessRight.id as string).split('_')[1])
+  };
+};
 
 interface Props {
   clear: () => void;
   labels: Labels['actions'];
+  link?: string;
   submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
 }
 
 interface UseActionsState {
+  copyLink: () => void;
   dirty: boolean;
   formattedValues: Array<AccessRightInitialValues>;
   save: () => void;
 }
 
-export const useActions = ({ submit, clear }: Props): UseActionsState => {
+export const useActions = ({
+  link,
+  labels,
+  submit,
+  clear
+}: Props): UseActionsState => {
   const values = useAtomValue(valuesAtom);
   const initialValues = useAtomValue(initialValuesAtom);
 
+  const { copy } = useCopyToClipboard({
+    errorMessage: labels.copyError,
+    successMessage: labels.copySuccess
+  });
+
   const formattedValues = values
     .filter(({ isRemoved }) => !isRemoved)
     .map(formatValue);
 
   const dirty = !equals(initialValues, formattedValues);
 
+  const copyLink = (): void => {
+    if (!link) {
+      return;
+    }
+    copy(link);
+  };
+
   const save = (): void => {
     submit(
       values.filter(({ isRemoved }) => !isRemoved).map(formatValueForSubmition)
@@ -39,6 +71,7 @@ export const useActions = ({ submit, clear }: Props): UseActionsState => {
   };
 
   return {
+    copyLink,
     dirty,
     formattedValues,
     save

package/src/components/Form/AccessRights/models.ts

@@ -16,6 +16,9 @@ export interface AccessRight extends AccessRightInitialValues {
 export interface Labels {
   actions: {
     cancel: string;
+    copyError: string;
+    copyLink: string;
+    copySuccess: string;
     save: string;
   };
   add: {

package/src/components/Form/AccessRights/storiesData.ts

@@ -105,6 +105,9 @@ export const buildResult = (isGroup): Listing<SelectEntry> => ({
 export const labels: Labels = {
   actions: {
     cancel: 'Cancel',
+    copyError: 'Failed to copy',
+    copyLink: 'Copy link',
+    copySuccess: 'Copied',
     save: 'Save'
   },
   add: {