@centreon/ui 26.7.0 → 26.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.7.0",
+  "version": "26.7.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -72,17 +72,19 @@ const DashboardTemplate = ({
   header,
   layout = dashboardLayout
 }: DashboardTemplateProps): ReactElement => (
-  <DashboardLayout.Layout<CustomLayout> layout={layout}>
-    {layout.map(({ i, content, shouldUseFluidTypography }) => (
-      <DashboardLayout.Item header={header} id={i} key={i}>
-        {shouldUseFluidTypography ? (
-          <FluidTypography text={content} />
-        ) : (
-          <Typography>{content}</Typography>
-        )}
-      </DashboardLayout.Item>
-    ))}
-  </DashboardLayout.Layout>
+  <div className="h-150 overflow-y-auto">
+    <DashboardLayout.Layout<CustomLayout> layout={layout}>
+      {layout.map(({ i, content, shouldUseFluidTypography }) => (
+        <DashboardLayout.Item header={header} id={i} key={i}>
+          {shouldUseFluidTypography ? (
+            <FluidTypography text={content} />
+          ) : (
+            <Typography>{content}</Typography>
+          )}
+        </DashboardLayout.Item>
+      ))}
+    </DashboardLayout.Layout>
+  </div>
 );
 
 const meta: Meta<typeof DashboardTemplate> = {

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -278,7 +278,6 @@ const ResponsiveBarChart = ({
         placement="top"
       >
         <div className={classes.tooltipChildren}>
-          {/* @ts-expect-error - suppressing pre-existing type mismatch */}
           <ChartSvgWrapper
             allUnits={allUnits}
             axis={axis}

package/src/Graph/Chart/Chart.tsx

@@ -317,7 +317,6 @@ const Chart = ({
             tooltip={tooltip}
           >
             <div className={classes.tooltipChildren}>
-              {/* @ts-expect-error - suppressing pre-existing type mismatch */}
               <ChartSvgWrapper
                 allUnits={allUnits}
                 axis={axis}

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -8,6 +8,8 @@ import type { Thresholds } from '../common/models';
 
 type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
 
+const AnimatedPath = animated('path');
+
 const fromLeaveTransition = ({
   endAngle
 }: {
@@ -63,7 +65,7 @@ const AnimatedPie = <Datum,>({
 
   return transitions((props, arc, { key }) => (
     <g key={key}>
-      <animated.path
+      <AnimatedPath
         d={to([props.startAngle, props.endAngle], (startAngle, endAngle) =>
           path({
             ...arc,

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -20,6 +20,8 @@ import type { SingleBarProps } from './models';
 import { barHeights, lineMargins } from './ThresholdLine';
 import Thresholds, { groupMargin } from './Thresholds';
 
+const AnimatedRect = animated('rect');
+
 interface Props extends SingleBarProps {
   height: number;
   width: number;
@@ -176,7 +178,7 @@ const ResponsiveSingleBar = ({
             <title>single bar</title>
             <Group.Group>
               {text}
-              <animated.rect
+              <AnimatedRect
                 data-testid={`${latestMetricData}-bar-${barColor}`}
                 fill={barColor}
                 height={realBarHeight}

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -1,7 +1,7 @@
 import { Group } from '@visx/visx';
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import { equals } from 'ramda';
-import type { MutableRefObject, ReactElement } from 'react';
+import type { MutableRefObject, ReactElement, ReactNode } from 'react';
 
 import { margin } from '../../Chart/common';
 import type { ChartAxis } from '../../Chart/models';
@@ -15,7 +15,7 @@ interface Props {
   allUnits: Array<string>;
   axis?: ChartAxis;
   base?: number;
-  children: JSX.Element;
+  children: ReactNode;
   displayedLines: Array<Line>;
   graphHeight: number;
   graphWidth: number;

package/src/Graph/common/timeSeries/index.ts

@@ -343,19 +343,14 @@ const getTimeSeriesForLines = ({
   return map(
     ({ timeTick, ...metricsValue }): TimeValue => ({
       ...reduce(
-        (acc, metric_id): Omit<TimeValue, 'timePick'> => {
-          return {
-            ...acc,
-            [metric_id]:
-              invert &&
-              metricsValue[metric_id] &&
-              gt(metricsValue[metric_id], 0)
-                ? negate(metricsValue[metric_id])
-                : metricsValue[metric_id]
-          };
-        },
-        // @ts-expect-error - suppressing pre-existing type mismatch
-        {},
+        (acc, metric_id): Omit<TimeValue, 'timePick'> => ({
+          ...acc,
+          [metric_id]:
+            invert && metricsValue[metric_id] && gt(metricsValue[metric_id], 0)
+              ? negate(metricsValue[metric_id])
+              : metricsValue[metric_id]
+        }),
+        {} as Omit<TimeValue, 'timePick'>,
         metrics
       ),
       timeTick

package/src/InputField/Select/Autocomplete/Connected/index.stories.tsx

@@ -36,6 +36,7 @@ const getEndpoint = ({ endpoint, parameters }): string =>
 
 const mockSearch = (page: number): object => ({
   delay: 1000,
+  headers: { 'Content-Type': 'application/json' },
   method: 'GET',
   response: (request): Listing<SelectEntry> => {
     const { searchParams } = request;

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -1,129 +1,130 @@
 import {
-	act,
-	fireEvent,
-	getFetchCall,
-	mockResponse,
-	type RenderResult,
-	render,
-	resetMocks,
-	waitFor,
-} from "../../../../../test/testRenderer";
-import buildListingEndpoint from "../../../../api/buildListingEndpoint";
+  act,
+  fireEvent,
+  getFetchCall,
+  mockResponse,
+  type RenderResult,
+  render,
+  resetMocks,
+  waitFor
+} from '../../../../../test/testRenderer';
+import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import type {
-	BuildListingEndpointParameters,
-	ConditionsSearchParameter,
-} from "../../../../api/buildListingEndpoint/models";
-import TestQueryProvider from "../../../../api/TestQueryProvider";
+  BuildListingEndpointParameters,
+  ConditionsSearchParameter
+} from '../../../../api/buildListingEndpoint/models';
+import TestQueryProvider from '../../../../api/TestQueryProvider';
+import SingleConnectedAutocompleteField from './Single';
 
-import SingleConnectedAutocompleteField from "./Single";
-
-const label = "Connected Autocomplete";
-const placeholder = "Type here...";
+const label = 'Connected Autocomplete';
+const placeholder = 'Type here...';
 
 const optionsData = {
-	meta: {
-		limit: 2,
-		page: 1,
-		total: 20,
-	},
-	result: [
-		{ id: 0, name: "My Option 1" },
-		{ id: 1, name: "My Option 2" },
-	],
+  meta: {
+    limit: 2,
+    page: 1,
+    total: 20
+  },
+  result: [
+    { id: 0, name: 'My Option 1' },
+    { id: 1, name: 'My Option 2' }
+  ]
 };
 
-const baseEndpoint = "endpoint";
+const baseEndpoint = 'endpoint';
 
 const getEndpoint = (
-	parameters: BuildListingEndpointParameters["parameters"],
+  parameters: BuildListingEndpointParameters['parameters']
 ): string => {
-	return buildListingEndpoint({ baseEndpoint, parameters });
+  return buildListingEndpoint({ baseEndpoint, parameters });
 };
 
 interface Props {
-	searchConditions?: Array<ConditionsSearchParameter>;
+  searchConditions?: Array<ConditionsSearchParameter>;
 }
 
+const mockParams = { headers: { 'Content-Type': 'application/json' } };
+
 const renderSingleConnectedAutocompleteField = (
-	{ searchConditions }: Props = { searchConditions: undefined },
+  { searchConditions }: Props = { searchConditions: undefined }
 ): RenderResult =>
-	render(
-		<TestQueryProvider>
-			<SingleConnectedAutocompleteField
-				baseEndpoint=""
-				field="host.name"
-				getEndpoint={getEndpoint}
-				label={label}
-				placeholder="Type here..."
-				searchConditions={searchConditions}
-			/>
-		</TestQueryProvider>,
-	);
+  render(
+    <TestQueryProvider>
+      <SingleConnectedAutocompleteField
+        baseEndpoint=""
+        field="host.name"
+        getEndpoint={getEndpoint}
+        label={label}
+        placeholder="Type here..."
+        searchConditions={searchConditions}
+      />
+    </TestQueryProvider>
+  );
 
 describe(SingleConnectedAutocompleteField, () => {
-	beforeEach(() => {
-		resetMocks();
-		mockResponse({ data: optionsData });
-	});
-
-	it("populates options with the first page result from the endpoint request", async () => {
-		const { getByLabelText, getByText } =
-			renderSingleConnectedAutocompleteField();
-
-		fireEvent.click(getByLabelText("Open"));
-
-		expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
-
-		await waitFor(() => {
-			expect(getByText("My Option 1")).toBeInTheDocument();
-		});
-	});
-
-	it("populates options with the first page result from the endpoint request after typing something in input field", async () => {
-		const { getByLabelText, getByPlaceholderText } =
-			renderSingleConnectedAutocompleteField();
-
-		act(() => {
-			fireEvent.click(getByLabelText("Open"));
-		});
-
-		await waitFor(() => {
-			expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
-		});
-
-		await waitFor(() => {
-			expect(getFetchCall(1)).toEqual(`${baseEndpoint}?page=2`);
-		});
-
-		fireEvent.change(getByPlaceholderText(placeholder), {
-			target: { value: "My Option 2" },
-		});
-
-		await waitFor(() => {
-			expect(decodeURIComponent(getFetchCall(2) as string)).toEqual(
-				'endpoint?page=1&search={"$and":[{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}]}',
-			);
-		});
-	});
-
-	it("adds search conditions to the endpoint request when the corresponding prop is passed", async () => {
-		const { getByLabelText } = renderSingleConnectedAutocompleteField({
-			searchConditions: [
-				{
-					field: "parent_name",
-					value: {
-						$eq: "Centreon-Server",
-					},
-				},
-			],
-		});
-
-		fireEvent.click(getByLabelText("Open"));
-
-		await waitFor(() => {
-			expect(getFetchCall(0)).toEqual(
-				`${baseEndpoint}?page=1&search=%7B%22%24and%22%3A%5B%7B%22%24or%22%3A%5B%7B%22parent_name%22%3A%7B%22%24eq%22%3A%22Centreon-Server%22%7D%7D%5D%7D%5D%7D`,
-			);
-		});
-	});
+  beforeEach(() => {
+    resetMocks();
+    mockResponse({ data: optionsData, options: mockParams });
+  });
+
+  it('populates options with the first page result from the endpoint request', async () => {
+    const { getByLabelText, getByText } =
+      renderSingleConnectedAutocompleteField();
+
+    fireEvent.click(getByLabelText('Open'));
+
+    expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
+
+    await waitFor(() => {
+      expect(getByText('My Option 1')).toBeInTheDocument();
+    });
+  });
+
+  it('populates options with the first page result from the endpoint request after typing something in input field', async () => {
+    const { getByLabelText, getByPlaceholderText } =
+      renderSingleConnectedAutocompleteField();
+
+    act(() => {
+      fireEvent.click(getByLabelText('Open'));
+    });
+
+    await waitFor(() => {
+      expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
+    });
+
+    await waitFor(() => {
+      expect(getFetchCall(1)).toEqual(`${baseEndpoint}?page=2`);
+    });
+
+    fireEvent.change(getByPlaceholderText(placeholder), {
+      target: { value: 'My Option 2' }
+    });
+
+    await waitFor(() => {
+      expect(decodeURIComponent(getFetchCall(2) as string)).toEqual(
+        'endpoint?page=1&search={"$and":[{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}]}'
+      );
+    });
+  });
+
+  it('adds search conditions to the endpoint request when the corresponding prop is passed', async () => {
+    const { getByLabelText } = renderSingleConnectedAutocompleteField({
+      searchConditions: [
+        {
+          field: 'parent_name',
+          value: {
+            $eq: 'Centreon-Server'
+          }
+        }
+      ]
+    });
+
+    fireEvent.click(getByLabelText('Open'));
+
+    await waitFor(() => {
+      expect(getFetchCall(0)).toEqual(
+        `${baseEndpoint}?page=1&search=%7B%22%24and%22%3A%5B%7B%22%24or%22%3A%5B%7B%22parent_name%22%3A%7B%22%24eq%22%3A%22Centreon-Server%22%7D%7D%5D%7D%5D%7D`
+      );
+    });
+  });
 });

package/src/InputField/Text/index.stories.tsx

@@ -104,7 +104,13 @@ export const autoSizeWithEndAdornment = (): JSX.Element => (
     autoSize
     autoSizeCustomPadding={10}
     autoSizeDefaultWidth={60}
-    EndAdornment={AbcIcon}
     placeholder="Auto size"
+    textFieldSlotsAndSlotProps={{
+      slotProps: {
+        input: {
+          endAdornment: <AbcIcon />
+        }
+      }
+    }}
   />
 );

package/src/Listing/ActionBar/PaginationActions.tsx

@@ -3,7 +3,16 @@ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import LastPageIcon from '@mui/icons-material/LastPage';
 import IconButton from '@mui/material/IconButton';
-import type { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions';
+
+type TablePaginationActionsProps = {
+  count: number;
+  onPageChange: (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    page: number
+  ) => void;
+  page: number;
+  rowsPerPage: number;
+};
 
 import { useTranslation } from 'react-i18next';
 

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -48,7 +48,7 @@ const SelectActionListingHeaderCell = ({
           icon={<ArrowDropDownIcon />}
           title={labelPredefinedRowsSelectionMenu}
         >
-          {(props): JSX.Element => (
+          {(props: { close?: () => void } | undefined): JSX.Element => (
             <PredefinedSelectionList
               close={props?.close ?? ((): void => undefined)}
               onSelectRowsWithCondition={onSelectRowsWithCondition}

package/src/api/customFetch.ts

@@ -74,8 +74,13 @@ export const customFetch = <T>({
         };
       }
 
-      return response
-        .json()
+      const responseParsingMethod = response.headers
+        .get('Content-Type')
+        ?.startsWith('text')
+        ? 'text'
+        : 'json';
+
+      return response[responseParsingMethod]()
         .then((data) => {
           if (!response.ok) {
             const defaultError = {

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

@@ -37,6 +37,8 @@ const renderFetchQuery = <T extends object>(
     wrapper: TestQueryProvider
   }) as RenderHookResult<UseFetchQueryState<T>, unknown>;
 
+const mockParams = { headers: { 'Content-Type': 'application/json' } };
+
 describe('useFetchQuery', () => {
   beforeEach(() => {
     mockedShowErrorMessage.mockReset();
@@ -57,7 +59,7 @@ describe('useFetchQuery', () => {
   });
 
   it('retrieves data from an endpoint', async () => {
-    fetchMock.once(JSON.stringify(user));
+    fetchMock.once(JSON.stringify(user), mockParams);
     const { result } = renderFetchQuery<User>({
       getEndpoint: () => '/endpoint',
       getQueryKey: () => ['queryKey']
@@ -70,6 +72,7 @@ describe('useFetchQuery', () => {
 
   it("shows an error from the API via the Snackbar and inside the browser's console", async () => {
     fetchMock.once(JSON.stringify({ code: 2, message: 'custom message' }), {
+      ...mockParams,
       status: 400
     });
 
@@ -109,6 +112,7 @@ describe('useFetchQuery', () => {
 
   it('shows a default failure message via the Snackbar as fallback', async () => {
     fetchMock.once(JSON.stringify({}), {
+      ...mockParams,
       status: 400
     });
 
@@ -134,6 +138,7 @@ describe('useFetchQuery', () => {
 
   it('does not show any message via the Snackbar when the httpCodesBypassErrorSnackbar is passed', async () => {
     fetchMock.once(JSON.stringify({}), {
+      ...mockParams,
       status: 400
     });
 

package/src/api/useFetchQuery/index.ts

@@ -38,16 +38,16 @@ export interface UseFetchQueryProps<T> {
   useLongCache?: boolean;
 }
 
-export interface PrefetchPageParams {
-  getPrefetchQueryKey: (page: number) => QueryKey;
-  page: number;
-}
-
 export interface PrefetchQueryParams {
   endpointParams?: PrefetchEndpointParams;
   queryKey: QueryKey;
 }
 
+export interface PrefetchPageParams {
+  getPrefetchQueryKey: (page: number) => QueryKey;
+  page: number;
+}
+
 export type UseFetchQueryState<T> = {
   data?: T;
   error: Omit<ResponseError, 'isError'> | null;
@@ -82,7 +82,11 @@ const useFetchQuery = <T extends object>({
 
   const { showErrorMessage } = useSnackbar();
 
-  const isCypressTest = equals(window.Cypress?.testingType, 'component');
+  const isCypressTest = equals(
+    (window as Window & { Cypress?: { testingType: string } }).Cypress
+      ?.testingType,
+    'component'
+  );
 
   const cacheOptions =
     !isCypressTest && useLongCache ? { gcTime: 60 * 1000 } : {};

package/src/components/Tabs/Tab.styles.ts

@@ -10,9 +10,6 @@ export const useTabsStyles = makeStyles()((theme) => ({
     minWidth: 0,
     padding: theme.spacing(0.5, 0)
   },
-  tabPanel: {
-    padding: theme.spacing(1, 0, 0)
-  },
   tabs: {
     minHeight: theme.spacing(4.5)
   }

package/src/components/Tabs/TabPanel.tsx

@@ -1,22 +1,12 @@
 import { TabPanel as MuiTabPanel } from '@mui/lab';
 
-import { useTabsStyles } from './Tab.styles';
-
 type Props = {
   children: JSX.Element;
   value: string;
 };
 
-export const TabPanel = ({ children, value }: Props): JSX.Element => {
-  const { classes } = useTabsStyles();
-
-  return (
-    <MuiTabPanel
-      className={classes.tabPanel}
-      data-tabPanel={value}
-      value={value}
-    >
-      {children}
-    </MuiTabPanel>
-  );
-};
+export const TabPanel = ({ children, value }: Props): JSX.Element => (
+  <MuiTabPanel className="p-0 pt-2" data-tabPanel={value} value={value}>
+    {children}
+  </MuiTabPanel>
+);