@centreon/ui 24.4.59 → 24.4.61

package/src/FileDropZone/index.tsx

@@ -98,7 +98,9 @@ const getExtensions = cond([
   [T, identity]
 ]) as (accept: string) => Array<string>;
 
-export const transformFileListToArray = (files: FileList | null): Array<File> =>
+export const transformFileListToArray = (
+  files: FileList | null
+): Array<File> =>
   isNil(files)
     ? []
     : (Array(files.length)

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

@@ -0,0 +1,133 @@
+import { object } from 'yup';
+import { faker } from '@faker-js/faker';
+import { useFormikContext } from 'formik';
+
+import { Typography } from '@mui/material';
+
+import { Button } from '../components';
+
+import { Form } from './Form';
+import { InputType } from './Inputs/models';
+
+faker.seed(42);
+
+const AddItem = ({ addItem }: { addItem: (item) => void }): JSX.Element => {
+  const { values } = useFormikContext();
+  const add = (): void => {
+    addItem({
+      alias: faker.company.name(),
+      id: values.list.length,
+      name: faker.person.firstName()
+    });
+  };
+
+  return (
+    <Button variant="ghost" onClick={add}>
+      Add item
+    </Button>
+  );
+};
+
+const SortContent = ({
+  name,
+  alias
+}: {
+  alias: string;
+  name: string;
+}): JSX.Element => (
+  <Typography>
+    {name} ({alias})
+  </Typography>
+);
+
+const initializeFormList = (): void => {
+  cy.mount({
+    Component: (
+      <Form
+        initialValues={{
+          list: []
+        }}
+        inputs={[
+          {
+            fieldName: 'list',
+            group: '',
+            label: '',
+            list: {
+              AddItem,
+              SortContent,
+              addItemLabel: 'Add an item to the list',
+              itemProps: ['id', 'name', 'alias'],
+              sortLabel: 'Sort items'
+            },
+            type: InputType.List
+          }
+        ]}
+        submit={cy.stub()}
+        validationSchema={object()}
+      />
+    )
+  });
+};
+
+describe('Form list', () => {
+  beforeEach(initializeFormList);
+
+  it('adds an element to the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Christelle (Schinner - Wiegand)').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('sorts elements in the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.findByLabelText('sort-1').should('be.visible');
+    cy.findByLabelText('delete-1').should('be.visible');
+    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+
+    cy.moveSortableElementUsingAriaLabel({
+      ariaLabel: 'sort-0',
+      direction: 'down'
+    });
+
+    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
+    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('removes an element from the list', () => {
+    cy.contains('Add an item to the list').should('be.visible');
+    cy.contains('Sort items').should('be.visible');
+
+    cy.contains('Add item').click();
+    cy.contains('Add item').click();
+
+    cy.findByLabelText('sort-0').should('be.visible');
+    cy.findByLabelText('delete-0').should('be.visible');
+    cy.contains('Lea (Streich - Hartmann)').should('be.visible');
+    cy.findByLabelText('sort-1').should('be.visible');
+    cy.findByLabelText('delete-1').should('be.visible');
+    cy.contains('Akeem (Quigley LLC)').should('be.visible');
+
+    cy.findByLabelText('delete-0').click();
+
+    cy.contains('Lea (Streich - Hartmann)').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Form/Inputs/List/Content.tsx

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+
+import KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+
+import { IconButton } from '../../../components';
+
+import { useListStyles } from './List.styles';
+
+export interface ContentProps {
+  attributes;
+  children: ReactNode;
+  deleteItem: (id: string) => () => void;
+  id: string;
+  isDragging: boolean;
+  isInDragOverlay?: boolean;
+  itemRef: React.RefObject<HTMLDivElement>;
+  listeners: DraggableSyntheticListeners;
+  name: string;
+  style;
+}
+
+const Content = ({
+  listeners,
+  itemRef,
+  attributes,
+  style,
+  isDragging,
+  id,
+  children,
+  deleteItem
+}: ContentProps): JSX.Element => {
+  const { classes } = useListStyles();
+
+  return (
+    <div
+      className={classes.content}
+      ref={itemRef}
+      {...attributes}
+      style={style}
+    >
+      <IconButton
+        data-dragging={isDragging}
+        size="small"
+        {...listeners}
+        aria-label={`sort-${id}`}
+        icon={<KrilinIndicatorIcon fontSize="small" />}
+      />
+      <div className={classes.innerContent}>{children}</div>
+      <IconButton
+        aria-label={`delete-${id}`}
+        icon={<DeleteOutlineIcon color="error" fontSize="small" />}
+        size="small"
+        onClick={deleteItem(id)}
+      />
+    </div>
+  );
+};
+
+export default Content;

package/src/Form/Inputs/List/List.styles.ts

@@ -0,0 +1,29 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useListStyles = makeStyles()((theme) => ({
+  content: {
+    '& [data-dragging="false"]': {
+      cursor: 'grab'
+    },
+    '& [data-dragging="true"]': {
+      cursor: 'grabbing'
+    },
+    alignItems: 'center',
+    borderBottom: `1px dashed ${theme.palette.action.disabledBackground}`,
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(1, 0)
+  },
+  innerContent: {
+    flexGrow: 1
+  },
+  items: {
+    maxHeight: theme.spacing(16),
+    overflowY: 'auto'
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1)
+  }
+}));

package/src/Form/Inputs/List/List.tsx

@@ -0,0 +1,58 @@
+import { ComponentType } from 'react';
+
+import { closestCenter } from '@dnd-kit/core';
+import { verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { useTranslation } from 'react-i18next';
+
+import { InputPropsWithoutGroup } from '../models';
+import { SortableItems, Subtitle } from '../../..';
+
+import { useList } from './useList';
+import { useListStyles } from './List.styles';
+import Content, { ContentProps } from './Content';
+
+const List = ({
+  list,
+  fieldName
+}: InputPropsWithoutGroup): JSX.Element | null => {
+  const { t } = useTranslation();
+  const { classes } = useListStyles();
+
+  const { addItem, sortList, sortedList, deleteItem } = useList({ fieldName });
+
+  const { AddItem, addItemLabel, sortLabel, SortContent, itemProps } = list as {
+    AddItem: ComponentType<{ addItem }>;
+    SortContent: ComponentType;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
+
+  return (
+    <div className={classes.list}>
+      {addItemLabel && <Subtitle>{t(addItemLabel)}</Subtitle>}
+      <AddItem addItem={addItem} />
+      {sortLabel && <Subtitle>{t(sortLabel)}</Subtitle>}
+      <div className={classes.items}>
+        <SortableItems
+          updateSortableItemsOnItemsChange
+          // eslint-disable-next-line react/no-unstable-nested-components
+          Content={(props: Omit<ContentProps, 'children' | 'deleteItem'>) => (
+            <Content {...props} deleteItem={deleteItem}>
+              <SortContent {...props} />
+            </Content>
+          )}
+          collisionDetection={closestCenter}
+          itemProps={itemProps}
+          items={sortedList}
+          sortingStrategy={verticalListSortingStrategy}
+          onDragEnd={({ items }): void => {
+            sortList(items);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default List;

package/src/Form/Inputs/List/useList.ts

@@ -0,0 +1,81 @@
+import { useMemo, useRef } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import {
+  append,
+  equals,
+  inc,
+  isEmpty,
+  pluck,
+  prop,
+  reject,
+  sortBy
+} from 'ramda';
+
+import { SelectEntry } from '../../..';
+
+interface UseListState {
+  addItem: (newItem: SelectEntry) => void;
+  deleteItem: (id: string) => () => void;
+  sortList: (items: Array<string>) => void;
+  sortedList: Array<unknown>;
+}
+
+export const useList = ({ fieldName }): UseListState => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const maxOrder = useRef(0);
+
+  const list = values[fieldName];
+
+  const sortedList = useMemo(
+    () =>
+      sortBy(prop('order'), list).map(({ id, ...props }) => ({
+        id: `${id}`,
+        ...props
+      })),
+    [list]
+  );
+
+  const addItem = (newItem: SelectEntry): void => {
+    setFieldValue(
+      fieldName,
+      append(
+        {
+          ...newItem,
+          id: (newItem as SelectEntry).id as number,
+          order: inc(maxOrder.current)
+        },
+        list
+      )
+    );
+  };
+
+  const deleteItem = (id: string) => (): void => {
+    const newItems = reject((item) => equals(Number(id), item.id))(list);
+
+    setFieldValue(fieldName, newItems);
+  };
+
+  const sortList = (items: Array<string>): void => {
+    const newOrderedList = items.map((itemId, idx) => {
+      const item = sortedList.find(({ id }) => equals(id, itemId));
+
+      return {
+        ...item,
+        id: Number(item?.id),
+        order: inc(idx)
+      };
+    });
+
+    setFieldValue(fieldName, newOrderedList);
+  };
+
+  maxOrder.current = isEmpty(list) ? 0 : Math.max(...pluck('order', list));
+
+  return {
+    addItem,
+    deleteItem,
+    sortList,
+    sortedList
+  };
+};

package/src/Form/Inputs/Text.tsx

@@ -29,7 +29,8 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text
+  text,
+  autoFocus
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -109,6 +110,7 @@ const Text = ({
         fullWidth
         EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
+        autoFocus={autoFocus}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}

package/src/Form/Inputs/index.tsx

@@ -21,6 +21,7 @@ import CheckboxGroup from './CheckboxGroup';
 import Checkbox from './Checkbox';
 import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
+import List from './List/List';
 
 export const getInput = R.cond<
   Array<InputType>,
@@ -66,6 +67,7 @@ export const getInput = R.cond<
     R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
     R.always(CheckboxGroup)
   ],
+  [R.equals(InputType.List) as (b: InputType) => boolean, R.always(List)],
   [R.T, R.always(TextInput)]
 ]);
 
@@ -185,7 +187,7 @@ const Inputs = ({
         const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq('name', groupName), groups)
+          ? R.find(R.propEq(groupName, 'name'), groups)
           : ({} as Group);
 
         const isFirstElement = areGroupsOpen || R.equals(index, 0);

package/src/Form/Inputs/models.ts

@@ -18,7 +18,8 @@ export enum InputType {
   Grid,
   Custom,
   Checkbox,
-  CheckboxGroup
+  CheckboxGroup,
+  List
 }
 
 interface FieldsTableGetRequiredProps {
@@ -32,6 +33,7 @@ export interface InputProps {
   additionalLabel?: string | JSX.Element;
   additionalLabelClassName?: string;
   additionalMemoProps?: Array<unknown>;
+  autoFocus?: boolean;
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
@@ -76,6 +78,13 @@ export interface InputProps {
   hideInput?: (values: FormikValues) => boolean;
   inputClassName?: string;
   label: string;
+  list?: {
+    AddItem: React.ComponentType<{ addItem }>;
+    SortContent: React.ComponentType<object>;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
   radio?: {
     options?: Array<{
       label: string | JSX.Element;

package/src/Graph/BarStack/BarStack.cypress.spec.tsx

@@ -0,0 +1,154 @@
+import numeral from 'numeral';
+
+import BarStack from './BarStack';
+import { BarType, BarStackProps } from './models';
+
+const defaultData = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const dataWithNullValues = [
+  { color: '#88B922', label: 'Ok', value: 0 },
+  { color: '#999999', label: 'Unknown', value: 0 },
+  { color: '#F7931A', label: 'Warning', value: 0 },
+  { color: '#FF6666', label: 'Down', value: 0 }
+];
+
+const total = Math.floor(
+  defaultData.reduce((acc, { value }) => acc + value, 0)
+);
+
+const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
+  return (
+    <div data-testid={`tooltip-${label}`} style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const initialize = ({
+  width = '400px',
+  height = '400px',
+  data = defaultData,
+  ...args
+}: Omit<BarStackProps, 'data'> & {
+  data?;
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <BarStack {...args} data={data} />
+      </div>
+    )
+  });
+};
+
+describe('Bar stack', () => {
+  it('renders Bar stack correctly with provided data', () => {
+    initialize({});
+
+    defaultData.forEach(({ label }) => {
+      cy.findByTestId(label).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts size based on the provided width and height', () => {
+    initialize({ displayLegend: false, height: '300px', width: '300px' });
+
+    cy.findByTestId('barStack').should('have.css', 'height', '300px');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a horizontal bar when variant is set to "horizontal"', () => {
+    initialize({ variant: 'horizontal' });
+    cy.get('[data-variant="horizontal"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a vertical bar when variant is set to "vertical"', () => {
+    initialize({ variant: 'vertical' });
+    cy.get('[data-variant="vertical"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tooltip with correct information on hover', () => {
+    initialize({ TooltipContent });
+
+    defaultData.forEach(({ label, value }) => {
+      cy.findByTestId(label).trigger('mouseover', { force: true });
+
+      cy.findByTestId(`tooltip-${label}`)
+        .should('contain', label)
+        .and('contain', numeral(value).format('0a').toUpperCase());
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('conditionally displays values on rects based on displayValues prop', () => {
+    initialize({ displayValues: true });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', value);
+    });
+
+    initialize({ displayValues: false });
+    cy.findAllByTestId('value').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays values on rects in percentage unit when displayValues is set to true and unit to percentage', () => {
+    initialize({ displayValues: true, unit: 'percentage' });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays Legend component based on displayLegend prop', () => {
+    initialize({ displayLegend: true });
+    cy.findByTestId('Legend').should('be.visible');
+
+    initialize({ displayLegend: false });
+    cy.findByTestId('Legend').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title when the title is giving', () => {
+    initialize({ title: 'host' });
+    cy.findByTestId('Title').should('be.visible');
+
+    initialize({});
+    cy.findByTestId('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a message "No Data Available" when all values are null', () => {
+    initialize({ data: dataWithNullValues, title: 'host' });
+
+    cy.contains('No Data Available');
+
+    cy.makeSnapshot();
+  });
+});