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

package/package.json

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

package/src/Button/Icon/index.stories.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import AccessibilityIcon from '@mui/icons-material/Accessibility';
 import { Theme } from '@mui/material';
 
-import IconButton from '.';
+import { IconButton } from '.';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   root: {

package/src/Button/Icon/index.tsx

@@ -38,7 +38,7 @@ type Props = {
     | 'top-start';
 } & IconButtonProps;
 
-const IconButton = ({
+export const IconButton = ({
   title = '',
   ariaLabel,
   className,

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/InputField/Select/IconPopover/index.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import IconReset from '@mui/icons-material/RotateLeft';
 
-import IconButton from '../../../Button/Icon';
+import { IconButton } from '../../..';
 import Option from '../Option';
 import { SelectEntry } from '..';
 

package/src/Listing/ActionBar/index.tsx

@@ -9,10 +9,9 @@ import Divider from '@mui/material/Divider';
 
 import { userAtom, ListingVariant } from '@centreon/ui-context';
 
-import { ListingProps } from '../..';
+import { ListingProps, IconButton } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
 import { useMemoComponent } from '../../utils';
-import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';

package/src/Panel/index.tsx

@@ -9,7 +9,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Paper, Slide, Divider, AppBar, Tabs } from '@mui/material';
 import IconClose from '@mui/icons-material/Clear';
 
-import IconButton from '../Button/Icon';
+import { IconButton } from '..';
 
 import { minTabHeight } from './Tab';
 

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/Form/{AccessRightsV2 → AccessRights}/AccessRights.cypress.spec.tsx

@@ -347,4 +347,27 @@ describe('Access rights', () => {
 
     cy.makeSnapshot();
   });
+
+  it('resets the role to "viewer" when the "editor" role is selected and a contact with "viewer" right is selected', () => {
+    initialize({});
+
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 10').click();
+
+    cy.findByTestId('add_role').parent().click();
+    cy.get('li[data-value="editor"]').click();
+
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 11').click();
+
+    cy.findByTestId('add_role').should('have.value', 'viewer');
+
+    cy.makeSnapshot();
+  });
 });

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/ContactSwitch.tsx

@@ -7,11 +7,14 @@ import { ContactType, Labels } from '../models';
 import { contactTypeAtom } from '../atoms';
 import { Subtitle } from '../../../..';
 
+import { useContactSwitchStyles } from './ShareInput.styles';
+
 interface Props {
   labels: Labels['add'];
 }
 
 const ContactSwitch = ({ labels }: Props): JSX.Element => {
+  const { classes } = useContactSwitchStyles();
   const { t } = useTranslation();
 
   const setContactType = useSetAtom(contactTypeAtom);
@@ -23,7 +26,12 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
   return (
     <>
       <Subtitle>{t(labels.title)}</Subtitle>
-      <RadioGroup row defaultValue={ContactType.Contact} onChange={change}>
+      <RadioGroup
+        row
+        className={classes.inputs}
+        defaultValue={ContactType.Contact}
+        onChange={change}
+      >
         <FormControlLabel
           control={<Radio />}
           label={labels.contact}

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/ShareInput.styles.ts

@@ -7,3 +7,11 @@ export const useShareInputStyles = makeStyles()((theme) => ({
     gridTemplateColumns: `1fr min-content min-content`
   }
 }));
+
+export const useContactSwitchStyles = makeStyles()((theme) => ({
+  inputs: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2)
+  }
+}));

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/useShareInput.tsx

@@ -40,6 +40,10 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
+    if (equals('editor', entry.most_permissive_role)) {
+      return;
+    }
+    setSelectedRole('viewer');
   };
 
   const add = (): void => {

package/src/components/Form/{AccessRightsV2 → AccessRights}/models.ts

@@ -2,6 +2,7 @@ export interface AccessRightInitialValues {
   email?: string;
   id: number | string;
   isContactGroup: boolean;
+  most_permissive_role?: 'editor' | 'viewer';
   name: string;
   role: string;
 }

package/src/components/Form/{AccessRightsV2 → AccessRights}/storiesData.ts

@@ -88,6 +88,7 @@ const buildEntities = (from, isGroup): Array<SelectEntry> => {
     .map((_, index) => ({
       email: isGroup ? undefined : faker.internet.email(),
       id: 1000 + index,
+      most_permissive_role: index % 3 === 0 ? 'editor' : 'viewer',
       name: `Entity ${isGroup ? 'Group' : ''} ${from + index}`
     }));
 };

package/src/components/Form/index.ts

@@ -1,4 +1,4 @@
 export * from './Form.models';
 export * from './Dashboard';
-export * from './AccessRights';
-export { default as AccessRightsV2 } from './AccessRightsV2/AccessRights';
+export { default as AccessRights } from './AccessRights/AccessRights';
+export { default as AccessRightsV2 } from './AccessRights/AccessRights';

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'
   }
 }));