@centreon/ui 24.4.36 → 24.4.38

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/Layout/PageLayout/PageQuickAccess.tsx

@@ -1,76 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import AddIcon from '@mui/icons-material/Add';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-
-import { Button, Menu } from '../..';
-
-interface NamedEntity {
-  id: number | string;
-  name: string;
-}
-
-type Props = {
-  create: () => void;
-  elements: Array<NamedEntity>;
-  goBack: () => void;
-  isActive: (id: number | string) => boolean;
-  labels: {
-    create: string;
-    goBack: string;
-  };
-  navigateToElement: (id: number | string) => () => void;
-};
-
-export const PageQuickAccess = ({
-  elements,
-  isActive,
-  navigateToElement,
-  goBack,
-  create,
-  labels
-}: Props): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <Menu>
-      <Menu.Button data-testid="quickaccess" />
-      <Menu.Items>
-        {elements &&
-          elements.map((element) => (
-            <Menu.Item
-              key={`${element.id}`}
-              onClick={navigateToElement(element.id)}
-              {...(isActive(element.id) && {
-                isActive: true,
-                isDisabled: true
-              })}
-            >
-              {element.name}
-            </Menu.Item>
-          ))}
-        <Menu.Divider key="divider" />
-        <Menu.Item key="create">
-          <>
-            <Button
-              icon={<ArrowBackIcon />}
-              iconVariant="start"
-              variant="ghost"
-              onClick={goBack}
-            >
-              {t(labels.goBack)}
-            </Button>
-            <Button
-              icon={<AddIcon />}
-              iconVariant="start"
-              variant="secondary"
-              onClick={create}
-            >
-              {t(labels.create)}
-            </Button>
-          </>
-        </Menu.Item>
-      </Menu.Items>
-    </Menu>
-  );
-};

package/src/components/Layout/PageLayout.cypress.spec.tsx

@@ -1,66 +0,0 @@
-import { T } from 'ramda';
-
-import { PageHeader } from '..';
-
-import { AreaIndicator } from './AreaIndicator';
-
-import { PageLayout } from '.';
-
-const initialize = (): void => {
-  cy.mount({
-    Component: (
-      <PageLayout>
-        <PageLayout.Header>
-          <PageHeader>
-            <PageHeader.Menu>
-              <PageLayout.QuickAccess
-                create={cy.stub()}
-                elements={[
-                  {
-                    id: 1,
-                    name: 'Entity'
-                  }
-                ]}
-                goBack={cy.stub()}
-                isActive={T}
-                labels={{
-                  create: 'Create',
-                  goBack: 'Go back'
-                }}
-                navigateToElement={cy.stub()}
-              />
-            </PageHeader.Menu>
-            <PageHeader.Main>
-              <PageHeader.Title description="Description" title="Title" />
-            </PageHeader.Main>
-            <PageHeader.Actions>Actions</PageHeader.Actions>
-          </PageHeader>
-        </PageLayout.Header>
-        <PageLayout.Body>
-          <PageLayout.Actions>
-            <AreaIndicator name="Body actions" />
-          </PageLayout.Actions>
-          <h1>Content</h1>
-        </PageLayout.Body>
-      </PageLayout>
-    )
-  });
-};
-
-describe('Page layout', () => {
-  beforeEach(initialize);
-
-  it('displays the page layout', () => {
-    cy.makeSnapshot();
-  });
-
-  it('opens the quick access poppin when the corresponding logo is displayed', () => {
-    cy.findByTestId('quickaccess').click();
-
-    cy.contains('Entity').should('be.visible');
-    cy.contains('Create').should('be.visible');
-    cy.contains('Go back').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

package/src/utils/usePluralizedTranslation.ts

@@ -1,21 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import pluralize from 'pluralize';
-
-interface TProps {
-  count: number;
-  label: string;
-}
-
-export const usePluralizedTranslation = (): {
-  pluralizedT: (props: TProps) => string;
-} => {
-  const translation = useTranslation();
-
-  const pluralizedT = ({ label, count }: TProps): string => {
-    return pluralize(translation.t(label), count);
-  };
-
-  return {
-    pluralizedT
-  };
-};