@centreon/ui 24.7.0 → 24.7.2

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

@@ -1,63 +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'
-};
+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/components/Form/AccessRights/AccessRights.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 import { SnackbarProvider } from '../../..';
 
@@ -18,11 +18,11 @@ const meta: Meta<typeof AccessRightsForm> = {
   parameters: {
     msw: {
       handlers: [
-        rest.get('api/latest/contact?**', (req, res, ctx) => {
-          return res(ctx.json(buildResult(false)));
+        http.get('api/latest/contact?**', () => {
+          return HttpResponse.json(buildResult(false));
         }),
-        rest.get('api/latest/contactGroup?**', (req, res, ctx) => {
-          return res(ctx.json(buildResult(true)));
+        http.get('api/latest/contactGroup?**', () => {
+          return HttpResponse.json(buildResult(true));
         })
       ]
     }

package/src/index.ts

@@ -158,8 +158,6 @@ export { default as FluidTypography } from './Typography/FluidTypography';
 export { default as EllipsisTypography } from './Typography/EllipsisTypography';
 export * from './Dashboard';
 export * from './Graph';
-export type { LineChartData } from './Graph/common/models';
-export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';

package/test/setupTests.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-undef */
 
+import '@testing-library/jest-dom';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import fetchMock from 'jest-fetch-mock';

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -1,60 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-
-import { equals, propEq, reject } from 'ramda';
-
-import { Line } from '../../common/timeSeries/models';
-
-import {
-  findLineOfOriginMetricThreshold,
-  lowerLineName,
-  upperLineName
-} from './Lines/Threshold/models';
-
-interface UseFilterLines {
-  displayThreshold?: boolean;
-  lines: Array<Line>;
-  linesGraph: Array<Line> | null;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
-}
-
-interface Result {
-  displayedLines: Array<Line>;
-  newLines: Array<Line>;
-}
-
-const useFilterLines = ({
-  displayThreshold = false,
-  lines,
-  linesGraph,
-  setLinesGraph
-}: UseFilterLines): Result => {
-  const displayedLines = reject(propEq(false, 'display'), linesGraph ?? lines);
-  const filterLines = (): Array<Line> => {
-    const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
-
-    const findLinesUpperLower = lines.map((line) =>
-      equals(line.name, lowerLineName) || equals(line.name, upperLineName)
-        ? line
-        : null
-    );
-
-    const linesUpperLower = reject((element) => !element, findLinesUpperLower);
-
-    return [...lineOriginMetric, ...linesUpperLower] as Array<Line>;
-  };
-
-  useEffect(() => {
-    const filteredLines = filterLines();
-    if (!lines || !displayThreshold) {
-      setLinesGraph(lines);
-
-      return;
-    }
-
-    setLinesGraph(filteredLines);
-  }, [lines, displayThreshold]);
-
-  return { displayedLines, newLines: linesGraph ?? lines };
-};
-
-export default useFilterLines;

package/src/Listing/index.test.tsx

@@ -1,234 +0,0 @@
-import { useState } from 'react';
-
-import { prop } from 'ramda';
-
-import { render, fireEvent, within } from '../../test/testRenderer';
-
-import { ColumnType } from './models';
-import { labelAddColumns } from './translatedLabels';
-
-import Listing from '.';
-
-describe('Listing', () => {
-  const getAllCheckboxes = (container): Array<HTMLElement> => {
-    return container.querySelectorAll('[type = "checkbox"]');
-  };
-
-  const columns = [
-    {
-      getFormattedString: ({ name }): string => name,
-      id: 'name',
-      label: 'name',
-      sortable: true,
-      type: ColumnType.string
-    },
-    {
-      getFormattedString: ({ description }): string => description,
-      id: 'description',
-      label: 'description',
-      sortField: 'descriptionField',
-      sortable: true,
-      type: ColumnType.string
-    }
-  ];
-
-  const rows = [
-    { description: 'first row description', id: 0, name: 'My First Row' },
-    { description: 'second row description', id: 1, name: 'My Second Row' },
-    { description: 'third row description', id: 2, name: 'My Third Row' },
-    { description: 'fourth row description', id: 3, name: 'My Fourth Row' }
-  ];
-
-  const onSelectRows = jest.fn();
-  const onSort = jest.fn();
-
-  const oneHundredElements = new Array(100).fill(0);
-
-  const oneHundredTableData = [...oneHundredElements].map((_, index) => ({
-    active: index % 2 === 0,
-    description: `Entity ${index}`,
-    disableCheckbox: index % 4 === 0,
-    id: index,
-    name: `E${index}`,
-    selected: index % 3 === 0
-  }));
-
-  const PaginationTable = (): JSX.Element => {
-    const [limit, setLimit] = useState(10);
-    const [page, setPage] = useState(4);
-
-    return (
-      <Listing
-        columns={columns}
-        currentPage={page}
-        limit={limit}
-        rows={oneHundredTableData}
-        totalRows={oneHundredTableData.length}
-        onLimitChange={setLimit}
-        onPaginate={setPage}
-        onSort={onSort}
-      />
-    );
-  };
-
-  it('selects a row when the corresponding checkbox is clicked', () => {
-    const { container } = render(
-      <Listing
-        checkable
-        columns={columns}
-        rows={rows}
-        onSelectRows={onSelectRows}
-      />
-    );
-
-    // The first visible checkbox is the 'select all' one
-    const firstRowCheckbox = getAllCheckboxes(container)[1];
-
-    fireEvent.click(firstRowCheckbox);
-
-    const firstRow = rows[0];
-    expect(onSelectRows).toHaveBeenCalledWith([firstRow]);
-  });
-
-  it('unselects a row when it is currently selected and the corresponding checkbox is clicked', () => {
-    const firstRow = rows[0];
-    const selectedRows = [firstRow];
-
-    const { container } = render(
-      <Listing
-        checkable
-        columns={columns}
-        rows={rows}
-        selectedRows={selectedRows}
-        onSelectRows={onSelectRows}
-      />
-    );
-    const firstRowCheckbox = getAllCheckboxes(container)[1];
-
-    fireEvent.click(firstRowCheckbox);
-
-    expect(onSelectRows).toHaveBeenCalledWith([]);
-  });
-
-  it('selects all rows when the "select all" checkbox is clicked', () => {
-    const { container } = render(
-      <Listing
-        checkable
-        columns={columns}
-        rows={rows}
-        totalRows={4}
-        onSelectRows={onSelectRows}
-      />
-    );
-
-    const selectAllCheckbox = getAllCheckboxes(container)[0];
-
-    fireEvent.click(selectAllCheckbox);
-
-    expect(onSelectRows).toHaveBeenLastCalledWith(rows);
-  });
-
-  it('unselects all rows when all rows are selected and the "select all" checkbox is clicked', () => {
-    const { container } = render(
-      <Listing
-        checkable
-        columns={columns}
-        rows={rows}
-        selectedRows={rows}
-        onSelectRows={onSelectRows}
-      />
-    );
-
-    const selectAllCheckbox = getAllCheckboxes(container)[0];
-
-    fireEvent.click(selectAllCheckbox);
-
-    expect(onSelectRows).toHaveBeenCalledWith([]);
-  });
-
-  it('unselects selected rows when some rows are selected and the "select all" checkbox is clicked', () => {
-    const selectedRows = rows.filter(({ id }) => id % 2 === 0);
-    const { container } = render(
-      <Listing
-        checkable
-        columns={columns}
-        rows={rows}
-        selectedRows={selectedRows}
-        onSelectRows={onSelectRows}
-      />
-    );
-
-    const selectAllCheckbox = getAllCheckboxes(container)[0];
-
-    fireEvent.click(selectAllCheckbox);
-
-    expect(onSelectRows).toHaveBeenCalledWith([]);
-  });
-
-  it('sorts on on column id when the column header is clicked and sortField is not defined', () => {
-    const columnWithoutSortField = columns[0];
-
-    const { getByLabelText } = render(
-      <Listing columns={columns} rows={rows} onSort={onSort} />
-    );
-
-    fireEvent.click(getByLabelText(`Column ${columnWithoutSortField.label}`));
-
-    expect(onSort).toHaveBeenCalledWith({
-      sortField: columnWithoutSortField.id,
-      sortOrder: 'desc'
-    });
-  });
-
-  it('sorts on on column sortField when the column header is clicked and sortField is defined', () => {
-    const columnWithSortField = columns[1];
-
-    const { getByLabelText } = render(
-      <Listing columns={columns} rows={rows} onSort={onSort} />
-    );
-
-    fireEvent.click(getByLabelText(`Column ${columnWithSortField.label}`));
-
-    expect(onSort).toHaveBeenCalledWith({
-      sortField: columnWithSortField.sortField,
-      sortOrder: 'desc'
-    });
-  });
-
-  it('resets the page number to 0 when changing the limit and the current page is different than 0', () => {
-    const { getByRole, getByText } = render(<PaginationTable />);
-
-    expect(getByText('41-50 of 100'));
-
-    fireEvent.mouseDown(getByText('10'));
-
-    const listbox = within(getByRole('listbox'));
-
-    fireEvent.click(listbox.getByText('90'));
-
-    expect(getByText('1-90 of 100'));
-  });
-
-  it(`unselects a column when the "selectable" parameter is set and a column is unselected from the corresponding menu`, () => {
-    const onSelectColumns = jest.fn();
-
-    const { getAllByText, getByLabelText } = render(
-      <Listing
-        columnConfiguration={{
-          selectedColumnIds: columns.map(prop('id')),
-          sortable: true
-        }}
-        columns={columns}
-        rows={rows}
-        onSelectColumns={onSelectColumns}
-        onSort={onSort}
-      />
-    );
-
-    fireEvent.click(getByLabelText(labelAddColumns).firstChild as HTMLElement);
-
-    fireEvent.click(getAllByText('description')[1]);
-
-    expect(onSelectColumns).toHaveBeenCalledWith(['name']);
-  });
-});