@centreon/ui 24.4.1-MON-34407-implement-the-status-chart-widget.29 → 24.4.1-MON-36983-dashboard-duplicate.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34407-implement-the-status-chart-widget.29",
+  "version": "24.4.1-MON-36983-dashboard-duplicate.2",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Form/Inputs/Text.tsx

@@ -29,7 +29,8 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text
+  text,
+  autoFocus
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -109,6 +110,7 @@ const Text = ({
         fullWidth
         EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
+        autoFocus={autoFocus}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}

package/src/Form/Inputs/models.ts

@@ -33,6 +33,7 @@ export interface InputProps {
   additionalLabel?: string | JSX.Element;
   additionalLabelClassName?: string;
   additionalMemoProps?: Array<unknown>;
+  autoFocus?: boolean;
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -58,6 +58,11 @@ export const WithoutTitle: Story = {
   render: Template
 };
 
+export const WithPencentage: Story = {
+  args: { data, title: 'hosts', unit: 'percentage' },
+  render: Template
+};
+
 export const WithoutLegend: Story = {
   args: { data, displayLegend: false, title: 'hosts' },
 
@@ -69,11 +74,6 @@ export const withDisplayedValues: Story = {
   render: Template
 };
 
-export const WithPencentage: Story = {
-  args: { data, displayValues: true, title: 'hosts', unit: 'percentage' },
-  render: Template
-};
-
 export const WithTooltip: Story = {
   args: { TooltipContent, data, title: 'hosts' },
   render: Template

package/src/Graph/BarStack/BarStack.styles.ts

@@ -16,7 +16,7 @@ export const useBarStackStyles = makeStyles()((theme) => ({
   svgContainer: {
     alignItems: 'center',
     backgroundColor: theme.palette.background.panelGroups,
-    borderRadius: theme.spacing(1.25),
+    borderRadius: theme.shape.borderRadius,
     display: 'flex',
     justifyContent: 'center'
   },
@@ -31,7 +31,6 @@ export const useBarStackStyles = makeStyles()((theme) => ({
     fontSize: theme.typography.h6.fontSize,
     fontWeight: theme.typography.fontWeightMedium,
     margin: 0,
-    padding: 0,
-    textAlign: 'center'
+    padding: 0
   }
 }));

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -5,7 +5,6 @@ import { Group } from '@visx/group';
 import numeral from 'numeral';
 import { Text } from '@visx/text';
 import { useTranslation } from 'react-i18next';
-import { equals } from 'ramda';
 
 import { Typography } from '@mui/material';
 
@@ -13,7 +12,7 @@ import { Tooltip } from '../../components';
 import { LegendProps } from '../Legend/models';
 import { Legend as LegendComponent } from '../Legend';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound } from '../translatedLabels';
 
 import { BarStackProps } from './models';
 import { useBarStackStyles } from './BarStack.styles';
@@ -36,8 +35,7 @@ const BarStack = ({
   unit = 'number',
   displayValues,
   variant = 'vertical',
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
+  legendDirection = 'column'
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const { classes } = useBarStackStyles();
@@ -92,7 +90,7 @@ const BarStack = ({
       >
         {title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
+            {`${numeral(total).format('0a').toUpperCase()} `} {title}
           </div>
         )}
         <div
@@ -119,20 +117,6 @@ const BarStack = ({
                 {(barStacks) =>
                   barStacks.map((barStack) =>
                     barStack.bars.map((bar) => {
-                      const shouldDisplayValues = (): boolean => {
-                        if (bar.height < 10) {
-                          return false;
-                        }
-
-                        return (
-                          (equals(unit, 'number') && bar.width > 10) ||
-                          (equals(unit, 'percentage') && bar.width > 25)
-                        );
-                      };
-
-                      const TextX = bar.x + bar.width / 2;
-                      const TextY = bar.y + bar.height / 2;
-
                       const onClick = (): void => {
                         onSingleBarClick?.(bar);
                       };
@@ -160,38 +144,40 @@ const BarStack = ({
                             isVerticalBar ? 'right-start' : 'bottom-start'
                           }
                         >
-                          <g data-testid={bar.key} onClick={onClick}>
+                          <g data-testid={bar.key}>
                             <rect
-                              cursor="pointer"
                               fill={bar.color}
                               height={
                                 isVerticalBar ? bar.height - 1 : bar.height
                               }
                               key={`bar-stack-${barStack.index}-${bar.index}`}
-                              ry={10}
+                              ry={5}
                               width={isVerticalBar ? bar.width : bar.width - 1}
                               x={bar.x}
                               y={bar.y}
+                              onClick={onClick}
                             />
-                            {displayValues && shouldDisplayValues() && (
-                              <Text
-                                cursor="pointer"
-                                data-testid="value"
-                                fill="#000"
-                                fontSize={12}
-                                fontWeight={600}
-                                textAnchor="middle"
-                                verticalAnchor="middle"
-                                x={TextX}
-                                y={TextY}
-                              >
-                                {getValueByUnit({
-                                  total,
-                                  unit,
-                                  value: barStack.bars[0].bar.data[barStack.key]
-                                })}
-                              </Text>
-                            )}
+                            {displayValues &&
+                              bar.height > 10 &&
+                              bar.width > 10 && (
+                                <Text
+                                  cursor="pointer"
+                                  data-testid="value"
+                                  fill="#000"
+                                  fontSize={12}
+                                  textAnchor="middle"
+                                  verticalAnchor="middle"
+                                  x={bar.x + bar.width / 2}
+                                  y={bar.y + bar.height / 2}
+                                >
+                                  {getValueByUnit({
+                                    total,
+                                    unit,
+                                    value:
+                                      barStack.bars[0].bar.data[barStack.key]
+                                  })}
+                                </Text>
+                              )}
                           </g>
                         </Tooltip>
                       );

package/src/Graph/BarStack/models.ts

@@ -10,7 +10,6 @@ export type BarStackProps = {
   data: Array<BarType>;
   displayLegend?: boolean;
   displayValues?: boolean;
-  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onSingleBarClick?: (barData) => void;
   size?: number;

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -55,7 +55,7 @@ const useResponsiveBarStack = ({
   const verticalGap = heightOfTitle > 0 ? 8 : 0;
 
   const svgWrapperWidth = isVerticalBar
-    ? size + 36
+    ? size + 24
     : width - widthOfLegend - horizontalGap;
 
   const svgContainerSize = {
@@ -72,7 +72,8 @@ const useResponsiveBarStack = ({
 
   const yScale = isVerticalBar
     ? scaleLinear({
-        domain: [0, total]
+        domain: [0, total],
+        nice: true
       })
     : scaleBand({
         domain: [0, 0],
@@ -85,7 +86,8 @@ const useResponsiveBarStack = ({
         padding: 0
       })
     : scaleLinear({
-        domain: [0, total]
+        domain: [0, total],
+        nice: true
       });
 
   const keys = pluck('label', data);

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -13,7 +13,7 @@ import { Tooltip } from '../../components';
 import { Legend as LegendComponent } from '../Legend';
 import { LegendProps } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-import { labelNoDataFound as defaultlabelNoDataFound } from '../translatedLabels';
+import { labelNoDataFound } from '../translatedLabels';
 
 import { PieProps } from './models';
 import { usePieStyles } from './PieChart.styles';
@@ -54,8 +54,7 @@ const ResponsivePie = ({
   onArcClick,
   displayValues,
   TooltipContent,
-  legendDirection = 'column',
-  labelNoDataFound = defaultlabelNoDataFound
+  legendDirection = 'column'
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -110,7 +109,7 @@ const ResponsivePie = ({
       >
         {equals(variant, 'pie') && title && (
           <div className={classes.title} data-testid="Title" ref={titleRef}>
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
+            {`${numeral(total).format('0a').toUpperCase()} `} {title}
           </div>
         )}
         <div
@@ -179,7 +178,6 @@ const ResponsivePie = ({
                       >
                         <g data-testid={arc.data.label} onClick={onClick}>
                           <path
-                            cursor="pointer"
                             d={pie.path(arc) as string}
                             fill={arc.data.color}
                           />
@@ -191,7 +189,6 @@ const ResponsivePie = ({
                                 dy=".33em"
                                 fill="#000"
                                 fontSize={12}
-                                fontWeight={600}
                                 pointerEvents="none"
                                 textAnchor="middle"
                                 x={x}
@@ -227,7 +224,7 @@ const ResponsivePie = ({
                     fill={theme.palette.text.primary}
                     textAnchor="middle"
                   >
-                    {t(title)}
+                    {title}
                   </Text>
                 </>
               )}

package/src/Graph/PieChart/models.ts

@@ -11,7 +11,6 @@ export interface PieProps {
   displayLegend?: boolean;
   displayValues?: boolean;
   innerRadius?: number;
-  labelNoDataFound?: string;
   legendDirection?: 'row' | 'column';
   onArcClick?: (ardata) => void;
   title?: string;

package/src/Graph/PieChart/useResponsivePie.ts

@@ -41,11 +41,12 @@ export const useResponsivePie = ({
   const horizontalGap = widthOfLegend > 0 ? 16 : 0;
   const verticalGap = heightOfTitle > 0 ? 8 : 0;
 
+  const svgWrapperWidth = width - widthOfLegend - horizontalGap;
+
   const svgContainerSize = Math.min(
     height - heightOfTitle - verticalGap,
     width - widthOfLegend - horizontalGap
   );
-  const svgWrapperWidth = svgContainerSize;
 
   const outerRadius = Math.min(32, svgContainerSize / 6);
 

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

@@ -12,11 +12,7 @@ const data = Array(5)
     title: `Entity ${idx}`
   }));
 
-const initializeDataTableGrid = ({
-  hasActions,
-  hasCardAction,
-  canDelete
-}): void => {
+const initializeDataTableGrid = ({ hasActions, hasCardAction }): void => {
   cy.viewport(1200, 590);
   cy.mount({
     Component: (
@@ -27,14 +23,18 @@ const initializeDataTableGrid = ({
             hasActions={hasActions}
             hasCardAction={hasCardAction}
             key={title}
-            labelsDelete={{
-              cancel: 'Cancel',
-              confirm: {
-                label: 'Delete'
-              }
+            labels={{
+              labelDelete: 'Delete',
+              labelDuplicate: 'Duplicate',
+              labelEditProperties: 'Edit Properties',
+              labelMoreActions: 'More actions',
+              labelShareWithContacts: 'Share with contacts'
             }}
             title={title}
-            onDelete={canDelete ? cy.stub() : undefined}
+            onDelete={() => cy.stub()}
+            onDuplicate={() => cy.stub()}
+            onEdit={() => cy.stub()}
+            onEditAccessRights={() => cy.stub()}
           />
         ))}
       </DataTable>
@@ -94,7 +94,6 @@ const initializeDataTableListing = (): void => {
 describe('DataTable: Grid', () => {
   it('displays items with title and description only', () => {
     initializeDataTableGrid({
-      canDelete: false,
       hasActions: false,
       hasCardAction: false
     });
@@ -109,32 +108,33 @@ describe('DataTable: Grid', () => {
 
   it('displays items with actions', () => {
     initializeDataTableGrid({
-      canDelete: false,
       hasActions: true,
       hasCardAction: false
     });
 
-    cy.findAllByLabelText('edit access rights').should('have.length', 5);
-    cy.findAllByLabelText('edit').should('have.length', 5);
+    cy.findAllByLabelText('Share with contacts').should('have.length', 5);
+    cy.findAllByLabelText('More actions').should('have.length', 5);
 
     cy.makeSnapshot();
   });
 
-  it('displays items with delete action', () => {
+  it('displays actions when more actions button was clicked', () => {
     initializeDataTableGrid({
-      canDelete: true,
       hasActions: true,
       hasCardAction: false
     });
 
-    cy.findAllByLabelText('delete').should('have.length', 5);
+    cy.findAllByLabelText('More actions').eq(0).click();
+
+    cy.findByLabelText('Duplicate').should('be.visible');
+    cy.findByLabelText('Delete').should('be.visible');
+    cy.findByLabelText('Edit Properties').should('be.visible');
 
     cy.makeSnapshot();
   });
 
   it('displays items with card action only', () => {
     initializeDataTableGrid({
-      canDelete: false,
       hasActions: false,
       hasCardAction: true
     });
@@ -146,15 +146,13 @@ describe('DataTable: Grid', () => {
 
   it('displays items with card action and bottom actions', () => {
     initializeDataTableGrid({
-      canDelete: true,
       hasActions: true,
       hasCardAction: true
     });
 
     cy.findAllByLabelText('view').should('have.length', 5);
-    cy.findAllByLabelText('delete').should('have.length', 5);
-    cy.findAllByLabelText('edit access rights').should('have.length', 5);
-    cy.findAllByLabelText('edit').should('have.length', 5);
+    cy.findAllByLabelText('Share with contacts').should('have.length', 5);
+    cy.findAllByLabelText('More actions').should('have.length', 5);
 
     cy.makeSnapshot();
   });

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -1,6 +1,15 @@
-import React, { forwardRef, ReactElement, RefObject, useMemo } from 'react';
+import React, {
+  forwardRef,
+  ReactElement,
+  RefObject,
+  useMemo,
+  useState
+} from 'react';
+
+import { pipe } from 'ramda';
 
 import {
+  Menu,
   Card as MuiCard,
   CardActionArea as MuiCardActionArea,
   CardActions as MuiCardActions,
@@ -10,10 +19,12 @@ import {
 import {
   Delete as DeleteIcon,
   Settings as SettingsIcon,
-  Share as ShareIcon
+  Share as ShareIcon,
+  ContentCopy as DuplicateIcon,
+  MoreHoriz as MoreIcon
 } from '@mui/icons-material';
 
-import { IconButton } from '../../Button';
+import { IconButton, ActionsList, ActionsListActionDivider } from '../../..';
 
 import { useStyles } from './DataTableItem.styles';
 
@@ -21,16 +32,19 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
+  labels;
   onClick?: () => void;
-  onDelete?: () => void;
-  onEdit?: () => void;
-  onEditAccessRights?: () => void;
+  onDelete: () => void;
+  onDuplicate: () => void;
+  onEdit: () => void;
+  onEditAccessRights: () => void;
   title: string;
 }
 
 const DataTableItem = forwardRef(
   (
     {
+      labels,
       title,
       description,
       hasCardAction = false,
@@ -38,11 +52,16 @@ const DataTableItem = forwardRef(
       onClick,
       onEdit,
       onDelete,
+      onDuplicate,
       onEditAccessRights
     }: DataTableItemProps,
     ref
   ): ReactElement => {
     const { classes } = useStyles();
+    const [moreActionsOpen, setMoreActionsOpen] = useState(null);
+
+    const closeMoreActions = (): void => setMoreActionsOpen(null);
+    const openMoreActions = (event): void => setMoreActionsOpen(event.target);
 
     const ActionArea = useMemo(
       () => (hasCardAction ? MuiCardActionArea : React.Fragment),
@@ -66,33 +85,49 @@ const DataTableItem = forwardRef(
         </ActionArea>
         {hasActions && (
           <MuiCardActions>
+            <span />
             <span>
               <IconButton
-                aria-label="delete"
-                data-testid="delete"
-                icon={<DeleteIcon />}
-                size="small"
-                variant="ghost"
-                onClick={onDelete}
-              />
-            </span>
-            <span>
-              <IconButton
-                aria-label="edit access rights"
-                data-testid="edit-access-rights"
-                icon={<ShareIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEditAccessRights?.()}
-              />
+                ariaLabel={labels.labelShareWithContacts}
+                title={labels.labelShareWithContacts}
+                onClick={pipe(onEditAccessRights, closeMoreActions)}
+              >
+                <ShareIcon fontSize="small" />
+              </IconButton>
               <IconButton
-                aria-label="edit"
-                data-testid="edit"
-                icon={<SettingsIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEdit?.()}
-              />
+                ariaLabel={labels.labelMoreActions}
+                title={labels.labelMoreActions}
+                onClick={openMoreActions}
+              >
+                <MoreIcon />
+              </IconButton>
+              <Menu
+                anchorEl={moreActionsOpen}
+                open={Boolean(moreActionsOpen)}
+                onClose={closeMoreActions}
+              >
+                <ActionsList
+                  actions={[
+                    {
+                      Icon: SettingsIcon,
+                      label: labels.labelEditProperties,
+                      onClick: pipe(onEdit, closeMoreActions)
+                    },
+                    ActionsListActionDivider.divider,
+                    {
+                      Icon: DuplicateIcon,
+                      label: labels.labelDuplicate,
+                      onClick: pipe(onDuplicate, closeMoreActions)
+                    },
+                    ActionsListActionDivider.divider,
+                    {
+                      Icon: DeleteIcon,
+                      label: labels.labelDelete,
+                      onClick: pipe(onDelete, closeMoreActions)
+                    }
+                  ]}
+                />
+              </Menu>
             </span>
           </MuiCardActions>
         )}

package/src/components/Form/Dashboard/DashboardDuplicationForm.tsx

@@ -0,0 +1,85 @@
+import { ReactElement, useCallback, useMemo } from 'react';
+
+import { string, object } from 'yup';
+import { useTranslation } from 'react-i18next';
+
+import { InputType } from '../../../Form/Inputs/models';
+import { Form, FormProps } from '../../../Form';
+import { FormVariant } from '../Form.models';
+import { FormActions, FormActionsProps } from '../FormActions';
+
+import { useStyles } from './DashboardForm.styles';
+import {
+  labelMustBeAtLeast,
+  labelMustBeMost,
+  labelRequired
+} from './translatedLabels';
+import { DashboardResource } from './Dashboard.resource';
+
+type DashboardFormProps = {
+  labels: DashboardFormLabels;
+  name: string;
+  onSubmit?: FormProps<DashboardResource>['submit'];
+  variant?: FormVariant;
+} & Pick<FormActionsProps, 'onCancel'>;
+
+type DashboardFormLabels = {
+  actions: FormActionsProps['labels'];
+  entity: Required<DashboardResource>;
+};
+
+const DashboardDuplicationForm = ({
+  variant = 'create',
+  labels,
+  onSubmit,
+  onCancel,
+  name
+}: DashboardFormProps): ReactElement => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const formProps = useMemo<FormProps<DashboardResource>>(
+    () => ({
+      initialValues: { name },
+      inputs: [
+        {
+          autoFocus: true,
+          fieldName: 'name',
+          group: 'main',
+          label: labels?.entity?.name,
+          required: true,
+          type: InputType.Text
+        }
+      ],
+      submit: (values, bag) => onSubmit?.(values, bag),
+      validationSchema: object({
+        name: string()
+          .label(labels?.entity?.name)
+          .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
+          .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))
+          .required(t(labelRequired) as string)
+      })
+    }),
+    [labels, onSubmit]
+  );
+
+  const Actions = useCallback(
+    () => (
+      <FormActions<DashboardResource>
+        enableSubmitWhenNotDirty
+        labels={labels?.actions}
+        variant={variant}
+        onCancel={onCancel}
+      />
+    ),
+    [labels, onCancel, variant]
+  );
+
+  return (
+    <div className={classes.dashboardForm}>
+      <Form<DashboardResource> {...formProps} Buttons={Actions} />
+    </div>
+  );
+};
+
+export { DashboardDuplicationForm };

package/src/components/Form/Dashboard/index.ts

@@ -1,2 +1,3 @@
 export * from './DashboardForm';
 export * from './Dashboard.resource';
+export * from './DashboardDuplicationForm';

package/src/components/Form/FormActions.tsx

@@ -8,6 +8,7 @@ import { FormVariant } from './Form.models';
 import { useStyles } from './Form.styles';
 
 export type FormActionsProps = {
+  enableSubmitWhenNotDirty?: boolean;
   labels: FormActionsLabels;
   onCancel: () => void;
   variant: FormVariant;
@@ -21,12 +22,16 @@ export type FormActionsLabels = {
 const FormActions = <TResource extends object>({
   labels,
   onCancel,
-  variant
+  variant,
+  enableSubmitWhenNotDirty
 }: FormActionsProps): ReactElement => {
   const { classes } = useStyles();
   const { isSubmitting, dirty, isValid, submitForm } =
     useFormikContext<TResource>();
 
+  const isSubmitDisabled =
+    isSubmitting || (!dirty && !enableSubmitWhenNotDirty) || !isValid;
+
   return (
     <div className={classes.actions}>
       <Button
@@ -42,7 +47,7 @@ const FormActions = <TResource extends object>({
       <Button
         aria-label={labels.submit[variant]}
         data-testid="submit"
-        disabled={isSubmitting || !dirty || !isValid}
+        disabled={isSubmitDisabled}
         size="medium"
         type="submit"
         variant="primary"