@centreon/ui 26.5.13 → 26.5.15

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

@@ -31,12 +31,18 @@ const usePickersStartEndDate = ({
 
   const setError = useSetAtom(errorTimePeriodAtom);
 
-  const changeDate = ({ property, date }): void => {
-    const currentDate = customTimePeriod[property];
+  const changeDate = ({
+    property,
+    date
+  }: {
+    property: CustomTimePeriodProperty | string;
+    date: Date;
+  }): void => {
+    const currentDate = customTimePeriod[property as keyof CustomTimePeriod];
     cond([
       [equals(CustomTimePeriodProperty?.start), (): void => setStart(date)],
       [equals(CustomTimePeriodProperty?.end), (): void => setEnd(date)]
-    ])(property);
+    ])(property as CustomTimePeriodProperty);
 
     if (dayjs(date).isSame(dayjs(currentDate)) || !dayjs(date).isValid()) {
       return;

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -25,8 +25,13 @@ const CustomTimePeriod = ({
   const changeCustomTimePeriod = useSetAtom(changeCustomTimePeriodDerivedAtom);
 
   const debouncedChangeDate = useDebounce({
-    functionToDebounce: ({ property, date }): void =>
-      changeCustomTimePeriod({ date, property }),
+    functionToDebounce: (...args: Array<unknown>): void => {
+      const { property, date } = args[0] as {
+        property: string;
+        date: Date;
+      };
+      changeCustomTimePeriod({ date, property });
+    },
     wait: 500
   });
 

package/src/TimePeriods/helpers/index.ts

@@ -26,5 +26,10 @@ export const getTimePeriodById = ({
 }: TimePeriodById): TimePeriod =>
   find<TimePeriod>(propEq(id, 'id'))(timePeriods) as TimePeriod;
 
-export const isInvalidDate = ({ startDate, endDate }): boolean =>
-  dayjs(startDate).isSameOrAfter(dayjs(endDate), 'minute');
+export const isInvalidDate = ({
+  startDate,
+  endDate
+}: {
+  startDate: Date | null;
+  endDate: Date | null;
+}): boolean => dayjs(startDate).isSameOrAfter(dayjs(endDate), 'minute');

package/src/TimePeriods/models.ts

@@ -73,7 +73,10 @@ export interface CustomTimePeriod {
 }
 
 export interface DateTimePickerInputModel {
-  changeDate: (props) => void;
+  changeDate: (props: {
+    property: CustomTimePeriodProperty | string;
+    date: Date;
+  }) => void;
   date: Date | null;
   disabled?: boolean;
   maxDate?: Date;

package/src/TimePeriods/useTimePeriod.ts

@@ -4,7 +4,6 @@ import { useEffect } from 'react';
 import type { WrapperTimePeriodProps } from './models';
 import {
   adjustTimePeriodDerivedAtom,
-  customTimePeriodAtom,
   errorTimePeriodAtom,
   getDatesDerivedAtom,
   selectedTimePeriodAtom
@@ -16,7 +15,6 @@ const useTimePeriod = ({
   adjustTimePeriodData
 }: Omit<WrapperTimePeriodProps, 'extraTimePeriods' | 'disabled'>): void => {
   const selectedTimePeriod = useAtomValue(selectedTimePeriodAtom);
-  const _customTimePeriod = useAtomValue(customTimePeriodAtom);
   const getCurrentEndStartInterval = useAtomValue(getDatesDerivedAtom);
   const errorTimePeriod = useAtomValue(errorTimePeriodAtom);
   const adjustTimeTimePeriod = useSetAtom(adjustTimePeriodDerivedAtom);

package/src/Wizard/ActionsBar.tsx

@@ -27,7 +27,7 @@ const ActionsBar = ({
 }: ActionsBarProps): JSX.Element => {
   const { classes } = useStyles();
 
-  const preventEnterKey = (keyEvent): void => {
+  const preventEnterKey = (keyEvent: React.KeyboardEvent): void => {
     if ((keyEvent.charCode || keyEvent.keyCode) === 13) {
       keyEvent.preventDefault();
     }

package/src/Wizard/index.test.tsx

@@ -1,7 +1,3 @@
-import { useEffect } from "react";
-
-import * as Yup from "yup";
-
 import {
 	fireEvent,
 	type RenderResult,
@@ -10,7 +6,6 @@ import {
 	waitFor,
 } from "../../test/testRenderer";
 import Wizard from ".";
-import type { StepComponentProps } from "./models";
 
 const renderWizardThreeSteps = (): RenderResult =>
 	render(
@@ -50,67 +45,6 @@ const renderWizardOneStep = (): RenderResult =>
 		/>,
 	);
 
-const secondStepValidationSchema = Yup.object().shape({
-	secondInput: Yup.string().required("Required"),
-});
-
-const renderWizardTwoStepsWithFormValidation = (): RenderResult =>
-	render(
-		<Wizard
-			open
-			initialValues={{ secondInput: "" }}
-			steps={[
-				{
-					Component: (): JSX.Element => <div>Step 1</div>,
-					skipFormChangeCheck: true,
-					stepName: "step label 1",
-				},
-				{
-					Component: (): JSX.Element => <div>Step 2</div>,
-					skipFormChangeCheck: true,
-					stepName: "step label 2",
-					validationSchema: secondStepValidationSchema,
-				},
-			]}
-		/>,
-	);
-
-const SecondStep = ({
-	disableNextOnSendingRequests,
-}: StepComponentProps): JSX.Element => {
-	const finishRequests = (): void => {
-		disableNextOnSendingRequests([false, false, false]);
-	};
-
-	useEffect(() => {
-		disableNextOnSendingRequests([true, false, true]);
-	}, [disableNextOnSendingRequests]);
-
-	return (
-		<button type="button" onClick={finishRequests}>
-			Finish requests
-		</button>
-	);
-};
-
-const renderWizardTwoStepsWithSendingRequests = (): RenderResult =>
-	render(
-		<Wizard
-			open
-			steps={[
-				{
-					Component: (): JSX.Element => <div>Step 1</div>,
-					skipFormChangeCheck: true,
-					stepName: "step label 1",
-				},
-				{
-					Component: SecondStep,
-					skipFormChangeCheck: true,
-					stepName: "step label 2",
-				},
-			]}
-		/>,
-	);
 
 describe(Wizard, () => {
 	it("displays the step labels", () => {

package/src/Wizard/index.tsx

@@ -1,6 +1,6 @@
 import { Dialog, DialogContent } from '@mui/material';
 
-import { Formik } from 'formik';
+import { Formik, type FormikHelpers, type FormikValues } from 'formik';
 import { dec, equals, filter, inc, isEmpty, length, not, pipe } from 'ramda';
 import { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -63,13 +63,18 @@ const Wizard = ({
     setCurrentStep(dec(currentStep));
   };
 
-  const disableNextOnSendingRequests = (sendingRequests): void => {
+  const disableNextOnSendingRequests = (
+    sendingRequests: Array<boolean>
+  ): void => {
     setSendingRequest(
       pipe(isEmpty, not)(filter(equals(true), sendingRequests))
     );
   };
 
-  const submit = (values, bag): void => {
+  const submit = (
+    values: FormikValues,
+    bag: FormikHelpers<FormikValues>
+  ): void => {
     if (isLastStep && onSubmit) {
       onSubmit(values, bag);
 
@@ -88,7 +93,7 @@ const Wizard = ({
     onClose?.();
   };
 
-  const handleClose = (_, reason): void => {
+  const handleClose = (_: object, reason: string): void => {
     if (equals(reason, 'backdropClick')) {
       controlDisplayConfirmationDialog();
 
@@ -97,7 +102,7 @@ const Wizard = ({
     onClose?.();
   };
 
-  const handleCloseConfirm = (confirm): void => {
+  const handleCloseConfirm = (confirm: boolean): void => {
     setOpenConfirm(false);
     if (!confirm) {
       return;

package/src/Wizard/models.ts

@@ -12,7 +12,7 @@ export interface Step {
   skipFormChangeCheck?: boolean;
   stepName: string;
   validate?: (values: FormikValues) => FormikErrors<FormikValues>;
-  validationSchema?;
+  validationSchema?: unknown;
 }
 
 interface ActionsBarLabels {

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -15,6 +15,7 @@ import type {
   ConditionsSearchParameter,
   GetConditionsSearchQueryParameterValueState,
   GetListsSearchQueryParameterValueProps,
+  ListsSearchParameter,
   RegexSearchParameter,
   RegexSearchQueryParameterValue,
   SearchMatch,
@@ -64,7 +65,7 @@ const getRegexSearchQueryParameterValue = (
 };
 
 const getListsSearchQueryParameterValue = (
-  lists
+  lists: Array<ListsSearchParameter> | undefined
 ): GetListsSearchQueryParameterValueProps | undefined => {
   if (lists === undefined) {
     return undefined;

package/src/api/buildListingEndpoint/index.ts

@@ -34,11 +34,17 @@ const getQueryParameters = ({
   ];
 };
 
+interface BuildEndpointProps {
+  apiFormat: 'Standard' | 'JSON-LD';
+  baseEndpoint?: string;
+  queryParameters: Array<QueryParameter>;
+}
+
 const buildEndpoint = ({
   baseEndpoint,
   queryParameters,
   apiFormat
-}): string => {
+}: BuildEndpointProps): string => {
   return `${baseEndpoint}?${toRawQueryParameters({ apiFormat, queryParameters })}`;
 };
 

package/src/api/customFetch.ts

@@ -9,8 +9,8 @@ interface ApiErrorResponse {
 }
 
 export interface ResponseError {
-  additionalInformation?;
-  data?;
+  additionalInformation?: unknown;
+  data?: unknown;
   isError: boolean;
   message: string;
   statusCode: number;
@@ -30,7 +30,7 @@ interface CustomFetchProps<T> {
   headers?: Headers;
   isMutation?: boolean;
   method?: string;
-  payload?;
+  payload?: unknown;
   signal?: AbortSignal;
 }
 

package/src/api/useBulkResponse.ts

@@ -4,7 +4,6 @@ import {
   isEmpty,
   isNil,
   last,
-  length,
   prop,
   propEq,
   split
@@ -12,6 +11,24 @@ import {
 
 import useSnackbar from '../Snackbar/useSnackbar';
 
+interface BulkResponseItem {
+  id: number | string;
+  name: string;
+}
+
+interface BulkResponseData {
+  href?: string;
+  status: number;
+}
+
+interface HandleBulkResponseProps {
+  data: Array<BulkResponseData> | undefined;
+  items: Array<BulkResponseItem>;
+  labelFailed: string;
+  labelSuccess: string;
+  labelWarning: string;
+}
+
 const useBulkResponse = () => {
   const { showSuccessMessage, showErrorMessage, showWarningMessage } =
     useSnackbar();
@@ -22,17 +39,17 @@ const useBulkResponse = () => {
     labelWarning,
     labelFailed,
     items
-  }) => {
+  }: HandleBulkResponseProps) => {
     const successfullResponses =
       data?.filter(propEq(204, 'status')) || isNil(data);
 
     const failedResponses = data?.filter(complement(propEq(204, 'status')));
 
-    const failedResponsesIds = failedResponses
+    const failedResponsesIds = (failedResponses
       ?.map(prop('href'))
-      ?.map((item: string) =>
-        Number.parseInt(last(split('/', item || '')) as string, 10)
-      );
+      ?.map((item) =>
+        Number.parseInt(last(split('/', (item as string) || '')) as string, 10)
+      ) || []) as Array<number>;
 
     if (isEmpty(successfullResponses)) {
       showErrorMessage(labelFailed);
@@ -40,10 +57,15 @@ const useBulkResponse = () => {
       return;
     }
 
-    if (length(successfullResponses) < length(data)) {
+    const successCount = (successfullResponses as Array<BulkResponseData>)
+      .length;
+    const totalCount = data?.length ?? 0;
+    if (successCount < totalCount) {
       const failedResponsesNames = items
-        ?.filter((item) => includes(item.id, failedResponsesIds))
-        .map((item) => item.name);
+        ?.filter((item: BulkResponseItem) =>
+          includes(item.id, failedResponsesIds)
+        )
+        .map((item: BulkResponseItem) => item.name);
 
       showWarningMessage(`${labelWarning}: ${failedResponsesNames.join(', ')}`);
 

package/src/api/useFetchQuery/index.ts

@@ -38,13 +38,26 @@ export interface UseFetchQueryProps<T> {
   useLongCache?: boolean;
 }
 
+export interface PrefetchPageParams {
+  getPrefetchQueryKey: (page: number) => QueryKey;
+  page: number;
+}
+
+export interface PrefetchQueryParams {
+  endpointParams?: PrefetchEndpointParams;
+  queryKey: QueryKey;
+}
+
 export type UseFetchQueryState<T> = {
   data?: T;
   error: Omit<ResponseError, 'isError'> | null;
   fetchQuery: () => Promise<T | ResponseError>;
-  prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
-  prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
-  prefetchQuery: ({ endpointParams, queryKey }) => void;
+  prefetchNextPage: ({ page, getPrefetchQueryKey }: PrefetchPageParams) => void;
+  prefetchPreviousPage: ({
+    page,
+    getPrefetchQueryKey
+  }: PrefetchPageParams) => void;
+  prefetchQuery: ({ endpointParams, queryKey }: PrefetchQueryParams) => void;
 } & Omit<QueryObserverBaseResult, 'data' | 'error'>;
 
 export interface PrefetchEndpointParams {
@@ -107,7 +120,10 @@ const useFetchQuery = <T extends object>({
     }
   };
 
-  const prefetchQuery = ({ endpointParams, queryKey }): void => {
+  const prefetchQuery = ({
+    endpointParams,
+    queryKey
+  }: PrefetchQueryParams): void => {
     queryClient.prefetchQuery({
       queryFn: ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
@@ -123,7 +139,10 @@ const useFetchQuery = <T extends object>({
     });
   };
 
-  const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
+  const prefetchNextPage = ({
+    page,
+    getPrefetchQueryKey
+  }: PrefetchPageParams): void => {
     if (!isPaginated) {
       return;
     }
@@ -136,7 +155,10 @@ const useFetchQuery = <T extends object>({
     });
   };
 
-  const prefetchPreviousPage = ({ page, getPrefetchQueryKey }): void => {
+  const prefetchPreviousPage = ({
+    page,
+    getPrefetchQueryKey
+  }: PrefetchPageParams): void => {
     if (!isPaginated) {
       return;
     }

package/src/api/useGraphQuery/index.ts

@@ -74,7 +74,7 @@ interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
   base: number;
 }
 
-export const resourceTypeQueryParameter = {
+export const resourceTypeQueryParameter: Record<string, string> = {
   [WidgetResourceType.host]: 'host.id',
   [WidgetResourceType.hostCategory]: 'hostcategory.id',
   [WidgetResourceType.hostGroup]: 'hostgroup.id',

package/src/api/useRequest/index.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { type CancelToken } from 'axios';
 import { defaultTo, includes, or, path, pathOr } from 'ramda';
 import { useEffect, useState } from 'react';
 import type { JsonDecoder } from 'ts.data.json';
@@ -10,13 +10,13 @@ import useCancelTokenSource from '../useCancelTokenSource';
 export interface RequestParams<TResult> {
   decoder?: JsonDecoder.Decoder<TResult>;
   defaultFailureMessage?: string;
-  getErrorMessage?: (error) => string;
+  getErrorMessage?: (error: unknown) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
-  request: (token) => (params?) => Promise<TResult>;
+  request: (token: CancelToken) => (params?: unknown) => Promise<TResult>;
 }
 
 export interface RequestResult<TResult> {
-  sendRequest: (params?) => Promise<TResult>;
+  sendRequest: (params?: unknown) => Promise<TResult>;
   sending: boolean;
 }
 
@@ -36,8 +36,8 @@ const useRequest = <TResult>({
     return (): void => cancel();
   }, [cancel]);
 
-  const showRequestErrorMessage = (error): void => {
-    errorLog(error.message);
+  const showRequestErrorMessage = (error: { message?: string }): void => {
+    errorLog(error.message ?? '');
 
     const message = or(
       pathOr(undefined, ['response', 'data', 'message'], error),
@@ -49,7 +49,7 @@ const useRequest = <TResult>({
     showErrorMessage(errorMessage as string);
   };
 
-  const sendRequest = (params): Promise<TResult> => {
+  const sendRequest = (params?: unknown): Promise<TResult> => {
     setSending(true);
 
     return request(token)(params)

package/src/components/Button/Button.tsx

@@ -26,7 +26,7 @@ export type ButtonProps = AriaLabelingAttributes &
     icon?: string | ReactNode;
     iconVariant?: 'none' | 'start' | 'end';
     isDanger?: boolean;
-    onClick?: (e) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     ref?: React.Ref<HTMLButtonElement>;
     size?: 'small' | 'medium' | 'large';
     type?: 'button' | 'submit' | 'reset';

package/src/components/Button/Icon/IconButton.tsx

@@ -21,7 +21,7 @@ const muiColorMap: Record<
 type IconButtonProps = {
   disabled?: boolean;
   icon?: string | ReactNode;
-  onClick?: (e) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   size?: 'small' | 'medium' | 'large';
   variant?: 'primary' | 'secondary' | 'ghost';
 } & AriaLabelingAttributes &

package/src/components/CrudPage/Listing.tsx

@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 
-import { ColumnType } from '../../../';
+import { type Column, ColumnType } from '../../../';
 import { MemoizedListing } from '../../Listing';
 import Actions from './Actions/Actions';
 import {
@@ -34,7 +34,7 @@ const Listing = <TData extends { id: number; name: string }>({
   const changeSort = useSetAtom(changeSortAtom);
 
   const listingColumns = columns.concat({
-    Component: ColumnActions,
+    Component: ColumnActions as Column['Component'],
     clickable: true,
     id: 'actions',
     label: '',
@@ -50,7 +50,7 @@ const Listing = <TData extends { id: number; name: string }>({
       isActionBarVisible
       limit={limit}
       loading={isLoading}
-      onLimitChange={setLimit}
+      onLimitChange={(newLimit) => setLimit(Number(newLimit))}
       onPaginate={setPage}
       onSort={changeSort}
       rows={rows}

package/src/components/CrudPage/utils.ts

@@ -1,4 +1,4 @@
 import { equals, type } from 'ramda';
 
-export const isAFunction = (property): boolean =>
+export const isAFunction = (property: unknown): boolean =>
   equals('Function', type(property));

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

@@ -11,7 +11,10 @@ import { useAccessRightsChange } from './useAccessRightsChange';
 import { useAccessRightsInitValues } from './useAccessRightsInitValues';
 
 interface Props {
-  cancel?: ({ dirty, values }) => void;
+  cancel?: (params: {
+    dirty: boolean;
+    values: Array<AccessRightInitialValues>;
+  }) => void;
   endpoints: Endpoints;
   initialValues: Array<AccessRightInitialValues>;
   isSubmitting?: boolean;

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

@@ -8,7 +8,10 @@ import { useActionsStyles } from './Actions.styles';
 import { useActions } from './useActions';
 
 interface Props {
-  cancel?: ({ dirty, values }) => void;
+  cancel?: (params: {
+    dirty: boolean;
+    values: Array<AccessRightInitialValues>;
+  }) => void;
   clear: () => void;
   isSubmitting?: boolean;
   labels: Labels['actions'];

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

@@ -43,8 +43,8 @@ const ShareInput = ({ labels, endpoints, roles }: Props): ReactElement => {
       <ContactSwitch labels={labels} />
       <div className={classes.inputs}>
         <SingleConnectedAutocompleteField
+          {...({ clearable: true } as Record<string, unknown>)}
           changeIdValue={changeIdValue}
-          clearable
           disableClearable={false}
           field="name"
           fullWidth

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

@@ -2,6 +2,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 import { equals, includes, isNil } from 'ramda';
+import type React from 'react';
 import {
   type Dispatch,
   type ReactElement,
@@ -11,6 +12,7 @@ import {
 } from 'react';
 
 import { buildListingEndpoint, type SelectEntry } from '../../../..';
+import type { SearchParameter } from '../../../../api/buildListingEndpoint/models';
 import {
   accessRightIdsDerivedAtom,
   addAccessRightDerivedAtom,
@@ -22,14 +24,28 @@ import {
   type Endpoints
 } from '../models';
 
+interface ShareInputOption {
+  id: number | string;
+  most_permissive_role?: 'editor' | 'viewer';
+  name: string;
+}
+
+interface ShareInputEndpointParameters {
+  page: number;
+  search?: SearchParameter;
+}
+
 interface UseShareInputState {
   add: () => void;
-  changeIdValue: (entry: SelectEntry) => void;
-  getEndpoint: (parameters) => string;
-  getOptionDisabled: (option) => boolean;
+  changeIdValue: (entry: SelectEntry) => string;
+  getEndpoint: (parameters: ShareInputEndpointParameters) => string;
+  getOptionDisabled: (option: SelectEntry) => boolean;
   isContactGroup: boolean;
-  getRenderedOptionText: (option: unknown) => ReactElement | string;
-  selectContact: (_, entry) => void;
+  getRenderedOptionText: (option: SelectEntry) => ReactElement | string;
+  selectContact: (
+    _: React.SyntheticEvent,
+    entry: AccessRightInitialValues | null | unknown
+  ) => void;
   selectedContact: AccessRightInitialValues | null;
   selectedRole: string;
   setSelectedRole: Dispatch<SetStateAction<string>>;
@@ -46,9 +62,13 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const isContactGroup = equals(contactType, ContactType.ContactGroup);
 
-  const selectContact = (_, entry): void => {
-    setSelectedContact(entry);
-    if (equals('editor', entry?.most_permissive_role)) {
+  const selectContact = (
+    _: React.SyntheticEvent,
+    entry: AccessRightInitialValues | null | unknown
+  ): void => {
+    const value = entry as AccessRightInitialValues | null;
+    setSelectedContact(value);
+    if (equals('editor', value?.most_permissive_role)) {
       return;
     }
     setSelectedRole('viewer');
@@ -70,7 +90,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
     setSelectedContact(null);
   };
 
-  const getEndpoint = (parameters): string =>
+  const getEndpoint = (parameters: ShareInputEndpointParameters): string =>
     buildListingEndpoint({
       baseEndpoint: isContactGroup ? endpoints.contactGroup : endpoints.contact,
       parameters: {
@@ -79,18 +99,20 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
       }
     });
 
-  const getRenderedOptionText = (option): ReactElement => {
+  const getRenderedOptionText = (option: SelectEntry): ReactElement => {
+    const value = option as ShareInputOption | undefined;
+
     return (
       <>
-        {option?.name}
-        {includes(option?.id, accessRightIds) && (
+        {value?.name}
+        {includes(value?.id, accessRightIds) && (
           <CheckCircleIcon color="success" />
         )}
       </>
     );
   };
 
-  const getOptionDisabled = (option): boolean => {
+  const getOptionDisabled = (option: SelectEntry): boolean => {
     return includes(option.id, accessRightIds);
   };