@centreon/ui 23.10.32-MON-19938-cloud-notifications-fix-search-select-boxes.2 → 23.10.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.32-MON-19938-cloud-notifications-fix-search-select-boxes.2",
+  "version": "23.10.32",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -8,12 +8,10 @@
     "storybook": "storybook dev -p 9001 -c .storybook",
     "build:storybook": "storybook build -c .storybook -o .out",
     "test": "jest",
-    "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
     "cypress:ui": "cypress open --component --browser=chrome",
     "cypress:cli:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
-    "cypress:cli": "cypress run --component --browser=chrome",
-    "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
+    "cypress:cli": "cypress run --component --browser=chrome"
   },
   "sideEffects": false,
   "repository": {
@@ -56,23 +54,18 @@
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-styling": "^1.0.6",
     "@storybook/builder-vite": "^7.0.9",
-    "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.0.9",
     "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/preview-api": "^7.0.9",
     "@storybook/react": "^7.0.9",
     "@storybook/react-vite": "^7.0.9",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.9",
     "@testing-library/cypress": "^8.0.7",
-    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^27.5.0",
     "@types/ramda": "^0.28.12",
     "@types/react": "^18.0.26",
-    "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
     "axios-mock-adapter": "^1.21.4",
@@ -90,9 +83,6 @@
     "storybook": "^7.0.9",
     "storybook-addon-mock": "^4.0.0",
     "storybook-dark-mode": "^3.0.0",
-    "style-dictionary": "^3.8.0",
-    "ts-node": "^10.9.1",
-    "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
     "vite-plugin-svgr": "^3.2.0",
     "vite-plugin-turbosnap": "^1.0.2"

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import { ComponentMeta } from '@storybook/react';
 import { Layout } from 'react-grid-layout';
 
@@ -60,18 +62,18 @@ const generateLayout = (maxElements: number): Array<CustomLayout> => {
 };
 
 interface DashboardTemplateProps {
-  header?: JSX.Element;
+  header?: ReactElement;
   layout?: Array<CustomLayout>;
 }
 
-const Header = (): JSX.Element => (
+const Header = (): ReactElement => (
   <Typography variant="body2">The title</Typography>
 );
 
 const DashboardTemplate = ({
   header,
   layout = dashboardLayout
-}: DashboardTemplateProps): JSX.Element => (
+}: DashboardTemplateProps): ReactElement => (
   <DashboardLayout.Layout<CustomLayout> layout={layout}>
     {layout.map(({ i, content, shouldUseFluidTypography }) => (
       <DashboardLayout.Item header={header} key={i}>

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 
 import { Responsive } from '@visx/visx';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -14,7 +14,7 @@ const ReactGridLayout = WidthProvider(GridLayout);
 
 interface DashboardLayoutProps<T> {
   changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<JSX.Element>;
+  children: Array<ReactElement>;
   displayGrid?: boolean;
   layout: Array<T>;
 }
@@ -24,7 +24,7 @@ const Layout = <T extends Layout>({
   changeLayout,
   displayGrid,
   layout
-}: DashboardLayoutProps<T>): JSX.Element => {
+}: DashboardLayoutProps<T>): ReactElement => {
   const { classes } = useDashboardLayoutStyles();
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -45,7 +45,7 @@ const Layout = <T extends Layout>({
     Component: (
       <ResponsiveHeight>
         <Responsive.ParentSize>
-          {({ width, height }): JSX.Element => (
+          {({ width, height }): ReactElement => (
             <div className={classes.container}>
               {displayGrid && (
                 <Grid columns={columns} height={height} width={width} />

package/src/Dashboard/utils.ts

@@ -1,28 +1,28 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-export const maxColumns = 12;
-const minColumns = 1;
-const breakpoint = 768;
-
-export const rowHeight = 64;
-
-export const getIsSmallScreenSize = (): boolean =>
-  lt(window.innerWidth, breakpoint);
-
-export const getColumnsFromScreenSize = (): number =>
-  getIsSmallScreenSize() ? minColumns : maxColumns;
-
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
-  const isSmallScreenSize = getIsSmallScreenSize();
-  if (!isSmallScreenSize) {
-    return layout;
-  }
-
-  return layout
-    .sort((a, b) => a.x + a.y - (b.x + b.y))
-    .map((widget) => ({
-      ...widget,
-      w: 1
-    }));
-};
+import { lt } from 'ramda';
+import { Layout } from 'react-grid-layout';
+
+export const maxColumns = 12;
+const minColumns = 1;
+const breakpoint = 768;
+
+export const rowHeight = 64;
+
+export const getIsSmallScreenSize = (): boolean =>
+  lt(window.innerWidth, breakpoint);
+
+export const getColumnsFromScreenSize = (): number =>
+  getIsSmallScreenSize() ? minColumns : maxColumns;
+
+export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
+  const isSmallScreenSize = getIsSmallScreenSize();
+  if (!isSmallScreenSize) {
+    return layout;
+  }
+
+  return layout
+    .sort((a, b) => a.x + a.y - (b.x + b.y))
+    .map((widget) => ({
+      ...widget,
+      w: 1
+    }));
+};

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
 import { equals, isEmpty, path, split } from 'ramda';
@@ -11,12 +11,7 @@ import {
 } from '../..';
 import MultiConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Multi';
 
-import {
-  AutoCompleteChangeData,
-  InputPropsWithoutGroup,
-  InputType,
-  Reason
-} from './models';
+import { InputPropsWithoutGroup, InputType } from './models';
 
 const defaultFilterKey = 'name';
 
@@ -34,8 +29,6 @@ const ConnectedAutocomplete = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const [autocompleteChangeData, setAutocompleteChangeData] =
-    useState<AutoCompleteChangeData>();
   const { values, touched, errors, setFieldValue, setFieldTouched } =
     useFormikContext<FormikValues>();
 
@@ -62,9 +55,7 @@ const ConnectedAutocomplete = ({
   const fieldNamePath = split('.', fieldName);
 
   const changeAutocomplete = useCallback(
-    (_, value, reason: Reason): void => {
-      setAutocompleteChangeData({ reason, value });
-
+    (_, value): void => {
       if (change) {
         change({ setFieldValue, value });
 
@@ -113,7 +104,6 @@ const ConnectedAutocomplete = ({
   return useMemoComponent({
     Component: (
       <AutocompleteField
-        autocompleteChangeData={autocompleteChangeData}
         dataTestId={dataTestId}
         disableClearable={false}
         disabled={disabled}

package/src/Form/Inputs/models.ts

@@ -103,16 +103,3 @@ export interface Group {
   name: string;
   order: number;
 }
-
-export enum Reason {
-  blur = 'blur',
-  clear = 'clear',
-  createOption = 'createOption',
-  removeOption = 'removeOption',
-  selectOption = 'selectOption'
-}
-
-export interface AutoCompleteChangeData {
-  reason: Reason;
-  value: string;
-}

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

@@ -28,10 +28,8 @@ import {
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
 import useFetchQuery from '../../../../api/useFetchQuery';
-import { AutoCompleteChangeData } from '../../../../Form/Inputs/models';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
-  autocompleteChangeData?: AutoCompleteChangeData;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -57,7 +55,6 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
-    autocompleteChangeData,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -277,13 +274,6 @@ const ConnectedAutocompleteField = (
       );
     }, useDeepCompare([searchConditions]));
 
-    useEffect(() => {
-      if (!autocompleteChangeData) {
-        return;
-      }
-      setSearchParameter(undefined);
-    }, [autocompleteChangeData?.reason, autocompleteChangeData?.value]);
-
     useEffect(() => {
       if (!optionsOpen) {
         return;

package/src/ThemeProvider/index.tsx

@@ -5,12 +5,12 @@ import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
 
 import {
-  ButtonProps,
+  ThemeProvider as MuiThemeProvider,
+  Theme,
+  StyledEngineProvider,
   createTheme,
   InputBaseProps,
-  StyledEngineProvider,
-  Theme,
-  ThemeProvider as MuiThemeProvider
+  ButtonProps
 } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
@@ -177,7 +177,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
           height: 100%;
-          text-rendering: optimizeLegibility;
         }
         body {
           background-color: ${theme.palette.background.paper};
@@ -206,7 +205,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
         @font-face {
           font-family: 'Roboto';
           font-style: normal;
-          font-weight: 700;
+          font-weight: 600;
           src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
         }
       `