@centreon/ui 24.5.12 → 24.5.13

package/src/components/Form/AccessRights/AccessRights.cypress.spec.tsx

@@ -0,0 +1,387 @@
+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
+}): unknown => {
+  const cancel = cy.stub();
+  const save = cy.stub();
+  const change = 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}
+              loading={loading}
+              roles={roles}
+              submit={save}
+              onChange={change}
+            />
+          </Provider>
+        </TestQueryProvider>
+      </SnackbarProvider>
+    )
+  });
+
+  return {
+    cancel,
+    change,
+    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('Cancel').should('be.visible');
+    cy.findByLabelText('Save').should('be.visible');
+
+    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 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-Kathy Schmitt`).should(
+      'have.attr',
+      'data-removed',
+      'false'
+    );
+
+    cy.findByTestId(`remove-Kathy Schmitt`).click();
+
+    cy.findByTestId(`remove-Kathy Schmitt`).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-Kathy Schmitt`).click();
+
+    cy.findByTestId(`remove-Kathy Schmitt`).should(
+      'have.attr',
+      'data-removed',
+      'true'
+    );
+    cy.contains(labels.list.removed).should('be.visible');
+
+    cy.findByTestId(`remove-Kathy Schmitt`).click();
+
+    cy.findByTestId(`remove-Kathy Schmitt`).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-Kathy Schmitt`).click();
+
+    cy.findByTestId(`remove-Kathy Schmitt`).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-Kathy Schmitt`).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-Kathy Schmitt`).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-Kathy Schmitt`).parent().click();
+    cy.get('li[data-value="editor"]').click();
+
+    cy.findByTestId('remove-Linda Schultz').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();
+  });
+
+  it('resets the role to "viewer" when the "editor" role is selected and a contact with "viewer" right is selected', () => {
+    initialize({});
+
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 10').click();
+
+    cy.findByTestId('add_role').parent().click();
+    cy.get('li[data-value="editor"]').click();
+
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 11').click();
+
+    cy.findByTestId('add_role').should('have.value', 'viewer');
+
+    cy.makeSnapshot();
+  });
+
+  it('calls the change function when the corresponding prop is set and the form is updated', () => {
+    const { change } = 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')
+      .then(() => {
+        expect(change).to.have.callCount(2);
+      });
+  });
+});

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

@@ -0,0 +1,100 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { rest } from 'msw';
+
+import { SnackbarProvider } from '../../..';
+
+import AccessRightsForm from './AccessRights';
+import {
+  accessRightsWithStates,
+  buildResult,
+  defaultAccessRights,
+  emptyAccessRights,
+  labels,
+  roles
+} from './storiesData';
+
+const meta: Meta<typeof AccessRightsForm> = {
+  component: AccessRightsForm,
+  parameters: {
+    msw: {
+      handlers: [
+        rest.get('api/latest/contact?**', (req, res, ctx) => {
+          return res(ctx.json(buildResult(false)));
+        }),
+        rest.get('api/latest/contactGroup?**', (req, res, ctx) => {
+          return res(ctx.json(buildResult(true)));
+        })
+      ]
+    }
+  }
+};
+
+const Template = (args): JSX.Element => (
+  <SnackbarProvider>
+    <AccessRightsForm {...args} />
+  </SnackbarProvider>
+);
+
+export default meta;
+type Story = StoryObj<typeof AccessRightsForm>;
+
+export const Default: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: defaultAccessRights,
+    labels,
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};
+
+export const AccessRightsWithStates: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: accessRightsWithStates,
+    labels,
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};
+
+export const withEmptyState: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: emptyAccessRights,
+    labels,
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};
+
+export const loading: Story = {
+  args: {
+    cancel: () => undefined,
+    endpoints: {
+      contact: '/contact',
+      contactGroup: '/contactGroup'
+    },
+    initialValues: emptyAccessRights,
+    labels,
+    loading: true,
+    roles,
+    submit: () => undefined
+  },
+  render: Template
+};

package/src/components/Form/AccessRights/AccessRights.styles.ts

@@ -0,0 +1,10 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useAccessRightsStyles = makeStyles()((theme) => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(3),
+    width: '100%'
+  }
+}));

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

@@ -0,0 +1,61 @@
+import { SelectEntry } from '../../..';
+
+import { useAccessRightsStyles } from './AccessRights.styles';
+import Actions from './Actions/Actions';
+import List from './List/List';
+import ListSkeleton from './List/ListSkeleton';
+import Provider from './Provider';
+import ShareInput from './ShareInput/ShareInput';
+import Stats from './Stats/Stats';
+import { AccessRightInitialValues, Endpoints, Labels } from './models';
+import { useAccessRightsChange } from './useAccessRightsChange';
+import { useAccessRightsInitValues } from './useAccessRightsInitValues';
+
+interface Props {
+  cancel?: ({ dirty, values }) => void;
+  endpoints: Endpoints;
+  initialValues: Array<AccessRightInitialValues>;
+  isSubmitting?: boolean;
+  labels: Labels;
+  loading?: boolean;
+  onChange?: (values: Array<AccessRightInitialValues>) => void;
+  roles: Array<SelectEntry>;
+  submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
+}
+
+export const AccessRights = ({
+  initialValues,
+  roles,
+  endpoints,
+  submit,
+  cancel,
+  loading,
+  labels,
+  isSubmitting,
+  onChange
+}: Props): JSX.Element => {
+  const { classes } = useAccessRightsStyles();
+  const clear = useAccessRightsInitValues({ initialValues });
+  useAccessRightsChange(onChange);
+
+  return (
+    <div className={classes.container}>
+      <ShareInput endpoints={endpoints} labels={labels.add} roles={roles} />
+      {loading ? <ListSkeleton /> : <List labels={labels.list} roles={roles} />}
+      <Stats labels={labels.list} />
+      <Actions
+        cancel={cancel}
+        clear={clear}
+        isSubmitting={isSubmitting}
+        labels={labels.actions}
+        submit={submit}
+      />
+    </div>
+  );
+};
+
+export default (props: Props): JSX.Element => (
+  <Provider>
+    <AccessRights {...props} />
+  </Provider>
+);

package/src/components/Form/AccessRights/Actions/Actions.styles.ts

@@ -0,0 +1,10 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useActionsStyles = makeStyles()((theme) => ({
+  cancelAndSave: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+    justifyContent: 'flex-end'
+  }
+}));

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

@@ -0,0 +1,64 @@
+import { useTranslation } from 'react-i18next';
+
+import { CircularProgress } from '@mui/material';
+
+import { Button } from '../../..';
+import { AccessRightInitialValues, Labels } from '../models';
+
+import { useActions } from './useActions';
+import { useActionsStyles } from './Actions.styles';
+
+interface Props {
+  cancel?: ({ dirty, values }) => void;
+  clear: () => void;
+  isSubmitting?: boolean;
+  labels: Labels['actions'];
+  submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
+}
+
+const Actions = ({
+  labels,
+  cancel,
+  submit,
+  isSubmitting,
+  clear
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const { classes } = useActionsStyles();
+
+  const { dirty, save, formattedValues } = useActions({
+    clear,
+    labels,
+    submit
+  });
+
+  const onCancel = (): void => {
+    cancel({ dirty, values: formattedValues });
+  };
+
+  return (
+    <div className={classes.cancelAndSave}>
+      {cancel && (
+        <Button
+          aria-label={t(labels.cancel)}
+          variant="secondary"
+          onClick={onCancel}
+        >
+          {t(labels.cancel)}
+        </Button>
+      )}
+      <Button
+        aria-label={t(labels.save)}
+        disabled={isSubmitting || !dirty}
+        icon={isSubmitting ? <CircularProgress size={24} /> : null}
+        iconVariant={isSubmitting ? 'start' : 'none'}
+        variant="primary"
+        onClick={save}
+      >
+        {t(labels.save)}
+      </Button>
+    </div>
+  );
+};
+
+export default Actions;

package/src/components/Form/AccessRights/Actions/useActions.ts

@@ -0,0 +1,46 @@
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
+
+import { initialValuesAtom, valuesAtom } from '../atoms';
+import { AccessRightInitialValues, Labels } from '../models';
+import { formatValue, formatValueForSubmition } from '../utils';
+
+interface Props {
+  clear: () => void;
+  labels: Labels['actions'];
+  submit: (values: Array<AccessRightInitialValues>) => Promise<void>;
+}
+
+interface UseActionsState {
+  dirty: boolean;
+  formattedValues: Array<AccessRightInitialValues>;
+  save: () => void;
+}
+
+export const useActions = ({ submit, clear }: Props): UseActionsState => {
+  const values = useAtomValue(valuesAtom);
+  const initialValues = useAtomValue(initialValuesAtom);
+
+  const formattedValues = values
+    .filter(({ isRemoved }) => !isRemoved)
+    .map(formatValue);
+
+  const dirty = !equals(initialValues, formattedValues);
+
+  const save = (): void => {
+    submit(
+      values.filter(({ isRemoved }) => !isRemoved).map(formatValueForSubmition)
+    )?.then((isError) => {
+      if (isError) {
+        return;
+      }
+      clear();
+    });
+  };
+
+  return {
+    dirty,
+    formattedValues,
+    save
+  };
+};