@centreon/ui 24.4.1-MON-34298-refato-metrics-selection.4 → 24.4.1-MON-21278-Delete-a-basic-token.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34298-refato-metrics-selection.4",
+  "version": "24.4.1-MON-21278-Delete-a-basic-token.19",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dialog/Confirm/index.tsx

@@ -1,4 +1,4 @@
-import { DialogContentText, Typography } from '@mui/material';
+import { ButtonProps, DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
@@ -6,15 +6,23 @@ type Props = DialogProps & {
   children?: JSX.Element;
   labelMessage?: string | null;
   labelSecondMessage?: string | null;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
 };
 
 const Confirm = ({
   labelMessage,
   labelSecondMessage,
   children,
+  restCancelButtonProps,
+  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => (
-  <Dialog {...rest}>
+  <Dialog
+    restCancelButtonProps={restCancelButtonProps}
+    restConfirmButtonProps={restConfirmButtonProps}
+    {...rest}
+  >
     <DialogContentText>
       {labelMessage && <Typography>{labelMessage}</Typography>}
       {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}

package/src/Dialog/index.tsx

@@ -9,7 +9,8 @@ import {
   DialogContent,
   DialogActions,
   DialogProps,
-  CircularProgress
+  CircularProgress,
+  ButtonProps
 } from '@mui/material';
 
 import { DataTestAttributes } from '../@types/data-attributes';
@@ -48,6 +49,8 @@ export type Props = {
   onClose?: () => void;
   onConfirm: (event, value?) => void;
   open: boolean;
+  restCancelButtonProps?: ButtonProps;
+  restConfirmButtonProps?: ButtonProps;
   submitting?: boolean;
 } & DialogProps &
   DataTestAttributes;
@@ -70,6 +73,8 @@ const Dialog = ({
   dialogContentClassName,
   dialogActionsClassName,
   dialogConfirmButtonClassName,
+  restCancelButtonProps,
+  restConfirmButtonProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -101,6 +106,7 @@ const Dialog = ({
             data-testid="Cancel"
             disabled={cancelDisabled}
             onClick={onCancel}
+            {...restCancelButtonProps}
           >
             {labelCancel}
           </Button>
@@ -113,6 +119,7 @@ const Dialog = ({
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}
+          {...restConfirmButtonProps}
         >
           {labelConfirm}
         </Button>

package/src/Graph/LineChart/Legend/index.tsx

@@ -7,6 +7,7 @@ import { Box, alpha, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '@centreon/ui';
 
+import { maxLinesDisplayedLegend } from '../common';
 import { formatMetricValue } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
@@ -23,7 +24,7 @@ import LegendContent from './LegendContent';
 interface Props {
   base: number;
   displayAnchor?: boolean;
-  limitLegend?: false | number;
+  limitLegendRows?: boolean;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
   setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
@@ -38,14 +39,14 @@ const MainLegend = ({
   timeSeries,
   base,
   toggable = true,
-  limitLegend = false,
+  limitLegendRows = true,
   renderExtraComponent,
   displayAnchor = true,
   setLinesGraph,
   xScale,
   shouldDisplayLegendInCompactMode
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
+  const { classes, cx } = useStyles({ limitLegendRows });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
@@ -60,8 +61,8 @@ const MainLegend = ({
 
   const sortedData = sortBy(prop('metric_id'), lines);
 
-  const displayedLines = limitLegend
-    ? slice(0, limitLegend, sortedData)
+  const displayedLines = limitLegendRows
+    ? slice(0, maxLinesDisplayedLegend, sortedData)
     : sortedData;
 
   const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
@@ -173,7 +174,7 @@ const MainLegend = ({
 const Legend = (props: Props): JSX.Element => {
   const {
     toggable,
-    limitLegend,
+    limitLegendRows,
     timeSeries,
     lines,
     base,
@@ -190,7 +191,7 @@ const Legend = (props: Props): JSX.Element => {
       lines,
       base,
       toggable,
-      limitLegend,
+      limitLegendRows,
       displayAnchor,
       shouldDisplayLegendInCompactMode
     ]

package/src/Graph/LineChart/LineChart.tsx

@@ -43,7 +43,6 @@ interface Props extends LineChartProps {
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
-  limitLegend?: false | number;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
@@ -74,8 +73,7 @@ const LineChart = ({
   curve,
   marginBottom,
   thresholds,
-  thresholdUnit,
-  limitLegend
+  thresholdUnit
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -303,7 +301,6 @@ const LineChart = ({
           <Legend
             base={baseAxis}
             displayAnchor={displayAnchor?.displayGuidingLines ?? true}
-            limitLegend={limitLegend}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
             setLinesGraph={setLinesGraph}

package/src/Graph/LineChart/index.tsx

@@ -28,7 +28,6 @@ interface Props extends Partial<LineChartProps> {
   data?: LineChartData;
   end: string;
   legend: LegendModel;
-  limitLegend?: false | number;
   loading: boolean;
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
@@ -56,8 +55,7 @@ const WrapperLineChart = ({
   curve = Curve.curveLinear,
   marginBottom = 0,
   thresholds,
-  thresholdUnit,
-  limitLegend
+  thresholdUnit
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -97,7 +95,6 @@ const WrapperLineChart = ({
               header={header}
               height={height || responsiveHeight}
               legend={legend}
-              limitLegend={limitLegend}
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}

package/src/api/useGraphQuery/index.ts

@@ -1,20 +1,11 @@
 import { useRef } from 'react';
 
-import {
-  equals,
-  flatten,
-  has,
-  includes,
-  isEmpty,
-  not,
-  pipe,
-  pluck
-} from 'ramda';
+import { equals, has, isEmpty, pluck } from 'ramda';
 import dayjs from 'dayjs';
 
 import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
 
-import { Metric, Resource, WidgetResourceType } from './models';
+import { Resource, WidgetResourceType } from './models';
 
 interface CustomTimePeriod {
   end: string;
@@ -23,9 +14,7 @@ interface CustomTimePeriod {
 
 interface UseMetricsQueryProps {
   baseEndpoint: string;
-  bypassMetricsExclusion?: boolean;
-  includeAllResources?: boolean;
-  metrics: Array<Metric>;
+  metrics: Array<string>;
   refreshCount?: number;
   refreshInterval?: number | false;
   resources?: Array<Resource>;
@@ -82,7 +71,6 @@ const areResourcesFullfilled = (value: Array<Resource>): boolean =>
   );
 
 const useGraphQuery = ({
-  bypassMetricsExclusion,
   metrics,
   resources = [],
   baseEndpoint,
@@ -105,7 +93,7 @@ const useGraphQuery = ({
 
   const definedMetrics = metrics.filter((metric) => metric);
   const formattedDefinedMetrics = definedMetrics.map((metric) =>
-    encodeURIComponent(metric.name)
+    encodeURIComponent(metric)
   );
 
   const {
@@ -157,16 +145,7 @@ const useGraphQuery = ({
           base: data.current.base,
           title: ''
         },
-        metrics: bypassMetricsExclusion
-          ? data.current.metrics
-          : data.current.metrics.filter(({ metric_id }) => {
-              return pipe(
-                pluck('excludedMetrics'),
-                flatten,
-                includes(metric_id),
-                not
-              )(metrics);
-            }),
+        metrics: data.current.metrics,
         times: data.current.times
       }
     : undefined;

package/src/api/useGraphQuery/models.ts

@@ -13,8 +13,3 @@ export enum WidgetResourceType {
   serviceCategory = 'service-category',
   serviceGroup = 'service-group'
 }
-
-export interface Metric {
-  excludedMetrics: Array<number>;
-  name: string;
-}

package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Checkbox, Typography } from '@mui/material';
-
 import { CollapsibleItem } from './CollapsibleItem';
 
 const meta: Meta<typeof CollapsibleItem> = {
@@ -25,27 +23,3 @@ export const ExpandedByDefault: Story = {
     title: 'Title'
   }
 };
-
-export const customizedTitle: Story = {
-  args: {
-    children: 'Label',
-    defaultExpanded: false,
-    title: <Typography>Title</Typography>
-  }
-};
-
-export const customizedTitleAndCompact: Story = {
-  args: {
-    children: 'Label',
-    compact: true,
-    defaultExpanded: false,
-    title: (
-      <div
-        style={{ alignItems: 'center', display: 'flex', flexDirection: 'row' }}
-      >
-        <Checkbox size="small" />
-        <Typography>Title compact</Typography>
-      </div>
-    )
-  }
-};

package/src/components/CollapsibleItem/CollapsibleItem.tsx

@@ -1,7 +1,5 @@
 import { ReactNode } from 'react';
 
-import { equals, type } from 'ramda';
-
 import {
   AccordionDetails,
   AccordionSummary,
@@ -12,63 +10,36 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { useCollapsibleItemStyles } from './useCollapsibleItemStyles';
 
-export interface Props {
+interface Props {
   children: ReactNode;
-  compact?: boolean;
-  dataTestId?: string;
   defaultExpanded?: boolean;
-  title: string | JSX.Element;
+  title: string;
 }
 
 export const CollapsibleItem = ({
   title,
   children,
-  defaultExpanded,
-  compact = false,
-  dataTestId = ''
+  defaultExpanded
 }: Props): JSX.Element => {
-  const { classes, cx } = useCollapsibleItemStyles();
-
-  const isStringTitle = equals(type(title), 'String');
+  const { classes } = useCollapsibleItemStyles();
 
   return (
     <Accordion
       disableGutters
       className={classes.accordion}
-      data-compact={compact}
-      data-testid={`${dataTestId}-accordion`}
       defaultExpanded={defaultExpanded}
     >
-      <div className={classes.summaryContainer}>
-        <div className={classes.customTitle}>{!isStringTitle && title}</div>
-        <AccordionSummary
-          classes={{
-            content: cx(
-              compact
-                ? classes.accordionSummaryCompactContent
-                : classes.accordionSummary
-            ),
-            root: cx(
-              compact
-                ? classes.accordionSummaryCompactRoot
-                : classes.accordionSummaryRoot
-            )
-          }}
-          data-testid={`${dataTestId}-summary`}
-          expandIcon={<ExpandMoreIcon color="primary" />}
-        >
-          {isStringTitle && (
-            <Typography color="primary" variant="h6">
-              {title}
-            </Typography>
-          )}
-        </AccordionSummary>
-      </div>
-      <AccordionDetails
-        className={cx(
-          compact ? classes.accordionDetailsCompact : classes.accordionDetails
-        )}
+      <AccordionSummary
+        classes={{
+          content: classes.accordionSummary
+        }}
+        expandIcon={<ExpandMoreIcon color="primary" />}
       >
+        <Typography color="primary" variant="h6">
+          {title}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails className={classes.accordionDetails}>
         {children}
       </AccordionDetails>
     </Accordion>

package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts

@@ -4,35 +4,12 @@ export const useCollapsibleItemStyles = makeStyles()((theme) => ({
   accordion: {
     backgroundColor: 'transparent',
     border: 'none',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    width: '100%'
+    borderBottom: `1px solid ${theme.palette.divider}`
   },
   accordionDetails: {
     padding: theme.spacing(0, 2, 2)
   },
-  accordionDetailsCompact: {
-    padding: theme.spacing(0)
-  },
   accordionSummary: {
     margin: theme.spacing(1.5, 0)
-  },
-  accordionSummaryCompactContent: {
-    margin: theme.spacing(0, 0, 0.5)
-  },
-  accordionSummaryCompactRoot: {
-    minHeight: theme.spacing(1),
-    width: '100%'
-  },
-  accordionSummaryRoot: {
-    width: '100%'
-  },
-  customTitle: {
-    whiteSpace: 'nowrap'
-  },
-  summaryContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%'
   }
 }));

package/src/components/ItemComposition/Item.tsx

@@ -7,7 +7,7 @@ import { IconButton } from '..';
 import { useItemStyles } from './ItemComposition.styles';
 
 type Props = {
-  children: ReactElement | Array<ReactElement>;
+  children: Array<ReactElement>;
   className?: string;
   deleteButtonHidden?: boolean;
   labelDelete: string;

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -1,13 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useItemCompositionStyles = makeStyles()((theme) => ({
-  buttonAndSecondaryLabel: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%'
-  },
   itemCompositionContainer: {
     alignItems: 'flex-start',
     display: 'flex',
@@ -31,6 +24,6 @@ export const useItemStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   visibilityHiden: {
-    display: 'none'
+    visibility: 'hidden'
   }
 }));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -1,20 +1,18 @@
 import { ReactElement } from 'react';
 
 import AddIcon from '@mui/icons-material/Add';
-import { Typography } from '@mui/material';
 
 import { Button } from '..';
 
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
-export type Props = {
+type Props = {
   IconAdd?;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
   labelAdd: string;
   onAddItem: () => void;
-  secondaryLabel?: string;
 };
 
 export const ItemComposition = ({
@@ -23,35 +21,27 @@ export const ItemComposition = ({
   labelAdd,
   addbuttonDisabled,
   addButtonHidden,
-  IconAdd,
-  secondaryLabel
+  IconAdd
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
   return (
     <div className={classes.itemCompositionContainer}>
       {children}
-      <div className={classes.buttonAndSecondaryLabel}>
-        {!addButtonHidden && (
-          <Button
-            aria-label={labelAdd}
-            data-testid={labelAdd}
-            disabled={addbuttonDisabled}
-            icon={IconAdd || <AddIcon />}
-            iconVariant="start"
-            size="small"
-            variant="ghost"
-            onClick={onAddItem}
-          >
-            {labelAdd}
-          </Button>
-        )}
-        {secondaryLabel && (
-          <Typography sx={{ color: 'text.secondary' }}>
-            {secondaryLabel}
-          </Typography>
-        )}
-      </div>
+      {!addButtonHidden && (
+        <Button
+          aria-label={labelAdd}
+          data-testid={labelAdd}
+          disabled={addbuttonDisabled}
+          icon={IconAdd || <AddIcon />}
+          iconVariant="start"
+          size="small"
+          variant="ghost"
+          onClick={onAddItem}
+        >
+          {labelAdd}
+        </Button>
+      )}
     </div>
   );
 };

package/src/components/CollapsibleItem/CollapsibleItem.cypress.spec.tsx

@@ -1,76 +0,0 @@
-import { CollapsibleItem, Props } from './CollapsibleItem';
-
-const title = 'Title';
-
-const customizedTitle = <div>Customized title</div>;
-
-const initialize = (props: Omit<Props, 'children'>): void => {
-  cy.mount({
-    Component: <CollapsibleItem {...props}>Content</CollapsibleItem>
-  });
-};
-
-describe('CollapsibleItem', () => {
-  it('displays the component collpased by default', () => {
-    initialize({ title });
-
-    cy.contains(title).should('be.visible');
-    cy.contains('Content').should('not.be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component expanded when the corresponding prop is set to true', () => {
-    initialize({ defaultExpanded: true, title });
-
-    cy.contains(title).should('be.visible');
-    cy.contains('Content').should('be.visible');
-    cy.get('div[aria-expanded="true"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays a customized title', () => {
-    initialize({ title: customizedTitle });
-
-    cy.contains('Customized title').should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component as compact', () => {
-    initialize({ compact: true, title });
-
-    cy.contains(title).should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-    cy.get('div[data-compact="true"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component as compact and expanded when the icon is clicked', () => {
-    initialize({ compact: true, title });
-
-    cy.contains(title).should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-
-    cy.get('div[aria-expanded="false"]').click();
-
-    cy.get('div[aria-expanded="true"]').should('exist');
-    cy.contains('Content').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component as compact and a customized title', () => {
-    initialize({ compact: true, title: customizedTitle });
-
-    cy.contains('Customized title').should('be.visible');
-    cy.get('div[aria-expanded="false"]').should('exist');
-    cy.get('div[data-compact="true"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-});

package/src/components/ItemComposition/ItemComposition.cypress.spec.tsx

@@ -1,116 +0,0 @@
-import { ItemComposition } from '.';
-
-interface Props {
-  addButtonHidden?: boolean;
-  addbuttonDisabled?: boolean;
-  deleteButtonHidden?: boolean;
-  secondaryLabel?: string;
-}
-
-const initialize = ({
-  addButtonHidden,
-  addbuttonDisabled,
-  secondaryLabel,
-  deleteButtonHidden
-}: Props): unknown => {
-  const addItem = cy.stub();
-  const deleteItem = cy.stub();
-
-  cy.mount({
-    Component: (
-      <ItemComposition
-        addButtonHidden={addButtonHidden}
-        addbuttonDisabled={addbuttonDisabled}
-        labelAdd="Add"
-        secondaryLabel={secondaryLabel}
-        onAddItem={addItem}
-      >
-        <ItemComposition.Item
-          deleteButtonHidden={deleteButtonHidden}
-          labelDelete="Delete"
-          onDeleteItem={deleteItem}
-        >
-          <div>Item 1</div>
-        </ItemComposition.Item>
-        <ItemComposition.Item
-          deleteButtonHidden={deleteButtonHidden}
-          labelDelete="Delete"
-          onDeleteItem={deleteItem}
-        >
-          <div>Item 2</div>
-        </ItemComposition.Item>
-      </ItemComposition>
-    )
-  });
-
-  return {
-    addItem,
-    deleteItem
-  };
-};
-
-describe('ItemComposition', () => {
-  it('displays the component', () => {
-    initialize({});
-
-    cy.contains('Item 1').should('be.visible');
-    cy.contains('Item 2').should('be.visible');
-    cy.findAllByTestId('Delete').should('have.length', 2);
-    cy.findByTestId('Add').should('be.enabled');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component with a secondary label', () => {
-    initialize({ secondaryLabel: 'Secondary label' });
-
-    cy.contains('Secondary label').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays add button as hidden when the prop is set to true', () => {
-    initialize({ addbuttonDisabled: true });
-
-    cy.findByTestId('Add').should('be.disabled');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the add button as hidden when the prop is set to true', () => {
-    initialize({ addButtonHidden: true });
-
-    cy.findByTestId('Add').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the delete button as hidden when the prop is set to true', () => {
-    initialize({ deleteButtonHidden: true });
-
-    cy.findByTestId('Delete').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('calls the add function when the button is clicked', () => {
-    const { addItem } = initialize({});
-
-    cy.findByTestId('Add')
-      .click()
-      .then(() => {
-        expect(addItem).to.have.been.calledWith();
-      });
-  });
-
-  it('calls the delete function when the button is clicked', () => {
-    const { deleteItem } = initialize({});
-
-    cy.findAllByTestId('Delete')
-      .eq(1)
-      .click()
-      .then(() => {
-        expect(deleteItem).to.have.been.calledWith();
-      });
-  });
-});