@centreon/ui 24.4.21 → 24.4.23

package/src/components/Form/AccessRightsV2/storiesData.ts

@@ -0,0 +1,221 @@
+import { faker } from '@faker-js/faker';
+
+import { Listing } from '../../../api/models';
+import { SelectEntry } from '../../..';
+
+import { AccessRightInitialValues, Labels } from './models';
+
+faker.seed(42);
+
+export const defaultAccessRights: Array<AccessRightInitialValues> = Array(10)
+  .fill(0)
+  .map((_, idx) => ({
+    email: faker.internet.email(),
+    id: idx,
+    isContactGroup: idx % 5 === 0,
+    name: faker.person.fullName(),
+    role: idx % 2 === 0 ? 'viewer' : 'editor'
+  }));
+
+export const simpleAccessRights: Array<AccessRightInitialValues> = Array(6)
+  .fill(0)
+  .map((_, idx) => ({
+    email: faker.internet.email(),
+    id: idx,
+    isContactGroup: idx % 5 === 0,
+    name: faker.person.fullName(),
+    role: idx % 2 === 0 ? 'viewer' : 'editor'
+  }));
+
+export const accessRightsWithStates = [
+  {
+    email: faker.internet.email(),
+    id: 1,
+    isAdded: false,
+    isContactGroup: true,
+    isRemoved: false,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  },
+  {
+    email: faker.internet.email(),
+    id: 2,
+    isAdded: true,
+    isContactGroup: true,
+    isRemoved: false,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'editor'
+  },
+  {
+    email: faker.internet.email(),
+    id: 3,
+    isAdded: false,
+    isContactGroup: false,
+    isRemoved: false,
+    isUpdated: true,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  },
+  {
+    email: faker.internet.email(),
+    id: 4,
+    isAdded: false,
+    isContactGroup: false,
+    isRemoved: true,
+    isUpdated: false,
+    name: faker.person.fullName(),
+    role: 'editor'
+  },
+  {
+    email: faker.internet.email(),
+    id: 5,
+    isAdded: false,
+    isContactGroup: true,
+    isRemoved: true,
+    isUpdated: true,
+    name: faker.person.fullName(),
+    role: 'viewer'
+  }
+];
+
+export const emptyAccessRights = [];
+
+const buildEntities = (from, isGroup): Array<SelectEntry> => {
+  return Array(10)
+    .fill(0)
+    .map((_, index) => ({
+      email: isGroup ? undefined : faker.internet.email(),
+      id: 1000 + index,
+      name: `Entity ${isGroup ? 'Group' : ''} ${from + index}`
+    }));
+};
+
+export const buildResult = (isGroup): Listing<SelectEntry> => ({
+  meta: {
+    limit: 10,
+    page: 1,
+    total: 10
+  },
+  result: buildEntities(10, isGroup)
+});
+
+export const labels: Labels = {
+  actions: {
+    cancel: 'Cancel',
+    copyError: 'Failed to copy',
+    copyLink: 'Copy link',
+    copySuccess: 'Copied',
+    save: 'Save'
+  },
+  add: {
+    autocompleteContact: 'Add a contact',
+    autocompleteContactGroup: 'Add a contact group',
+    contact: 'Contact',
+    contactGroup: 'Contact group',
+    title: 'Share dashboard with'
+  },
+  list: {
+    added: 'Added',
+    empty: 'The contact list is empty',
+    group: 'Group',
+    removed: 'Removed',
+    title: 'User rights',
+    updated: 'Updated'
+  }
+};
+
+export const roles = [
+  {
+    id: 'viewer',
+    name: 'Viewer'
+  },
+  {
+    id: 'editor',
+    name: 'Editor'
+  }
+];
+
+export const removedAccessRights = [
+  {
+    email: 'Virgie14@yahoo.com',
+    id: 1,
+    isContactGroup: false,
+    name: 'Jody Blanda',
+    role: 'editor'
+  },
+  {
+    email: 'Wyman29@yahoo.com',
+    id: 2,
+    isContactGroup: false,
+    name: 'Susan Dooley',
+    role: 'viewer'
+  },
+  {
+    email: 'Merle.Schamberger@hotmail.com',
+    id: 3,
+    isContactGroup: false,
+    name: 'Lewis Buckridge PhD',
+    role: 'editor'
+  },
+  {
+    email: 'Rossie6@gmail.com',
+    id: 4,
+    isContactGroup: false,
+    name: 'Bertha Hane',
+    role: 'viewer'
+  },
+  {
+    email: 'Monty_Nienow47@gmail.com',
+    id: 5,
+    isContactGroup: true,
+    name: 'Mildred Ratke-Stanton',
+    role: 'editor'
+  }
+];
+
+export const updatedAccessRights = [
+  {
+    email: 'Jovani.Willms74@gmail.com',
+    id: 0,
+    isContactGroup: true,
+    name: 'Leah McGlynn',
+    role: 'editor'
+  },
+  {
+    email: 'Virgie14@yahoo.com',
+    id: 1,
+    isContactGroup: false,
+    name: 'Jody Blanda',
+    role: 'editor'
+  },
+  {
+    email: 'Wyman29@yahoo.com',
+    id: 2,
+    isContactGroup: false,
+    name: 'Susan Dooley',
+    role: 'viewer'
+  },
+  {
+    email: 'Merle.Schamberger@hotmail.com',
+    id: 3,
+    isContactGroup: false,
+    name: 'Lewis Buckridge PhD',
+    role: 'editor'
+  },
+  {
+    email: 'Rossie6@gmail.com',
+    id: 4,
+    isContactGroup: false,
+    name: 'Bertha Hane',
+    role: 'viewer'
+  },
+  {
+    email: 'Monty_Nienow47@gmail.com',
+    id: 5,
+    isContactGroup: true,
+    name: 'Mildred Ratke-Stanton',
+    role: 'editor'
+  }
+];

package/src/components/Form/AccessRightsV2/useAccessRightsInitValues.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+import { useAtom, useSetAtom } from 'jotai';
+import { equals } from 'ramda';
+
+import { initialValuesAtom, valuesAtom } from './atoms';
+import { AccessRightInitialValues, ContactType } from './models';
+
+interface Props {
+  initialValues: Array<AccessRightInitialValues>;
+}
+
+export const useAccessRightsInitValues = ({
+  initialValues
+}: Props): (() => void) => {
+  const [currentInitialValues, setInitialValues] = useAtom(initialValuesAtom);
+  const setValues = useSetAtom(valuesAtom);
+
+  const formattedInitialValues = useMemo(
+    () =>
+      initialValues.map((value) => ({
+        ...value,
+        id: `${
+          value.isContactGroup ? ContactType.ContactGroup : ContactType.Contact
+        }_${value.id}`
+      })),
+    [initialValues]
+  );
+
+  if (!equals(formattedInitialValues, currentInitialValues)) {
+    setInitialValues(formattedInitialValues);
+    setValues(
+      initialValues.map((value) => ({
+        isAdded: false,
+        isRemoved: false,
+        isUpdated: false,
+        ...value,
+        id: `${
+          value.isContactGroup ? ContactType.ContactGroup : ContactType.Contact
+        }_${value.id}`
+      }))
+    );
+  }
+
+  const clearValues = (): void => {
+    setInitialValues([]);
+    setValues([]);
+  };
+
+  return clearValues;
+};

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

@@ -0,0 +1,9 @@
+export type DashboardResource = {
+  description?: string | null;
+  globalRefreshInterval?: {
+    global: string;
+    manual: string;
+    title: string;
+  };
+  name: string;
+};

package/src/components/Form/Dashboard/DashboardForm.stories.ts

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { DashboardForm } from './DashboardForm';
+
+const meta: Meta<typeof DashboardForm> = {
+  component: DashboardForm
+};
+
+export default meta;
+type Story = StoryObj<typeof DashboardForm>;
+
+export const Default: Story = {
+  args: {
+    labels: {
+      actions: {
+        cancel: 'Cancel',
+        submit: {
+          create: 'Create',
+          update: 'Update'
+        }
+      },
+      entity: {
+        description: 'Description',
+        name: 'Name'
+      }
+    }
+  }
+};
+
+export const AsUpdateVariant: Story = {
+  args: {
+    ...Default.args,
+    resource: {
+      description: 'Description 1',
+      name: 'Dashboard 1'
+    },
+    variant: 'update'
+  }
+};

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

@@ -0,0 +1,21 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()(() => ({
+  dashboardForm: {
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: '480px',
+    width: '100%'
+  }
+}));
+
+const useGlobalRefreshIntervalStyles = makeStyles()((theme) => ({
+  globalRefreshInterval: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1)
+  }
+}));
+
+export { useStyles, useGlobalRefreshIntervalStyles };

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

@@ -0,0 +1,134 @@
+import { ReactElement, useCallback, useMemo } from 'react';
+
+import * as Yup 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 {
+  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: Yup.object().shape({
+        description: Yup.string()
+          .label(labels?.entity?.description || '')
+          .max(
+            180,
+            (p) =>
+              `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
+          )
+          .nullable(),
+        globalRefreshInterval: Yup.object().shape({
+          interval: Yup.number().when('type', {
+            is: 'global',
+            otherwise: Yup.number().nullable(),
+            then: Yup.number()
+              .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
+              .required(t(labelRequired) as string)
+          }),
+          type: Yup.string()
+        }),
+        name: Yup.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 { 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

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

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

@@ -0,0 +1,9 @@
+// TODO use i18n conventions for translation (interpolation, plurals, etc.) and setup for storybook (only works in FE atm.)
+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,57 @@
+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 = {
+  labels: FormActionsLabels;
+  onCancel: () => void;
+  variant: FormVariant;
+};
+
+export type FormActionsLabels = {
+  cancel: string;
+  submit: Record<FormVariant, string>;
+};
+
+const FormActions = <TResource extends object>({
+  labels,
+  onCancel,
+  variant
+}: FormActionsProps): ReactElement => {
+  const { classes } = useStyles();
+  const { isSubmitting, dirty, isValid, submitForm } =
+    useFormikContext<TResource>();
+
+  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={isSubmitting || !dirty || !isValid}
+        size="medium"
+        type="submit"
+        variant="primary"
+        onClick={submitForm}
+      >
+        {labels.submit[variant]}
+      </Button>
+    </div>
+  );
+};
+
+export { FormActions };

package/src/components/Form/index.ts

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