@centreon/ui 23.10.32 → 23.10.34-MON-19940-Add-testIds-cloud-notifications.0

package/src/base/tokens/themes/ui-light.tokens.ts

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly
+ * Generated on Sun, 04 Jun 2023 10:14:22 GMT
+ */
+
+export const colorBlue50 = '#ecf4fdff';
+export const colorBlue100 = '#d2e4f9ff';
+export const colorBlue200 = '#9ec4f0ff';
+export const colorBlue300 = '#6da4e4ff';
+export const colorBlue400 = '#3e85d5ff';
+export const colorBlue500 = '#2e68aaff';
+export const colorBlue600 = '#205593ff';
+export const colorBlue700 = '#164274ff';
+export const colorBlue800 = '#0d2e54ff';
+export const colorBlue900 = '#071d37ff';
+export const colorBlue950 = '#031326ff';
+export const colorPurple50 = '#f8f1f9ff';
+export const colorPurple100 = '#f0def2ff';
+export const colorPurple200 = '#ddafe4ff';
+export const colorPurple300 = '#ce81daff';
+export const colorPurple400 = '#c151d2ff';
+export const colorPurple500 = '#ac28c1ff';
+export const colorPurple600 = '#872796ff';
+export const colorPurple700 = '#682172ff';
+export const colorPurple800 = '#491b50ff';
+export const colorPurple900 = '#29112cff';
+export const colorPurple950 = '#1a0d1cff';
+export const colorGrey50 = '#f9fafbff';
+export const colorGrey100 = '#eaedf0ff';
+export const colorGrey200 = '#cad0d8ff';
+export const colorGrey300 = '#aab4c0ff';
+export const colorGrey400 = '#8c98a6ff';
+export const colorGrey500 = '#6f7b8aff';
+export const colorGrey600 = '#596573ff';
+export const colorGrey700 = '#434e5bff';
+export const colorGrey800 = '#2f3741ff';
+export const colorGrey900 = '#1b2127ff';
+export const colorGrey950 = '#101418ff';

package/src/components/Button/Button.styles.ts

@@ -2,9 +2,20 @@ import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
   button: {
+    '&[data-size="medium"]': {
+      fontSize: '16px',
+      height: 'unset',
+      lineHeight: '24px'
+    },
+
     '&[data-size="small"]': {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2)
+      '&[data-variant="primary"], &[data-variant="secondary"]': {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2)
+      },
+      fontSize: '14px',
+      height: 'unset',
+      lineHeight: '22px'
     },
 
     '&[data-variant="primary"]:not(:disabled)': {
@@ -23,7 +34,10 @@ const useStyles = makeStyles()((theme) => ({
 
       borderColor: theme.palette.primary.main,
       color: theme.palette.primary.main
-    }
+    },
+
+    textWrap: 'noWrap',
+    transition: 'unset'
   }
 }));
 

package/src/components/Button/Button.tsx

@@ -16,13 +16,15 @@ const muiVariantMap: Record<
   secondary: 'outlined'
 };
 
-type ButtonProps = {
+export type ButtonProps = {
   children: ReactNode;
+  className?: string;
   disabled?: boolean;
   icon?: string | ReactNode;
   iconVariant?: 'none' | 'start' | 'end';
   isDanger?: boolean;
   onClick?: (e) => void;
+  ref?: React.Ref<HTMLButtonElement>;
   size?: 'small' | 'medium' | 'large';
   type?: 'button' | 'submit' | 'reset';
   variant?: 'primary' | 'secondary' | 'ghost';
@@ -39,9 +41,10 @@ const Button = ({
   disabled = false,
   onClick,
   isDanger = false,
+  className = '',
   ...attr
 }: ButtonProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const MuiOverrideProps = useMemo(
     () => ({
@@ -54,7 +57,7 @@ const Button = ({
 
   return (
     <MuiButton
-      className={classes.button}
+      className={cx(classes.button, className)}
       data-icon-variant={iconVariant}
       data-is-danger={isDanger}
       data-size={size}

package/src/components/Button/Icon/IconButton.styles.ts

@@ -1,7 +1,14 @@
 import { makeStyles } from 'tss-react/mui';
 
-const useStyles = makeStyles()(() => ({
-  iconButton: {}
+const useStyles = makeStyles()((theme) => ({
+  iconButton: {
+    '&[data-size="small"]': {
+      '& > svg, & > .MuiSvgIcon-root': {
+        fontSize: '1.125rem'
+      },
+      padding: theme.spacing(0.75)
+    }
+  }
 }));
 
 export { useStyles };

package/src/components/DataTable/DataTable.stories.tsx

@@ -40,3 +40,12 @@ export const AsEmptyState: Story = {
     isEmpty: true
   }
 };
+
+export const withFixedHeightContainer: Story = {
+  args: { ...Default.args },
+  render: (args) => (
+    <div style={{ height: '400px' }}>
+      <DataTable {...args} />
+    </div>
+  )
+};

package/src/components/DataTable/DataTable.styles.ts

@@ -16,6 +16,11 @@ const useStyles = makeStyles()((theme) => ({
       width: '100%'
     },
     display: 'flex'
+  },
+  dataTableScrollContainer: {
+    // FIXME the global -webkit-scrollbar styles are not optimal for this component in grid variant
+    height: '100%',
+    overflowY: 'auto'
   }
 }));
 

package/src/components/DataTable/DataTable.tsx

@@ -20,12 +20,14 @@ const DataTable = ({
   const { classes } = useStyles();
 
   return (
-    <div
-      className={classes.dataTable}
-      data-is-empty={isEmpty}
-      data-variant={variant}
-    >
-      {children}
+    <div className={classes.dataTableScrollContainer}>
+      <div
+        className={classes.dataTable}
+        data-is-empty={isEmpty}
+        data-variant={variant}
+      >
+        {children}
+      </div>
     </div>
   );
 };

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -29,7 +29,10 @@ const DataTableEmptyState = ({
   const { t } = useTranslation();
 
   return (
-    <div className={classes.dataTableEmptyState}>
+    <div
+      className={classes.dataTableEmptyState}
+      data-testid="data-table-empty-state"
+    >
       <MuiTypography variant="h2">{t(labels.title)}</MuiTypography>
       <div className={classes.actions}>
         {canCreate && (

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -10,10 +10,13 @@ const useStyles = makeStyles()((theme) => ({
       justifyContent: 'space-between'
     },
     '& .MuiCardActions-root': {
+      '& > span': {
+        display: 'flex',
+        gap: theme.spacing(1)
+      },
       display: 'flex',
-      flexDirection: 'row-reverse',
-      gap: theme.spacing(1),
 
+      justifyContent: 'space-between',
       opacity: 0
     },
     '&:hover .MuiCardActions-root': {

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

@@ -7,7 +7,11 @@ import {
   CardContent as MuiCardContent,
   Typography as MuiTypography
 } from '@mui/material';
-import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
+import {
+  Delete as DeleteIcon,
+  Settings as SettingsIcon,
+  Share as ShareIcon
+} from '@mui/icons-material';
 
 import { IconButton } from '../../Button';
 
@@ -20,6 +24,7 @@ export interface DataTableItemProps {
   onClick?: () => void;
   onDelete?: () => void;
   onEdit?: () => void;
+  onEditAccessRights?: () => void;
   title: string;
 }
 
@@ -32,7 +37,8 @@ const DataTableItem = forwardRef(
       hasActions = false,
       onClick,
       onEdit,
-      onDelete
+      onDelete,
+      onEditAccessRights
     }: DataTableItemProps,
     ref
   ): ReactElement => {
@@ -58,22 +64,34 @@ const DataTableItem = forwardRef(
         </ActionArea>
         {hasActions && (
           <MuiCardActions>
-            <IconButton
-              aria-label="edit"
-              data-testid="edit"
-              icon={<EditIcon />}
-              size="small"
-              variant="primary"
-              onClick={() => onEdit?.()}
-            />
-            <IconButton
-              aria-label="delete"
-              data-testid="delete"
-              icon={<DeleteIcon />}
-              size="small"
-              variant="ghost"
-              onClick={() => onDelete?.()}
-            />
+            <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?.()}
+              />
+              <IconButton
+                aria-label="edit"
+                data-testid="edit"
+                icon={<SettingsIcon />}
+                size="small"
+                variant="primary"
+                onClick={() => onEdit?.()}
+              />
+            </span>
           </MuiCardActions>
         )}
       </MuiCard>

package/src/components/Header/Header.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  header: {
-    alignItems: 'flex-start',
-    borderBottom: `1px solid ${theme.palette.primary.main}`,
-    display: 'flex',
-    flexDirection: 'row',
-    h1: {
-      font: 'normal normal 600 24px/24px Roboto',
-      letterSpacing: '0.18px',
-      margin: theme.spacing(0, 0, 1.5, 0)
-    },
-    justifyContent: 'space-between',
-    marginBottom: theme.spacing(2.5),
-
-    nav: {
-      display: 'flex',
-      gap: theme.spacing(1),
-      justifyContent: 'flex-end'
-    },
-
-    padding: theme.spacing(0, 0, 1.5, 0)
-  }
-}));
-
-export { useStyles };

package/src/components/Header/PageHeader/PageHeader.stories.tsx

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  Settings as SettingsIcon,
+  StarOutline as StarOutlineIcon
+} from '@mui/icons-material';
+
+import { Button, IconButton } from '../../Button';
+import { Menu } from '../../Menu';
+
+import { PageHeader } from './index';
+
+type PageHeaderComponent = typeof PageHeader & typeof PageHeader.Title;
+
+const meta: Meta<typeof PageHeader> = {
+  component: PageHeader
+};
+
+export default meta;
+type Story = StoryObj<PageHeaderComponent>;
+
+export const Default: Story = {
+  args: {
+    title: 'Page header'
+  },
+  render: (args) => (
+    <PageHeader>
+      <PageHeader.Main>
+        <PageHeader.Title {...args} />
+      </PageHeader.Main>
+      <PageHeader.Actions>
+        <Button
+          icon={<SettingsIcon />}
+          iconVariant="start"
+          size="small"
+          variant="ghost"
+        >
+          Manage
+        </Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  )
+};
+
+export const WithDescription: Story = {
+  args: {
+    description:
+      'Eu aliquip quis in minim laboris occaecat quis nostrud occaecat. Cupidatat consectetur non Lorem eiusmod ut cupidatat dolor enim cillum ex enim irure velit. ',
+    title: 'Nulla ex dolore tempor magna ex'
+  },
+  render: Default.render
+};
+
+export const WithMenu: Story = {
+  args: {
+    ...WithDescription.args,
+    actions: (
+      <IconButton icon={<StarOutlineIcon />} size="small" variant="ghost" />
+    )
+  },
+  render: (args) => (
+    <PageHeader>
+      <PageHeader.Main>
+        <PageHeader.Menu>
+          <Menu>
+            <Menu.Button />
+            <Menu.Items>
+              <Menu.Item>Menu Item</Menu.Item>
+              <Menu.Item>Menu Item</Menu.Item>
+              <Menu.Item>Menu Item</Menu.Item>
+            </Menu.Items>
+          </Menu>
+        </PageHeader.Menu>
+        <PageHeader.Title {...args} />
+      </PageHeader.Main>
+      <PageHeader.Actions>
+        <Button
+          icon={<SettingsIcon />}
+          iconVariant="start"
+          size="small"
+          variant="ghost"
+        >
+          Manage
+        </Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  )
+};

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -0,0 +1,99 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  header: {
+    alignItems: 'flex-start',
+    borderBottom: `1px solid ${theme.palette.primary.main}`,
+    display: 'flex',
+    flexDirection: 'row',
+    h1: {
+      font: 'normal normal 600 24px/24px Roboto',
+      letterSpacing: '0.18px',
+      margin: theme.spacing(0, 0, 1.5, 0)
+    },
+    justifyContent: 'space-between',
+
+    nav: {
+      display: 'flex',
+      gap: theme.spacing(1),
+      justifyContent: 'flex-end'
+    },
+
+    padding: theme.spacing(0, 0, 1.5, 0)
+  },
+  pageHeader: {
+    alignItems: 'flex-start',
+    borderBottom: `1px solid ${theme.palette.header.page.border}`,
+    display: 'flex',
+    gap: theme.spacing(4),
+    paddingBottom: theme.spacing(2)
+  },
+  pageHeaderActions: {
+    '& > button': {
+      '&:hover': {
+        backgroundColor: theme.palette.header.page.action.background.active,
+        color: theme.palette.header.page.action.color.active
+      },
+      backgroundColor: theme.palette.header.page.action.background.default,
+
+      color: theme.palette.header.page.action.color.default
+    },
+    display: 'flex',
+
+    gap: theme.spacing(2)
+  },
+  pageHeaderMain: {
+    display: 'flex',
+    flexGrow: 1,
+    gap: theme.spacing(1)
+  },
+  pageHeaderMenu: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    position: 'relative',
+    transform: `translateY(-${theme.spacing(0.25)})`
+  },
+  pageHeaderTitle: {
+    '& > *': {
+      display: 'grid'
+    },
+    '& > span': {
+      display: 'flex',
+      flexDirection: 'row',
+
+      gap: theme.spacing(2)
+    },
+    display: 'flex',
+
+    flexDirection: 'column',
+
+    gap: theme.spacing(1),
+
+    h1: {
+      color: theme.palette.header.page.title,
+      font: 'normal normal 700 24px/100% Roboto',
+      letterSpacing: '0.15px',
+      margin: theme.spacing(0)
+    }
+  },
+  pageHeaderTitleActions: {
+    '& > button': {
+      opacity: 0.2,
+      padding: 0
+    },
+    alignItems: 'bottom',
+    display: 'flex',
+    gap: theme.spacing(1)
+  },
+  pageHeaderTitleDescription: {
+    color: theme.palette.header.page.description,
+    font: 'normal normal 400 12px/16px Roboto',
+    letterSpacing: '0.15px',
+    maxWidth: '560px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}));
+
+export { useStyles };

package/src/components/Header/PageHeader/PageHeader.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderProps = {
+  children?: ReactNode;
+};
+
+const PageHeader = ({ children }: PageHeaderProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <section className={classes.pageHeader}>{children}</section>;
+};
+
+export { PageHeader };

package/src/components/Header/PageHeader/PageHeaderActions.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderActionsProps = {
+  children?: ReactNode;
+};
+
+const PageHeaderActions = ({
+  children
+}: PageHeaderActionsProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <header className={classes.pageHeaderActions}>{children}</header>;
+};
+
+export { PageHeaderActions };

package/src/components/Header/PageHeader/PageHeaderMain.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderMainProps = {
+  children?: ReactNode;
+};
+
+const PageHeaderMain = ({ children }: PageHeaderMainProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <div className={classes.pageHeaderMain}>{children}</div>;
+};
+
+export { PageHeaderMain };

package/src/components/Header/PageHeader/PageHeaderMenu.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderMenuProps = {
+  children?: ReactNode;
+};
+
+const PageHeaderMenu = ({ children }: PageHeaderMenuProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <nav className={classes.pageHeaderMenu}>{children}</nav>;
+};
+
+export { PageHeaderMenu };

package/src/components/Header/PageHeader/PageHeaderTitle.tsx

@@ -0,0 +1,47 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+import { Typography as MuiTypography } from '@mui/material';
+
+import { TextOverflowTooltip } from '../../Tooltip/TextOverflowTooltip';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderTitleProps = {
+  actions?: ReactNode;
+  description?: string;
+  title: string;
+};
+
+const PageHeaderTitle = ({
+  actions,
+  title,
+  description
+}: PageHeaderTitleProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.pageHeaderTitle}>
+      <span>
+        <MuiTypography aria-label="page header title" variant="h1">
+          {title}
+        </MuiTypography>
+        {actions && (
+          <div className={classes.pageHeaderTitleActions}>{actions}</div>
+        )}
+      </span>
+      {description && (
+        <TextOverflowTooltip label={description}>
+          <MuiTypography
+            aria-label="page header description"
+            className={classes.pageHeaderTitleDescription}
+            variant="body2"
+          >
+            {description}
+          </MuiTypography>
+        </TextOverflowTooltip>
+      )}
+    </div>
+  );
+};
+
+export { PageHeaderTitle };

package/src/components/Header/PageHeader/index.ts

@@ -0,0 +1,12 @@
+import { PageHeader as PageHeaderRoot } from './PageHeader';
+import { PageHeaderMain } from './PageHeaderMain';
+import { PageHeaderMenu } from './PageHeaderMenu';
+import { PageHeaderTitle } from './PageHeaderTitle';
+import { PageHeaderActions } from './PageHeaderActions';
+
+export const PageHeader = Object.assign(PageHeaderRoot, {
+  Actions: PageHeaderActions,
+  Main: PageHeaderMain,
+  Menu: PageHeaderMenu,
+  Title: PageHeaderTitle
+});

package/src/components/Header/index.ts

@@ -1 +1 @@
-export * from './Header';
+export * from './PageHeader';

package/src/components/Layout/AreaIndicator.styles.ts

@@ -0,0 +1,33 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  areaIndicator: {
+    '& .areaIndicator': {
+      left: theme.spacing(10)
+    },
+    '& label:first-of-type': {
+      border: '1px dashed #9747FF7F',
+      borderRadius: '4px',
+      color: '#9747FFFF',
+      fontSize: '0.75rem',
+      fontWeight: 500,
+      left: theme.spacing(1),
+      padding: theme.spacing(0.125, 1),
+      position: 'absolute',
+      top: theme.spacing(0.75)
+    },
+    '&[data-depth="1"]': {
+      '& label:first-of-type': {
+        '&:before': {
+          content: '"+ "'
+        },
+        left: theme.spacing(10)
+      }
+    },
+
+    backgroundColor: '#9747FF19',
+    minHeight: theme.spacing(4),
+
+    position: 'relative'
+  }
+}));