@centreon/ui 23.10.39 → 23.10.40

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

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

@@ -0,0 +1,41 @@
+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/DashboardForm.styles.ts

@@ -1,12 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-const useStyles = makeStyles()((theme) => ({
-  actions: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(2),
-    justifyContent: 'flex-end'
-  },
+const useStyles = makeStyles()(() => ({
   dashboardForm: {
     display: 'flex',
     flexDirection: 'column',

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

@@ -1,4 +1,4 @@
-import React, { ReactElement, useCallback, useMemo } from 'react';
+import { ReactElement, useCallback, useMemo } from 'react';
 
 import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
@@ -6,18 +6,15 @@ 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,
-  labelCharacters
+  labelRequired
 } from './translatedLabels';
-import {
-  DashboardFormActions,
-  DashboardFormActionsProps
-} from './DashboardFormActions';
 import { DashboardResource } from './Dashboard.resource';
 
 export type DashboardFormProps = {
@@ -25,10 +22,10 @@ export type DashboardFormProps = {
   onSubmit?: FormProps<DashboardResource>['submit'];
   resource?: DashboardResource;
   variant?: FormVariant;
-} & Pick<DashboardFormActionsProps, 'onCancel'>;
+} & Pick<FormActionsProps, 'onCancel'>;
 
 export type DashboardFormLabels = {
-  actions: DashboardFormActionsProps['labels'];
+  actions: FormActionsProps['labels'];
   entity: Required<DashboardResource>;
 };
 
@@ -83,9 +80,9 @@ const DashboardForm = ({
     [resource, labels, onSubmit]
   );
 
-  const FormActions = useCallback(
+  const Actions = useCallback(
     () => (
-      <DashboardFormActions
+      <FormActions<DashboardResource>
         labels={labels?.actions}
         variant={variant}
         onCancel={onCancel}
@@ -96,7 +93,7 @@ const DashboardForm = ({
 
   return (
     <div className={classes.dashboardForm}>
-      <Form<DashboardResource> {...formProps} Buttons={FormActions} />
+      <Form<DashboardResource> {...formProps} Buttons={Actions} />
     </div>
   );
 };

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/{Dashboard/DashboardFormActions.tsx → FormActions.tsx}

@@ -1,48 +1,49 @@
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 
 import { useFormikContext } from 'formik';
 
-import { Button } from '../../Button';
-import { FormVariant } from '../Form.models';
+import { Button } from '../Button';
 
-import { useStyles } from './DashboardForm.styles';
-import { DashboardResource } from './Dashboard.resource';
+import { FormVariant } from './Form.models';
+import { useStyles } from './Form.styles';
 
-export type DashboardFormActionsProps = {
-  labels: DashboardFormActionsLabels;
+export type FormActionsProps = {
+  labels: FormActionsLabels;
   onCancel: () => void;
   variant: FormVariant;
 };
 
-export type DashboardFormActionsLabels = {
+export type FormActionsLabels = {
   cancel: string;
   submit: Record<FormVariant, string>;
 };
 
-const DashboardFormActions = ({
+const FormActions = <TResource extends object>({
   labels,
   onCancel,
   variant
-}: DashboardFormActionsProps): ReactElement => {
+}: FormActionsProps): ReactElement => {
   const { classes } = useStyles();
   const { isSubmitting, dirty, isValid, submitForm } =
-    useFormikContext<DashboardResource>();
+    useFormikContext<TResource>();
 
   return (
     <div className={classes.actions}>
       <Button
-        aria-label="cancel"
+        aria-label={labels.cancel}
+        data-testid="cancel"
         disabled={isSubmitting}
-        size="small"
+        size="medium"
         variant="secondary"
         onClick={() => onCancel?.()}
       >
         {labels.cancel}
       </Button>
       <Button
-        aria-label="submit"
+        aria-label={labels.submit[variant]}
+        data-testid="submit"
         disabled={isSubmitting || !dirty || !isValid}
-        size="small"
+        size="medium"
         type="submit"
         variant="primary"
         onClick={submitForm}
@@ -53,4 +54,4 @@ const DashboardFormActions = ({
   );
 };
 
-export { DashboardFormActions };
+export { FormActions };

package/src/components/Form/index.ts

@@ -1,2 +1,3 @@
 export * from './Form.models';
 export * from './Dashboard';
+export * from './AccessRights';

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

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import {
+  Edit as EditIcon,
   Settings as SettingsIcon,
   StarOutline as StarOutlineIcon
 } from '@mui/icons-material';
@@ -82,6 +83,14 @@ export const WithMenu: Story = {
         >
           Manage
         </Button>
+        <Button
+          icon={<EditIcon />}
+          iconVariant="start"
+          size="small"
+          variant="ghost"
+        >
+          Edit
+        </Button>
       </PageHeader.Actions>
     </PageHeader>
   )

package/src/components/List/Item/Avatar.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+
+import {
+  Avatar as MuiAvatar,
+  ListItemAvatar as MuiListItemAvatar
+} from '@mui/material';
+
+import { useStyles } from './ListItem.styles';
+
+type AvatarProps = {
+  children: ReactElement | string;
+};
+export const Avatar = ({ children }: AvatarProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <MuiListItemAvatar className={classes.avatar} data-element="avatar">
+      <MuiAvatar>{children}</MuiAvatar>
+    </MuiListItemAvatar>
+  );
+};

package/src/components/List/Item/AvatarSkeleton.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+
+import { Skeleton as MuiSkeleton } from '@mui/material';
+
+import { useStyles } from './ListItem.styles';
+
+export const AvatarSkeleton = (): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <MuiSkeleton
+      animation="wave"
+      className={classes.avatar}
+      variant="circular"
+    />
+  );
+};

package/src/components/List/Item/ListItem.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ListItem } from '.';
+
+const meta: Meta<typeof ListItem> = {
+  component: ListItem
+};
+
+export default meta;
+type Story = StoryObj<typeof ListItem>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default'
+  }
+};
+
+export const WithTextAndAvatar: Story = {
+  args: {
+    children: (
+      <>
+        <ListItem.Avatar>AV</ListItem.Avatar>
+        <ListItem.Text
+          primaryText="Primary text"
+          secondaryText="Secondary text"
+        />
+      </>
+    )
+  }
+};
+
+export const AsLoadingState: Story = {
+  args: {
+    children: (
+      <>
+        <ListItem.Avatar.Skeleton />
+        <ListItem.Text.Skeleton secondaryText />
+      </>
+    )
+  }
+};

package/src/components/List/Item/ListItem.styles.ts

@@ -0,0 +1,57 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  avatar: {
+    '&, &.MuiListItemAvatar-root, & > div': {
+      color: theme.palette.primary.contrastText,
+      fontSize: '1rem',
+      height: '2.25rem',
+      width: '2.25rem'
+    },
+    disabled: {
+      backgroundColor: theme.palette.action.disabled
+    },
+    minWidth: 'unset'
+  },
+  listItem: {
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
+    gap: theme.spacing(2),
+    maxWidth: '520px',
+    overflow: 'hidden',
+    paddingBottom: theme.spacing(1),
+    paddingTop: theme.spacing(1)
+  },
+  text: {
+    '&, &.MuiListItemText-root': {
+      '& .MuiListItemText-primary': {
+        fontSize: '0.875rem'
+      },
+      '& .MuiListItemText-secondary': {
+        fontSize: '0.625rem'
+      },
+      '& > *': {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textWrap: 'nowrap'
+      },
+      margin: 0
+    },
+    disabled: {
+      color: theme.palette.action.disabled
+    }
+  },
+  textSkeleton: {
+    '& span:nth-child(1)': {
+      fontSize: '0.875rem'
+    },
+    '& span:nth-child(2)': {
+      fontSize: '0.625rem',
+      width: '60%'
+    },
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: '40%'
+  }
+}));

package/src/components/List/Item/ListItem.tsx

@@ -0,0 +1,32 @@
+import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
+
+import { ListItem as MuiListItem } from '@mui/material';
+
+import { useStyles } from './ListItem.styles';
+
+type ListItemProps = {
+  action?: ReactElement;
+  children: ReactNode | Array<ReactNode>;
+  className?: string;
+};
+
+export const ListItem = forwardRef(
+  (
+    { action, children, className, ...attr }: ListItemProps,
+    ref?: ForwardedRef<HTMLLIElement>
+  ) => {
+    const { classes, cx } = useStyles();
+
+    return (
+      <MuiListItem
+        disableGutters
+        className={cx(classes.listItem, className)}
+        ref={ref}
+        secondaryAction={action}
+        {...attr}
+      >
+        {children}
+      </MuiListItem>
+    );
+  }
+);