@centreon/ui 23.10.43 → 23.10.44

package/src/components/Form/AccessRights/useAccessRightsForm.tsx

@@ -1,282 +0,0 @@
-import { ReactElement, ReactNode, useEffect, useRef } from 'react';
-
-import {
-  atom,
-  createStore,
-  Provider,
-  useAtom,
-  useAtomValue,
-  useSetAtom,
-  useStore
-} from 'jotai';
-
-import {
-  ContactAccessRightResource,
-  ContactAccessRightStateResource,
-  ContactGroupResource,
-  ContactResource,
-  RoleResource
-} from './AccessRights.resource';
-import {
-  createInitialState,
-  sortOnAddedStateFirstAndContactName
-} from './useAccessRightsForm.utils';
-
-/** state */
-
-type loadingState = 'idle' | 'loading';
-
-const loadingStatusAtom = atom<loadingState>('idle');
-
-type formOptions = {
-  contacts: Array<ContactResource | ContactGroupResource>;
-  roles: Array<RoleResource>;
-};
-
-const formOptionsAtom = atom<formOptions>({
-  contacts: [],
-  roles: []
-});
-
-const contactAccessRightsAtom = atom<Array<ContactAccessRightStateResource>>(
-  []
-);
-
-type StateStats = {
-  added: number;
-  removed: number;
-  updated: number;
-};
-
-const contactAccessRightsStateAtom = atom<{
-  isDirty: boolean;
-  isLoading: boolean;
-  stats: StateStats;
-}>((get) => ({
-  isDirty: get(contactAccessRightsAtom).some(
-    ({ state }) => state !== 'unchanged'
-  ),
-  isLoading: get(loadingStatusAtom) === 'loading',
-  stats: {
-    added: get(contactAccessRightsAtom).filter(({ state }) => state === 'added')
-      .length,
-    removed: get(contactAccessRightsAtom).filter(
-      ({ state }) => state === 'removed'
-    ).length,
-    updated: get(contactAccessRightsAtom).filter(
-      ({ state }) => state === 'updated'
-    ).length
-  }
-}));
-
-type callbacks = {
-  onSubmit?: (values: Array<ContactAccessRightStateResource>) => void;
-};
-
-const callbacksAtom = atom<callbacks>({});
-
-/** provider */
-
-export type AccessRightsFormProviderProps = {
-  children: ReactNode;
-  initialValues?: Array<ContactAccessRightResource>;
-  loadingStatus?: loadingState;
-  onSubmit?: callbacks['onSubmit'];
-  options?: formOptions;
-};
-
-const AccessRightsFormProvider = ({
-  children,
-  initialValues,
-  options,
-  loadingStatus = 'idle',
-  onSubmit
-}: AccessRightsFormProviderProps): ReactElement => {
-  const store = useRef(createStore()).current;
-
-  const setLoadingStatus = useSetAtom(loadingStatusAtom, { store });
-  const setFormOptions = useSetAtom(formOptionsAtom, { store });
-  const setContactAccessRights = useSetAtom(contactAccessRightsAtom, { store });
-  const setCallbacks = useSetAtom(callbacksAtom, { store });
-
-  useEffect(() => {
-    setLoadingStatus(loadingStatus);
-  }, [loadingStatus]);
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    options && setFormOptions(options);
-  }, [options]);
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    onSubmit && setCallbacks({ onSubmit });
-  }, [onSubmit]);
-
-  useEffect(() => {
-    setContactAccessRights(
-      initialValues ? createInitialState(initialValues) : []
-    );
-  }, [initialValues]);
-
-  return <Provider store={store}>{children}</Provider>;
-};
-
-/** hook */
-
-type UseAccessRightsForm = {
-  addContactAccessRight: (
-    contactAccessRight: ContactAccessRightResource
-  ) => void;
-  contactAccessRights: Array<ContactAccessRightStateResource>;
-  isDirty: boolean;
-  isLoading: boolean;
-  options: formOptions;
-  removeContactAccessRight: (
-    contactAccessRight: ContactAccessRightResource,
-    restore?: boolean
-  ) => void;
-  stats: StateStats;
-  submit: () => void;
-  updateContactAccessRight: (
-    contactAccessRight: ContactAccessRightResource
-  ) => void;
-};
-
-const useAccessRightsForm = (): UseAccessRightsForm => {
-  const store = useStore();
-
-  const [contactAccessRights, setContactAccessRights] = useAtom(
-    contactAccessRightsAtom,
-    { store }
-  );
-  const { isLoading, isDirty, stats } = useAtomValue(
-    contactAccessRightsStateAtom,
-    { store }
-  );
-  const options = useAtomValue(formOptionsAtom, { store });
-  const callbacks = useAtomValue(callbacksAtom, { store });
-
-  const addContactAccessRight = (
-    contactAccessRight: ContactAccessRightResource
-  ): void =>
-    setContactAccessRights((prev) => {
-      const isContactAlreadyAdded = prev.some(
-        ({ contactAccessRight: c }) =>
-          c.contact?.id === contactAccessRight.contact?.id
-      );
-
-      return isContactAlreadyAdded
-        ? prev
-        : [
-            ...prev,
-            {
-              contactAccessRight,
-              state: 'added',
-              stateHistory: []
-            } as ContactAccessRightStateResource
-          ].sort(sortOnAddedStateFirstAndContactName);
-    });
-
-  const removeContactAccessRight = (
-    contactAccessRight: ContactAccessRightResource,
-    restore = false
-  ): void =>
-    setContactAccessRights((prev) => {
-      const contactAccessRightIndex = prev.findIndex(
-        ({ contactAccessRight: prevContactAccessRight }) =>
-          prevContactAccessRight.contact?.id === contactAccessRight.contact?.id
-      );
-
-      if (contactAccessRightIndex === -1) {
-        return prev;
-      }
-
-      const { stateHistory } = prev[contactAccessRightIndex];
-
-      if (restore) {
-        return [
-          ...prev.slice(0, contactAccessRightIndex),
-          {
-            ...prev[contactAccessRightIndex],
-            state: stateHistory[stateHistory.length - 1],
-            stateHistory: [...stateHistory, prev[contactAccessRightIndex].state]
-          } as ContactAccessRightStateResource,
-          ...prev.slice(contactAccessRightIndex + 1)
-        ];
-      }
-
-      if (
-        prev[contactAccessRightIndex].state === 'added' ||
-        stateHistory[0] === 'added'
-      ) {
-        return [
-          ...prev.slice(0, contactAccessRightIndex),
-          ...prev.slice(contactAccessRightIndex + 1)
-        ];
-      }
-
-      return [
-        ...prev.slice(0, contactAccessRightIndex),
-        {
-          ...prev[contactAccessRightIndex],
-          state: 'removed',
-          stateHistory: [...stateHistory, prev[contactAccessRightIndex].state]
-        } as ContactAccessRightStateResource,
-        ...prev.slice(contactAccessRightIndex + 1)
-      ];
-    });
-
-  const updateContactAccessRight = (
-    contactAccessRight: ContactAccessRightResource
-  ): void =>
-    setContactAccessRights((prev) => {
-      const contactAccessRightIndex = prev.findIndex(
-        ({ contactAccessRight: prevContactAccessRight }) =>
-          prevContactAccessRight.contact?.id === contactAccessRight.contact?.id
-      );
-
-      if (contactAccessRightIndex === -1) {
-        return prev;
-      }
-
-      const { stateHistory } = prev[contactAccessRightIndex];
-
-      const isAdded =
-        prev[contactAccessRightIndex].state === 'added' ||
-        stateHistory[0] === 'added';
-      const isUpdated =
-        prev[contactAccessRightIndex].state === 'updated' ||
-        stateHistory.findIndex((state) => state === 'updated') <
-          stateHistory.findIndex((state) => state === 'unchanged');
-
-      // eslint-disable-next-line no-nested-ternary
-      const state = isAdded ? 'added' : isUpdated ? 'unchanged' : 'updated';
-
-      return [
-        ...prev.slice(0, contactAccessRightIndex),
-        {
-          contactAccessRight,
-          state,
-          stateHistory: [...stateHistory, prev[contactAccessRightIndex].state]
-        } as ContactAccessRightStateResource,
-        ...prev.slice(contactAccessRightIndex + 1)
-      ];
-    });
-
-  const submit = (): void => callbacks.onSubmit?.(contactAccessRights);
-
-  return {
-    addContactAccessRight,
-    contactAccessRights,
-    isDirty,
-    isLoading,
-    options,
-    removeContactAccessRight,
-    stats,
-    submit,
-    updateContactAccessRight
-  };
-};
-
-export { AccessRightsFormProvider, useAccessRightsForm };

package/src/components/Form/AccessRights/useAccessRightsForm.utils.ts

@@ -1,41 +0,0 @@
-import { ContactAccessRightStateResource } from './AccessRights.resource';
-
-export const sortOnContactName = (
-  a: ContactAccessRightStateResource,
-  b: ContactAccessRightStateResource
-): number =>
-  a.contactAccessRight.contact?.name.localeCompare(
-    b.contactAccessRight.contact?.name ?? ''
-  ) || 0;
-
-export const sortOnAddedStateFirstAndContactName = (
-  a: ContactAccessRightStateResource,
-  b: ContactAccessRightStateResource
-): number => {
-  if (a.state === 'added' && b.state !== 'added') {
-    return -1;
-  }
-  if (a.state !== 'added' && b.state === 'added') {
-    return 1;
-  }
-
-  return (
-    a.contactAccessRight.contact?.name.localeCompare(
-      b.contactAccessRight.contact?.name ?? ''
-    ) || 0
-  );
-};
-
-export const createInitialState = (
-  values
-): Array<ContactAccessRightStateResource> =>
-  values
-    ?.map(
-      (contactAccessRight) =>
-        ({
-          contactAccessRight,
-          state: 'unchanged',
-          stateHistory: []
-        } as ContactAccessRightStateResource)
-    )
-    .sort(sortOnAddedStateFirstAndContactName);

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

@@ -1,4 +0,0 @@
-export type DashboardResource = {
-  description?: string | null;
-  name: string;
-};

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

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

@@ -1,13 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()(() => ({
-  dashboardForm: {
-    display: 'flex',
-    flexDirection: 'column',
-    maxWidth: '480px',
-
-    width: '100%'
-  }
-}));
-
-export { useStyles };

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

@@ -1,101 +0,0 @@
-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';
-
-export type DashboardFormProps = {
-  labels: DashboardFormLabels;
-  onSubmit?: FormProps<DashboardResource>['submit'];
-  resource?: DashboardResource;
-  variant?: FormVariant;
-} & Pick<FormActionsProps, 'onCancel'>;
-
-export type DashboardFormLabels = {
-  actions: FormActionsProps['labels'];
-  entity: Required<DashboardResource>;
-};
-
-const DashboardForm = ({
-  variant = 'create',
-  resource,
-  labels,
-  onSubmit,
-  onCancel
-}: 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
-        }
-      ],
-      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(),
-        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/index.ts

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

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

@@ -1,6 +0,0 @@
-// 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';

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,57 +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 = {
-  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

@@ -1,3 +0,0 @@
-export * from './Form.models';
-export * from './Dashboard';
-export * from './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>
-  )
-};