@centreon/ui 23.10.117 → 23.10.119

package/src/api/useFetchQuery/index.ts

@@ -25,9 +25,7 @@ export interface UseFetchQueryProps<T> {
   getQueryKey: () => QueryKey;
   httpCodesBypassErrorSnackbar?: Array<number>;
   isPaginated?: boolean;
-  queryOptions?: {
-    suspense?: boolean;
-  } & Omit<
+  queryOptions?: Omit<
     UseQueryOptions<T | ResponseError, Error, T | ResponseError, QueryKey>,
     'queryKey' | 'queryFn'
   >;
@@ -35,12 +33,11 @@ export interface UseFetchQueryProps<T> {
 
 export type UseFetchQueryState<T> = {
   data?: T;
-  error: Omit<ResponseError, 'isError'> | null;
   fetchQuery: () => Promise<T | ResponseError>;
   prefetchNextPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchPreviousPage: ({ page, getPrefetchQueryKey }) => void;
   prefetchQuery: ({ endpointParams, queryKey }) => void;
-} & Omit<QueryObserverBaseResult, 'data' | 'error'>;
+} & Omit<QueryObserverBaseResult, 'data'>;
 
 export interface PrefetchEndpointParams {
   page: number;
@@ -61,8 +58,9 @@ const useFetchQuery = <T extends object>({
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useQuery<T | ResponseError, Error>({
-    queryFn: ({ signal }): Promise<T | ResponseError> =>
+  const queryData = useQuery<T | ResponseError, Error>(
+    getQueryKey(),
+    ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
         catchError,
         decoder,
@@ -71,9 +69,10 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    queryKey: getQueryKey(),
-    ...queryOptions
-  });
+    {
+      ...queryOptions
+    }
+  );
 
   const queryClient = useQueryClient();
 
@@ -93,8 +92,9 @@ const useFetchQuery = <T extends object>({
   };
 
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
-    queryClient.prefetchQuery({
-      queryFn: ({ signal }): Promise<T | ResponseError> =>
+    queryClient.prefetchQuery(
+      queryKey,
+      ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
           catchError,
           decoder,
@@ -102,9 +102,8 @@ const useFetchQuery = <T extends object>({
           endpoint: getEndpoint(endpointParams),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey
-    });
+        })
+    );
   };
 
   const prefetchNextPage = ({ page, getPrefetchQueryKey }): void => {
@@ -134,8 +133,9 @@ const useFetchQuery = <T extends object>({
   };
 
   const fetchQuery = (): Promise<T | ResponseError> => {
-    return queryClient.fetchQuery({
-      queryFn: ({ signal }): Promise<T | ResponseError> =>
+    return queryClient.fetchQuery(
+      getQueryKey(),
+      ({ signal }): Promise<T | ResponseError> =>
         customFetch<T>({
           catchError,
           decoder,
@@ -143,9 +143,8 @@ const useFetchQuery = <T extends object>({
           endpoint: getEndpoint(),
           headers: new Headers(fetchHeaders),
           signal
-        }),
-      queryKey: getQueryKey()
-    });
+        })
+    );
   };
 
   const data = useMemo(
@@ -158,19 +157,16 @@ const useFetchQuery = <T extends object>({
 
   useEffect(() => {
     return (): void => {
-      queryClient.cancelQueries({ queryKey: getQueryKey() });
+      queryClient.cancelQueries(getQueryKey());
     };
   }, []);
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  useEffect(() => {
+    manageError();
+  }, useDeepCompare([queryData.data]));
 
   return {
-    ...omit(['data', 'error'], queryData),
+    ...omit(['data'], queryData),
     data,
     error: errorData?.isError ? omit(['isError'], errorData) : null,
     fetchQuery,

package/src/api/useMutationQuery/index.ts

@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
-import { includes, omit } from 'ramda';
+import { includes } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
@@ -30,33 +30,14 @@ export type UseMutationQueryProps<T, TMeta> = {
   getEndpoint: (_meta: TMeta) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-  onError?: (
-    error: ResponseError,
-    variables: T & { _meta: TMeta },
-    context: unknown
-  ) => unknown;
-  onMutate?: (variables: T & { _meta: TMeta }) => Promise<unknown> | unknown;
-  onSuccess?: (
-    data: ResponseError | T,
-    variables: T & {
-      _meta: TMeta;
-    },
-    context: unknown
-  ) => unknown;
-} & Omit<
-  UseMutationOptions<T & { _meta?: TMeta }>,
-  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess'
->;
+} & Omit<UseMutationOptions<T & { _meta?: TMeta }>, 'mutationFn'>;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = Omit<
-  UseMutationResult<T | ResponseError>,
-  'isError'
-> & {
+export type UseMutationQueryState<T> = {
   isError: boolean;
   isMutating: boolean;
-};
+} & UseMutationResult<T | ResponseError>;
 
 const useMutationQuery = <T extends object, TMeta>({
   getEndpoint,
@@ -76,10 +57,8 @@ const useMutationQuery = <T extends object, TMeta>({
     T | ResponseError,
     ResponseError,
     T & { _meta: TMeta }
-  >({
-    mutationFn: (
-      _payload: T & { _meta: TMeta }
-    ): Promise<T | ResponseError> => {
+  >(
+    (_payload: T & { _meta: TMeta }): Promise<T | ResponseError> => {
       const { _meta, ...payload } = _payload || {};
 
       return customFetch<T>({
@@ -96,10 +75,12 @@ const useMutationQuery = <T extends object, TMeta>({
         payload
       });
     },
-    onError,
-    onMutate,
-    onSuccess
-  });
+    {
+      onError,
+      onMutate,
+      onSuccess
+    }
+  );
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
@@ -116,17 +97,14 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(
-    () => {
-      manageError();
-    },
-    useDeepCompare([queryData.data])
-  );
+  useEffect(() => {
+    manageError();
+  }, useDeepCompare([queryData.data]));
 
   return {
-    ...omit(['isError'], queryData),
+    ...queryData,
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isPending
+    isMutating: queryData.isLoading
   };
 };
 

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -22,7 +22,7 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
-  labelsDelete?: {
+  labelsDelete: {
     cancel: string;
     confirm: {
       label: string;
@@ -76,7 +76,7 @@ const DataTableItem = forwardRef(
         {hasActions && (
           <MuiCardActions>
             <span>
-              {onDelete && labelsDelete && (
+              {onDelete && (
                 <ConfirmationTooltip
                   confirmVariant="error"
                   labels={labelsDelete}

package/src/components/Form/AccessRights/__fixtures__/contactAccessRight.mock.ts

@@ -7,8 +7,6 @@ import {
   RoleResource
 } from '../AccessRights.resource';
 
-faker.seed(42);
-
 export const rolesMock = (): Array<RoleResource> => [
   { role: 'viewer' },
   { role: 'editor' }

package/src/components/Form/AccessRights/useAccessRightsForm.utils.ts

@@ -36,6 +36,6 @@ export const createInitialState = (
           contactAccessRight,
           state: 'unchanged',
           stateHistory: []
-        }) as ContactAccessRightStateResource
+        } as ContactAccessRightStateResource)
     )
     .sort(sortOnAddedStateFirstAndContactName);

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -1,8 +1,7 @@
 import { ReactElement, useCallback, useMemo } from 'react';
 
-import { string, number, object } from 'yup';
+import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
-import { equals } from 'ramda';
 
 import { InputType } from '../../../Form/Inputs/models';
 import { Form, FormProps } from '../../../Form';
@@ -85,8 +84,8 @@ const DashboardForm = ({
         }
       ],
       submit: (values, bag) => onSubmit?.(values, bag),
-      validationSchema: object({
-        description: string()
+      validationSchema: Yup.object().shape({
+        description: Yup.string()
           .label(labels?.entity?.description || '')
           .max(
             180,
@@ -94,19 +93,17 @@ const DashboardForm = ({
               `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
           )
           .nullable(),
-        globalRefreshInterval: object({
-          interval: number().when('type', ([type], schema) => {
-            if (equals(type, 'manual')) {
-              schema
-                .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
-                .required(t(labelRequired) as string);
-            }
-
-            return schema.nullable();
+        globalRefreshInterval: Yup.object().shape({
+          interval: Yup.number().when('type', {
+            is: 'global',
+            otherwise: Yup.number().nullable(),
+            then: Yup.number()
+              .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
+              .required(t(labelRequired) as string)
           }),
-          type: string()
+          type: Yup.string()
         }),
-        name: string()
+        name: Yup.string()
           .label(labels?.entity?.name)
           .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
           .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))

package/src/components/ItemComposition/ItemComposition.tsx

@@ -7,7 +7,6 @@ import { Button } from '..';
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
 type Props = {
-  IconAdd?;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
@@ -20,8 +19,7 @@ export const ItemComposition = ({
   children,
   labelAdd,
   addbuttonDisabled,
-  addButtonHidden,
-  IconAdd
+  addButtonHidden
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
@@ -33,7 +31,7 @@ export const ItemComposition = ({
           aria-label={labelAdd}
           data-testid={labelAdd}
           disabled={addbuttonDisabled}
-          icon={IconAdd || <AddIcon />}
+          icon={<AddIcon />}
           iconVariant="start"
           size="small"
           variant="ghost"

package/src/components/Menu/Button/MenuButton.tsx

@@ -15,7 +15,6 @@ import { useStyles } from './MenuButton.styles';
 type MenuButtonProps = {
   ariaLabel?: string;
   children?: ReactNode;
-  className?: string;
   hasArrow?: boolean;
   isOpen?: boolean;
   onClick?: (args: { isOpen: boolean }) => void;
@@ -30,10 +29,9 @@ const MenuButton = ({
   size = 'small',
   variant = 'ghost',
   ariaLabel,
-  className,
   ...attr
 }: MenuButtonProps): ReactElement => {
-  const { cx, classes } = useStyles();
+  const { classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
 
@@ -52,7 +50,7 @@ const MenuButton = ({
     <Button
       {...attr}
       aria-label={ariaLabel}
-      className={cx(classes.menuButton, className)}
+      className={classes.menuButton}
       data-is-active={isMenuOpen}
       size={size}
       variant={variant}

package/src/components/Menu/MenuItem.tsx

@@ -6,7 +6,6 @@ import { useStyles } from './Menu.styles';
 
 type MenuItemProps = {
   children?: ReactNode;
-  className?: string;
   isActive?: boolean;
   isDisabled?: boolean;
   onClick?: () => void;
@@ -16,14 +15,13 @@ const MenuItem = ({
   children,
   onClick,
   isActive = false,
-  isDisabled = false,
-  className
+  isDisabled = false
 }: MenuItemProps): ReactElement => {
-  const { cx, classes } = useStyles();
+  const { classes } = useStyles();
 
   return (
     <MuiMenuItem
-      className={cx(classes.menuItem, className)}
+      className={classes.menuItem}
       data-is-active={isActive}
       data-is-disabled={isDisabled}
       disabled={isDisabled}

package/src/components/Menu/MenuItems.tsx

@@ -7,10 +7,9 @@ import { useMenu } from './useMenu';
 
 type MenuItemsProps = {
   children?: ReactNode | Array<ReactNode>;
-  className?: string;
 };
-const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
-  const { cx, classes } = useStyles();
+const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
+  const { classes } = useStyles();
 
   const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
 
@@ -22,7 +21,7 @@ const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
   return (
     <MuiMenu
       anchorEl={anchorEl}
-      className={cx(classes.menuItems, className)}
+      className={classes.menuItems}
       open={isMenuOpen}
       variant="menu"
       onClick={onCloseMenu}

package/src/index.ts

@@ -162,5 +162,4 @@ export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
-export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
 export * from './ParentSize';

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs, startsWith } from 'ramda';
+import { fromPairs } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,10 +25,6 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
-      if (startsWith('/', value)) {
-        return [key, value];
-      }
-
       return [key, JSON.parse(value)];
     }
   );

package/src/screens/dashboard/DashboardsDetail.stories.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable  @typescript-eslint/no-non-null-assertion */
+import React, { ReactElement } from 'react';
+
+import { Meta } from '@storybook/react';
+
+import {
+  Add as AddIcon,
+  Settings as SettingsIcon,
+  Share as ShareIcon
+} from '@mui/icons-material';
+
+import {
+  Button,
+  IconButton,
+  Menu,
+  PageHeader,
+  PageLayout
+} from '../../components';
+
+const meta: Meta = {
+  args: {
+    actions: {}
+  },
+  parameters: {
+    layout: 'fullscreen'
+  },
+  title: 'screens/Dashboards detail'
+};
+
+export default meta;
+
+const DefaultView = (args): ReactElement => {
+  const { data } = args;
+
+  return (
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader>
+          <PageHeader.Main>
+            <PageHeader.Menu>
+              <Menu>
+                <Menu.Button />
+                <Menu.Items>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>
+                    <Button
+                      icon={<AddIcon />}
+                      iconVariant="start"
+                      variant="ghost"
+                    >
+                      Add item
+                    </Button>
+                  </Menu.Item>
+                </Menu.Items>
+              </Menu>
+            </PageHeader.Menu>
+            <PageHeader.Title
+              description={data.dashboard.description}
+              title={data.dashboard.name}
+            />
+          </PageHeader.Main>
+        </PageHeader>
+      </PageLayout.Header>
+      <PageLayout.Body>
+        <PageLayout.Actions>
+          <IconButton
+            aria-label="edit"
+            data-testid="edit"
+            icon={<SettingsIcon />}
+            size="small"
+            variant="ghost"
+          />
+          <IconButton
+            aria-label="share"
+            data-testid="share"
+            icon={<ShareIcon />}
+            size="small"
+            variant="ghost"
+          />
+        </PageLayout.Actions>
+      </PageLayout.Body>
+    </PageLayout>
+  );
+};
+
+export const Default = {
+  args: {
+    data: {
+      dashboard: {
+        description:
+          'Description et culpa sit commodo ea enim excepteur elit. Velit irure velit tempor culpa commodo eu adipisicing eu proident ullamco.',
+        id: 1,
+        name: 'Dashboard 1'
+      }
+    }
+  },
+  render: DefaultView
+};
+
+export const AsEditLayoutState = {
+  args: {
+    ...Default.args
+  },
+  render: DefaultView
+};