@centreon/ui 23.10.80 → 23.10.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.80",
+  "version": "23.10.82",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split } from 'ramda';
+import { equals, includes, path, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -73,12 +73,23 @@ const Radio = ({
                   disabled={disabled}
                   id={getNormalizedId(`${dataTestId}${optionLabel}`)}
                   inputProps={{
-                    'aria-label': t(optionLabel) || ''
+                    'aria-label':
+                      (equals(type(optionLabel), 'String') &&
+                        t(optionLabel as string)) ||
+                      ''
                   }}
                 />
               }
-              key={optionLabel}
-              label={t(optionLabel) as string}
+              key={
+                equals(type(optionLabel), 'String')
+                  ? (optionLabel as string)
+                  : `${optionValue}`
+              }
+              label={
+                equals(type(optionLabel), 'String')
+                  ? (t(optionLabel as string) as string)
+                  : optionLabel
+              }
               value={optionValue}
             />
           ))}

package/src/Form/Inputs/models.ts

@@ -77,7 +77,7 @@ export interface InputProps {
   label: string;
   radio?: {
     options?: Array<{
-      label: string;
+      label: string | JSX.Element;
       value: boolean | string;
     }>;
     row?: boolean;

package/src/components/Form/Dashboard/Dashboard.resource.ts

@@ -1,4 +1,9 @@
 export type DashboardResource = {
   description?: string | null;
+  globalRefreshInterval?: {
+    global: string;
+    manual: string;
+    title: string;
+  };
   name: string;
 };

package/src/components/Form/Dashboard/DashboardForm.styles.ts

@@ -5,9 +5,17 @@ const useStyles = makeStyles()(() => ({
     display: 'flex',
     flexDirection: 'column',
     maxWidth: '480px',
-
     width: '100%'
   }
 }));
 
-export { useStyles };
+const useGlobalRefreshIntervalStyles = makeStyles()((theme) => ({
+  globalRefreshInterval: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1)
+  }
+}));
+
+export { useStyles, useGlobalRefreshIntervalStyles };

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

@@ -16,11 +16,13 @@ import {
   labelRequired
 } from './translatedLabels';
 import { DashboardResource } from './Dashboard.resource';
+import GlobalRefreshFieldOption from './GlobalRefreshFieldOption';
 
 export type DashboardFormProps = {
   labels: DashboardFormLabels;
   onSubmit?: FormProps<DashboardResource>['submit'];
   resource?: DashboardResource;
+  showRefreshIntervalFields?: boolean;
   variant?: FormVariant;
 } & Pick<FormActionsProps, 'onCancel'>;
 
@@ -34,7 +36,8 @@ const DashboardForm = ({
   resource,
   labels,
   onSubmit,
-  onCancel
+  onCancel,
+  showRefreshIntervalFields
 }: DashboardFormProps): ReactElement => {
   const { classes } = useStyles();
   const { t } = useTranslation();
@@ -58,6 +61,26 @@ const DashboardForm = ({
             multilineRows: 3
           },
           type: InputType.Text
+        },
+        {
+          fieldName: 'refresh.type',
+          group: 'main',
+          hideInput: () => !showRefreshIntervalFields,
+          label: labels?.entity?.globalRefreshInterval?.title,
+          radio: {
+            options: [
+              {
+                label: <GlobalRefreshFieldOption />,
+                value: 'global'
+              },
+              {
+                label: labels?.entity?.globalRefreshInterval?.manual,
+                value: 'manual'
+              }
+            ],
+            row: false
+          },
+          type: InputType.Radio
         }
       ],
       submit: (values, bag) => onSubmit?.(values, bag),
@@ -70,6 +93,16 @@ const DashboardForm = ({
               `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
           )
           .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: Yup.string()
+        }),
         name: Yup.string()
           .label(labels?.entity?.name)
           .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))

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

@@ -0,0 +1,54 @@
+import { ChangeEvent } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { isEmpty } from 'ramda';
+import pluralize from 'pluralize';
+
+import { Typography } from '@mui/material';
+
+import { TextField } from '../../..';
+
+import {
+  labelGlobalRefreshInterval,
+  labelInterval,
+  labelSeconds
+} from './translatedLabels';
+import { useGlobalRefreshIntervalStyles } from './DashboardForm.styles';
+
+const GlobalRefreshFieldOption = (): JSX.Element => {
+  const { classes } = useGlobalRefreshIntervalStyles();
+  const { t } = useTranslation();
+
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const value = values.refresh.interval;
+
+  const changeInput = (event: ChangeEvent<HTMLInputElement>): void => {
+    setFieldValue(
+      'refresh.interval',
+      !isEmpty(event.target.value) ? Number(event.target.value) || 1 : null
+    );
+  };
+
+  return (
+    <div className={classes.globalRefreshInterval}>
+      <Typography>{t(labelGlobalRefreshInterval)}</Typography>
+      <TextField
+        autoSize
+        dataTestId={labelInterval}
+        inputProps={{
+          'aria-label': t(labelInterval) as string,
+          min: 1
+        }}
+        size="compact"
+        type="number"
+        value={value || ''}
+        onChange={changeInput}
+      />
+      <Typography>{pluralize(t(labelSeconds), value)}</Typography>
+    </div>
+  );
+};
+
+export default GlobalRefreshFieldOption;

package/src/components/Form/Dashboard/translatedLabels.ts

@@ -4,3 +4,6 @@ export const labelMustBeAtLeast =
   '{{label}} should be at least {{min}} characters long';
 export const labelRequired = 'Required';
 export const labelCharacters = 'characters';
+export const labelGlobalRefreshInterval = 'Global refresh interval';
+export const labelSeconds = 'seconds';
+export const labelInterval = 'Interval';

package/src/components/Modal/Modal.styles.ts

@@ -30,7 +30,8 @@ const useStyles = makeStyles<{
       maxWidth: 'unset',
       position: 'absolute',
       right: props?.right ?? 0,
-      top: props?.top ?? 0
+      top: props?.top ?? 0,
+      transition: theme.transitions.create('left')
     },
     '&[data-size="large"] .MuiDialog-paper': {
       maxWidth: '640px',

package/src/utils/useRefreshInterval.ts

@@ -1,7 +1,13 @@
+import { useAtomValue } from 'jotai';
 import { always, cond, equals } from 'ramda';
 
+import { refreshIntervalAtom } from '@centreon/ui-context';
+
 interface Props {
-  globalRefreshInterval?: number;
+  globalRefreshInterval: {
+    interval: number | null;
+    type: 'global' | 'manual';
+  };
   refreshInterval: 'default' | 'custom' | 'manual';
   refreshIntervalCustom?: number;
 }
@@ -11,11 +17,20 @@ export const useRefreshInterval = ({
   refreshIntervalCustom,
   globalRefreshInterval
 }: Props): number | false => {
+  const platformInterval = useAtomValue(refreshIntervalAtom);
+
   const refreshIntervalToUse = cond([
-    [equals('default'), always(globalRefreshInterval)],
+    [
+      equals('default'),
+      always(
+        equals(globalRefreshInterval.type, 'manual')
+          ? false
+          : globalRefreshInterval.interval || platformInterval
+      )
+    ],
     [equals('custom'), always(refreshIntervalCustom)],
-    [equals('manual'), always(0)]
+    [equals('manual'), always(false)]
   ])(refreshInterval);
 
-  return refreshIntervalToUse ? refreshIntervalToUse * 1000 : false;
+  return refreshIntervalToUse ? (refreshIntervalToUse as number) * 1000 : false;
 };