@centreon/ui 24.4.21 → 24.4.23

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/AccessRightsV2/AccessRights.cypress.spec.tsx

@@ -0,0 +1,350 @@
+import { Provider, createStore } from 'jotai';
+
+import { Method, SnackbarProvider, TestQueryProvider } from '../../..';
+
+import { AccessRights } from './AccessRights';
+import {
+  buildResult,
+  emptyAccessRights,
+  labels,
+  removedAccessRights,
+  roles,
+  simpleAccessRights,
+  updatedAccessRights
+} from './storiesData';
+
+const initialize = ({
+  initialValues = simpleAccessRights,
+  loading = false,
+  link = 'link'
+}): unknown => {
+  const cancel = cy.stub();
+  const save = cy.stub();
+
+  cy.interceptAPIRequest({
+    alias: 'getContacts',
+    method: Method.GET,
+    path: '**/contacts?**',
+    response: buildResult(false)
+  });
+  cy.interceptAPIRequest({
+    alias: 'getContactGroups',
+    method: Method.GET,
+    path: '**/contact-groups?**',
+    response: buildResult(true)
+  });
+
+  cy.mount({
+    Component: (
+      <SnackbarProvider>
+        <TestQueryProvider>
+          <Provider store={createStore()}>
+            <AccessRights
+              cancel={cancel}
+              endpoints={{
+                contact: '/contacts',
+                contactGroup: '/contact-groups'
+              }}
+              initialValues={initialValues}
+              labels={labels}
+              link={link}
+              loading={loading}
+              roles={roles}
+              submit={save}
+            />
+          </Provider>
+        </TestQueryProvider>
+      </SnackbarProvider>
+    )
+  });
+
+  return {
+    cancel,
+    save
+  };
+};
+
+describe('Access rights', () => {
+  it('displays the access rights in loading state', () => {
+    initialize({ loading: true });
+
+    cy.contains('Share dashboard with').should('be.visible');
+    cy.contains('Contact').should('be.visible');
+    cy.contains('Contact group').should('be.visible');
+    cy.findByLabelText('Add a contact').should('be.visible');
+    cy.findByTestId('add_role').should('be.disabled');
+    cy.findByTestId('add').should('be.disabled');
+    cy.findByLabelText('Copy link').should('be.visible');
+    cy.findByLabelText('Cancel').should('be.visible');
+    cy.findByLabelText('Save').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the access rights without link', () => {
+    initialize({ link: null });
+
+    cy.findByLabelText('Copy link').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the access rights with an empty list', () => {
+    initialize({ initialValues: emptyAccessRights });
+
+    cy.contains('The contact list is empty').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the access rights with an empty list', () => {
+    initialize({});
+
+    simpleAccessRights.forEach(({ name, email, isContactGroup, role }) => {
+      cy.contains(name).should('be.visible');
+      cy.contains(email).should('be.visible');
+      cy.get(`[data-groupChip="${name}"]`).should(
+        isContactGroup ? 'be.visible' : 'not.exist'
+      );
+      cy.findByTestId(`role-${name}`).should('have.value', role);
+      cy.findByTestId(`remove-${name}`).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a removed chip when the corresponding icon is clicked', () => {
+    initialize({});
+
+    cy.findByTestId(`remove-Leah McGlynn`).should(
+      'have.attr',
+      'data-removed',
+      'false'
+    );
+
+    cy.findByTestId(`remove-Leah McGlynn`).click();
+
+    cy.findByTestId(`remove-Leah McGlynn`).should(
+      'have.attr',
+      'data-removed',
+      'true'
+    );
+    cy.contains(labels.list.removed).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('restores the contact when the contact is removed and the corresponding icon is clicked', () => {
+    initialize({});
+
+    cy.findByTestId(`remove-Leah McGlynn`).click();
+
+    cy.findByTestId(`remove-Leah McGlynn`).should(
+      'have.attr',
+      'data-removed',
+      'true'
+    );
+    cy.contains(labels.list.removed).should('be.visible');
+
+    cy.findByTestId(`remove-Leah McGlynn`).click();
+
+    cy.findByTestId(`remove-Leah McGlynn`).should(
+      'have.attr',
+      'data-removed',
+      'false'
+    );
+    cy.contains(labels.list.removed).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('submits the new acces rights list without the removed contact', () => {
+    const { save } = initialize({});
+
+    cy.findByTestId(`remove-Leah McGlynn`).click();
+
+    cy.findByTestId(`remove-Leah McGlynn`).should(
+      'have.attr',
+      'data-removed',
+      'true'
+    );
+    cy.contains(labels.list.removed).should('be.visible');
+    cy.contains('1 removed').should('be.visible');
+
+    cy.contains(labels.actions.save)
+      .click()
+      .then(() => {
+        expect(save).to.have.been.calledWith(removedAccessRights);
+      });
+
+    cy.makeSnapshot();
+  });
+
+  it('submits the new acces rights list with the updated contact', () => {
+    const { save } = initialize({});
+
+    cy.findByTestId(`role-Leah McGlynn`).parent().click();
+
+    cy.get('li[data-value="editor"]').click();
+    cy.contains(labels.list.updated).should('be.visible');
+    cy.contains('1 updated').should('be.visible');
+
+    cy.contains(labels.actions.save)
+      .click()
+      .then(() => {
+        expect(save).to.have.been.calledWith(updatedAccessRights);
+      });
+
+    cy.makeSnapshot();
+  });
+
+  it('removes the updated chip when the contact role is updated and its initial role is assigned back', () => {
+    initialize({});
+
+    cy.findByTestId(`role-Leah McGlynn`).parent().click();
+
+    cy.get('li[data-value="editor"]').click();
+    cy.contains(labels.list.updated).should('be.visible');
+
+    cy.get('li[data-value="viewer"]').click();
+    cy.contains(labels.list.updated).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('retrieves contacts when the contact radio is selected', () => {
+    initialize({});
+
+    cy.contains(labels.add.contact).click();
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.makeSnapshot();
+  });
+
+  it('retrieves contact groups when the contact group radio is selected', () => {
+    initialize({});
+
+    cy.contains(labels.add.contactGroup).click();
+    cy.findByLabelText(labels.add.autocompleteContactGroup).click();
+
+    cy.waitForRequest('@getContactGroups');
+
+    cy.makeSnapshot();
+  });
+
+  it('adds the contact as viewer when a contact is selected and the corresponding button is clicked', () => {
+    initialize({});
+
+    cy.contains(labels.add.contact).click();
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 10').click();
+
+    cy.findByTestId('add').click();
+
+    cy.contains('Entity 10').should('be.visible');
+
+    cy.findByTestId('role-Entity 10').should('have.value', 'viewer');
+    cy.contains(labels.list.added).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('adds the contact group as editor when a contact group is selected and the corresponding button is clicked', () => {
+    initialize({});
+
+    cy.contains(labels.add.contactGroup).click();
+    cy.findByLabelText(labels.add.autocompleteContactGroup).click();
+
+    cy.waitForRequest('@getContactGroups');
+
+    cy.contains('Entity Group 10').click();
+    cy.findByTestId('add_role').parent().click();
+    cy.get('li[data-value="editor"]').click();
+    cy.findByTestId('add').click();
+
+    cy.contains('Entity Group 10').should('be.visible');
+
+    cy.findByTestId('role-Entity Group 10').should('have.value', 'editor');
+    cy.contains(labels.list.added).should('be.visible');
+    cy.contains('1 added').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays statistics when a contact is added, a contact is updated and a contact is removed', () => {
+    initialize({});
+
+    cy.contains(labels.add.contactGroup).click();
+    cy.findByLabelText(labels.add.autocompleteContactGroup).click();
+
+    cy.waitForRequest('@getContactGroups');
+
+    cy.contains('Entity Group 10').click();
+    cy.findByTestId('add_role').parent().click();
+    cy.get('li[data-value="editor"]').click();
+    cy.findByTestId('add').click();
+
+    cy.contains('Entity Group 10').should('be.visible');
+
+    cy.findByTestId(`role-Leah McGlynn`).parent().click();
+    cy.get('li[data-value="editor"]').click();
+
+    cy.findByTestId('remove-Jody Blanda').click();
+
+    cy.contains('1 added | 1 updated | 1 removed').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('clears the autocomplete when a contact is selected and the contact type is changed', () => {
+    initialize({});
+
+    cy.contains(labels.add.contact).click();
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 10').click();
+    cy.findByLabelText(labels.add.autocompleteContact).should(
+      'have.value',
+      'Entity  10'
+    );
+
+    cy.contains(labels.add.contactGroup).click();
+    cy.findByLabelText(labels.add.autocompleteContactGroup).should(
+      'have.value',
+      ''
+    );
+
+    cy.makeSnapshot();
+  });
+
+  it('removes the contact from the list when the contact has been to the list and the corresponding button is clicked', () => {
+    initialize({});
+
+    cy.contains(labels.add.contact).click();
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 10').click();
+
+    cy.findByTestId('add').click();
+
+    cy.contains('Entity 10').should('be.visible');
+
+    cy.contains(labels.list.added).should('be.visible');
+
+    cy.findByTestId('remove-Entity 10').click();
+
+    cy.contains('Entity 10').should('not.exist');
+    cy.contains(labels.list.added).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});