@centreon/ui 23.10.1-sync-release-33038.0 → 23.10.1-sync-release-34346.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-sync-release-33038.0",
+  "version": "23.10.1-sync-release-34346.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -119,6 +119,8 @@
     "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
     "lexical": "0.11.3",
+    "msw": "0.49.1",
+    "msw-storybook-addon": "^1.10.0",
     "notistack": "^2.0.8",
     "react-grid-layout": "^1.3.4",
     "react-html-parser": "^2.0.2",
@@ -152,5 +154,8 @@
   "jest-junit": {
     "suiteName": "jest tests",
     "output": "./junit.xml"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

package/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.1).
+ * Mock Service Worker (0.49.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
@@ -300,4 +300,4 @@ function sleep(timeMs) {
 async function respondWithMock(response) {
   await sleep(response.delay)
   return new Response(response.body, response)
-}
+}

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -33,6 +33,7 @@ import useFetchQuery from '../../../../api/useFetchQuery';
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
   baseEndpoint?: string;
+  changeIdValue: (item: TData) => number | string;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -62,6 +63,7 @@ const ConnectedAutocompleteField = (
     queryKey,
     allowUniqOption,
     baseEndpoint,
+    changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -238,17 +240,24 @@ const ConnectedAutocompleteField = (
 
         const moreOptions = page > 1 ? options : [];
 
+        const formattedList = changeIdValue
+          ? newOptions.result.map((item) => ({
+              ...item,
+              id: changeIdValue(item)
+            }))
+          : newOptions.result;
+
         if (!isEmpty(labelKey) && !isNil(labelKey)) {
-          const list = newOptions.result.map((item) =>
+          const list = formattedList.map((item) =>
             renameKey({ key: labelKey, newKey: 'name', object: item })
           );
           setOptions(moreOptions.concat(list as Array<TData>));
 
           return;
         }
-        setOptions(moreOptions.concat(newOptions.result));
+        setOptions(moreOptions.concat(formattedList));
 
-        setOptions(moreOptions.concat(newOptions.result as Array<TData>));
+        setOptions(moreOptions.concat(formattedList as Array<TData>));
 
         const total = prop('total', newOptions.meta) || 1;
         const limit = prop('limit', newOptions.meta) || 1;

package/src/Module/LicensedModule/LicenseCheck/index.tsx

@@ -1,10 +1,7 @@
-import * as React from 'react';
-
-import { isNil } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { FallbackPage } from '../../../FallbackPage/FallbackPage';
-import { PageSkeleton, useFetchQuery } from '../../..';
+import { MenuSkeleton, PageSkeleton, useFetchQuery } from '../../..';
 import { getModuleLicenseCheckEndpoint } from '../api';
 
 import { licenseDecoder } from './decoder';
@@ -17,17 +14,27 @@ import {
 
 export interface LicenseCheckProps {
   children: React.ReactElement;
+  isFederatedComponent?: boolean;
   moduleName: string;
 }
 
 interface ContentProps {
   children: React.ReactElement;
+  isFederatedComponent?: boolean;
   isValid: boolean;
 }
 
-const Content = ({ children, isValid }: ContentProps): JSX.Element => {
+const Content = ({
+  children,
+  isValid,
+  isFederatedComponent
+}: ContentProps): JSX.Element | null => {
   const { t } = useTranslation();
 
+  if (isFederatedComponent && !isValid) {
+    return null;
+  }
+
   return isValid ? (
     children
   ) : (
@@ -40,10 +47,11 @@ const Content = ({ children, isValid }: ContentProps): JSX.Element => {
 };
 
 const LicenseCheck = ({
+  isFederatedComponent,
   children,
   moduleName
 }: LicenseCheckProps): JSX.Element | null => {
-  const { isError, data } = useFetchQuery<License>({
+  const { isError, data, isLoading } = useFetchQuery<License>({
     decoder: licenseDecoder,
     getEndpoint: () => getModuleLicenseCheckEndpoint(moduleName),
     getQueryKey: () => ['license', moduleName]
@@ -55,10 +63,17 @@ const LicenseCheck = ({
 
   const isValid = data?.success;
 
-  return isNil(isValid) ? (
-    <PageSkeleton />
+  const skeleton = isFederatedComponent ? <MenuSkeleton /> : <PageSkeleton />;
+
+  return isLoading ? (
+    skeleton
   ) : (
-    <Content isValid={isValid as boolean}>{children}</Content>
+    <Content
+      isFederatedComponent={isFederatedComponent}
+      isValid={isValid as boolean}
+    >
+      {children}
+    </Content>
   );
 };
 

package/src/Module/LicensedModule/index.tsx

@@ -5,13 +5,19 @@ import LicenseCheck, { LicenseCheckProps } from './LicenseCheck';
 type Props = ModuleProps & LicenseCheckProps;
 
 const LicensedModule = ({
+  isFederatedComponent,
   moduleName,
   children,
   ...props
 }: Props): JSX.Element => {
   return (
     <Module {...props}>
-      <LicenseCheck moduleName={moduleName}>{children}</LicenseCheck>
+      <LicenseCheck
+        isFederatedComponent={isFederatedComponent}
+        moduleName={moduleName}
+      >
+        {children}
+      </LicenseCheck>
     </Module>
   );
 };

package/src/Typography/Subtitle.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+
+import { type, equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { Typography } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
+import { Tooltip } from '../components';
+
+interface Props {
+  children: ReactNode;
+  secondaryLabel?: string | Array<string>;
+}
+
+const Subtitle = ({ children, secondaryLabel }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  const containsSeveralSecondaryLabels = equals(type(secondaryLabel), 'Array');
+
+  return (
+    <Typography variant="subtitle1">
+      <strong>{children}</strong>
+      {secondaryLabel && (
+        <Tooltip
+          aria-label={
+            containsSeveralSecondaryLabels
+              ? secondaryLabel[0]
+              : (secondaryLabel as string)
+          }
+          followCursor={false}
+          label={
+            containsSeveralSecondaryLabels ? (
+              <>
+                {secondaryLabel.map((label) => (
+                  <p key={label}>{t(label)}</p>
+                ))}
+              </>
+            ) : (
+              t(secondaryLabel)
+            )
+          }
+          placement="right"
+        >
+          <HelpOutlineIcon
+            color="primary"
+            sx={{ ml: 1, verticalAlign: 'middle' }}
+          />
+        </Tooltip>
+      )}
+    </Typography>
+  );
+};
+
+export default Subtitle;

package/src/api/useFetchQuery/index.ts

@@ -21,6 +21,7 @@ export interface UseFetchQueryProps<T> {
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
+  doNotCancelCallsOnUnmount?: boolean;
   fetchHeaders?: HeadersInit;
   getEndpoint: (params?: PrefetchEndpointParams) => string;
   getQueryKey: () => QueryKey;
@@ -56,7 +57,8 @@ const useFetchQuery = <T extends object>({
   isPaginated,
   queryOptions,
   httpCodesBypassErrorSnackbar = [],
-  baseEndpoint
+  baseEndpoint,
+  doNotCancelCallsOnUnmount = false
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
   const dataRef = useRef<T | undefined>(undefined);
 
@@ -168,6 +170,10 @@ const useFetchQuery = <T extends object>({
 
   useEffect(() => {
     return (): void => {
+      if (doNotCancelCallsOnUnmount) {
+        return;
+      }
+
       queryClient.cancelQueries(getQueryKey());
     };
   }, []);

package/src/api/useMutationQuery/index.ts

@@ -81,7 +81,14 @@ const useMutationQuery = <T extends object, TMeta>({
     {
       onError,
       onMutate,
-      onSuccess
+      onSuccess: (data, variables, context) => {
+        if (data?.isError) {
+          onError?.(data, variables, context);
+
+          return;
+        }
+        onSuccess?.(data, variables, context);
+      }
     }
   );
 

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();
+  });
+});