@centreon/ui 24.11.14 → 24.11.21

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

@@ -0,0 +1,137 @@
+import { ReactElement, useCallback, useMemo } from 'react';
+
+import { equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { number, object, string } from 'yup';
+
+import { Form, FormProps } from '../../../Form';
+import { InputType } from '../../../Form/Inputs/models';
+import { FormVariant } from '../Form.models';
+import { FormActions, FormActionsProps } from '../FormActions';
+
+import { DashboardResource } from './Dashboard.resource';
+import { useStyles } from './DashboardForm.styles';
+import GlobalRefreshFieldOption from './GlobalRefreshFieldOption';
+import {
+  labelCharacters,
+  labelMustBeAtLeast,
+  labelMustBeMost,
+  labelRequired
+} from './translatedLabels';
+
+export type DashboardFormProps = {
+  labels: DashboardFormLabels;
+  onSubmit?: FormProps<DashboardResource>['submit'];
+  resource?: DashboardResource;
+  showRefreshIntervalFields?: boolean;
+  variant?: FormVariant;
+} & Pick<FormActionsProps, 'onCancel'>;
+
+export type DashboardFormLabels = {
+  actions: FormActionsProps['labels'];
+  entity: Required<DashboardResource>;
+};
+
+const DashboardForm = ({
+  variant = 'create',
+  resource,
+  labels,
+  onSubmit,
+  onCancel,
+  showRefreshIntervalFields
+}: DashboardFormProps): ReactElement => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const formProps = useMemo<FormProps<DashboardResource>>(
+    () => ({
+      initialValues: resource ?? { description: null, name: '' },
+      inputs: [
+        {
+          fieldName: 'name',
+          group: 'main',
+          label: labels?.entity?.name,
+          required: true,
+          type: InputType.Text
+        },
+        {
+          fieldName: 'description',
+          group: 'main',
+          label: labels?.entity?.description || '',
+          text: {
+            multilineRows: 3
+          },
+          type: InputType.Text
+        },
+        {
+          fieldName: 'refresh.type',
+          group: 'main',
+          hideInput: () => !showRefreshIntervalFields,
+          label: labels?.entity?.globalRefreshInterval?.title,
+          radio: {
+            options: [
+              {
+                label: <GlobalRefreshFieldOption />,
+                value: 'global'
+              },
+              {
+                label: labels?.entity?.globalRefreshInterval?.manual,
+                value: 'manual'
+              }
+            ],
+            row: false
+          },
+          type: InputType.Radio
+        }
+      ],
+      submit: (values, bag) => onSubmit?.(values, bag),
+      validationSchema: object({
+        description: string()
+          .label(labels?.entity?.description || '')
+          .max(
+            180,
+            (p) =>
+              `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
+          )
+          .nullable(),
+        globalRefreshInterval: object({
+          interval: number().when('type', ([type], schema) => {
+            if (equals(type, 'manual')) {
+              schema
+                .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
+                .required(t(labelRequired) as string);
+            }
+
+            return schema.nullable();
+          }),
+          type: string()
+        }),
+        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)
+      })
+    }),
+    [resource, labels, onSubmit]
+  );
+
+  const Actions = useCallback(
+    () => (
+      <FormActions<DashboardResource>
+        labels={labels?.actions}
+        variant={variant}
+        onCancel={onCancel}
+      />
+    ),
+    [labels, onCancel, variant]
+  );
+
+  return (
+    <div className={classes.dashboardForm}>
+      <Form<DashboardResource> {...formProps} Buttons={Actions} />
+    </div>
+  );
+};
+
+export { DashboardForm };

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

@@ -0,0 +1,59 @@
+import { ChangeEvent } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import { useAtomValue } from 'jotai';
+import pluralize from 'pluralize';
+import { isEmpty } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { Typography } from '@mui/material';
+
+import { refreshIntervalAtom } from '@centreon/ui-context';
+
+import { TextField } from '../../..';
+
+import { useGlobalRefreshIntervalStyles } from './DashboardForm.styles';
+import {
+  labelGlobalRefreshInterval,
+  labelInterval,
+  labelSeconds
+} from './translatedLabels';
+
+const GlobalRefreshFieldOption = (): JSX.Element => {
+  const { classes } = useGlobalRefreshIntervalStyles();
+  const { t } = useTranslation();
+
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const platformRefreshInterval = useAtomValue(refreshIntervalAtom);
+
+  const value = values.refresh?.interval;
+
+  const changeInput = (event: ChangeEvent<HTMLInputElement>): void => {
+    setFieldValue(
+      'refresh.interval',
+      !isEmpty(event.target.value) ? Number(event.target.value) || 1 : null
+    );
+  };
+
+  return (
+    <div className={classes.globalRefreshInterval}>
+      <Typography>{t(labelGlobalRefreshInterval)}</Typography>
+      <TextField
+        autoSize
+        dataTestId={labelInterval}
+        inputProps={{
+          'aria-label': t(labelInterval) as string,
+          min: 1
+        }}
+        size="compact"
+        type="number"
+        value={value || platformRefreshInterval}
+        onChange={changeInput}
+      />
+      <Typography>{pluralize(t(labelSeconds), value)}</Typography>
+    </div>
+  );
+};
+
+export default GlobalRefreshFieldOption;

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

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

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

@@ -0,0 +1,8 @@
+export const labelMustBeMost = '{{label}} can be at most {{max}} characters';
+export const labelMustBeAtLeast =
+  '{{label}} should be at least {{min}} characters long';
+export const labelRequired = 'Required';
+export const labelCharacters = 'characters';
+export const labelGlobalRefreshInterval = 'Global refresh interval';
+export const labelSeconds = 'seconds';
+export const labelInterval = 'Interval';

package/src/components/Form/Form.models.ts

@@ -0,0 +1 @@
+export type FormVariant = 'create' | 'update';

package/src/components/Form/Form.resource.ts

@@ -0,0 +1 @@
+export type GenericResource = unknown;

package/src/components/Form/Form.styles.ts

@@ -0,0 +1,17 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  actions: {
+    '&, & > span': {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: theme.spacing(2)
+    },
+    '&:has( > span)': {
+      justifyContent: 'space-between'
+    },
+    justifyContent: 'flex-end'
+  }
+}));
+
+export { useStyles };

package/src/components/Form/FormActions.tsx

@@ -0,0 +1,62 @@
+import { ReactElement } from 'react';
+
+import { useFormikContext } from 'formik';
+
+import { Button } from '../Button';
+
+import { FormVariant } from './Form.models';
+import { useStyles } from './Form.styles';
+
+export type FormActionsProps = {
+  enableSubmitWhenNotDirty?: boolean;
+  labels: FormActionsLabels;
+  onCancel: () => void;
+  variant: FormVariant;
+};
+
+export type FormActionsLabels = {
+  cancel: string;
+  submit: Record<FormVariant, string>;
+};
+
+const FormActions = <TResource extends object>({
+  labels,
+  onCancel,
+  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
+        aria-label={labels.cancel}
+        data-testid="cancel"
+        disabled={isSubmitting}
+        size="medium"
+        variant="secondary"
+        onClick={() => onCancel?.()}
+      >
+        {labels.cancel}
+      </Button>
+      <Button
+        aria-label={labels.submit[variant]}
+        data-testid="submit"
+        disabled={isSubmitDisabled}
+        size="medium"
+        type="submit"
+        variant="primary"
+        onClick={submitForm}
+      >
+        {labels.submit[variant]}
+      </Button>
+    </div>
+  );
+};
+
+export { FormActions };

package/src/components/Form/index.ts

@@ -0,0 +1,5 @@
+export * from './Form.models';
+export * from './Dashboard';
+export { AccessRights } from './AccessRights/AccessRights';
+export { AccessRights as AccessRightsV2 } from './AccessRights/AccessRights';
+export { type FormActionsProps, FormActions } from './FormActions';

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

@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  Edit as EditIcon,
+  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>
+        <Button
+          icon={<EditIcon />}
+          iconVariant="start"
+          size="small"
+          variant="ghost"
+        >
+          Edit
+        </Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  )
+};

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

@@ -0,0 +1,126 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { alpha } from '@mui/system';
+
+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: 'center',
+    borderBottom: `1px solid ${theme.palette.header.page.border}`,
+    display: 'flex',
+    gap: theme.spacing(4),
+    paddingBottom: theme.spacing(1.5)
+  },
+  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)})`
+  },
+  pageHeaderMessage: {
+    alignItems: 'center',
+    color: theme.palette.warning.main,
+    display: 'flex',
+    gap: theme.spacing(1)
+  },
+  pageHeaderMessageIcon: {
+    alignItems: 'center',
+    background: theme.palette.warning.main,
+    borderRadius: '50%',
+    color: theme.palette.common.white,
+    display: 'flex',
+    height: theme.spacing(2.5),
+    justifyContent: 'center',
+    width: theme.spacing(2.5)
+  },
+  pageHeaderMessageIconWrapper: {
+    alignItems: 'center',
+    backgroundColor: alpha(theme.palette.warning.main, 0.7),
+    borderRadius: '50%',
+    display: 'flex',
+    height: theme.spacing(3.5),
+    justifyContent: 'center',
+    width: theme.spacing(3.5)
+  },
+  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 { 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 { 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 { 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 { 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/PageHeaderMessage.tsx

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+
+import { Box, Typography } from '@mui/material';
+
+import { useStyles } from './PageHeader.styles';
+
+type PageHeaderMessageProps = {
+  message: string;
+};
+
+const PageHeaderMessage = ({
+  message
+}: PageHeaderMessageProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <Box className={classes.pageHeaderMessage}>
+      {message && (
+        <>
+          <Box className={classes.pageHeaderMessageIconWrapper}>
+            <Box className={classes.pageHeaderMessageIcon}>!</Box>
+          </Box>
+          <Typography aria-label="page header message" variant="h6">
+            {message}
+          </Typography>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export { PageHeaderMessage };

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

@@ -0,0 +1,47 @@
+import { 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,14 @@
+import { PageHeader as PageHeaderRoot } from './PageHeader';
+import { PageHeaderActions } from './PageHeaderActions';
+import { PageHeaderMain } from './PageHeaderMain';
+import { PageHeaderMenu } from './PageHeaderMenu';
+import { PageHeaderMessage } from './PageHeaderMessage';
+import { PageHeaderTitle } from './PageHeaderTitle';
+
+export const PageHeader = Object.assign(PageHeaderRoot, {
+  Actions: PageHeaderActions,
+  Main: PageHeaderMain,
+  Menu: PageHeaderMenu,
+  Message: PageHeaderMessage,
+  Title: PageHeaderTitle
+});