@centreon/ui 24.7.2 → 24.7.4

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

@@ -1,137 +0,0 @@
-import { ReactElement, useCallback, useMemo } from 'react';
-
-import { string, number, object } from 'yup';
-import { useTranslation } from 'react-i18next';
-import { equals } from 'ramda';
-
-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 {
-  labelCharacters,
-  labelMustBeAtLeast,
-  labelMustBeMost,
-  labelRequired
-} from './translatedLabels';
-import { DashboardResource } from './Dashboard.resource';
-import GlobalRefreshFieldOption from './GlobalRefreshFieldOption';
-
-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

@@ -1,59 +0,0 @@
-import { ChangeEvent } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { isEmpty } from 'ramda';
-import pluralize from 'pluralize';
-import { useAtomValue } from 'jotai';
-
-import { Typography } from '@mui/material';
-
-import { refreshIntervalAtom } from '@centreon/ui-context';
-
-import { TextField } from '../../..';
-
-import {
-  labelGlobalRefreshInterval,
-  labelInterval,
-  labelSeconds
-} from './translatedLabels';
-import { useGlobalRefreshIntervalStyles } from './DashboardForm.styles';
-
-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

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

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

@@ -1,8 +0,0 @@
-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

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

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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

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

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

@@ -1,97 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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/PageHeaderMessage.tsx

@@ -1,32 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

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

package/src/components/Header/index.ts

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