@centreon/ui 26.7.1 → 26.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.7.1",
+  "version": "26.7.3",
   "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/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/Pagination.tsx

@@ -23,7 +23,8 @@ const MemoizedPagination = memo(
     equals(prevProps.page, nextProps.page) &&
     equals(prevProps.count, nextProps.count) &&
     equals(prevProps.labelRowsPerPage, nextProps.labelRowsPerPage) &&
-    equals(prevProps.className, nextProps.className)
+    equals(prevProps.className, nextProps.className) &&
+    prevProps.labelDisplayedRows === nextProps.labelDisplayedRows
 );
 
 export default MemoizedPagination;

package/src/Listing/ActionBar/index.tsx

@@ -1,17 +1,31 @@
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
+import Tooltip from '@mui/material/Tooltip';
 
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
 import { useAtomValue } from 'jotai';
 import { equals, isEmpty, isNil, not, pick } from 'ramda';
+import {
+  type ChangeEvent,
+  type MouseEvent,
+  type ReactNode,
+  useCallback
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import { IconButton, type ListingProps } from '../..';
 import { useMemoComponent } from '../../utils';
-import { labelOf, labelRowsPerPage } from '../translatedLabels';
+import {
+  labelApproximateCount,
+  labelApproximateCountTooltip,
+  labelComputingExactCount,
+  labelOf,
+  labelRowsPerPage
+} from '../translatedLabels';
 import ColumnMultiSelect from './ColumnMultiSelect';
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';
@@ -87,6 +101,9 @@ type Props = Pick<
   | 'customPaginationClassName'
   | 'listingVariant'
   | 'viewerModeConfiguration'
+  | 'approximateTotalRows'
+  | 'onApproximateCountClick'
+  | 'isApproximateCountLoading'
 >;
 
 const MemoListingActionBar = ({
@@ -106,7 +123,10 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  listingVariant
+  listingVariant,
+  approximateTotalRows = false,
+  onApproximateCountClick,
+  isApproximateCountLoading = false
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -118,28 +138,88 @@ const MemoListingActionBar = ({
   const { themeMode } = useAtomValue(userAtom);
 
   const changeRowPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>
+    event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
   ): void => {
     onLimitChange?.(event.target.value);
     onPaginate?.(0);
   };
 
   const changePage = (
-    _: React.MouseEvent<HTMLButtonElement> | null,
+    _: MouseEvent<HTMLButtonElement> | null,
     value: number
   ): void => {
     onPaginate?.(value);
   };
 
-  const labelDisplayedRows = ({
-    from,
-    to,
-    count
-  }: {
-    from: number;
-    to: number;
-    count: number;
-  }): string => `${from}-${to} ${t(labelOf)} ${count}`;
+  const labelDisplayedRows = useCallback(
+    ({
+      from,
+      to,
+      count
+    }: {
+      count: number;
+      from: number;
+      to: number;
+    }): ReactNode => {
+      const range = `${from}-${to} ${t(labelOf)} `;
+
+      if (!approximateTotalRows) {
+        return `${range}${count}`;
+      }
+
+      if (isApproximateCountLoading) {
+        return (
+          <span
+            style={{ alignItems: 'center', display: 'inline-flex', gap: 4 }}
+          >
+            {range}
+            <CircularProgress size={10} />
+            <span>{t(labelComputingExactCount)}</span>
+          </span>
+        );
+      }
+
+      const approximateLabel = (
+        <button
+          onClick={onApproximateCountClick}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'inherit',
+            cursor: onApproximateCountClick ? 'pointer' : 'default',
+            font: 'inherit',
+            fontWeight: 600,
+            padding: 0,
+            textDecoration: onApproximateCountClick
+              ? 'underline dotted'
+              : 'none'
+          }}
+          type="button"
+        >
+          {t(labelApproximateCount)}
+        </button>
+      );
+
+      return (
+        <span>
+          {range}
+          {onApproximateCountClick ? (
+            <Tooltip title={t(labelApproximateCountTooltip)}>
+              {approximateLabel}
+            </Tooltip>
+          ) : (
+            approximateLabel
+          )}
+        </span>
+      );
+    },
+    [
+      approximateTotalRows,
+      isApproximateCountLoading,
+      onApproximateCountClick,
+      t
+    ]
+  );
 
   return useMemoComponent({
     Component: (
@@ -233,6 +313,8 @@ const MemoListingActionBar = ({
       ),
       columnConfiguration,
       customPaginationClassName,
+      approximateTotalRows,
+      isApproximateCountLoading,
       ...actionsBarMemoProps
     ]
   });
@@ -255,7 +337,10 @@ const ListingActionBar = ({
   widthToMoveTablePagination,
   customPaginationClassName,
   listingVariant,
-  viewerModeConfiguration
+  viewerModeConfiguration,
+  approximateTotalRows,
+  onApproximateCountClick,
+  isApproximateCountLoading
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -269,13 +354,16 @@ const ListingActionBar = ({
     <MemoListingActionBar
       actions={actions}
       actionsBarMemoProps={actionsBarMemoProps}
+      approximateTotalRows={approximateTotalRows}
       columnConfiguration={columnConfiguration}
       columns={columns}
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
+      isApproximateCountLoading={isApproximateCountLoading}
       limit={limit}
       listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
+      onApproximateCountClick={onApproximateCountClick}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}
       onResetColumns={onResetColumns}

package/src/Listing/index.tsx

@@ -131,6 +131,9 @@ export interface Props<TRow> {
     labelExpand: string;
   };
   totalRows?: number;
+  approximateTotalRows?: boolean;
+  onApproximateCountClick?: () => void;
+  isApproximateCountLoading?: boolean;
   viewerModeConfiguration?: ViewerModeConfiguration;
   widthToMoveTablePagination?: number;
   isActionBarVisible?: boolean;
@@ -193,7 +196,10 @@ const Listing = <
     labelExpand: 'Expand'
   },
   isActionBarVisible = true,
-  labelNoResultFound = defaultLabelNoResultFound
+  labelNoResultFound = defaultLabelNoResultFound,
+  approximateTotalRows = false,
+  onApproximateCountClick,
+  isApproximateCountLoading = false
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -537,13 +543,16 @@ const Listing = <
             <ListingActionBar
               actions={actions}
               actionsBarMemoProps={actionsBarMemoProps}
+              approximateTotalRows={approximateTotalRows}
               columnConfiguration={columnConfiguration}
               columns={columns}
               currentPage={currentPage}
               customPaginationClassName={customPaginationClassName}
+              isApproximateCountLoading={isApproximateCountLoading}
               limit={limit}
               listingVariant={listingVariant}
               moveTablePagination={moveTablePagination}
+              onApproximateCountClick={onApproximateCountClick}
               onLimitChange={changeLimit}
               onPaginate={onPaginate}
               onResetColumns={onResetColumns}
@@ -756,21 +765,27 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   widthToMoveTablePagination,
   listingVariant,
   labelNoResultFound,
+  approximateTotalRows,
+  onApproximateCountClick,
+  isApproximateCountLoading,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
     Component: (
       <Listing
+        approximateTotalRows={approximateTotalRows}
         checkable={checkable}
         columnConfiguration={columnConfiguration}
         columns={columns}
         currentPage={currentPage}
         innerScrollDisabled={innerScrollDisabled}
+        isApproximateCountLoading={isApproximateCountLoading}
         labelNoResultFound={labelNoResultFound}
         limit={limit}
         listingVariant={listingVariant}
         loading={loading}
         moveTablePagination={moveTablePagination}
+        onApproximateCountClick={onApproximateCountClick}
         paginated={paginated}
         rowColorConditions={rowColorConditions}
         rows={rows}
@@ -801,7 +816,9 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortField,
       innerScrollDisabled,
       listingVariant,
-      labelNoResultFound
+      labelNoResultFound,
+      approximateTotalRows,
+      isApproximateCountLoading
     ]
   });
 

package/src/Listing/translatedLabels.ts

@@ -1,6 +1,10 @@
 export const labelTo = 'to';
 export const labelNoResultFound = 'No result found';
 export const labelOf = 'of';
+export const labelApproximateCount = '1,000+';
+export const labelApproximateCountTooltip =
+  'More than 1,000 resources match your search. Click to continue.';
+export const labelComputingExactCount = 'Loading...';
 export const labelRowsPerPage = 'Rows per page';
 export const labelFirstPage = 'First page';
 export const labelLastPage = 'Last page';

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/index.ts

@@ -31,7 +31,8 @@ export type { CatchErrorProps, ResponseError } from './api/customFetch';
 export { customFetch } from './api/customFetch';
 export type {
   Listing as ListingModel,
-  ListingMap as ListingMapModel
+  ListingMap as ListingMapModel,
+  ListingMeta
 } from './api/models';
 export { client, default as QueryProvider } from './api/QueryProvider';
 export { default as TestQueryProvider } from './api/TestQueryProvider';