@centreon/ui 24.4.1-MON-32852.1 → 24.4.1-MON-33898.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-32852.1",
+  "version": "24.4.1-MON-33898.9",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Icon/index.stories.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import AccessibilityIcon from '@mui/icons-material/Accessibility';
 import { Theme } from '@mui/material';
 
-import IconButton from '.';
+import { IconButton } from '.';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   root: {

package/src/Button/Icon/index.tsx

@@ -38,7 +38,7 @@ type Props = {
     | 'top-start';
 } & IconButtonProps;
 
-const IconButton = ({
+export const IconButton = ({
   title = '',
   ariaLabel,
   className,

package/src/InputField/Search/index.tsx

@@ -1,8 +1,8 @@
 import IconSearch from '@mui/icons-material/Search';
 
-import TextField, { TextProps } from '../Text';
+import TextField, { Props as TextFieldProps } from '../Text';
 
-type Props = Omit<TextProps, 'StartAdornment'>;
+type Props = Omit<TextFieldProps, 'StartAdornment'>;
 
 const SearchAdornment = (): JSX.Element => <IconSearch />;
 

package/src/InputField/Select/IconPopover/index.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import IconReset from '@mui/icons-material/RotateLeft';
 
-import IconButton from '../../../Button/Icon';
+import { IconButton } from '../../..';
 import Option from '../Option';
 import { SelectEntry } from '..';
 

package/src/InputField/Text/index.tsx

@@ -17,36 +17,38 @@ import { getNormalizedId } from '../../utils';
 
 import useAutoSize from './useAutoSize';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  autoSizeCompact: {
-    paddingRight: theme.spacing(1),
-    paddingTop: theme.spacing(0.6)
-  },
-  hiddenText: {
-    display: 'table',
-    lineHeight: 0,
-    transform: 'scaleY(0)'
-  },
-  input: {
-    fontSize: theme.typography.body1.fontSize
-  },
-  inputBase: {
-    display: 'inline-flex',
-    justifyItems: 'start',
-    paddingRight: theme.spacing(1)
-  },
-  noLabelInput: {
-    padding: theme.spacing(1)
-  },
-  textField: {
-    transition: theme.transitions.create(['width'], {
-      duration: theme.transitions.duration.shortest
-    })
-  },
-  transparent: {
-    backgroundColor: 'transparent'
-  }
-}));
+const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
+  (theme: Theme, { displayAsBlock }) => ({
+    autoSizeCompact: {
+      paddingRight: theme.spacing(1),
+      paddingTop: theme.spacing(0.6)
+    },
+    hiddenText: {
+      display: 'table',
+      lineHeight: 0,
+      transform: 'scaleY(0)'
+    },
+    input: {
+      fontSize: theme.typography.body1.fontSize
+    },
+    inputBase: {
+      display: displayAsBlock ? 'block' : 'inline-flex',
+      justifyItems: 'start',
+      paddingRight: theme.spacing(1)
+    },
+    noLabelInput: {
+      padding: theme.spacing(1)
+    },
+    textField: {
+      transition: theme.transitions.create(['width'], {
+        duration: theme.transitions.duration.shortest
+      })
+    },
+    transparent: {
+      backgroundColor: 'transparent'
+    }
+  })
+);
 
 interface OptionalLabelInputAdornmentProps {
   children: React.ReactNode;
@@ -70,7 +72,7 @@ const OptionalLabelInputAdornment = ({
 
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
-export type TextProps = {
+export type Props = {
   EndAdornment?: React.FC;
   StartAdornment?: React.FC;
   ariaLabel?: string;
@@ -112,18 +114,17 @@ const TextField = forwardRef(
       defaultValue,
       required = false,
       containerClassName,
-      type,
       ...rest
-    }: TextProps,
+    }: Props,
     ref: React.ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
-    const { classes, cx } = useStyles();
+    const { classes, cx } = useStyles({
+      displayAsBlock: autoSize && isNil(StartAdornment) && isNil(EndAdornment)
+    });
 
     const { inputRef, width, changeInputValue, innerValue } = useAutoSize({
       autoSize,
-      autoSizeCustomPadding: equals(type, 'number')
-        ? Math.max(6, autoSizeCustomPadding || 0)
-        : autoSizeCustomPadding,
+      autoSizeCustomPadding,
       autoSizeDefaultWidth,
       value: externalValueForAutoSize || rest.value
     });
@@ -195,7 +196,6 @@ const TextField = forwardRef(
               width: autoSize ? width : undefined,
               ...rest?.sx
             }}
-            type={type}
           />
         </Tooltip>
         {autoSize && (

package/src/Listing/ActionBar/index.tsx

@@ -9,10 +9,9 @@ import Divider from '@mui/material/Divider';
 
 import { userAtom, ListingVariant } from '@centreon/ui-context';
 
-import { ListingProps } from '../..';
+import { ListingProps, IconButton } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
 import { useMemoComponent } from '../../utils';
-import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';

package/src/Panel/index.tsx

@@ -9,7 +9,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Paper, Slide, Divider, AppBar, Tabs } from '@mui/material';
 import IconClose from '@mui/icons-material/Clear';
 
-import IconButton from '../Button/Icon';
+import { IconButton } from '..';
 
 import { minTabHeight } from './Tab';
 

package/src/components/Form/{AccessRightsV2 → AccessRights}/AccessRights.cypress.spec.tsx

@@ -347,4 +347,27 @@ describe('Access rights', () => {
 
     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();
+  });
 });

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/ContactSwitch.tsx

@@ -7,11 +7,14 @@ import { ContactType, Labels } from '../models';
 import { contactTypeAtom } from '../atoms';
 import { Subtitle } from '../../../..';
 
+import { useContactSwitchStyles } from './ShareInput.styles';
+
 interface Props {
   labels: Labels['add'];
 }
 
 const ContactSwitch = ({ labels }: Props): JSX.Element => {
+  const { classes } = useContactSwitchStyles();
   const { t } = useTranslation();
 
   const setContactType = useSetAtom(contactTypeAtom);
@@ -23,7 +26,12 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
   return (
     <>
       <Subtitle>{t(labels.title)}</Subtitle>
-      <RadioGroup row defaultValue={ContactType.Contact} onChange={change}>
+      <RadioGroup
+        row
+        className={classes.inputs}
+        defaultValue={ContactType.Contact}
+        onChange={change}
+      >
         <FormControlLabel
           control={<Radio />}
           label={labels.contact}

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/ShareInput.styles.ts

@@ -7,3 +7,11 @@ export const useShareInputStyles = makeStyles()((theme) => ({
     gridTemplateColumns: `1fr min-content min-content`
   }
 }));
+
+export const useContactSwitchStyles = makeStyles()((theme) => ({
+  inputs: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2)
+  }
+}));

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/useShareInput.tsx

@@ -40,6 +40,10 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
+    if (equals('editor', entry.most_permissive_role)) {
+      return;
+    }
+    setSelectedRole('viewer');
   };
 
   const add = (): void => {

package/src/components/Form/{AccessRightsV2 → AccessRights}/models.ts

@@ -2,6 +2,7 @@ export interface AccessRightInitialValues {
   email?: string;
   id: number | string;
   isContactGroup: boolean;
+  most_permissive_role?: 'editor' | 'viewer';
   name: string;
   role: string;
 }

package/src/components/Form/{AccessRightsV2 → AccessRights}/storiesData.ts

@@ -88,6 +88,7 @@ const buildEntities = (from, isGroup): Array<SelectEntry> => {
     .map((_, index) => ({
       email: isGroup ? undefined : faker.internet.email(),
       id: 1000 + index,
+      most_permissive_role: index % 3 === 0 ? 'editor' : 'viewer',
       name: `Entity ${isGroup ? 'Group' : ''} ${from + index}`
     }));
 };

package/src/components/Form/index.ts

@@ -1,4 +1,4 @@
 export * from './Form.models';
 export * from './Dashboard';
-export * from './AccessRights';
-export { default as AccessRightsV2 } from './AccessRightsV2/AccessRights';
+export { default as AccessRights } from './AccessRights/AccessRights';
+export { default as AccessRightsV2 } from './AccessRights/AccessRights';

package/src/index.ts

@@ -23,7 +23,6 @@ export { default as RegexpHelpTooltip } from './InputField/Search/RegexpHelpTool
 
 export { default as TextField } from './InputField/Text';
 export type { Props as TextFieldProps } from './InputField/Text';
-export { default as NumberField } from './InputField/Number/Number';
 
 export type { SelectEntry } from './InputField/Select';
 export { default as SelectField } from './InputField/Select';

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -1,85 +0,0 @@
-import NumberField, { NumberProps } from './Number';
-
-const initialize = (props: NumberProps): void => {
-  cy.mount({
-    Component: <NumberField {...props} />
-  });
-};
-
-describe('Number field', () => {
-  it('displays the placeholder when the field has no default or fallback values', () => {
-    initialize({ dataTestId: 'test', onChange: cy.stub() });
-
-    cy.get('input').should('have.value', '');
-    cy.get('input').should('have.attr', 'placeholder', '0');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the fallback value as placeholder when the field as no default value', () => {
-    initialize({ dataTestId: 'test', fallbackValue: 25, onChange: cy.stub() });
-
-    cy.get('input').should('have.value', '');
-    cy.get('input').should('have.attr', 'placeholder', '25');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the default value as placeholder when the field as default value', () => {
-    initialize({ dataTestId: 'test', defaultValue: 25, onChange: cy.stub() });
-
-    cy.get('input').should('have.value', '25');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the fallback value when the field is cleared out', () => {
-    initialize({
-      dataTestId: 'test',
-      defaultValue: 25,
-      fallbackValue: 10,
-      onChange: cy.stub()
-    });
-
-    cy.get('input').should('have.value', '25');
-    cy.get('input').clear();
-    cy.get('input').should('have.value', '');
-    cy.get('input').should('have.attr', 'placeholder', '10');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the field using auto size', () => {
-    initialize({
-      autoSize: true,
-      dataTestId: 'test',
-      defaultValue: 25,
-      onChange: cy.stub()
-    });
-
-    cy.get('input').should('have.value', '25');
-
-    cy.get('input').type('0');
-
-    cy.makeSnapshot();
-  });
-
-  it('sets the value to the minimum value configured when a value less than the minimum value is typed in the field', () => {
-    initialize({
-      dataTestId: 'test',
-      defaultValue: 25,
-      inputProps: {
-        min: 2
-      },
-      onChange: cy.stub()
-    });
-
-    cy.get('input').should('have.value', '25');
-
-    cy.get('input').clear().type('-1');
-
-    cy.get('input').should('have.value', '2');
-
-    cy.makeSnapshot();
-  });
-});

package/src/InputField/Number/Number.stories.tsx

@@ -1,66 +0,0 @@
-/* eslint-disable no-console */
-import { Meta, StoryObj } from '@storybook/react';
-
-import NumberField from './Number';
-
-const meta: Meta<typeof NumberField> = {
-  argTypes: {
-    defaultValue: {
-      defaultValue: 0,
-      description:
-        'The initial value which will be used by the input for the first render',
-      type: 'number'
-    },
-    fallbackValue: {
-      defaultValue: 0,
-      description: 'This value will be used when the input is cleared',
-      type: 'number'
-    },
-    onChange: {
-      description:
-        'The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out',
-      type: 'function'
-    }
-  },
-  component: NumberField
-};
-
-export default meta;
-type Story = StoryObj<typeof NumberField>;
-
-export const Default: Story = {
-  args: {
-    onChange: console.log
-  }
-};
-
-export const WithDefaultValue: Story = {
-  args: {
-    defaultValue: 25,
-    onChange: console.log
-  }
-};
-
-export const WithFallbackValue: Story = {
-  args: {
-    fallbackValue: 25,
-    onChange: console.log
-  }
-};
-
-export const WithFallbackValueAndDefaultValue: Story = {
-  args: {
-    defaultValue: 10,
-    fallbackValue: 25,
-    onChange: console.log
-  }
-};
-
-export const WithFallbackValueAndDefaultValueAutoSize: Story = {
-  args: {
-    autoSize: true,
-    defaultValue: 10,
-    fallbackValue: 25,
-    onChange: console.log
-  }
-};

package/src/InputField/Number/Number.tsx

@@ -1,74 +0,0 @@
-import { ChangeEvent, useState } from 'react';
-
-import { T, always, cond, isEmpty, isNil } from 'ramda';
-
-import TextField, { TextProps } from '../Text';
-
-export interface NumberProps
-  extends Omit<TextProps, 'defaultValue' | 'onChange'> {
-  /**
-   * The initial value which will be used by the input for the first render
-   */
-  defaultValue?: number;
-  /**
-   *  This value will be used when the input is cleared
-   */
-  fallbackValue?: number;
-  /**
-   * The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out
-   */
-  onChange: (actualValue: number) => void;
-}
-
-const NumberField = ({
-  fallbackValue = 0,
-  defaultValue,
-  onChange,
-  ...props
-}: NumberProps): JSX.Element => {
-  const [placeholder, setPlaceholder] = useState<string | undefined>();
-  const [actualValue, setActualValue] = useState(
-    defaultValue ? `${defaultValue}` : ''
-  );
-
-  const { inputProps } = props;
-
-  const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
-    const inputValue = event.target.value;
-
-    const number = Number(inputValue);
-    const campledNumber = cond([
-      [() => isEmpty(inputValue), always(fallbackValue)],
-      [() => Number.isNaN(number), always(number)],
-      [
-        T,
-        always(
-          Math.max(
-            !isNil(inputProps?.min) ? inputProps?.min : -Infinity,
-            number
-          )
-        )
-      ]
-    ])();
-
-    onChange(campledNumber);
-    setPlaceholder(isEmpty(inputValue) ? `${fallbackValue}` : undefined);
-    setActualValue(isEmpty(inputValue) ? inputValue : `${campledNumber}`);
-  };
-
-  return (
-    <TextField
-      defaultValue={defaultValue}
-      type="number"
-      value={actualValue}
-      onChange={changeValue}
-      {...props}
-      inputProps={inputProps}
-      placeholder={
-        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
-      }
-    />
-  );
-};
-
-export default NumberField;

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

@@ -1,45 +0,0 @@
-export type ContactAccessRightState =
-  | 'added'
-  | 'updated'
-  | 'removed'
-  | 'unchanged';
-
-export type ContactAccessRightStateResource = {
-  contactAccessRight: ContactAccessRightResource;
-  state: ContactAccessRightState;
-  stateHistory: Array<ContactAccessRightState>;
-};
-
-export type ContactAccessRightResource = {
-  contact: ContactResource | ContactGroupResource | null;
-  role: RoleResource['role'];
-};
-
-export type ContactResource = {
-  email?: string;
-  id?: number | string;
-  name: string;
-  type: 'contact';
-};
-
-export const isContactResource = (
-  resource: ContactResource | ContactGroupResource | null
-): resource is ContactResource => {
-  return resource?.type === 'contact';
-};
-
-export type ContactGroupResource = {
-  id?: number | string;
-  name: string;
-  type: 'contact_group';
-};
-
-export const isContactGroupResource = (
-  resource: ContactResource | ContactGroupResource | null
-): resource is ContactResource => {
-  return resource?.type === 'contact_group';
-};
-
-export type RoleResource = {
-  role: 'viewer' | 'editor' | string;
-};

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

@@ -1,59 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { AccessRightsForm } from './AccessRightsForm';
-import { Default as DefaultContactAccessRightsListStory } from './List/ContactAccessRightsList.stories';
-import { Default as DefaultContactAccessRightInputStory } from './Input/ContactAccessRightInput.stories';
-import { ContactAccessRightsListProps } from './List/ContactAccessRightsList';
-import { ContactAccessRightInputProps } from './Input/ContactAccessRightInput';
-import {
-  contactAccessRightsMock,
-  contactsAndGroupsMock
-} from './__fixtures__/contactAccessRight.mock';
-
-const meta: Meta<typeof AccessRightsForm> = {
-  component: AccessRightsForm
-};
-
-export default meta;
-type Story = StoryObj<typeof AccessRightsForm>;
-
-export const Default: Story = {
-  args: {
-    initialValues: contactAccessRightsMock(12),
-    labels: {
-      actions: {
-        cancel: 'Cancel',
-        copyLink: 'Copy link',
-        copyLinkMessages: {
-          error: 'Unable to copy link',
-          success: 'Link copied'
-        },
-        submit: 'Update'
-      },
-      input: {
-        ...DefaultContactAccessRightInputStory.args?.labels
-      } as ContactAccessRightInputProps['labels'],
-      list: {
-        ...DefaultContactAccessRightsListStory.args?.labels
-      } as ContactAccessRightsListProps['labels'],
-      stats: {
-        added: 'added',
-        removed: 'removed',
-        updated: 'updated'
-      }
-    },
-    options: {
-      contacts: contactsAndGroupsMock(25),
-      roles: [{ role: 'viewer' }, { role: 'editor' }]
-    },
-    resourceLink: 'https://app.centreon.com/resource/1'
-  }
-};
-
-export const AsEmptyState: Story = {
-  args: {
-    labels: Default.args?.labels,
-    options: Default.args?.options,
-    resourceLink: Default.args?.resourceLink
-  }
-};

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

@@ -1,21 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  accessRightsForm: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(6),
-
-    maxWidth: '520px',
-    paddingTop: theme.spacing(3),
-
-    width: '100%'
-  },
-  accessRightsFormList: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1)
-  }
-}));
-
-export { useStyles };