@centreon/ui 26.3.18 → 26.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.3.18",
+  "version": "26.5.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -28,8 +28,8 @@
     "url": "git+https://github.com/centreon/centreon.git"
   },
   "keywords": [
-    "centreon",
-    "react"
+    "react",
+    "centreon"
   ],
   "author": {
     "name": "centreon@centreon.com"

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { type FormikValues, useFormikContext } from 'formik';
+import { FormikValues, useFormikContext } from 'formik';
 import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +9,7 @@ import {
   useMemoComponent
 } from '../..';
 import MultiConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Multi';
-import { type InputPropsWithoutGroup, InputType } from './models';
+import { InputPropsWithoutGroup, InputType } from './models';
 
 const defaultFilterKey = 'name';
 
@@ -42,10 +42,26 @@ const ConnectedAutocomplete = ({
 
   const isMultiple = equals(type, InputType.MultiConnectedAutocomplete);
 
-  const getEndpoint = (parameters): string =>
-    buildListingEndpoint({
+  const getEndpoint = (parameters): string => {
+    const nameQueryParameters =
+      connectedAutocomplete?.useNewAPIFormat && parameters?.search
+        ? [
+            {
+              name: 'name[lk]',
+              value: parameters.search.conditions[0].values.$lk.slice(1, -1)
+            }
+          ]
+        : [];
+
+    return buildListingEndpoint({
+      apiFormat: connectedAutocomplete?.useNewAPIFormat
+        ? 'JSON-LD'
+        : 'Standard',
       baseEndpoint: connectedAutocomplete?.endpoint,
-      customQueryParameters: connectedAutocomplete?.customQueryParameters || [],
+      customQueryParameters: [
+        ...(connectedAutocomplete?.customQueryParameters || []),
+        ...nameQueryParameters
+      ],
       parameters: {
         ...parameters,
         search: {
@@ -58,6 +74,7 @@ const ConnectedAutocomplete = ({
         sort: { [filterKey]: 'ASC' }
       }
     });
+  };
 
   const fieldNamePath = split('.', fieldName);
 
@@ -79,15 +96,7 @@ const ConnectedAutocomplete = ({
       setFieldTouched(fieldName, true, false);
       setFieldValue(fieldName, value);
     },
-    [
-      fieldName,
-      change,
-      setFieldTouched,
-      setFieldValue,
-      setTouched,
-      setValues,
-      values
-    ]
+    [fieldName, touched, additionalMemoProps]
   );
 
   const blur = (): void => setFieldTouched(fieldName, true);

package/src/Form/Inputs/models.ts

@@ -56,6 +56,7 @@ export interface InputProps {
     options?: Array<string>;
   };
   connectedAutocomplete?: {
+    useNewAPIFormat?: boolean;
     additionalConditionParameters: Array<ConditionsSearchParameter>;
     customQueryParameters: Array<QueryParameter>;
     chipColor?: string;

package/src/Form/storiesData.tsx

@@ -327,7 +327,8 @@ export const basicFormInputs: Array<InputProps> = [
         {
           connectedAutocomplete: {
             additionalConditionParameters: [],
-            endpoint: 'endpoint'
+            endpoint: 'endpoint',
+            helperText: 'Hello I am testing'
           },
           fieldName: 'group',
           label: 'Group (Single connected autocomplete)',

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

@@ -18,7 +18,8 @@ import {
   type ForwardedRef,
   forwardRef,
   type HTMLAttributes,
-  type ReactElement
+  type ReactElement,
+  ReactNode
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -32,6 +33,7 @@ import { useAutoCompleteStyles } from './autoComplete.styles';
 export type Props = {
   autoFocus?: boolean;
   autoSize?: boolean;
+  helperText?: ReactNode;
   autoSizeCustomPadding?: number;
   autoSizeDefaultWidth?: number;
   dataTestId?: string;
@@ -95,6 +97,7 @@ const AutocompleteField = forwardRef(
       displayPopupIcon = true,
       autoFocus = false,
       hideInput = false,
+      helperText,
       dataTestId,
       autoSize = false,
       autoSizeDefaultWidth = 0,
@@ -151,6 +154,7 @@ const AutocompleteField = forwardRef(
           }}
           error={error}
           externalValueForAutoSize={autocompleteProps?.value?.name}
+          helperText={helperText}
           label={label}
           onChange={onTextChange}
           placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}

package/src/InputField/Text/index.tsx

@@ -1,11 +1,11 @@
 import {
   Box,
   InputAdornment,
-  type InputProps,
+  InputProps,
   TextField as MuiTextField,
-  type TextFieldProps,
-  type TextFieldSlotsAndSlotProps,
-  type Theme,
+  TextFieldProps,
+  TextFieldSlotsAndSlotProps,
+  Theme,
   Tooltip,
   Typography
 } from '@mui/material';
@@ -123,6 +123,7 @@ const TextField = forwardRef(
       type,
       textFieldSlotsAndSlotProps,
       forceUncontrolled,
+      helperText,
       ...rest
     }: TextProps,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -160,13 +161,16 @@ const TextField = forwardRef(
           <MuiTextField
             data-testid={dataTestId}
             error={!isNil(error)}
-            helperText={displayErrorInTooltip ? undefined : error}
+            helperText={
+              (displayErrorInTooltip ? undefined : error) || helperText
+            }
             id={getNormalizedId(dataTestId || '')}
             label={label}
             onChange={changeInputValue}
             ref={ref}
             size={size || 'small'}
             {...getValueProps()}
+            autoComplete="off"
             className={classes.textField}
             required={required}
             slotProps={{

package/src/Listing/Row/Row.tsx

@@ -2,12 +2,11 @@ import { TableRow, type TableRowProps, useTheme } from '@mui/material';
 
 import type { ListingVariant } from '@centreon/ui-context';
 
-import { equals, gte, lt, not, pluck } from 'ramda';
+import { equals, lt, not, pluck } from 'ramda';
 import { memo, useCallback, useEffect, useRef } from 'react';
 
-import LoadingSkeleton from '../../LoadingSkeleton';
 import { useViewportIntersection } from '../../utils/useViewportIntersection';
-import { performanceRowsLimit } from '../index';
+
 import type { Column, ColumnConfiguration, RowColorCondition } from '../models';
 
 type Props = {
@@ -39,33 +38,8 @@ const Row = memo<RowProps>(
     tabIndex,
     onMouseOver,
     onFocus,
-    onClick,
-    isInViewport,
-    visibleColumns,
-    checkable,
-    limit
+    onClick
   }: RowProps): JSX.Element => {
-    if (not(isInViewport) && gte(limit, performanceRowsLimit)) {
-      return (
-        <div className="contents">
-          {checkable && (
-            <div className="p-1">
-              <div>
-                <LoadingSkeleton className="w-full" />
-              </div>
-            </div>
-          )}
-          {visibleColumns.map(({ id }) => (
-            <div className="p-1" key={`loading_${id}`}>
-              <div>
-                <LoadingSkeleton className="w-full" />
-              </div>
-            </div>
-          ))}
-        </div>
-      );
-    }
-
     return (
       <TableRow
         className="cursor-pointer contents w-full"
@@ -83,7 +57,6 @@ const Row = memo<RowProps>(
     const {
       row: previousRow,
       rowColorConditions: previousRowColorConditions,
-      isInViewport: prevIsInViewport,
       visibleColumns: previousVisibleColumns,
       isShiftKeyDown: prevIsShiftKeyDown,
       shiftKeyDownRowPivot: prevShiftKeyDownRowPivot,
@@ -117,18 +90,6 @@ const Row = memo<RowProps>(
       return false;
     }
 
-    const isNoLongerInViewport = not(prevIsInViewport) && not(nextIsInViewport);
-
-    if (isNoLongerInViewport && gte(nextLimit, performanceRowsLimit)) {
-      return true;
-    }
-
-    const isBackInViewport = not(prevIsInViewport) && nextIsInViewport;
-
-    if (isBackInViewport && gte(nextLimit, performanceRowsLimit)) {
-      return false;
-    }
-
     const previousRowConditions = previousRowColorConditions?.map(
       ({ condition }) => condition(previousRow)
     );

package/src/Listing/index.tsx

@@ -10,7 +10,6 @@ import {
   filter,
   findIndex,
   gt,
-  gte,
   identity,
   includes,
   isNil,
@@ -46,6 +45,8 @@ import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { ListingHeader } from './Header';
+import ListingRow from './Row/Row';
+import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import type {
   Column,
   ColumnConfiguration,
@@ -54,8 +55,6 @@ import type {
   RowId,
   SortOrder
 } from './models';
-import ListingRow from './Row/Row';
-import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { subItemsPivotsAtom } from './tableAtoms';
 import { labelNoResultFound as defaultLabelNoResultFound } from './translatedLabels';
 import useStyleTable, { useColumnStyle } from './useStyleTable';
@@ -143,8 +142,6 @@ const defaultColumnConfiguration = {
   sortable: false
 };
 
-export const performanceRowsLimit = 60;
-
 const Listing = <
   TRow extends {
     id: RowId;
@@ -617,11 +614,7 @@ const Listing = <
                           isHovered={isRowHovered}
                           isSelected={isRowSelected}
                           isShiftKeyDown={isShiftKeyDown}
-                          key={
-                            gte(limit, performanceRowsLimit)
-                              ? `row_${index}`
-                              : getRowId(row)
-                          }
+                          key={getRowId(row)}
                           lastSelectionIndex={lastSelectionIndex}
                           limit={limit}
                           listingVariant={listingVariant}

package/src/api/buildListingDecoder.ts

@@ -1,6 +1,7 @@
+import { equals } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
-import type { Listing, ListingMeta } from './models';
+import { Listing, ListingMeta } from './models';
 
 const metaDecoder = JsonDecoder.object<ListingMeta>(
   {
@@ -15,13 +16,34 @@ interface ListingDecoderOptions<TEntity> {
   entityDecoder: JsonDecoder.Decoder<TEntity>;
   entityDecoderName: string;
   listingDecoderName: string;
+  apiFormat?: 'Standard' | 'JSON-LD';
 }
 
-const buildListingDecoder = <TEntity>({
-  entityDecoder,
-  entityDecoderName,
-  listingDecoderName
-}: ListingDecoderOptions<TEntity>): JsonDecoder.Decoder<Listing<TEntity>> =>
+const jsonLdListingDecoder = <TEntity>(
+  entityDecoder: JsonDecoder.Decoder<TEntity>,
+  entityDecoderName: string,
+  listingDecoderName: string
+): JsonDecoder.Decoder<Listing<TEntity>> =>
+  JsonDecoder.object(
+    {
+      member: JsonDecoder.array(entityDecoder, entityDecoderName),
+      totalItems: JsonDecoder.number
+    },
+    listingDecoderName
+  ).map((data) => ({
+    meta: {
+      limit: data.member.length,
+      page: 1,
+      total: data.totalItems
+    },
+    result: data.member
+  })) as JsonDecoder.Decoder<Listing<TEntity>>;
+
+const standardListingDecoder = <TEntity>(
+  entityDecoder: JsonDecoder.Decoder<TEntity>,
+  entityDecoderName: string,
+  listingDecoderName: string
+): JsonDecoder.Decoder<Listing<TEntity>> =>
   JsonDecoder.object<Listing<TEntity>>(
     {
       meta: metaDecoder,
@@ -30,4 +52,15 @@ const buildListingDecoder = <TEntity>({
     listingDecoderName
   );
 
+const buildListingDecoder = <TEntity>({
+  entityDecoder,
+  entityDecoderName,
+  listingDecoderName,
+  apiFormat = 'Standard'
+}: ListingDecoderOptions<TEntity>): JsonDecoder.Decoder<Listing<TEntity>> => {
+  return (
+    equals(apiFormat, 'JSON-LD') ? jsonLdListingDecoder : standardListingDecoder
+  )(entityDecoder, entityDecoderName, listingDecoderName);
+};
+
 export default buildListingDecoder;

package/src/api/buildListingEndpoint/index.ts

@@ -1,15 +1,27 @@
+import { equals, keys, values } from 'ramda';
+
 import toRawQueryParameters from '../../queryParameters';
-import type { QueryParameter } from '../../queryParameters/models';
+import { QueryParameter } from '../../queryParameters/models';
 import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
-import type { BuildListingEndpointParameters, Parameters } from './models';
+import { BuildListingEndpointParameters, Parameters } from './models';
 
 const getQueryParameters = ({
   sort,
   page,
   limit,
   search,
-  customQueryParameters = []
+  customQueryParameters = [],
+  apiFormat
 }: Parameters): Array<QueryParameter> => {
+  if (equals(apiFormat, 'JSON-LD')) {
+    return [
+      { name: 'page', value: page },
+      { name: 'itemsPerPage', value: limit },
+      { name: `sort[${keys(sort || {})[0]}]`, value: values(sort || {})[0] },
+      ...customQueryParameters
+    ];
+  }
+
   return [
     { name: 'page', value: page },
     { name: 'limit', value: limit },
@@ -22,33 +34,25 @@ const getQueryParameters = ({
   ];
 };
 
-const buildEndpoint = ({ baseEndpoint, queryParameters }): string => {
-  return `${baseEndpoint}?${toRawQueryParameters(queryParameters)}`;
-};
-
-const buildCustomEndpoint = ({ baseEndpoint, queryParameters }): string => {
-  return `${baseEndpoint}&${toRawQueryParameters(queryParameters)}`;
+const buildEndpoint = ({
+  baseEndpoint,
+  queryParameters,
+  apiFormat
+}): string => {
+  return `${baseEndpoint}?${toRawQueryParameters({ apiFormat, queryParameters })}`;
 };
 
 const buildListingEndpoint = ({
   baseEndpoint,
   parameters,
   customQueryParameters,
-  isCustomEndpoint = false
+  apiFormat = 'Standard'
 }: BuildListingEndpointParameters): string => {
-  if (isCustomEndpoint) {
-    return buildCustomEndpoint({
-      baseEndpoint,
-      queryParameters: [
-        ...getQueryParameters({ ...parameters, customQueryParameters })
-      ]
-    });
-  }
-
   return buildEndpoint({
+    apiFormat,
     baseEndpoint,
     queryParameters: [
-      ...getQueryParameters({ ...parameters, customQueryParameters })
+      ...getQueryParameters({ ...parameters, apiFormat, customQueryParameters })
     ]
   });
 };

package/src/api/buildListingEndpoint/models.ts

@@ -3,8 +3,8 @@ import type { QueryParameter } from '../../queryParameters/models';
 export interface BuildListingEndpointParameters {
   baseEndpoint?: string;
   customQueryParameters?: Array<QueryParameter>;
-  parameters: Parameters;
-  isCustomEndpoint?: boolean;
+  parameters: Omit<Parameters, 'apiFormat' | 'customQueryParameters'>;
+  apiFormat?: 'Standard' | 'JSON-LD';
 }
 
 export interface SearchMatch {
@@ -18,7 +18,9 @@ export interface Parameters {
   page?: number;
   search?: SearchParameter;
   sort?: SortQueryParameterValue;
+  apiFormat: 'Standard' | 'JSON-LD';
 }
+
 export interface SearchParameter {
   conditions?: Array<ConditionsSearchParameter>;
   lists?: Array<ListsSearchParameter>;

package/src/api/useMutationQuery/index.ts

@@ -114,7 +114,9 @@ const useMutationQuery = <T extends object, TMeta>({
         defaultFailureMessage,
         endpoint: getEndpoint(_meta as TMeta),
         headers: new Headers({
-          'Content-Type': 'application/json',
+          'Content-Type': equals(method, Method.PATCH)
+            ? 'application/merge-patch+json'
+            : 'application/json',
           ...fetchHeaders
         }),
         isMutation: true,

package/src/queryParameters/index.ts

@@ -1,14 +1,26 @@
-import { isEmpty, isNil } from 'ramda';
+import { equals, isEmpty, isNil } from 'ramda';
 
 import type { QueryParameter } from './models';
 
+interface ToRawQueryParametersProps {
+  queryParameters: Array<QueryParameter>;
+  apiFormat: 'Standard' | 'JSON-LD';
+}
+
 const toRawQueryParameter = ({ name, value }): string => {
-  return `${name}=${encodeURIComponent(JSON.stringify(value))}`;
+  return `${name}=${encodeURIComponent(value)}`;
 };
 
-const toRawQueryParameters = (queryParameters: Array<QueryParameter>): string =>
+const toRawQueryParameters = ({
+  queryParameters,
+  apiFormat
+}: ToRawQueryParametersProps): string =>
   queryParameters
     .filter(({ value }) => !isNil(value) && !isEmpty(value))
+    .map(({ name, value }) => ({
+      name,
+      value: equals(apiFormat, 'JSON-LD') ? value : JSON.stringify(value)
+    }))
     .map(toRawQueryParameter)
     .join('&');
 

package/src/utils/useViewportIntersection.ts

@@ -18,11 +18,14 @@ export const useViewportIntersection = (
   const [element, setElement] = useState<HTMLElement | null>(null);
 
   const observer = useRef<IntersectionObserver | null>(null);
-  
+
   const sanitizedOptions = {
     ...options,
-    root: options?.root instanceof HTMLElement ? `${options.root.tagName}_${options.root.className}` : null
-  }
+    root:
+      options?.root instanceof HTMLElement
+        ? `${options.root.tagName}_${options.root.className}`
+        : null
+  };
 
   useEffect(() => {
     if (observer.current) {