@centreon/ui 26.3.4 → 26.3.6

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

@@ -1,14 +1,16 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+
 import { isNil } from 'ramda';
+import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-
+import {
+  type SelectEntry,
+  SingleConnectedAutocompleteField
+} from '../../../..';
 import { IconButton } from '../../..';
-import { SelectEntry, SingleConnectedAutocompleteField } from '../../../..';
 import RoleSelectField from '../common/RoleSelectField';
-import { Endpoints, Labels } from '../models';
-
-import { ReactElement } from 'react';
+import type { Endpoints, Labels } from '../models';
 import ContactSwitch from './ContactSwitch';
 import { useShareInputStyles } from './ShareInput.styles';
 import useShareInput from './useShareInput';
@@ -41,36 +43,36 @@ const ShareInput = ({ labels, endpoints, roles }: Props): ReactElement => {
       <ContactSwitch labels={labels} />
       <div className={classes.inputs}>
         <SingleConnectedAutocompleteField
-          clearable
-          fullWidth
           changeIdValue={changeIdValue}
+          clearable
           disableClearable={false}
           field="name"
+          fullWidth
           getEndpoint={getEndpoint}
-          getRenderedOptionText={getRenderedOptionText}
           getOptionDisabled={getOptionDisabled}
+          getRenderedOptionText={getRenderedOptionText}
           label={t(
             isContactGroup
               ? t(labels.autocompleteContactGroup)
               : t(labels.autocompleteContact)
           )}
+          onChange={selectContact}
           queryKey={isContactGroup ? labels.contactGroup : labels.contact}
           value={selectedContact}
-          onChange={selectContact}
         />
         <RoleSelectField
           disabled={isNil(selectedContact)}
+          onChange={setSelectedRole}
           roles={roles}
           testId="add_role"
           value={selectedRole}
-          onChange={setSelectedRole}
         />
         <IconButton
           data-testid="add"
           disabled={isNil(selectedContact)}
           icon={<AddCircleIcon />}
-          size="small"
           onClick={add}
+          size="small"
         />
       </div>
     </div>

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

@@ -1,23 +1,26 @@
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+
+import { useAtomValue, useSetAtom } from 'jotai';
+import { equals, includes, isNil } from 'ramda';
 import {
-  Dispatch,
-  ReactElement,
-  SetStateAction,
+  type Dispatch,
+  type ReactElement,
+  type SetStateAction,
   useEffect,
   useState
 } from 'react';
 
-import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, includes, isNil } from 'ramda';
-
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-
-import { SelectEntry, buildListingEndpoint } from '../../../..';
+import { buildListingEndpoint, type SelectEntry } from '../../../..';
 import {
   accessRightIdsDerivedAtom,
   addAccessRightDerivedAtom,
   contactTypeAtom
 } from '../atoms';
-import { AccessRightInitialValues, ContactType, Endpoints } from '../models';
+import {
+  type AccessRightInitialValues,
+  ContactType,
+  type Endpoints
+} from '../models';
 
 interface UseShareInputState {
   add: () => void;
@@ -106,8 +109,8 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
     changeIdValue,
     getEndpoint,
     getOptionDisabled,
-    isContactGroup,
     getRenderedOptionText,
+    isContactGroup,
     selectContact,
     selectedContact,
     selectedRole,

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

@@ -1,11 +1,11 @@
+import { Typography } from '@mui/material';
+
 import { useAtomValue } from 'jotai';
 import { identity } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { Typography } from '@mui/material';
-
 import { statsDerivedAtom } from '../atoms';
-import { Labels } from '../models';
+import type { Labels } from '../models';
 
 interface Props {
   labels: Labels['list'];

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

@@ -1,7 +1,11 @@
 import { atom } from 'jotai';
 import { equals, pluck, prop, remove, update } from 'ramda';
 
-import { AccessRight, AccessRightInitialValues, ContactType } from './models';
+import {
+  type AccessRight,
+  type AccessRightInitialValues,
+  ContactType
+} from './models';
 
 export const valuesAtom = atom<Array<AccessRight>>([]);
 export const initialValuesAtom = atom<Array<AccessRightInitialValues>>([]);

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

@@ -1,7 +1,6 @@
-import { SelectChangeEvent } from '@mui/material';
-
-import SelectField, { SelectEntry } from '../../../../InputField/Select';
+import type { SelectChangeEvent } from '@mui/material';
 
+import SelectField, { type SelectEntry } from '../../../../InputField/Select';
 import { useRoleSelectField } from './RoleSelectField.styles';
 
 interface Props {
@@ -29,14 +28,14 @@ const RoleSelectField = ({
   return (
     <div className={classes.roleContainer}>
       <SelectField
-        fullWidth
         dataTestId={testId}
         disabled={disabled}
+        fullWidth
         label={label}
+        onChange={change}
         options={roles}
         selectedOptionId={value}
         size="small"
-        onChange={change}
       />
     </div>
   );

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

@@ -1,9 +1,8 @@
 import { faker } from '@faker-js/faker';
 
-import { SelectEntry } from '../../..';
-import { Listing } from '../../../api/models';
-
-import { AccessRightInitialValues, Labels } from './models';
+import type { SelectEntry } from '../../..';
+import type { Listing } from '../../../api/models';
+import type { AccessRightInitialValues, Labels } from './models';
 
 faker.seed(42);
 

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

@@ -1,11 +1,9 @@
-import { useEffect } from 'react';
-
 import { useAtomValue } from 'jotai';
+import { useEffect } from 'react';
 
 import { useDeepCompare } from '../../../utils';
-
 import { valuesAtom } from './atoms';
-import { AccessRightInitialValues } from './models';
+import type { AccessRightInitialValues } from './models';
 import { formatValueForSubmition } from './utils';
 
 export const useAccessRightsChange = (

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

@@ -1,10 +1,9 @@
-import { useMemo } from 'react';
-
 import { useAtom, useSetAtom } from 'jotai';
 import { equals } from 'ramda';
+import { useMemo } from 'react';
 
 import { initialValuesAtom, valuesAtom } from './atoms';
-import { AccessRightInitialValues, ContactType } from './models';
+import { type AccessRightInitialValues, ContactType } from './models';
 
 interface Props {
   initialValues: Array<AccessRightInitialValues>;

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

@@ -1,6 +1,6 @@
 import { omit } from 'ramda';
 
-import { AccessRight, AccessRightInitialValues } from './models';
+import type { AccessRight, AccessRightInitialValues } from './models';
 
 export const formatValue = (
   accessRight: AccessRight

package/src/components/Form/Dashboard/DashboardDuplicationForm.tsx

@@ -1,14 +1,12 @@
-import { ReactElement, useCallback, useMemo } from 'react';
-
+import { type ReactElement, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { object, string } from 'yup';
 
-import { Form, FormProps } from '../../../Form';
+import { Form, type FormProps } from '../../../Form';
 import { InputType } from '../../../Form/Inputs/models';
-import { FormVariant } from '../Form.models';
-import { FormActions, FormActionsProps } from '../FormActions';
-
-import { DashboardResource } from './Dashboard.resource';
+import type { FormVariant } from '../Form.models';
+import { FormActions, type FormActionsProps } from '../FormActions';
+import type { DashboardResource } from './Dashboard.resource';
 import { useStyles } from './DashboardForm.styles';
 import {
   labelMustBeAtLeast,
@@ -60,7 +58,7 @@ const DashboardDuplicationForm = ({
           .required(t(labelRequired) as string)
       })
     }),
-    [labels, onSubmit]
+    [labels, onSubmit, name, t]
   );
 
   const Actions = useCallback(
@@ -68,8 +66,8 @@ const DashboardDuplicationForm = ({
       <FormActions<DashboardResource>
         enableSubmitWhenNotDirty
         labels={labels?.actions}
-        variant={variant}
         onCancel={onCancel}
+        variant={variant}
       />
     ),
     [labels, onCancel, variant]

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -1,15 +1,13 @@
-import { ReactElement, useCallback, useMemo } from 'react';
-
 import { equals } from 'ramda';
+import { type ReactElement, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { number, object, string } from 'yup';
 
-import { Form, FormProps } from '../../../Form';
+import { Form, type FormProps } from '../../../Form';
 import { InputType } from '../../../Form/Inputs/models';
-import { FormVariant } from '../Form.models';
-import { FormActions, FormActionsProps } from '../FormActions';
-
-import { DashboardResource } from './Dashboard.resource';
+import type { FormVariant } from '../Form.models';
+import { FormActions, type FormActionsProps } from '../FormActions';
+import type { DashboardResource } from './Dashboard.resource';
 import { useStyles } from './DashboardForm.styles';
 import GlobalRefreshFieldOption from './GlobalRefreshFieldOption';
 import {
@@ -113,15 +111,15 @@ const DashboardForm = ({
           .required(t(labelRequired) as string)
       })
     }),
-    [resource, labels, onSubmit]
+    [resource, labels, onSubmit, showRefreshIntervalFields, t]
   );
 
   const Actions = useCallback(
     () => (
       <FormActions<DashboardResource>
         labels={labels?.actions}
-        variant={variant}
         onCancel={onCancel}
+        variant={variant}
       />
     ),
     [labels, onCancel, variant]

package/src/components/Form/Dashboard/GlobalRefreshFieldOption.tsx

@@ -1,17 +1,15 @@
-import { ChangeEvent } from 'react';
+import { Typography } from '@mui/material';
+
+import { refreshIntervalAtom } from '@centreon/ui-context';
 
-import { FormikValues, useFormikContext } from 'formik';
+import { type FormikValues, useFormikContext } from 'formik';
 import { useAtomValue } from 'jotai';
 import pluralize from 'pluralize';
 import { isEmpty } from 'ramda';
+import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Typography } from '@mui/material';
-
-import { refreshIntervalAtom } from '@centreon/ui-context';
-
 import { TextField } from '../../..';
-
 import { useGlobalRefreshIntervalStyles } from './DashboardForm.styles';
 import {
   labelGlobalRefreshInterval,
@@ -42,6 +40,8 @@ const GlobalRefreshFieldOption = (): JSX.Element => {
       <TextField
         autoSize
         dataTestId={labelInterval}
+        onChange={changeInput}
+        size="compact"
         textFieldSlotsAndSlotProps={{
           slotProps: {
             htmlInput: {
@@ -50,10 +50,8 @@ const GlobalRefreshFieldOption = (): JSX.Element => {
             }
           }
         }}
-        size="compact"
         type="number"
         value={value || platformRefreshInterval}
-        onChange={changeInput}
       />
       <Typography>{pluralize(t(labelSeconds), value)}</Typography>
     </div>

package/src/components/Form/Dashboard/index.ts

@@ -1,3 +1,3 @@
-export * from './DashboardForm';
 export * from './Dashboard.resource';
 export * from './DashboardDuplicationForm';
+export * from './DashboardForm';

package/src/components/Form/FormActions.tsx

@@ -1,10 +1,8 @@
-import { ReactElement } from 'react';
-
 import { useFormikContext } from 'formik';
+import type { ReactElement } from 'react';
 
 import { Button } from '../Button';
-
-import { FormVariant } from './Form.models';
+import type { FormVariant } from './Form.models';
 import { useStyles } from './Form.styles';
 
 export type FormActionsProps = {
@@ -46,9 +44,9 @@ const FormActions = <TResource extends object>({
           aria-label={labels.cancel}
           data-testid="cancel"
           disabled={isSubmitting}
+          onClick={() => onCancel?.()}
           size="medium"
           variant="secondary"
-          onClick={() => onCancel?.()}
         >
           {labels.cancel}
         </Button>
@@ -57,10 +55,10 @@ const FormActions = <TResource extends object>({
         aria-label={labels.submit[variant]}
         data-testid="submit"
         disabled={isSubmitDisabled}
+        onClick={submitForm}
         size="medium"
         type="submit"
         variant="primary"
-        onClick={submitForm}
       >
         {labels.submit[variant]}
       </Button>

package/src/components/Form/index.ts

@@ -1,5 +1,7 @@
-export * from './Form.models';
+export {
+  AccessRights,
+  AccessRights as AccessRightsV2
+} from './AccessRights/AccessRights';
 export * from './Dashboard';
-export { AccessRights } from './AccessRights/AccessRights';
-export { AccessRights as AccessRightsV2 } from './AccessRights/AccessRights';
-export { type FormActionsProps, FormActions } from './FormActions';
+export * from './Form.models';
+export { FormActions, type FormActionsProps } from './FormActions';

package/src/components/Header/PageHeader/PageHeader.stories.tsx

@@ -1,14 +1,13 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import {
   Edit as EditIcon,
   Settings as SettingsIcon,
   StarOutline as StarOutlineIcon
 } from '@mui/icons-material';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { Button, IconButton } from '../../Button';
 import { Menu } from '../../Menu';
-
 import { PageHeader } from './index';
 
 type PageHeaderComponent = typeof PageHeader & typeof PageHeader.Title;

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -1,7 +1,7 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { alpha } from '@mui/system';
 
+import { makeStyles } from 'tss-react/mui';
+
 const useStyles = makeStyles()((theme) => ({
   header: {
     alignItems: 'flex-start',
@@ -51,10 +51,10 @@ const useStyles = makeStyles()((theme) => ({
   },
   pageHeaderMenu: {
     alignItems: 'flex-start',
+    alignSelf: 'center',
     display: 'flex',
     position: 'relative',
-    transform: `translateY(-${theme.spacing(0.25)})`,
-    alignSelf: 'center'
+    transform: `translateY(-${theme.spacing(0.25)})`
   },
   pageHeaderMessage: {
     alignItems: 'center',
@@ -86,19 +86,19 @@ const useStyles = makeStyles()((theme) => ({
       display: 'grid'
     },
     '& > span': {
+      alignItems: 'center',
       display: 'flex',
       flexDirection: 'row',
-      gap: theme.spacing(2),
-      alignItems: 'center'
+      gap: theme.spacing(2)
     },
+    alignSelf: 'flex-start',
     display: 'flex',
     flexDirection: 'column',
-    alignSelf: 'flex-start',
     h1: {
       ...theme.typography.h5,
       fontWeight: theme.typography.fontWeightBold,
-      margin: theme.spacing(0),
-      lineHeight: '1'
+      lineHeight: '1',
+      margin: theme.spacing(0)
     }
   },
   pageHeaderTitleActions: {
@@ -113,11 +113,11 @@ const useStyles = makeStyles()((theme) => ({
   },
   pageHeaderTitleDescription: {
     color: theme.palette.header.page.description,
+    lineHeight: '1.8',
     maxWidth: '560px',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    lineHeight: '1.8'
+    whiteSpace: 'nowrap'
   }
 }));
 

package/src/components/Header/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageHeader.styles';
 

package/src/components/Header/PageHeader/PageHeaderActions.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageHeader.styles';
 

package/src/components/Header/PageHeader/PageHeaderMain.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageHeader.styles';
 

package/src/components/Header/PageHeader/PageHeaderMenu.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageHeader.styles';
 

package/src/components/Header/PageHeader/PageHeaderMessage.tsx

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-
 import { Box, Typography } from '@mui/material';
 
+import type { ReactElement } from 'react';
+
 import { useStyles } from './PageHeader.styles';
 
 type PageHeaderMessageProps = {

package/src/components/Header/PageHeader/PageHeaderTitle.tsx

@@ -1,9 +1,8 @@
-import { ReactElement, ReactNode } from 'react';
-
 import { Typography as MuiTypography } from '@mui/material';
 
-import { TextOverflowTooltip } from '../../Tooltip/TextOverflowTooltip';
+import type { ReactElement, ReactNode } from 'react';
 
+import { TextOverflowTooltip } from '../../Tooltip/TextOverflowTooltip';
 import { useStyles } from './PageHeader.styles';
 
 type PageHeaderTitleProps = {

package/src/components/Inputs/Switch/Switch.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import Switch from './Switch';
 

package/src/components/Inputs/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import { Switch as MuiSwitch, SwitchProps } from '@mui/material';
+import { Switch as MuiSwitch, type SwitchProps } from '@mui/material';
 
 import { useSwitchStyles } from './Switch.styles';
 

package/src/components/ItemComposition/Item.tsx

@@ -1,9 +1,8 @@
-import { ReactElement } from 'react';
-
 import CloseIcon from '@mui/icons-material/Close';
 
-import { IconButton } from '..';
+import type { ReactElement } from 'react';
 
+import { IconButton } from '..';
 import { useItemStyles } from './ItemComposition.styles';
 
 type Props = {
@@ -31,9 +30,9 @@ export const Item = ({
           aria-label={labelDelete}
           data-testid={labelDelete}
           icon={<CloseIcon />}
+          onClick={onDeleteItem}
           size="small"
           variant="ghost"
-          onClick={onDeleteItem}
         />
       </div>
     </div>

package/src/components/ItemComposition/ItemComposition.cypress.spec.tsx

@@ -1,6 +1,5 @@
-import { Props } from './ItemComposition';
-
 import { ItemComposition } from '.';
+import type { Props } from './ItemComposition';
 
 const initialize = ({
   deleteButtonHidden,

package/src/components/ItemComposition/ItemComposition.stories.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/no-array-index-key */
-import { Meta, StoryObj } from '@storybook/react';
 
 import { Typography } from '@mui/material';
 
-import { SelectField } from '../..';
+import type { Meta, StoryObj } from '@storybook/react';
 
+import { SelectField } from '../..';
 import { ItemComposition } from '.';
 
 const meta: Meta<typeof ItemComposition> = {
@@ -61,16 +61,16 @@ export const WithSelectInputs: Story = {
         <SelectField
           dataTestId="select 1"
           label="select 1"
+          onChange={stub}
           options={options}
           selectedOptionId={1}
-          onChange={stub}
         />
         <SelectField
           dataTestId="select 2"
           label="select 2"
+          onChange={stub}
           options={options}
           selectedOptionId={2}
-          onChange={stub}
         />
       </ItemComposition.Item>
     )),

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -24,13 +24,6 @@ export const useItemCompositionStyles = makeStyles()((theme) => ({
     gap: theme.spacing(0.5),
     width: '100%'
   },
-  linkIcon: {
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(0.5, 0),
-    transform: `rotate3d(0, 0, 1, 90deg) translate3d(0, ${theme.spacing(
-      1.6
-    )}, 0)`
-  },
   linkedItems: {
     alignItems: 'center',
     border: `1px solid ${theme.palette.divider}`,
@@ -40,6 +33,13 @@ export const useItemCompositionStyles = makeStyles()((theme) => ({
     minHeight: '100%',
     position: 'relative',
     width: theme.spacing(1)
+  },
+  linkIcon: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(0.5, 0),
+    transform: `rotate3d(0, 0, 1, 90deg) translate3d(0, ${theme.spacing(
+      1.6
+    )}, 0)`
   }
 }));