@centreon/ui 24.5.2 → 24.5.3

package/src/Graph/Tree/models.ts

@@ -14,6 +14,8 @@ export interface BaseProp {
   name: string;
 }
 
+export type Link = 'curve' | 'line' | 'step';
+
 export interface ChildrenProps<TData> {
   ancestors: Array<Node<TData>>;
   depth: number;
@@ -48,5 +50,6 @@ export interface TreeProps<TData> {
     ) => string | number | undefined;
     getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
     getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
+    type?: Link;
   };
 }

package/src/TimePeriods/index.stories.tsx

@@ -10,6 +10,9 @@ import TimePeriod from '.';
 
 const meta: Meta<typeof TimePeriod> = {
   component: TimePeriod,
+  parameters: {
+    chromatic: { disableSnapshot: true }
+  },
   tags: ['autodocs']
 };
 
@@ -88,27 +91,20 @@ const args = {
   ]
 };
 
-const parameters = {
-  chromatic: { diffThreshold: 0.1 }
-};
-
 export const BasicTimePeriod: Story = {
   ...Template,
-  argTypes,
-  parameters
+  argTypes
 };
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
-  args,
-  parameters
+  args
 };
 
 export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
-  argTypes,
-  parameters
+  argTypes
 };
 
 export const SimpleTimePeriod: StorySimpleTimePeriod = {
@@ -116,6 +112,5 @@ 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 { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import { Badge, ClickAwayListener } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { SvgIcon } from '@mui/material';
+import { Badge, ClickAwayListener } from '@mui/material';
 
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
 
@@ -115,7 +115,6 @@ 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/QueryProvider.tsx

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

package/src/api/logger.ts

@@ -0,0 +1,11 @@
+export const errorLog = (text: string): void => {
+  const { error: log } = console;
+
+  log(`API Request: ${text}`);
+};
+
+export const warnLog = (text: string): void => {
+  const { warn: log } = console;
+
+  log(`API Request: ${text}`);
+};

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

@@ -1,6 +1,5 @@
 import { renderHook, waitFor, RenderHookResult } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
-import anyLogger from 'anylogger';
 
 import TestQueryProvider from '../TestQueryProvider';
 
@@ -77,8 +76,6 @@ describe('useFetchQuery', () => {
       expect(mockedShowErrorMessage).toHaveBeenCalledWith('custom message');
     });
 
-    expect(anyLogger().error).toHaveBeenCalledWith('custom message');
-
     await waitFor(() => {
       expect(result.current.error).toStrictEqual({
         additionalInformation: {
@@ -102,8 +99,6 @@ 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,6 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
 
-import 'ulog';
 import {
   QueryKey,
   QueryObserverBaseResult,
@@ -9,12 +8,12 @@ import {
   UseQueryOptions
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
-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;
@@ -48,8 +47,6 @@ export interface PrefetchEndpointParams {
   page: number;
 }
 
-const log = anylogger('API Request');
-
 const useFetchQuery = <T extends object>({
   getEndpoint,
   getQueryKey,
@@ -87,7 +84,7 @@ const useFetchQuery = <T extends object>({
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
     if (data?.isError) {
-      log.error(data.message);
+      errorLog(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar

package/src/api/useGraphQuery/index.ts

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

package/src/api/useMutationQuery/index.ts

@@ -1,4 +1,3 @@
-import 'ulog';
 import { useEffect } from 'react';
 
 import {
@@ -7,12 +6,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',
@@ -52,8 +51,6 @@ 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'
@@ -127,7 +124,7 @@ const useMutationQuery = <T extends object, TMeta>({
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
     if (data?.isError) {
-      log.error(data.message);
+      errorLog(data.message);
       const hasACorrespondingHttpCode = includes(
         data?.statusCode || 0,
         httpCodesBypassErrorSnackbar

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

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

package/src/api/useRequest/index.ts

@@ -1,15 +1,12 @@
 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';
-
-const log = anylogger('API Request');
+import { errorLog, warnLog } from '../logger';
 
 export interface RequestParams<TResult> {
   decoder?: JsonDecoder.Decoder<TResult>;
@@ -41,7 +38,7 @@ const useRequest = <TResult>({
   }, []);
 
   const showRequestErrorMessage = (error): void => {
-    log.error(error);
+    errorLog(error.message);
 
     const message = or(
       pathOr(undefined, ['response', 'data', 'message'], error),
@@ -68,7 +65,7 @@ const useRequest = <TResult>({
       .catch((error) => {
         setSending(false);
         if (axios.isCancel(error)) {
-          log.warn(error);
+          warnLog(error);
 
           throw error;
         }

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

@@ -15,11 +15,11 @@ import {
 
 const initialize = ({
   initialValues = simpleAccessRights,
-  loading = false,
-  link = 'link'
+  loading = false
 }): 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,6 +60,7 @@ const initialize = ({
 
   return {
     cancel,
+    change,
     save
   };
 };
@@ -74,21 +75,12 @@ 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 });
 
@@ -97,7 +89,7 @@ describe('Access rights', () => {
     cy.makeSnapshot();
   });
 
-  it('displays the access rights with an empty list', () => {
+  it('displays the access rights list', () => {
     initialize({});
 
     simpleAccessRights.forEach(({ name, email, isContactGroup, role }) => {
@@ -370,4 +362,26 @@ 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,7 +47,6 @@ export const Default: Story = {
     },
     initialValues: defaultAccessRights,
     labels,
-    link: 'link',
     roles,
     submit: () => undefined
   },
@@ -63,7 +62,6 @@ export const AccessRightsWithStates: Story = {
     },
     initialValues: accessRightsWithStates,
     labels,
-    link: 'link',
     roles,
     submit: () => undefined
   },
@@ -79,22 +77,6 @@ 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
   },
@@ -110,7 +92,6 @@ 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),
-    maxWidth: '520px'
+    width: '100%'
   }
 }));

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

@@ -8,16 +8,17 @@ 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>;
 }
@@ -28,13 +29,14 @@ export const AccessRights = ({
   endpoints,
   submit,
   cancel,
-  link,
   loading,
   labels,
-  isSubmitting
+  isSubmitting,
+  onChange
 }: Props): JSX.Element => {
   const { classes } = useAccessRightsStyles();
   const clear = useAccessRightsInitValues({ initialValues });
+  useAccessRightsChange(onChange);
 
   return (
     <div className={classes.container}>
@@ -46,7 +48,6 @@ 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,14 +1,10 @@
 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',
-    flex: 'row',
-    gap: theme.spacing(2)
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+    justifyContent: 'flex-end'
   }
 }));

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

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
 
-import LinkIcon from '@mui/icons-material/Link';
 import { CircularProgress } from '@mui/material';
 
 import { Button } from '../../..';
@@ -10,11 +9,10 @@ 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>;
 }
 
@@ -22,17 +20,15 @@ const Actions = ({
   labels,
   cancel,
   submit,
-  link,
   isSubmitting,
   clear
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useActionsStyles();
 
-  const { dirty, copyLink, save, formattedValues } = useActions({
+  const { dirty, save, formattedValues } = useActions({
     clear,
     labels,
-    link,
     submit
   });
 
@@ -41,21 +37,8 @@ const Actions = ({
   };
 
   return (
-    <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}>
+    <div className={classes.cancelAndSave}>
+      {cancel && (
         <Button
           aria-label={t(labels.cancel)}
           variant="secondary"
@@ -63,17 +46,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>
-      </div>
+      )}
+      <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>
   );
 };