@centreon/ui 23.10.56 → 23.10.58

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

@@ -187,9 +187,11 @@ describe('Rich Text Editor', () => {
     });
 
     it('displays editor when editable props is false and an initialState exist', () => {
-      cy.get('[data-testid="RichTextEditor"]')
-        .invoke('attr', 'contenteditable')
-        .should('eq', 'false');
+      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');
@@ -214,9 +216,11 @@ describe('Rich Text Editor', () => {
     });
 
     it('displays editor when editable props is false and an initialState exist', () => {
-      cy.get('[data-testid="RichTextEditor"]')
-        .invoke('attr', 'contenteditable')
-        .should('eq', 'true');
+      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');

package/src/RichTextEditor/RichTextEditor.tsx

@@ -63,6 +63,36 @@ const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
       paddingLeft: theme.spacing(1.5),
       paddingTop: theme.spacing(0.5)
     },
+    h1: {
+      fontSize: theme.typography.h1.fontSize,
+      fontWeight: theme.typography.h1.fontWeight,
+      lineHeight: theme.typography.h1.lineHeight
+    },
+    h2: {
+      fontSize: theme.typography.h2.fontSize,
+      fontWeight: theme.typography.h2.fontWeight,
+      lineHeight: theme.typography.h2.lineHeight
+    },
+    h3: {
+      fontSize: theme.typography.h3.fontSize,
+      fontWeight: theme.typography.h3.fontWeight,
+      lineHeight: theme.typography.h3.lineHeight
+    },
+    h4: {
+      fontSize: theme.typography.h4.fontSize,
+      fontWeight: theme.typography.h4.fontWeight,
+      lineHeight: theme.typography.h4.lineHeight
+    },
+    h5: {
+      fontSize: theme.typography.h5.fontSize,
+      fontWeight: theme.typography.h5.fontWeight,
+      lineHeight: theme.typography.h5.lineHeight
+    },
+    h6: {
+      fontSize: theme.typography.h6.fontSize,
+      fontWeight: theme.typography.h6.fontWeight,
+      lineHeight: theme.typography.h6.lineHeight
+    },
     italic: {
       fontStyle: 'italic'
     },
@@ -101,7 +131,7 @@ const RichTextEditor = ({
   onBlur,
   contentClassName,
   displayMacrosButton = false,
-  disabled = false,
+  disabled,
   openLinkInNewTab = true
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
@@ -117,6 +147,14 @@ const RichTextEditor = ({
     nodes: [AutoLinkNode, LinkNode, HeadingNode, ListNode, ListItemNode],
     onError,
     theme: {
+      heading: {
+        h1: classes.h1,
+        h2: classes.h2,
+        h3: classes.h3,
+        h4: classes.h4,
+        h5: classes.h5,
+        h6: classes.h6
+      },
       link: classes.link,
       text: {
         bold: classes.bold,

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

@@ -8,7 +8,7 @@ import MacrosButton from './MacrosButton';
 import BlockButtons from './BlockButtons';
 
 interface Props {
-  disabled: boolean;
+  disabled?: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
 }

package/src/api/useGraphQuery/index.ts

@@ -1,19 +1,20 @@
 import { T, always, cond, flatten, isEmpty, join, pipe, pluck } from 'ramda';
 import dayjs from 'dayjs';
 
-import { GraphData, useFetchQuery } from '../..';
+import { LineChartData, useFetchQuery } from '../..';
 
 import { ServiceMetric } from './models';
 
 interface UseMetricsQueryProps {
   baseEndpoint: string;
   metrics: Array<ServiceMetric>;
+  refreshInterval?: number | false;
   timePeriod?: TimePeriod;
 }
 
 interface UseMetricsQueryState {
   end: string;
-  graphData: GraphData | undefined;
+  graphData: LineChartData | undefined;
   isGraphLoading: boolean;
   isMetricIdsEmpty: boolean;
   start: string;
@@ -37,14 +38,15 @@ const getStartEndFromTimePeriod = (
   ])(timePeriod);
 };
 
-interface PerformanceGraphData extends Omit<GraphData, 'global'> {
+interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
   base: number;
 }
 
 const useGraphQuery = ({
   metrics,
   baseEndpoint,
-  timePeriod = TimePeriod.lastDay
+  timePeriod = TimePeriod.lastDay,
+  refreshInterval = false
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const metricIds = pipe(
     pluck('metrics'),
@@ -65,6 +67,7 @@ const useGraphQuery = ({
     getQueryKey: () => ['graph', metricIds],
     queryOptions: {
       enabled: !isEmpty(metricIds),
+      refetchInterval: refreshInterval,
       suspense: false
     }
   });

package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts

@@ -2,6 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useCollapsibleItemStyles = makeStyles()((theme) => ({
   accordion: {
+    backgroundColor: 'transparent',
     border: 'none',
     borderBottom: `1px solid ${theme.palette.divider}`
   },

package/src/index.ts

@@ -144,5 +144,6 @@ export type { ResponseError, CatchErrorProps } from './api/customFetch';
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
 export * from './Dashboard';
-export { default as Graph } from './Graph';
-export type { GraphData } from './Graph/models';
+export * from './Graph';
+export type { LineChartData } from './Graph/common/models';
+export * from './Graph/common/timeSeries';