@centreon/ui 24.7.2 → 24.7.4

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

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

@@ -1,100 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { http, HttpResponse } 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: [
-        http.get('api/latest/contact?**', () => {
-          return HttpResponse.json(buildResult(false));
-        }),
-        http.get('api/latest/contactGroup?**', () => {
-          return HttpResponse.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

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

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

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

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

@@ -1,46 +0,0 @@
-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
-  };
-};