@centreon/ui 24.7.6 → 24.7.7

package/src/Typography/FluidTypography/index.stories.tsx

@@ -0,0 +1,63 @@
+import { ComponentMeta } from '@storybook/react';
+
+import { Box } from '@mui/material';
+
+import FluidTypography, { FluidTypographyProps } from '.';
+
+interface Props extends FluidTypographyProps {
+  height?: string | number;
+  width?: string | number;
+}
+
+const FluidTypographyTemplate = ({
+  width = '900px',
+  height = '700px',
+  text,
+  variant
+}: Props): JSX.Element => {
+  return (
+    <Box sx={{ height, width }}>
+      <FluidTypography text={text} variant={variant} />
+    </Box>
+  );
+};
+
+export default {
+  argTypes: {
+    height: { control: 'text' },
+    text: { control: 'text' },
+    variant: { control: 'text' },
+    width: { control: 'text' }
+  },
+  component: FluidTypographyTemplate,
+  title: 'Fluid Typography'
+} as ComponentMeta<typeof FluidTypographyTemplate>;
+
+export const basic = FluidTypographyTemplate.bind({});
+basic.args = {
+  text: 'Hello world'
+};
+
+export const with200pxWidth = FluidTypographyTemplate.bind({});
+with200pxWidth.args = {
+  height: '50%',
+  text: 'Hello world',
+  width: '50%'
+};
+
+export const with20pxHeight = FluidTypographyTemplate.bind({});
+with20pxHeight.args = {
+  height: '20px',
+  text: 'Hello world'
+};
+
+export const withLongText = FluidTypographyTemplate.bind({});
+withLongText.args = {
+  text: 'This is a very long text becaaaaaaause it has a lot to sayyyyy !!!!!!!!'
+};
+
+export const withHeading5Variant = FluidTypographyTemplate.bind({});
+withHeading5Variant.args = {
+  text: 'Hello world',
+  variant: 'h5'
+};

package/src/Typography/FluidTypography/index.tsx

@@ -0,0 +1,46 @@
+import { Typography, TypographyProps } from '@mui/material';
+
+type CustomTypographyProps = Pick<TypographyProps, 'variant' | 'sx'>;
+export interface FluidTypographyProps extends CustomTypographyProps {
+  className?: string;
+  containerClassName?: string;
+  max?: string;
+  min?: string;
+  pref?: number;
+  text: string;
+}
+
+const FluidTypography = ({
+  text,
+  variant = 'body1',
+  className,
+  containerClassName,
+  min = '10px',
+  max = '1000px',
+  pref = 19,
+  sx
+}: FluidTypographyProps): JSX.Element => {
+  return (
+    <div
+      className={containerClassName}
+      style={{
+        containerType: 'inline-size',
+        height: `100%`,
+        width: `100%`
+      }}
+    >
+      <Typography
+        className={className}
+        sx={{
+          fontSize: `clamp(${min}, ${pref}cqi, ${max})`,
+          ...sx
+        }}
+        variant={variant}
+      >
+        {text}
+      </Typography>
+    </div>
+  );
+};
+
+export default FluidTypography;

package/src/Typography/Subtitle.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+
+import { type, equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { Typography } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
+import { Tooltip } from '../components';
+
+interface Props {
+  children: ReactNode;
+  secondaryLabel?: string | Array<string>;
+}
+
+const Subtitle = ({ children, secondaryLabel }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  const containsSeveralSecondaryLabels = equals(type(secondaryLabel), 'Array');
+
+  return (
+    <Typography variant="subtitle1">
+      <strong>{children}</strong>
+      {secondaryLabel && (
+        <Tooltip
+          aria-label={
+            containsSeveralSecondaryLabels
+              ? secondaryLabel[0]
+              : (secondaryLabel as string)
+          }
+          followCursor={false}
+          label={
+            containsSeveralSecondaryLabels ? (
+              <>
+                {secondaryLabel.map((label) => (
+                  <p key={label}>{t(label)}</p>
+                ))}
+              </>
+            ) : (
+              t(secondaryLabel)
+            )
+          }
+          placement="right"
+        >
+          <HelpOutlineIcon
+            color="primary"
+            sx={{ ml: 1, verticalAlign: 'middle' }}
+          />
+        </Tooltip>
+      )}
+    </Typography>
+  );
+};
+
+export default Subtitle;

package/src/Typography/{index.stories.tsx → Typography.stories.tsx}

@@ -1,16 +1,16 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import TypographtStory from '.';
+import TypographyStory from './story.utils';
 
 export default {
   argTypes: {},
-  component: TypographtStory,
+  component: TypographyStory,
   title: 'Typography'
-} as ComponentMeta<typeof TypographtStory>;
+} as ComponentMeta<typeof TypographyStory>;
 
-const TemplateTypographtStory: ComponentStory<typeof TypographtStory> = (
+const TemplateTypographtStory: ComponentStory<typeof TypographyStory> = (
   args
-) => <TypographtStory {...args} />;
+) => <TypographyStory {...args} />;
 
 export const typography = (): JSX.Element => (
   <TemplateTypographtStory text="Hello world" />

package/src/WallpaperPage/index.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 
-import image from '../../assets/not-authorized-template-background-light.svg';
+import image from '../@assets/images/not-authorized-template-background-light.svg';
 
 import WallpaperPage from '.';
 

package/src/Wizard/ActionsBar.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '../testRenderer';
+import { render, screen, fireEvent } from '../../test/testRenderer';
 
 import ActionsBar from './ActionsBar';
 

package/src/Wizard/WizardContent.tsx

@@ -7,11 +7,10 @@ import { makeStyles } from 'tss-react/mui';
 import { WizardContentProps } from './models';
 import ActionsBar from './ActionsBar';
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()(() => ({
   content: {
     height: '100%',
-    overflow: 'auto',
-    padding: theme.spacing(2, 3, 1, 3)
+    overflow: 'auto'
   },
   form: {
     display: 'flex',

package/src/Wizard/index.stories.tsx

@@ -201,29 +201,16 @@ export const threeStepsWithCustomConfirmDialogLabels = (): JSX.Element => (
   />
 );
 
-const FirstStep = ({
-  disableNextOnSendingRequests
-}: StepComponentProps): JSX.Element => {
-  useEffect(() => {
-    disableNextOnSendingRequests([true, false, true]);
-    setTimeout(() => {
-      disableNextOnSendingRequests([false, false, false]);
-    }, 1500);
-  }, []);
-
-  return (
-    <Typography align="center" variant="h5">
-      Sending request...
-    </Typography>
-  );
-};
-
 export const twoStepsWithSendingRequest = (): JSX.Element => (
   <Wizard
     open
     steps={[
       {
-        Component: FirstStep,
+        Component: (): JSX.Element => (
+          <Typography align="center" variant="h5">
+            Sending request...
+          </Typography>
+        ),
         skipFormChangeCheck: true,
         stepName: 'First step'
       },

package/src/Wizard/index.test.tsx

@@ -8,7 +8,7 @@ import {
   waitFor,
   screen,
   RenderResult
-} from '../testRenderer';
+} from '../../test/testRenderer';
 
 import { StepComponentProps } from './models';
 

package/src/Wizard/index.tsx

@@ -29,6 +29,7 @@ const actionsBarLabelsDefaultValues = {
 };
 
 const Wizard = ({
+  classNameDialogContent,
   steps,
   onSubmit = undefined,
   initialValues = {},
@@ -37,9 +38,11 @@ const Wizard = ({
   open,
   onClose = undefined,
   confirmDialogLabels = undefined,
-  actionsBarLabels = actionsBarLabelsDefaultValues
+  actionsBarLabels = actionsBarLabelsDefaultValues,
+  displayConfirmDialog,
+  ...rest
 }: WizardProps): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const [currentStep, setCurrentStep] = useState(0);
   const [sendingRequest, setSendingRequest] = useState(false);
   const [openConfirm, setOpenConfirm] = useState(false);
@@ -78,9 +81,18 @@ const Wizard = ({
     bag.setSubmitting(false);
   };
 
+  const controlDisplayConfirmationDialog = (): void => {
+    if (!equals(displayConfirmDialog, false)) {
+      setOpenConfirm(displayConfirmDialog ?? true);
+
+      return;
+    }
+    onClose?.();
+  };
+
   const handleClose = (_, reason): void => {
     if (equals(reason, 'backdropClick')) {
-      setOpenConfirm(true);
+      controlDisplayConfirmationDialog();
 
       return;
     }
@@ -89,7 +101,6 @@ const Wizard = ({
 
   const handleCloseConfirm = (confirm): void => {
     setOpenConfirm(false);
-
     if (!confirm) {
       return;
     }
@@ -106,9 +117,11 @@ const Wizard = ({
         classes={{
           paper: fullHeight ? classes.fullHeight : undefined
         }}
+        data-testid="Dialog"
         maxWidth={width}
         open={open}
         onClose={handleClose}
+        {...rest}
       >
         <Stepper currentStep={currentStep} steps={steps} />
         <Formik
@@ -119,7 +132,9 @@ const Wizard = ({
           validationSchema={validationSchema}
           onSubmit={submit}
         >
-          <DialogContent className={classes.dialogContent}>
+          <DialogContent
+            className={cx(classes.dialogContent, classNameDialogContent)}
+          >
             <WizardContent
               actionsBarLabels={actionsBarLabels}
               currentStep={currentStep}

package/src/Wizard/models.ts

@@ -1,5 +1,7 @@
 import { FormikValues, FormikErrors, FormikHelpers } from 'formik';
 
+import { DialogProps } from '@mui/material';
+
 export interface StepComponentProps {
   disableNextOnSendingRequests: (sendingRequests: Array<boolean>) => void;
 }
@@ -38,9 +40,14 @@ interface ConfirmDialogLabels {
   labelTitle: string;
 }
 
+type ValueOf<T> = T[keyof T];
+
 export interface WizardProps {
+  [key: string]: ValueOf<DialogProps>;
   actionsBarLabels?: ActionsBarLabels;
+  classNameDialogContent?: string;
   confirmDialogLabels?: ConfirmDialogLabels;
+  displayConfirmDialog?: boolean;
   fullHeight?: boolean;
   initialValues?: FormikValues;
   onClose?: () => void;

package/src/api/QueryProvider.tsx

@@ -4,10 +4,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const defaultCacheTime = 5 * 1_000;
 
-const client = new QueryClient({
+export const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: defaultCacheTime,
+      gcTime: defaultCacheTime,
       refetchOnWindowFocus: false,
       staleTime: defaultCacheTime,
       suspense: true
@@ -17,10 +17,13 @@ const client = new QueryClient({
 
 interface Props {
   children: ReactNode;
+  queryClient?: QueryClient;
 }
 
-const QueryProvider = ({ children }: Props): JSX.Element => (
-  <QueryClientProvider client={client}>{children}</QueryClientProvider>
+const QueryProvider = ({ children, queryClient }: Props): JSX.Element => (
+  <QueryClientProvider client={queryClient || client}>
+    {children}
+  </QueryClientProvider>
 );
 
 export default QueryProvider;

package/src/api/TestQueryProvider.tsx

@@ -5,7 +5,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 const client = new QueryClient({
   defaultOptions: {
     queries: {
-      cacheTime: 0
+      gcTime: 0,
+      retry: false
     }
   }
 });

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -5,9 +5,10 @@ import {
   prop,
   head,
   toPairs,
-  pipe,
-  map,
-  flatten
+  flatten,
+  pluck,
+  uniq,
+  equals
 } from 'ramda';
 
 import {
@@ -21,7 +22,7 @@ import {
   GetConditionsSearchQueryParameterValueState
 } from './models';
 
-const getFoundFields = ({
+export const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -83,32 +84,42 @@ const getConditionsSearchQueryParameterValue = (
     return undefined;
   }
 
-  const toIndividualOperatorValues = ({
-    field,
-    values,
-    value
-  }: ConditionsSearchParameter): Array<Record<string, unknown>> => {
-    if (!isNil(value)) {
-      return [
-        {
-          [field]: value
-        }
-      ];
-    }
-
-    return toPairs(values || {}).map(([operator, operatorValue]) => ({
-      [field]: {
-        [operator]: operatorValue
-      }
-    }));
+  const fields = uniq(pluck('field', conditions));
+
+  const toIndividualOperatorValues = (
+    listField: string
+  ): { $or: Array<Record<string, unknown>> } => {
+    const filteredItems = conditions.filter(({ field }) =>
+      equals(listField, field)
+    );
+
+    return {
+      $or: flatten(
+        filteredItems.map(({ value, values }) => {
+          if (!isNil(value)) {
+            return [
+              {
+                [listField]: value
+              }
+            ];
+          }
+
+          return toPairs(values || {}).map(([operator, operatorValue]) => ({
+            [listField]: {
+              [operator]: operatorValue
+            }
+          }));
+        })
+      )
+    };
   };
 
   return {
-    $and: pipe(map(toIndividualOperatorValues), flatten)(conditions)
+    $and: fields.map(toIndividualOperatorValues)
   };
 };
 
-const getSearchQueryParameterValue = (
+export const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -134,5 +145,3 @@ const getSearchQueryParameterValue = (
 
   return { $and: result };
 };
-
-export default getSearchQueryParameterValue;

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

@@ -115,7 +115,7 @@ describe(buildListingEndpoint, () => {
     });
 
     expect(decodeURIComponent(endpointWithValues)).toContain(
-      '&search={"$and":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}'
+      '&search={"$and":[{"$or":[{"date":{"$gt":"2020-12-01T07:00:00"}},{"date":{"$lt":"2020-12-01T11:00:00"}}]}]}'
     );
 
     const endpointWithValue = buildListingEndpoint({
@@ -134,7 +134,7 @@ describe(buildListingEndpoint, () => {
     });
 
     expect(decodeURIComponent(endpointWithValue)).toContain(
-      '&search={"$and":[{"is_activated":true}]}'
+      '&search={"$and":[{"$or":[{"is_activated":true}]}]}'
     );
   });
 });

package/src/api/buildListingEndpoint/index.ts

@@ -1,7 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import getSearchQueryParameterValue from './getSearchQueryParameterValue';
+import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
 import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({

package/src/api/buildListingEndpoint/models.ts

@@ -18,7 +18,6 @@ export interface Parameters {
   search?: SearchParameter;
   sort?: SortQueryParameterValue;
 }
-
 export interface SearchParameter {
   conditions?: Array<ConditionsSearchParameter>;
   lists?: Array<ListsSearchParameter>;
@@ -53,7 +52,8 @@ export type Operator =
   | '$lk'
   | '$nk'
   | '$in'
-  | '$ni';
+  | '$ni'
+  | '$rg';
 
 export type ConditionValue = {
   [value in Operator]?: string | Array<string>;

package/src/api/customFetch.ts

@@ -1,4 +1,4 @@
-import { equals } from 'ramda';
+import { equals, isNil, startsWith } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
 import { Method } from './useMutationQuery';
@@ -10,6 +10,7 @@ interface ApiErrorResponse {
 
 export interface ResponseError {
   additionalInformation?;
+  data?;
   isError: boolean;
   message: string;
   statusCode: number;
@@ -21,6 +22,7 @@ export interface CatchErrorProps {
 }
 
 interface CustomFetchProps<T> {
+  baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
@@ -41,10 +43,18 @@ export const customFetch = <T>({
   defaultFailureMessage = 'Something went wrong',
   isMutation = false,
   payload,
-  method = 'GET'
+  method = 'GET',
+  baseEndpoint = './api/latest'
 }: CustomFetchProps<T>): Promise<T | ResponseError> => {
   const defaultOptions = { headers, method, signal };
 
+  const formattedEndpoint =
+    !isNil(baseEndpoint) &&
+    !startsWith(baseEndpoint, endpoint) &&
+    !startsWith('./api/internal.php', endpoint)
+      ? `${baseEndpoint}${endpoint}`
+      : endpoint;
+
   const options = isMutation
     ? {
         ...defaultOptions,
@@ -52,7 +62,7 @@ export const customFetch = <T>({
       }
     : defaultOptions;
 
-  return fetch(endpoint, options)
+  return fetch(formattedEndpoint, options)
     .then((response) => {
       if (equals(response.status, 204)) {
         return {
@@ -82,6 +92,15 @@ 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/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 () => {