@centreon/ui 24.9.4 → 24.9.6

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -1,38 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  actions: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  dataTableItem: {
-    '& .MuiCardActionArea-root': {
-      alignItems: 'flex-start',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      justifyContent: 'flex-start'
-    },
-    '& .MuiCardActions-root': {
-      '& > span': {
-        display: 'flex',
-        gap: theme.spacing(1)
-      },
-      display: 'flex',
-      justifyContent: 'space-between'
-    },
-    borderRadius: theme.shape.borderRadius,
-    display: 'flex',
-    flexDirection: 'column',
-    height: '186px',
-    justifyContent: 'space-between',
-    p: {
-      color: theme.palette.text.secondary,
-      letterSpacing: '0',
-      margin: '0'
-    }
-  }
-}));
-
-export { useStyles };

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -1,67 +0,0 @@
-import React, { forwardRef, ReactElement, RefObject, useMemo } from 'react';
-
-import {
-  Card as MuiCard,
-  CardActionArea as MuiCardActionArea,
-  CardActions as MuiCardActions,
-  CardContent as MuiCardContent,
-  Typography as MuiTypography
-} from '@mui/material';
-
-import { useStyles } from './DataTableItem.styles';
-
-export interface DataTableItemProps {
-  Actions?: JSX.Element;
-  description?: string;
-  hasActions?: boolean;
-  hasCardAction?: boolean;
-  onClick?: () => void;
-  title: string;
-}
-
-const DataTableItem = forwardRef(
-  (
-    {
-      title,
-      description,
-      hasCardAction = false,
-      hasActions = false,
-      onClick,
-      Actions
-    }: DataTableItemProps,
-    ref
-  ): ReactElement => {
-    const { classes } = useStyles();
-
-    const ActionArea = useMemo(
-      () => (hasCardAction ? MuiCardActionArea : React.Fragment),
-      [hasCardAction]
-    );
-
-    return (
-      <MuiCard
-        className={classes.dataTableItem}
-        data-item-title={title}
-        ref={ref as RefObject<HTMLDivElement>}
-        variant="outlined"
-      >
-        <ActionArea aria-label="view" onClick={() => onClick?.()}>
-          <MuiCardContent>
-            <MuiTypography fontWeight={500} variant="h5">
-              {title}
-            </MuiTypography>
-            {description && <MuiTypography>{description}</MuiTypography>}
-          </MuiCardContent>
-        </ActionArea>
-        {hasActions && (
-          <MuiCardActions>
-            <span />
-            <span>{Actions}</span>
-          </MuiCardActions>
-        )}
-      </MuiCard>
-    );
-  }
-);
-
-export { DataTableItem };

package/src/components/DataTable/Item/DataTableItemSkeleton.tsx

@@ -1,13 +0,0 @@
-import { ReactElement } from 'react';
-
-import { LoadingSkeleton } from '../../..';
-
-import { useStyles } from './DataTableItem.styles';
-
-const DataTableItemSkeleton = (): ReactElement => {
-  const { classes } = useStyles();
-
-  return <LoadingSkeleton className={classes.dataTableItem} />;
-};
-
-export { DataTableItemSkeleton };

package/src/components/DataTable/index.ts

@@ -1,12 +0,0 @@
-import { DataListing } from './DataListing';
-import { DataTable as DataTableRoot } from './DataTable';
-import { DataTableEmptyState } from './EmptyState/DataTableEmptyState';
-import { DataTableItem } from './Item/DataTableItem';
-import { DataTableItemSkeleton } from './Item/DataTableItemSkeleton';
-
-export const DataTable = Object.assign(DataTableRoot, {
-  EmptyState: DataTableEmptyState,
-  Item: DataTableItem,
-  ItemSkeleton: DataTableItemSkeleton,
-  Listing: DataListing
-});

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

@@ -1,379 +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',
-      '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('remove-Kathy Schmitt').click();
-    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('2 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 11').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('3 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 11').click();
-    cy.findByLabelText(labels.add.autocompleteContact).should(
-      'have.value',
-      'Entity  11'
-    );
-
-    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 11').click();
-
-    cy.findByTestId('add').click();
-
-    cy.contains('Entity 11').should('be.visible');
-
-    cy.contains(labels.list.added).should('be.visible');
-
-    cy.findByTestId('remove-Entity 11').click();
-
-    cy.contains('Entity 11').should('not.exist');
-    cy.contains('3 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 11').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 12').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 11').click();
-
-    cy.findByTestId('add').click();
-
-    cy.contains('Entity 11').should('be.visible');
-
-    cy.findByTestId('role-Entity 11').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 { AccessRights } from './AccessRights';
-import {
-  accessRightsWithStates,
-  buildResult,
-  defaultAccessRights,
-  emptyAccessRights,
-  labels,
-  roles
-} from './storiesData';
-
-const meta: Meta<typeof AccessRights> = {
-  component: AccessRights,
-  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>
-    <AccessRights {...args} />
-  </SnackbarProvider>
-);
-
-export default meta;
-type Story = StoryObj<typeof AccessRights>;
-
-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 AccessRightsContent = ({
-  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 const AccessRights = (props: Props): JSX.Element => (
-  <Provider>
-    <AccessRightsContent {...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'
-  }
-}));