@centreon/ui 23.10.79 → 23.10.81

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -70,6 +70,7 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
   (theme, { hasHeader }) => ({
     widgetContainer: {
       height: '100%',
+      paddingBottom: theme.spacing(2),
       width: '100%'
     },
     widgetContent: {
@@ -89,7 +90,7 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2, 2) : theme.spacing(1, 2)
+      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
     }
   })
 );

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/Graph/Gauge/ResponsiveGauge.tsx

@@ -134,7 +134,7 @@ const ResponsiveGauge = ({
             ...baseStyles,
             backgroundColor: theme.palette.background.paper,
             color: theme.palette.text.primary,
-            transform: 'translate(-50%, 0)'
+            transform: 'translate(-50%, -24px)'
           }}
           top={(tooltipTop || 0) - svgTop + 20}
         >

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -127,47 +127,54 @@ const ResponsiveSingleBar = ({
   const springStyle = useSpring({ width: metricBarWidth });
 
   return (
-    <Box
-      sx={{
+    <div
+      style={{
         height: '100%',
-        overflow: 'hidden',
-        position: 'relative',
-        width: '100%'
+        position: 'relative'
       }}
     >
-      <svg height={height} ref={svgRef} width={width}>
-        <Group.Group>
-          {text}
-          <animated.rect
-            data-testid={`${latestMetricData}-bar-${barColor}`}
-            fill={barColor}
-            height={barHeights[size]}
-            rx={4}
-            style={springStyle}
-            x={0}
-            y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-          />
-          <Bar
-            fill="transparent"
-            height={barHeights[size]}
-            rx={4}
-            ry={4}
-            stroke={alpha(theme.palette.text.primary, 0.3)}
-            width={maxBarWidth}
-            x={0}
-            y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-          />
-          {thresholds.enabled && (
-            <Thresholds
-              hideTooltip={hideTooltip}
-              showTooltip={showTooltip}
-              size={size}
-              thresholds={thresholds}
-              xScale={xScale}
+      <Box
+        sx={{
+          height: '100%',
+          overflow: 'hidden',
+          position: 'relative',
+          width: '100%'
+        }}
+      >
+        <svg height={height} ref={svgRef} width={width}>
+          <Group.Group>
+            {text}
+            <animated.rect
+              data-testid={`${latestMetricData}-bar-${barColor}`}
+              fill={barColor}
+              height={barHeights[size]}
+              rx={4}
+              style={springStyle}
+              x={0}
+              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
+            />
+            <Bar
+              fill="transparent"
+              height={barHeights[size]}
+              rx={4}
+              ry={4}
+              stroke={alpha(theme.palette.text.primary, 0.3)}
+              width={maxBarWidth}
+              x={0}
+              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
             />
-          )}
-        </Group.Group>
-      </svg>
+            {thresholds.enabled && (
+              <Thresholds
+                hideTooltip={hideTooltip}
+                showTooltip={showTooltip}
+                size={size}
+                thresholds={thresholds}
+                xScale={xScale}
+              />
+            )}
+          </Group.Group>
+        </svg>
+      </Box>
       <Fade in={tooltipOpen}>
         <Tooltip.Tooltip
           left={tooltipLeft}
@@ -175,7 +182,7 @@ const ResponsiveSingleBar = ({
             ...baseStyles,
             backgroundColor: theme.palette.background.paper,
             color: theme.palette.text.primary,
-            transform: `translate(-50%, ${isSmall ? -60 : -20}px)`,
+            transform: `translate(-50%, ${isSmall ? -100 : -120}px)`,
             zIndex: theme.zIndex.tooltip
           }}
           top={tooltipTop}
@@ -183,7 +190,7 @@ const ResponsiveSingleBar = ({
           {tooltipData}
         </Tooltip.Tooltip>
       </Fade>
-    </Box>
+    </div>
   );
 };
 

package/src/RichTextEditor/ContentEditable.tsx

@@ -16,9 +16,6 @@ interface StyleProps {
 const useStyles = makeStyles<StyleProps>()(
   (theme, { minInputHeight, editable, error }) => ({
     container: {
-      '& p': {
-        margin: 0
-      },
       backgroundColor: theme.palette.background.paper,
       border: error
         ? `1px solid ${theme.palette.error.main}`
@@ -41,6 +38,11 @@ const useStyles = makeStyles<StyleProps>()(
     placeholder: {
       color: theme.palette.grey[500],
       pointerEvents: 'none'
+    },
+    root: {
+      '& p,h1,h2,h3,h4,h5,h6,span': {
+        margin: 0
+      }
     }
   })
 );
@@ -121,11 +123,13 @@ const ContentEditable = ({
     const shouldResetEditorToInitialState =
       resetEditorToInitialStateCondition?.();
 
-    if (!shouldResetEditorToInitialState || isNil(initialEditorState)) {
+    if (!shouldResetEditorToInitialState) {
       return;
     }
 
-    const newEditorState = editor.parseEditorState(initialEditorState);
+    const newEditorState = editor.parseEditorState(
+      initialEditorState || defaultState
+    );
 
     editor.setEditorState(newEditorState);
   }, [editorState]);
@@ -156,7 +160,8 @@ const ContentEditable = ({
   return (
     <div
       className={cx(
-        classes.container,
+        classes.root,
+        editable && classes.container,
         className,
         isFocused && classes.inputFocused
       )}

package/src/RichTextEditor/index.stories.tsx

@@ -67,6 +67,13 @@ withEditableFalse.args = {
   initialEditorState: JSON.stringify(initialEditorState)
 };
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  editable: false,
+  editorState: JSON.stringify(initialEditorState)
+};
+
 const StoryWithEditableFalseLikePreview = (): JSX.Element => {
   const [editorState, setEditorState] =
     useState<EditorState>(initialEditorState);

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/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;
 };