@centreon/ui 23.10.65-develop.0 → 23.10.65

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -79,7 +79,12 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&:hover': {
         backgroundColor: theme.palette.action.hover
       },
-      cursor: 'move',
+      '&[data-canMove="false"]': {
+        cursor: 'default'
+      },
+      '&[data-canMove="true"]': {
+        cursor: 'move'
+      },
       padding: theme.spacing(0.5, 2)
     },
     widgetPadding: {

package/src/Dashboard/Item.tsx

@@ -15,6 +15,7 @@ import { useMemoComponent } from '../utils';
 import { useDashboardItemStyles } from './Dashboard.styles';
 
 interface DashboardItemProps {
+  canMove?: boolean;
   children: ReactElement;
   className?: string;
   disablePadding?: boolean;
@@ -37,7 +38,8 @@ const Item = forwardRef(
       onMouseUp,
       onTouchEnd,
       id,
-      disablePadding = false
+      disablePadding = false,
+      canMove = false
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
@@ -66,6 +68,7 @@ const Item = forwardRef(
               <div
                 {...listeners}
                 className={classes.widgetHeader}
+                data-canMove={canMove}
                 data-testid={`${id}_move_panel`}
               >
                 {header}

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -134,3 +134,13 @@ export const withRangeThresholds: Story = {
   },
   render: Template
 };
+
+export const RawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.5, 0.6]
+  },
+  render: Template
+};

package/src/Graph/Gauge/Gauge.tsx

@@ -7,11 +7,18 @@ import { Metric } from '../common/timeSeries/models';
 import ResponsiveGauge from './ResponsiveGauge';
 
 interface Props {
+  baseColor?: string;
   data?: LineChartData;
+  displayAsRaw?: boolean;
   thresholds: Thresholds;
 }
 
-export const Gauge = ({ thresholds, data }: Props): JSX.Element | null => {
+export const Gauge = ({
+  thresholds,
+  data,
+  displayAsRaw,
+  baseColor
+}: Props): JSX.Element | null => {
   if (!data) {
     return null;
   }
@@ -22,6 +29,8 @@ export const Gauge = ({ thresholds, data }: Props): JSX.Element | null => {
     <Responsive.ParentSize>
       {({ width, height }) => (
         <ResponsiveGauge
+          baseColor={baseColor}
+          displayAsRaw={displayAsRaw}
           height={height}
           metric={metric}
           thresholds={thresholds}

package/src/Graph/Gauge/PieData.tsx

@@ -16,7 +16,8 @@ const PieData = ({
   metric,
   adaptedMaxValue,
   thresholds,
-  radius
+  radius,
+  baseColor
 }: Omit<
   GaugeProps,
   'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
@@ -24,13 +25,12 @@ const PieData = ({
   const theme = useTheme();
 
   const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
-  const pieColor = !thresholds.enabled
-    ? theme.palette.success.main
-    : getColorFromDataAndTresholds({
-        data: metric.data[0],
-        theme,
-        thresholds
-      });
+  const pieColor = getColorFromDataAndTresholds({
+    baseColor,
+    data: metric.data[0],
+    theme,
+    thresholds
+  });
 
   const getDataColor = scaleOrdinal({
     domain: pieData,

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -7,7 +7,7 @@ import { Tooltip } from '@visx/visx';
 import { Box, Fade, useTheme } from '@mui/material';
 
 import { Metric } from '../common/timeSeries/models';
-import { formatMetricValue } from '../common/timeSeries';
+import { formatMetricValueWithUnit } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
 import { margins } from '../common/margins';
 
@@ -15,7 +15,8 @@ import Thresholds from './Thresholds';
 import PieData from './PieData';
 import { GaugeProps } from './models';
 
-interface Props extends Pick<GaugeProps, 'thresholds'> {
+interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
+  displayAsRaw?: boolean;
   height: number;
   metric: Metric;
   width: number;
@@ -30,7 +31,9 @@ const ResponsiveGauge = ({
   width,
   height,
   thresholds,
-  metric
+  metric,
+  displayAsRaw,
+  baseColor
 }: Props): JSX.Element => {
   const svgRef = useRef<SVGSVGElement>(null);
 
@@ -50,28 +53,36 @@ const ResponsiveGauge = ({
   const centerY = innerHeight / 2;
   const centerX = innerWidth / 2;
   const radius = Math.min(innerWidth, innerHeight) / 2;
-  const thresholdValues = flatten([
-    pluck('value', thresholds.warning),
-    pluck('value', thresholds.critical)
-  ]);
+  const thresholdValues = thresholds.enabled
+    ? flatten([
+        pluck('value', thresholds.warning),
+        pluck('value', thresholds.critical)
+      ])
+    : [0];
   const adaptedMaxValue = Math.max(
     metric.maximum_value || 0,
     Math.max(...thresholdValues) * 1.1,
     head(metric.data) as number
   );
 
-  const pieColor = !thresholds.enabled
-    ? theme.palette.success.main
-    : getColorFromDataAndTresholds({
-        data: metric.data[0],
-        theme,
-        thresholds
-      });
+  const pieColor = getColorFromDataAndTresholds({
+    baseColor,
+    data: metric.data[0],
+    theme,
+    thresholds
+  });
 
   const svgTop = svgRef.current?.getBoundingClientRect().top || 0;
   const svgLeft = svgRef.current?.getBoundingClientRect().left || 0;
 
-  const isSmallHeight = height < 250;
+  const isSmallWidget = height < 240;
+
+  const gaugeValue = formatMetricValueWithUnit({
+    base: 1000,
+    isRaw: displayAsRaw,
+    unit: metric.unit,
+    value: metric.data[0]
+  });
 
   return (
     <Box sx={{ position: 'relative' }}>
@@ -87,6 +98,7 @@ const ResponsiveGauge = ({
           />
           <PieData
             adaptedMaxValue={adaptedMaxValue}
+            baseColor={baseColor}
             metric={metric}
             radius={radius}
             thresholds={thresholds}
@@ -97,18 +109,15 @@ const ResponsiveGauge = ({
           style={{
             fill: pieColor,
             ...theme.typography.h3,
-            fontSize: Math.min(width, height) / 7
+            fontSize:
+              Math.min(width, height) / 7 -
+              (isSmallWidget ? 0 : (gaugeValue?.length || 0) * 2)
           }}
           textAnchor="middle"
           x="50%"
-          y={isSmallHeight ? 140 : 100 + Math.min(width, height) / 3}
+          y={isSmallWidget ? 130 : height - height / 2.3}
         >
-          {formatMetricValue({
-            base: 1000,
-            unit: metric.unit,
-            value: metric.data[0]
-          })}{' '}
-          {metric.unit}
+          {gaugeValue}
         </text>
       </svg>
       <Fade in={tooltipOpen && thresholds.enabled}>

package/src/Graph/Gauge/Thresholds.tsx

@@ -16,7 +16,7 @@ const Thresholds = ({
   showTooltip,
   hideTooltip,
   metric
-}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element => {
+}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element | null => {
   const theme = useTheme();
 
   const criticalThresholdValues = pluck('value', thresholds.critical);
@@ -65,30 +65,7 @@ const Thresholds = ({
   });
 
   if (!thresholds.enabled) {
-    return (
-      <Pie
-        data={successThresholdArc}
-        endAngle={-Math.PI / 2}
-        innerRadius={radius - thresholdThickness}
-        outerRadius={radius}
-        pieSortValues={() => -1}
-        pieValue={(d) => d.value}
-        startAngle={Math.PI / 2}
-      >
-        {(pie) => (
-          <AnimatedPie<{ name: string; value: number }>
-            {...pie}
-            animate
-            getColor={(arc) => successThresholdScaleOrdinal(arc.data.name)}
-            getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
-            hideTooltip={hideTooltip}
-            metric={metric}
-            showTooltip={showTooltip}
-            thresholds={thresholds}
-          />
-        )}
-      </Pie>
-    );
+    return null;
   }
 
   const arcs = [

package/src/Graph/Gauge/models.ts

@@ -3,6 +3,7 @@ import { Metric } from '../common/timeSeries/models';
 
 export interface GaugeProps {
   adaptedMaxValue: number;
+  baseColor?: string;
   height: number;
   hideTooltip: () => void;
   metric: Metric;

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -9,7 +9,7 @@ import { useSpring, animated } from '@react-spring/web';
 import { alpha, Box, Fade, useTheme } from '@mui/material';
 
 import {
-  formatMetricValue,
+  formatMetricValueWithUnit,
   getMetricWithLatestData
 } from '../common/timeSeries';
 import { Metric } from '../common/timeSeries/models';
@@ -34,16 +34,21 @@ const ResponsiveSingleBar = ({
   data,
   thresholds,
   width,
-  height
+  height,
+  displayAsRaw,
+  baseColor
 }: Props): JSX.Element => {
   const theme = useTheme();
 
   const metric = getMetricWithLatestData(data) as Metric;
   const latestMetricData = head(metric.data) as number;
-  const thresholdValues = flatten([
-    pluck('value', thresholds.warning),
-    pluck('value', thresholds.critical)
-  ]);
+  const thresholdValues = thresholds.enabled
+    ? flatten([
+        pluck('value', thresholds.warning),
+        pluck('value', thresholds.critical)
+      ])
+    : [0];
+
   const adaptedMaxValue = Math.max(
     metric.maximum_value || 0,
     Math.max(...thresholdValues) * 1.1,
@@ -66,6 +71,7 @@ const ResponsiveSingleBar = ({
   const barColor = useMemo(
     () =>
       getColorFromDataAndTresholds({
+        baseColor,
         data: latestMetricData,
         theme,
         thresholds
@@ -81,12 +87,12 @@ const ResponsiveSingleBar = ({
       x="50%"
       y={25}
     >
-      {formatMetricValue({
+      {formatMetricValueWithUnit({
         base: 1000,
+        isRaw: displayAsRaw,
         unit: metric.unit,
         value: metric.data[0]
-      })}{' '}
-      {metric.unit}
+      })}
     </text>
   );
 

package/src/Graph/SingleBar/SingleBar.stories.tsx

@@ -156,3 +156,13 @@ export const rangeThresholds: Story = {
   },
   render: Template
 };
+
+export const RawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.5, 1.5]
+  },
+  render: Template
+};

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -4,13 +4,11 @@ import { useTheme } from '@mui/material';
 
 import { groupMargin } from './Thresholds';
 
-const lineMargin = 10;
-
-const thresholdLineHeight = 60 + 2 * lineMargin;
-
+export const barHeight = 72;
 export const margin = 40;
 
-export const barHeight = 50;
+const lineMargin = 10;
+const thresholdLineHeight = barHeight + 2 * lineMargin;
 
 interface Props {
   hideTooltip: () => void;

package/src/Graph/SingleBar/models.ts

@@ -1,6 +1,8 @@
 import { LineChartData, Thresholds } from '../common/models';
 
 export interface SingleBarProps {
+  baseColor?: string;
   data?: LineChartData;
+  displayAsRaw?: boolean;
   thresholds: Thresholds;
 }

package/src/Graph/Text/Text.stories.tsx

@@ -52,3 +52,16 @@ export const critical: Story = {
   },
   render: Template
 };
+
+export const rawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: [0.5, 1.5]
+  },
+  render: Template
+};

package/src/Graph/Text/Text.tsx

@@ -4,7 +4,7 @@ import { Typography, useTheme } from '@mui/material';
 
 import { LineChartData, Thresholds } from '../common/models';
 import {
-  formatMetricValue,
+  formatMetricValueWithUnit,
   getMetricWithLatestData
 } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
@@ -12,7 +12,9 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 import { useTextStyles } from './Text.styles';
 
 interface Props {
+  baseColor?: string;
   data?: LineChartData;
+  displayAsRaw?: boolean;
   labels: {
     critical: string;
     warning: string;
@@ -23,7 +25,9 @@ interface Props {
 export const Text = ({
   thresholds,
   data,
-  labels
+  displayAsRaw,
+  labels,
+  baseColor
 }: Props): JSX.Element | null => {
   const theme = useTheme();
   const { classes } = useTextStyles();
@@ -37,20 +41,21 @@ export const Text = ({
   const metricUnit = metric?.unit ?? '';
 
   const color = getColorFromDataAndTresholds({
+    baseColor,
     data: metricValue,
     theme,
     thresholds
   });
 
   const warningThresholdLabels = thresholds.warning.map(({ value }) =>
-    formatMetricValue({
+    formatMetricValueWithUnit({
       unit: metricUnit,
       value
     })
   );
 
   const criticalThresholdLabels = thresholds.critical.map(({ value }) =>
-    formatMetricValue({
+    formatMetricValueWithUnit({
       unit: metricUnit,
       value
     })
@@ -58,24 +63,26 @@ export const Text = ({
 
   return (
     <div className={classes.graphText}>
-      <Typography sx={{ color }} variant="h3">
-        {formatMetricValue({
-          unit: metricUnit,
-          value: metricValue
-        })}{' '}
-        {metricUnit}
+      <Typography sx={{ color }} variant="h2">
+        <strong>
+          {formatMetricValueWithUnit({
+            isRaw: displayAsRaw,
+            unit: metricUnit,
+            value: metricValue
+          })}
+        </strong>
       </Typography>
       {thresholds.enabled && (
         <div className={classes.thresholds}>
           <Typography sx={{ color: 'warning.main' }} variant="h5">
             {labels.warning}
             {': '}
-            {warningThresholdLabels.join(' - ')} {metricUnit}
+            {warningThresholdLabels.join(' - ')}
           </Typography>
           <Typography sx={{ color: 'error.main' }} variant="h5">
             {labels.critical}
             {': '}
-            {criticalThresholdLabels.join(' - ')} {metricUnit}
+            {criticalThresholdLabels.join(' - ')}
           </Typography>
         </div>
       )}

package/src/Graph/common/timeSeries/index.test.ts

@@ -335,10 +335,10 @@ describe('timeSeries', () => {
   describe(timeSeries.formatMetricValue, () => {
     const cases: Array<TestCase> = [
       [218857269, '', 1000, '218.86m'],
-      [218857269, '', 1024, '208.72M'],
+      [218857269, '', 1024, '208.72 M'],
       [0.12232323445, '', 1000, '0.12'],
-      [1024, 'B', 1000, '1K'],
-      [1024, 'B', 1024, '1K'],
+      [1024, 'B', 1000, '1 KB'],
+      [1024, 'B', 1024, '1 KB'],
       [null, 'B', 1024, null]
     ];
 
@@ -504,3 +504,106 @@ describe('timeSeries', () => {
     });
   });
 });
+
+describe('Format value with unit', () => {
+  const units = [
+    'B',
+    'bytes',
+    'bytespersecond',
+    'B/s',
+    'B/sec',
+    'o',
+    'octets',
+    'b/s',
+    'b',
+    'ms',
+    '%',
+    ''
+  ];
+
+  const getExpectedResult = (unit): string => {
+    if (unit === '') {
+      return '324.23m';
+    }
+
+    return `309.21 M${unit}`;
+  };
+
+  const humanReadableTestCases = units.map((unit) => {
+    if (unit === '%') {
+      return {
+        expectedResult: '45.56%',
+        unit,
+        value: 45.55678
+      };
+    }
+
+    if (unit === 'ms') {
+      return {
+        expectedResult: '34.23 seconds',
+        unit,
+        value: 34232
+      };
+    }
+
+    return {
+      expectedResult: getExpectedResult(unit),
+      unit,
+      value: 324234232.34233
+    };
+  });
+
+  const rawTestCases = units.map((unit) => {
+    if (unit === '%') {
+      return {
+        expectedResult: '45.55678%',
+        unit,
+        value: 45.55678
+      };
+    }
+
+    if (unit === 'ms') {
+      return {
+        expectedResult: '34232 ms',
+        unit,
+        value: 34232
+      };
+    }
+
+    return {
+      expectedResult:
+        unit === '' ? '324234232.34233 ' : `324234232.34233 ${unit}`,
+      unit,
+      value: 324234232.34233
+    };
+  });
+
+  describe('Format the value as human readable', () => {
+    it.each(humanReadableTestCases)(
+      'formats the value with $unit',
+      ({ value, unit, expectedResult }) => {
+        expect(
+          timeSeries.formatMetricValueWithUnit({
+            unit,
+            value
+          })
+        ).toEqual(expectedResult);
+      }
+    );
+  });
+
+  describe('Format the value as raw', () => {
+    it.each(rawTestCases)(
+      'formats the value with $unit',
+      ({ value, unit, expectedResult }) => {
+        expect(
+          timeSeries.formatMetricValueWithUnit({
+            isRaw: true,
+            unit,
+            value
+          })
+        ).toEqual(expectedResult);
+      }
+    );
+  });
+});

package/src/Graph/common/timeSeries/index.ts

@@ -28,7 +28,10 @@ import {
   lt,
   identity,
   head,
-  last
+  last,
+  cond,
+  always,
+  T
 } from 'ramda';
 
 import { margin } from '../../LineChart/common';
@@ -440,6 +443,37 @@ const getRightScale = ({
   });
 };
 
+const formatTime = (value: number): string => {
+  if (value < 1000) {
+    return `${numeral(value).format('0.[00]a')} ms`;
+  }
+
+  const t = numeral(value / 1000).format('0.[00]a');
+
+  return `${t} seconds`;
+};
+
+const registerMsUnitToNumeral = (): null => {
+  try {
+    numeral.register('format', 'milliseconds', {
+      format: (value) => {
+        return formatTime(value);
+      },
+      regexps: {
+        format: /(ms)/,
+        unformat: /(ms)/
+      },
+      unformat: () => ''
+    });
+
+    return null;
+  } catch (_) {
+    return null;
+  }
+};
+
+registerMsUnitToNumeral();
+
 const formatMetricValue = ({
   value,
   unit,
@@ -463,11 +497,14 @@ const formatMetricValue = ({
 
   const base1024 = base2Units.includes(unit) || Number(base) === 1024;
 
-  const formatSuffix = base1024 ? ' ib' : 'a';
+  const formatSuffix = cond([
+    [equals('ms'), always(' ms')],
+    [T, always(base1024 ? ' ib' : 'a')]
+  ])(unit);
 
   const formattedMetricValue = numeral(Math.abs(value))
     .format(`0.[00]${formatSuffix}`)
-    .replace(/\s|i|B/g, '');
+    .replace(/iB/g, unit);
 
   if (lt(value, 0)) {
     return `-${formattedMetricValue}`;
@@ -476,6 +513,31 @@ const formatMetricValue = ({
   return formattedMetricValue;
 };
 
+const formatMetricValueWithUnit = ({
+  value,
+  unit,
+  base = 1000,
+  isRaw = false
+}: FormatMetricValueProps & { isRaw?: boolean }): string | null => {
+  if (isNil(value)) {
+    return null;
+  }
+
+  if (isRaw) {
+    const unitText = equals('%', unit) ? unit : ` ${unit}`;
+
+    return `${value}${unitText}`;
+  }
+
+  if (equals('%', unit)) {
+    return `${numeral(Math.abs(value)).format('0.[00]')}%`;
+  }
+
+  const formattedMetricValue = formatMetricValue({ base, unit, value });
+
+  return formattedMetricValue;
+};
+
 const getStackedYScale = ({
   leftScale,
   rightScale
@@ -557,5 +619,6 @@ export {
   getStackedYScale,
   getTimeValue,
   bisectDate,
-  getMetricWithLatestData
+  getMetricWithLatestData,
+  formatMetricValueWithUnit
 };

package/src/Graph/common/timeSeries/models.ts

@@ -14,6 +14,8 @@ interface DsData {
 export interface Metric {
   average_value: number | null;
   crit: number | null;
+  critical_high_threshold: number | null;
+  critical_low_threshold: number | null;
   data: Array<number>;
   ds_data: DsData;
   legend: string;
@@ -21,7 +23,8 @@ export interface Metric {
   metric: string;
   minimum_value: number | null;
   unit: string;
-  warn: number | null;
+  warning_high_threshold: number | null;
+  warning_low_threshold: number | null;
 }
 
 type TimeSeries = { timeTick: string };

package/src/Graph/common/utils.ts

@@ -17,6 +17,7 @@ import { Theme } from '@mui/material';
 import { Thresholds } from './models';
 
 interface GetColorFromDataAndThresholdsProps {
+  baseColor?: string;
   data: number;
   theme: Theme;
   thresholds: Thresholds;
@@ -25,10 +26,11 @@ interface GetColorFromDataAndThresholdsProps {
 export const getColorFromDataAndTresholds = ({
   data,
   thresholds,
-  theme
+  theme,
+  baseColor
 }: GetColorFromDataAndThresholdsProps): string => {
   if (!thresholds.enabled) {
-    return theme.palette.success.main;
+    return baseColor || theme.palette.primary.main;
   }
 
   const criticalValues = pluck('value', thresholds.critical).sort();

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

@@ -1,7 +1,7 @@
 import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip } from '@mui/material';
+import { Chip, ChipProps } from '@mui/material';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import Autocomplete, { Props as AutocompleteProps } from '..';
@@ -18,7 +18,6 @@ const useStyles = makeStyles()((theme) => ({
     width: theme.spacing(1.5)
   },
   tag: {
-    backgroundColor: theme.palette.divider,
     fontSize: theme.typography.caption.fontSize
   }
 }));
@@ -33,6 +32,7 @@ export interface Props
       UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
       'multiple'
     > {
+  chipProps?: ChipProps;
   disableSortedOptions?: boolean;
   getTagLabel?: (option) => string;
   optionProperty?: string;
@@ -45,6 +45,7 @@ const MultiAutocompleteField = ({
   optionProperty = 'name',
   getOptionLabel = (option): string => option.name,
   getTagLabel = (option): string => option[optionProperty],
+  chipProps,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -60,6 +61,7 @@ const MultiAutocompleteField = ({
         label={getTagLabel(option)}
         size="medium"
         {...getTagProps({ index })}
+        {...chipProps}
       />
     ));
 

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

@@ -32,6 +32,7 @@ export type Props = {
   displayPopupIcon?: boolean;
   endAdornment?: React.ReactElement;
   error?: string;
+  getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
   label: string;
   loading?: boolean;
@@ -158,6 +159,7 @@ const AutocompleteField = ({
   autoSize = false,
   autoSizeDefaultWidth = 0,
   autoSizeCustomPadding,
+  getOptionItemLabel = (option) => option.name,
   ...autocompleteProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ hideInput });
@@ -249,7 +251,7 @@ const AutocompleteField = ({
             <Option
               thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
             >
-              {option.name}
+              {getOptionItemLabel(option)}
             </Option>
           </li>
         );

package/src/InputField/Text/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useCallback } from 'react';
 
-import { isNil } from 'ramda';
+import { equals, isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
@@ -9,7 +9,8 @@ import {
   TextFieldProps,
   Theme,
   Tooltip,
-  Typography
+  Typography,
+  Box
 } from '@mui/material';
 
 import { getNormalizedId } from '../../utils';
@@ -18,8 +19,9 @@ import useAutoSize from './useAutoSize';
 
 const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
   (theme: Theme, { displayAsBlock }) => ({
-    compact: {
-      fontSize: 'x-small'
+    autoSizeCompact: {
+      paddingRight: theme.spacing(1),
+      paddingTop: theme.spacing(0.6)
     },
     hiddenText: {
       display: 'table',
@@ -140,7 +142,7 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <>
+      <Box sx={{ width: autoSize ? 'auto' : '100%' }}>
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}
@@ -162,7 +164,8 @@ const TextField = forwardRef(
               className: cx(
                 classes.inputBase,
                 {
-                  [classes.transparent]: transparent
+                  [classes.transparent]: transparent,
+                  [classes.autoSizeCompact]: autoSize && equals(size, 'compact')
                 },
                 className
               ),
@@ -195,7 +198,7 @@ const TextField = forwardRef(
             {rest.value || externalValueForAutoSize || innerValue}
           </Typography>
         )}
-      </>
+      </Box>
     );
   }
 );

package/src/RichTextEditor/ContentEditable.tsx

@@ -160,7 +160,6 @@ const ContentEditable = ({
         className,
         isFocused && classes.inputFocused
       )}
-      id={namespace}
     >
       {editable && isTextEmpty && (
         <Typography className={classes.placeholder}>

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -56,7 +56,7 @@ describe('Rich Text Editor', () => {
         .should('be.visible')
         .and('have.value', '');
 
-      cy.get('#RichTextEditor').contains('Type here...');
+      cy.findByLabelText('RichTextEditor').parent().contains('Type here...');
     });
 
     it('displays changes with undo redo buttons', () => {
@@ -187,11 +187,6 @@ describe('Rich Text Editor', () => {
     });
 
     it('displays editor when editable props is false and an initialState exist', () => {
-      cy.get('[data-testid="RichTextEditor"]').should(
-        'have.attr',
-        'contenteditable',
-        'false'
-      );
       cy.findByLabelText('Undo').should('not.exist');
       cy.findByLabelText('Redo').should('not.exist');
       cy.findByLabelText('bold').should('not.exist');
@@ -216,11 +211,6 @@ describe('Rich Text Editor', () => {
     });
 
     it('displays editor when editable props is false and an initialState exist', () => {
-      cy.get('[data-testid="RichTextEditor"]').should(
-        'have.attr',
-        'contenteditable',
-        'false'
-      );
       cy.findByLabelText('Undo').should('be.disabled');
       cy.findByLabelText('Redo').should('be.disabled');
       cy.findByLabelText('bold').should('be.disabled');
@@ -245,12 +235,14 @@ describe('Rich Text Editor', () => {
       });
     });
     it('displays editor with custom namespace', () => {
-      cy.get('#CypressComponentTest > p').should('be.exist');
+      cy.get('[data-testid="CypressComponentTest"] > p').should('be.exist');
       cy.get('[data-testid="CypressComponentTest"]').should('be.exist');
     });
 
     it('displays editor with custom placeholder', () => {
-      cy.get('#CypressComponentTest > p').contains('Type Cypress test...');
+      cy.get('[data-testid="CypressComponentTest"]')
+        .parent()
+        .contains('Type Cypress test...');
     });
 
     it('displays editor with custom minimum input height', () => {

package/src/RichTextEditor/RichTextEditor.tsx

@@ -23,6 +23,7 @@ import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 export interface RichTextEditorProps {
   contentClassName?: string;
   disabled?: boolean;
+  displayBlockButtons?: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
   editorState?: string;
@@ -132,9 +133,10 @@ const RichTextEditor = ({
   onBlur,
   contentClassName,
   displayMacrosButton = false,
-  disabled,
+  disabled = false,
   openLinkInNewTab = true,
-  initialize
+  initialize,
+  displayBlockButtons = true
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
 
@@ -174,6 +176,7 @@ const RichTextEditor = ({
         <div className={classes.toolbar}>
           <ToolbarPlugin
             disabled={disabled}
+            displayBlockButtons={displayBlockButtons}
             displayMacrosButton={displayMacrosButton}
             editable={editable}
           />

package/src/RichTextEditor/plugins/AutoLinkPlugin/index.tsx

@@ -1,7 +1,11 @@
+import { useEffect, useState } from 'react';
+
 import {
   AutoLinkPlugin,
   LinkMatcher
 } from '@lexical/react/LexicalAutoLinkPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical';
 
 interface LinkAttributes {
   rel?: null | string;
@@ -56,7 +60,42 @@ const AutoCompleteLinkPlugin = ({
   openLinkInNewTab
 }: {
   openLinkInNewTab: boolean;
-}): JSX.Element => {
+}): JSX.Element | null => {
+  const [editor] = useLexicalComposerContext();
+  const [hasFocus, setFocus] = useState(false);
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        BLUR_COMMAND,
+        () => {
+          setFocus(false);
+
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+    []
+  );
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        FOCUS_COMMAND,
+        () => {
+          setFocus(true);
+
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+    []
+  );
+
+  if (!hasFocus) {
+    return null;
+  }
+
   return <AutoLinkPlugin matchers={getMatchers(openLinkInNewTab)} />;
 };
 

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -11,7 +11,7 @@ import { mergeRegister } from '@lexical/utils';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useTranslation } from 'react-i18next';
-import { equals, isNil } from 'ramda';
+import { dec, equals, gt, isNil, replace } from 'ramda';
 
 import { Popper, IconButton, Paper, Link, Box } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
@@ -56,6 +56,7 @@ const FloatingLinkEditor = ({
     x: 0,
     y: 0
   });
+  const [editedUrl, setEditedUrl] = useState('');
 
   const [editMode, setEditMode] = useAtom(editLinkModeAtom);
   const [linkUrl, setLinkUrl] = useAtom(linkValueAtom);
@@ -65,9 +66,10 @@ const FloatingLinkEditor = ({
   const acceptOrCancelNewLinkValue = useCallback(
     (event): void => {
       const { value } = event.target;
-      if (event.key === 'Enter') {
-        event.preventDefault();
 
+      event.preventDefault();
+
+      if (event.key === 'Enter') {
         if (value !== '') {
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
             target: openLinkInNewTab ? '_blank' : undefined,
@@ -75,14 +77,36 @@ const FloatingLinkEditor = ({
           });
         }
         setEditMode(false);
-      } else if (event.key === 'Escape') {
-        event.preventDefault();
+      }
+
+      if (event.key === 'Escape') {
         setEditMode(false);
       }
     },
     [setEditMode, setLinkUrl]
   );
 
+  const enterInEditMode = useCallback(() => {
+    setEditedUrl(linkUrl);
+    setEditMode(true);
+  }, [linkUrl]);
+
+  const changeValue = useCallback((event): void => {
+    const { value } = event.target;
+
+    const matched = value.match(/https?:\/\//g);
+
+    if (gt(matched.length, 1)) {
+      setEditedUrl(
+        replace(matched.join(''), matched[dec(matched.length)], value)
+      );
+
+      return;
+    }
+
+    setEditedUrl(value);
+  }, []);
+
   useEffect(() => {
     const isPositioned =
       rangeRect && (!equals(rangeRect.x, 0) || !equals(rangeRect.y, 0));
@@ -126,9 +150,9 @@ const FloatingLinkEditor = ({
           <InputField
             autoFocus
             dataTestId="InputLinkField"
-            defaultValue={linkUrl}
             label={t(labelInputLink)}
             size="small"
+            value={editedUrl}
             onBlur={(event): void => {
               const { value } = event.target;
 
@@ -139,7 +163,8 @@ const FloatingLinkEditor = ({
               }
               setEditMode(false);
             }}
-            onKeyDown={acceptOrCancelNewLinkValue}
+            onChange={changeValue}
+            onKeyUp={acceptOrCancelNewLinkValue}
           />
         ) : (
           <Box component="span" sx={{ margin: '10px' }}>
@@ -156,7 +181,7 @@ const FloatingLinkEditor = ({
               aria-label={labelEditLink}
               size="small"
               sx={{ marginLeft: '5px' }}
-              onClick={(): void => setEditMode(true)}
+              onClick={enterInEditMode}
             >
               <EditIcon fontSize="small" />
             </IconButton>

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -8,7 +8,8 @@ import MacrosButton from './MacrosButton';
 import BlockButtons from './BlockButtons';
 
 interface Props {
-  disabled?: boolean;
+  disabled: boolean;
+  displayBlockButtons: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
 }
@@ -33,15 +34,20 @@ export const useStyles = makeStyles()((theme) => ({
 const ToolbarPlugin = ({
   editable,
   displayMacrosButton,
-  disabled
+  disabled,
+  displayBlockButtons
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
 
   return editable ? (
     <div className={classes.container}>
       <UndoRedoButtons disabled={disabled} />
-      <Divider flexItem orientation="vertical" />
-      <BlockButtons disabled={disabled} />
+      {displayBlockButtons && (
+        <>
+          <Divider flexItem orientation="vertical" />
+          <BlockButtons disabled={disabled} />
+        </>
+      )}
       <Divider flexItem orientation="vertical" />
       <FormatButtons disabled={disabled} />
       {displayMacrosButton && (

package/src/ThemeProvider/index.tsx

@@ -48,8 +48,7 @@ const getInputBaseRootStyle = ({
 
   if (equals(size, 'compact')) {
     return {
-      padding: '8px 8px',
-      paddingRight: '0px'
+      padding: '0px 0px 0px 8px'
     };
   }
   if (equals(size, 'small')) {
@@ -75,7 +74,6 @@ const getInputBaseRootStyle = ({
 const getInputBaseInputStyle = ({ size }: InputBaseProps): CSSInterpolation => {
   if (equals(size, 'compact')) {
     return {
-      fontSize: 'x-small',
       minHeight: '32px'
     };
   }
@@ -123,6 +121,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     MuiChip: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
+          backgroundColor: !ownerState.color && theme.palette.divider,
           ...(equals(ownerState.size, 'medium') && {
             borderRadius: theme.spacing(1.25),
             fontSize: theme.typography.body2.fontSize,
@@ -189,7 +188,10 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiInputBase: {
       styleOverrides: {
-        root: ({ ownerState }) => getInputBaseInputStyle(ownerState)
+        root: ({ ownerState, theme }) => ({
+          ...getInputBaseInputStyle(ownerState),
+          backgroundColor: theme.palette.background.paper
+        })
       }
     },
     MuiList: {

package/src/api/useFetchQuery/index.ts

@@ -90,14 +90,6 @@ const useFetchQuery = <T extends object>({
     }
   };
 
-  useEffect(() => {
-    return (): void => {
-      queryClient.cancelQueries(getQueryKey());
-    };
-  }, []);
-
-  manageError();
-
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
     queryClient.prefetchQuery(
       queryKey,
@@ -162,6 +154,16 @@ const useFetchQuery = <T extends object>({
 
   const errorData = queryData.data as ResponseError | undefined;
 
+  useEffect(() => {
+    return (): void => {
+      queryClient.cancelQueries(getQueryKey());
+    };
+  }, []);
+
+  useEffect(() => {
+    manageError();
+  }, [queryData.data]);
+
   return {
     ...omit(['data'], queryData),
     data,

package/src/components/Inputs/Switch/Switch.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Switch from './Switch';
+
+const meta: Meta<typeof Switch> = {
+  component: Switch
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const notChecked: Story = {
+  args: {
+    checked: false
+  }
+};
+
+export const checked: Story = {
+  args: {
+    checked: true
+  }
+};

package/src/components/Inputs/Switch/Switch.styles.ts

@@ -0,0 +1,13 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useSwitchStyles = makeStyles()((theme) => ({
+  switch: {
+    '& .MuiSwitch-thumb': {
+      backgroundColor: theme.palette.common.white
+    },
+    '& span[data-checked="true"] + .MuiSwitch-track': {
+      backgroundColor: theme.palette.success.main,
+      opacity: 1
+    }
+  }
+}));

package/src/components/Inputs/Switch/Switch.tsx

@@ -0,0 +1,18 @@
+import { SwitchProps, Switch as MuiSwitch } from '@mui/material';
+
+import { useSwitchStyles } from './Switch.styles';
+
+const Switch = ({ checked, ...props }: SwitchProps): JSX.Element => {
+  const { classes } = useSwitchStyles();
+
+  return (
+    <MuiSwitch
+      checked={checked}
+      className={classes.switch}
+      data-checked={checked}
+      {...props}
+    />
+  );
+};
+
+export default Switch;

package/src/components/Inputs/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch/Switch';

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

@@ -48,10 +48,12 @@ const useStyles = makeStyles<{
     }
   },
   modalActions: {
+    bottom: 0,
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    position: 'sticky'
   },
   modalBody: {
     '& > p': {

package/src/components/index.ts

@@ -10,3 +10,4 @@ export * from './List';
 export * from './ItemComposition';
 export * from './Avatar';
 export * from './CollapsibleItem';
+export * from './Inputs';