@centreon/ui 23.10.1-MON-20803-RS-add-basic-filter.26 → 23.10.1-MON-20803-RS-add-basic-filter.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-MON-20803-RS-add-basic-filter.26",
+  "version": "23.10.1-MON-20803-RS-add-basic-filter.27",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/ActionsList/ActionsList.styles.ts

@@ -0,0 +1,116 @@
+import { makeStyles } from 'tss-react/mui';
+import { equals } from 'ramda';
+
+import { Theme, alpha } from '@mui/material';
+
+interface GetBackgroundAndColorProps {
+  status: string;
+  theme: Theme;
+}
+
+const getColor = ({ theme, status }: GetBackgroundAndColorProps): string =>
+  equals(theme.palette.mode, 'dark')
+    ? theme.palette.common.white
+    : theme.palette[status].main;
+
+export const useStyles = makeStyles()((theme) => ({
+  item: {
+    '& .MuiListItemText-secondary': {
+      textWrap: 'pretty'
+    },
+    '&[data-variant="error"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'error', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.error.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'error', theme })
+      },
+      color: theme.palette.error.main
+    },
+    '&[data-variant="info"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'info', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.info.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'info', theme })
+      },
+      color: theme.palette.info.main
+    },
+    '&[data-variant="pending"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'pending', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.pending.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'pending', theme })
+      },
+      color: theme.palette.pending.main
+    },
+    '&[data-variant="primary"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'primary', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.primary.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'primary', theme })
+      },
+      color: theme.palette.primary.main
+    },
+    '&[data-variant="secondary"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'secondary', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.secondary.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'secondary', theme })
+      },
+      color: theme.palette.secondary.main
+    },
+    '&[data-variant="success"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'success', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.success.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'success', theme })
+      },
+      color: theme.palette.success.main
+    },
+    '&[data-variant="warning"]': {
+      '& .MuiListItemIcon-root': {
+        color: getColor({ status: 'warning', theme })
+      },
+      '&:hover': {
+        background: alpha(
+          theme.palette.warning.main,
+          theme.palette.action.focusOpacity
+        ),
+        color: getColor({ status: 'warning', theme })
+      },
+      color: theme.palette.warning.main
+    }
+  },
+  list: {
+    width: '100%'
+  }
+}));

package/src/ActionsList/index.stories.tsx

@@ -24,6 +24,68 @@ const actions = [
   }
 ];
 
+const actionsWithVariants = [
+  {
+    label: 'No variant',
+    onClick: (): void => undefined
+  },
+  {
+    label: 'Primary',
+    onClick: (): void => undefined,
+    variant: 'primary'
+  },
+  {
+    label: 'Secondary',
+    onClick: (): void => undefined,
+    variant: 'secondary'
+  },
+  {
+    label: 'Success',
+    onClick: (): void => undefined,
+    variant: 'success'
+  },
+  {
+    label: 'Warning',
+    onClick: (): void => undefined,
+    variant: 'warning'
+  },
+  {
+    label: 'Error',
+    onClick: (): void => undefined,
+    variant: 'error'
+  },
+  {
+    label: 'Info',
+    onClick: (): void => undefined,
+    variant: 'info'
+  },
+  {
+    label: 'Pending',
+    onClick: (): void => undefined,
+    variant: 'pending'
+  }
+];
+
+const actionsWithSecondaryLabel = [
+  {
+    Icon: EditIcon,
+    label: 'Edit',
+    onClick: (): void => undefined
+  },
+  {
+    Icon: CopyIcon,
+    label: 'Duplicate',
+    onClick: (): void => undefined,
+    secondaryLabel:
+      'This is a secondary label that the purpose is to give a small description about an action'
+  },
+  {
+    Icon: DeleteIcon,
+    label: 'Delete',
+    onClick: (): void => undefined
+  }
+];
+
 export default {
   argTypes: {},
   component: ActionsList,
@@ -39,3 +101,15 @@ export const Playground = Template.bind({});
 Playground.args = {
   actions
 };
+
+export const Variants = Template.bind({});
+
+Variants.args = {
+  actions: actionsWithVariants
+};
+
+export const SecondaryLabel = Template.bind({});
+
+SecondaryLabel.args = {
+  actions: actionsWithSecondaryLabel
+};

package/src/ActionsList/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-array-index-key */
-import { makeStyles } from 'tss-react/mui';
 import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
 
@@ -12,10 +11,15 @@ import {
   Divider
 } from '@mui/material';
 
+import { useStyles } from './ActionsList.styles';
+import { ActionVariants } from './models';
+
 interface ActionsType {
   Icon?: (props: SvgIconProps) => JSX.Element;
   label: string;
   onClick?: (e?) => void;
+  secondaryLabel?: string;
+  variant?: ActionVariants;
 }
 
 interface Props {
@@ -24,12 +28,6 @@ interface Props {
   listItemClassName?: string;
 }
 
-const useStyles = makeStyles()({
-  list: {
-    maxWidth: '100%'
-  }
-});
-
 const ActionsList = ({
   className,
   listItemClassName,
@@ -45,18 +43,28 @@ const ActionsList = ({
           return <Divider key={`divider_${idx}`} />;
         }
 
-        const { label, Icon, onClick } = action as ActionsType;
+        const { label, Icon, onClick, variant, secondaryLabel } =
+          action as ActionsType;
 
         return (
-          <MenuItem aria-label={label} id={label} key={label} onClick={onClick}>
+          <MenuItem
+            aria-label={label}
+            className={classes.item}
+            data-variant={variant}
+            id={label}
+            key={label}
+            onClick={onClick}
+          >
             {Icon && (
               <ListItemIcon>
                 <Icon fontSize="small" />
               </ListItemIcon>
             )}
-            <ListItemText className={listItemClassName}>
-              {t(label)}
-            </ListItemText>
+            <ListItemText
+              className={listItemClassName}
+              primary={t(label)}
+              secondary={secondaryLabel && t(secondaryLabel)}
+            />
           </MenuItem>
         );
       })}

package/src/ActionsList/models.ts

@@ -0,0 +1,8 @@
+export type ActionVariants =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'pending';

package/src/Checkbox/Checkbox.tsx

@@ -8,7 +8,6 @@ import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
 interface StyleProps {
-  disabled: boolean;
   hasIcon: boolean;
   labelPlacement: LabelPlacement;
 }
@@ -22,7 +21,13 @@ const getLabelSpacing = (labelPlacement, theme): string => {
 };
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { disabled, hasIcon, labelPlacement }) => ({
+  (theme, { hasIcon, labelPlacement }) => ({
+    checkbox: {
+      '&.Mui-checked': {
+        color: theme.palette.primary.main
+      },
+      color: theme.palette.primary.main
+    },
     container: hasIcon
       ? {
           alignItems: 'center',
@@ -36,13 +41,8 @@ const useStyles = makeStyles<StyleProps>()(
       fontSize: theme.spacing(10)
     },
     label: {
-      color: disabled
-        ? theme.palette.action.disabled
-        : theme.palette.text.secondary,
-      fontSize: theme.typography.body1.fontSize,
-      fontWeight: equals(labelPlacement, 'top')
-        ? theme.typography.fontWeightBold
-        : theme.typography.fontWeightMedium,
+      fontSize: theme.typography.body2.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
       padding: getLabelSpacing(labelPlacement, theme)
     }
   })
@@ -72,7 +72,6 @@ const Checkbox = ({
   labelProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
-    disabled,
     hasIcon: !!Icon,
     labelPlacement
   });
@@ -84,6 +83,7 @@ const Checkbox = ({
         control={
           <MuiCheckbox
             checked={checked}
+            className={classes.checkbox}
             color="primary"
             disabled={disabled}
             id={label}

package/src/Listing/Listing.cypress.spec.tsx

@@ -67,21 +67,23 @@ const mountListing = (): void => {
 
   cy.mount({
     Component: (
-      <Listing
-        checkable
-        columns={columnsWithSubItems}
-        currentPage={1}
-        limit={10}
-        rows={listingWithSubItems}
-        subItems={{
-          canCheckSubItems: false,
-          enable: true,
-          labelCollapse: 'Collapse',
-          labelExpand: 'Expand',
-          rowProperty: 'subItems'
-        }}
-        totalRows={10}
-      />
+      <div style={{ height: '100vh' }}>
+        <Listing
+          checkable
+          columns={columnsWithSubItems}
+          currentPage={1}
+          limit={10}
+          rows={listingWithSubItems}
+          subItems={{
+            canCheckSubItems: false,
+            enable: true,
+            labelCollapse: 'Collapse',
+            labelExpand: 'Expand',
+            rowProperty: 'subItems'
+          }}
+          totalRows={10}
+        />
+      </div>
     )
   });
 };

package/src/Listing/Listing.styles.ts

@@ -30,6 +30,11 @@ const useListingStyles = makeStyles<StylesProps>()(
       height: '100%',
       width: '100%'
     },
+    listingContainer: {
+      height: '100%',
+      overflow: 'hidden',
+      width: '100%'
+    },
     loadingIndicator: {
       height: loadingIndicatorHeight,
       width: '100%'

package/src/Listing/index.stories.tsx

@@ -34,7 +34,8 @@ type Story = StoryObj<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
-    backgroundColor: theme.palette.background.default
+    backgroundColor: theme.palette.background.default,
+    height: '100vh'
   }
 }));