@centreon/ui 24.5.8 → 24.5.9

package/src/Listing/Cell/index.tsx

@@ -95,6 +95,9 @@ const useStyles = makeStyles<StylesProps>()(
     caretMore: {
       transform: 'rotate3d(0,0,1,180deg)'
     },
+    fakeCaret: {
+      marginLeft: theme.spacing(3)
+    },
     root: {
       alignItems: 'center',
       backgroundColor: getBackgroundColor({
@@ -195,23 +198,26 @@ const Cell = ({
         props
       )}
     >
-      {displaySubItemsCaret && hasSubItems && (
-        <IconButton
-          ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
-            props.row.id
-          }`}
-          size="small"
-          onClick={click}
-        >
-          <ExpandMoreIcon
-            className={cx(
-              classes.caret,
-              isSubItemsExpanded ? classes.caretMore : classes.caretLess
-            )}
-            fontSize="small"
-          />
-        </IconButton>
-      )}
+      {displaySubItemsCaret &&
+        (hasSubItems ? (
+          <IconButton
+            ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
+              props.row.id
+            }`}
+            size="small"
+            onClick={click}
+          >
+            <ExpandMoreIcon
+              className={cx(
+                classes.caret,
+                isSubItemsExpanded ? classes.caretMore : classes.caretLess
+              )}
+              fontSize="small"
+            />
+          </IconButton>
+        ) : (
+          <div className={classes.fakeCaret} />
+        ))}
       {children}
     </TableCell>
   );

package/src/TimePeriods/index.stories.tsx

@@ -10,9 +10,6 @@ import TimePeriod from '.';
 
 const meta: Meta<typeof TimePeriod> = {
   component: TimePeriod,
-  parameters: {
-    chromatic: { disableSnapshot: true }
-  },
   tags: ['autodocs']
 };
 
@@ -91,20 +88,27 @@ const args = {
   ]
 };
 
+const parameters = {
+  chromatic: { diffThreshold: 0.1 }
+};
+
 export const BasicTimePeriod: Story = {
   ...Template,
-  argTypes
+  argTypes,
+  parameters
 };
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
-  args
+  args,
+  parameters
 };
 
 export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
-  argTypes
+  argTypes,
+  parameters
 };
 
 export const SimpleTimePeriod: StorySimpleTimePeriod = {
@@ -112,5 +116,6 @@ export const SimpleTimePeriod: StorySimpleTimePeriod = {
   args: {
     endDate: dayjs(Date.now()).toDate(),
     startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  }
+  },
+  parameters
 };

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/api/QueryProvider.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const defaultCacheTime = 5 * 1_000;
 
-export const client = new QueryClient({
+const client = new QueryClient({
   defaultOptions: {
     queries: {
       gcTime: defaultCacheTime,

package/src/api/useFetchQuery/index.test.ts

@@ -1,5 +1,6 @@
 import { renderHook, waitFor, RenderHookResult } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
+import anyLogger from 'anylogger';
 
 import TestQueryProvider from '../TestQueryProvider';
 
@@ -76,6 +77,8 @@ describe('useFetchQuery', () => {
       expect(mockedShowErrorMessage).toHaveBeenCalledWith('custom message');
     });
 
+    expect(anyLogger().error).toHaveBeenCalledWith('custom message');
+
     await waitFor(() => {
       expect(result.current.error).toStrictEqual({
         additionalInformation: {
@@ -99,6 +102,8 @@ describe('useFetchQuery', () => {
     await waitFor(() => {
       expect(mockedShowErrorMessage).toHaveBeenCalledWith('error');
     });
+
+    expect(anyLogger().error).toHaveBeenCalledWith('error');
   });
 
   it('shows a default failure message via the Snackbar as fallback', async () => {

package/src/api/useFetchQuery/index.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 
+import 'ulog';
 import {
   QueryKey,
   QueryObserverBaseResult,
@@ -8,12 +9,12 @@ import {
   UseQueryOptions
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
-import { equals, has, includes, isNil, not, omit } from 'ramda';
+import anylogger from 'anylogger';
+import { has, includes, isNil, not, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
-import { errorLog } from '../logger';
 
 export interface UseFetchQueryProps<T> {
   baseEndpoint?: string;
@@ -32,7 +33,6 @@ export interface UseFetchQueryProps<T> {
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
-  useLongCache?: boolean;
 }
 
 export type UseFetchQueryState<T> = {
@@ -48,6 +48,8 @@ export interface PrefetchEndpointParams {
   page: number;
 }
 
+const log = anylogger('API Request');
+
 const useFetchQuery = <T extends object>({
   getEndpoint,
   getQueryKey,
@@ -59,18 +61,12 @@ const useFetchQuery = <T extends object>({
   queryOptions,
   httpCodesBypassErrorSnackbar = [],
   baseEndpoint,
-  doNotCancelCallsOnUnmount = false,
-  useLongCache
+  doNotCancelCallsOnUnmount = false
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
   const dataRef = useRef<T | undefined>(undefined);
 
   const { showErrorMessage } = useSnackbar();
 
-  const isCypressTest = equals(window.Cypress?.testingType, 'component');
-
-  const cacheOptions =
-    !isCypressTest && useLongCache ? { gcTime: 60 * 1000 } : {};
-
   const queryData = useQuery<T | ResponseError, Error>({
     queryFn: ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
@@ -83,7 +79,6 @@ const useFetchQuery = <T extends object>({
         signal
       }),
     queryKey: getQueryKey(),
-    ...cacheOptions,
     ...queryOptions
   });
 
@@ -92,7 +87,7 @@ const useFetchQuery = <T extends object>({
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
     if (data?.isError) {
-      errorLog(data.message);
+      log.error(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar

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: {
@@ -149,8 +143,7 @@ const useGraphQuery = ({
       enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
       refetchInterval: refreshInterval,
       suspense: false
-    },
-    useLongCache: true
+    }
   });
 
   const data = useRef<PerformanceGraphData | undefined>(undefined);

package/src/api/useMutationQuery/index.ts

@@ -1,3 +1,4 @@
+import 'ulog';
 import { useEffect } from 'react';
 
 import {
@@ -6,12 +7,12 @@ import {
   UseMutationResult
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
+import anylogger from 'anylogger';
 import { includes, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
-import { errorLog } from '../logger';
 
 export enum Method {
   DELETE = 'DELETE',
@@ -51,6 +52,8 @@ export type UseMutationQueryProps<T, TMeta> = {
   'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
 >;
 
+const log = anylogger('API Request');
+
 export type UseMutationQueryState<T, TMeta> = Omit<
   UseMutationResult<T | ResponseError>,
   'isError' | 'mutate' | 'mutateAsync'
@@ -124,7 +127,7 @@ const useMutationQuery = <T extends object, TMeta>({
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
     if (data?.isError) {
-      errorLog(data.message);
+      log.error(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar

package/src/api/useRequest/index.test.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import anyLogger from 'anylogger';
 import { RenderHookResult, renderHook, act } from '@testing-library/react';
 
 import useRequest, { RequestResult, RequestParams } from '.';
@@ -76,6 +77,8 @@ describe(useRequest, () => {
       });
     });
 
+    expect(anyLogger().error).toHaveBeenCalledWith(response);
+
     expect(mockedShowErrorMessage).toHaveBeenCalledWith('failure');
   });
 

package/src/api/useRequest/index.ts

@@ -1,12 +1,15 @@
 import { useState, useEffect } from 'react';
 
+import 'ulog';
 import axios from 'axios';
 import { pathOr, defaultTo, path, includes, or } from 'ramda';
+import anylogger from 'anylogger';
 import { JsonDecoder } from 'ts.data.json';
 
 import useCancelTokenSource from '../useCancelTokenSource';
 import useSnackbar from '../../Snackbar/useSnackbar';
-import { errorLog, warnLog } from '../logger';
+
+const log = anylogger('API Request');
 
 export interface RequestParams<TResult> {
   decoder?: JsonDecoder.Decoder<TResult>;
@@ -38,7 +41,7 @@ const useRequest = <TResult>({
   }, []);
 
   const showRequestErrorMessage = (error): void => {
-    errorLog(error.message);
+    log.error(error);
 
     const message = or(
       pathOr(undefined, ['response', 'data', 'message'], error),
@@ -65,7 +68,7 @@ const useRequest = <TResult>({
       .catch((error) => {
         setSending(false);
         if (axios.isCancel(error)) {
-          warnLog(error);
+          log.warn(error);
 
           throw error;
         }

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