@centreon/ui 23.10.22 → 23.10.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/src/Dashboard/Dashboard.styles.ts +62 -60
  3. package/src/Dashboard/Grid.tsx +1 -1
  4. package/src/Dashboard/Item.tsx +9 -6
  5. package/src/components/Button/Button.tsx +1 -1
  6. package/src/components/DataTable/Item/DataTableItem.tsx +2 -0
  7. package/src/components/Header/Header.tsx +1 -1
  8. package/src/components/Modal/ModalActions.tsx +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@centreon/ui",
3
- "version": "23.10.22",
3
+ "version": "23.10.23",
4
4
  "description": "Centreon UI Components",
5
5
  "scripts": {
6
6
  "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
package/src/Dashboard/Dashboard.styles.ts CHANGED
@@ -2,67 +2,69 @@ import { makeStyles } from 'tss-react/mui';
2
2
 
3
3
  import { alpha } from '@mui/material';
4
4
 
5
- export const useDashboardLayoutStyles = makeStyles()((theme) => ({
6
- container: {
7
- '& .react-grid-item': {
8
- borderRadius: theme.shape.borderRadius,
9
- transition: theme.transitions.create('all', {
10
- delay: 0,
11
- duration: 100,
12
- easing: theme.transitions.easing.easeOut
13
- })
14
- },
15
- '& .react-grid-item.react-draggable-dragging': {
16
- boxShadow: theme.shadows[3]
17
- },
18
- '& .react-grid-item.react-grid-placeholder': {
19
- backgroundColor: alpha(theme.palette.primary.main, 0.7)
20
- },
21
- '& .react-grid-item.resizing': {
22
- boxShadow: theme.shadows[3]
23
- },
24
- '& .react-resizable-handle': {
25
- backgroundColor: theme.palette.action.focus,
26
- backgroundImage: 'none',
27
- borderRadius: theme.shape.borderRadius,
28
- display: 'block',
29
- opacity: 0,
30
- position: 'absolute'
31
- },
32
- '& .react-resizable-handle.react-resizable-handle-e': {
33
- cursor: 'ew-resize',
34
- height: `calc(100% - ${theme.spacing(3)})`,
35
- marginTop: 0,
36
- right: 0,
37
- top: 0,
38
- transform: 'rotate(0deg)',
39
- width: theme.spacing(1)
40
- },
41
- '& .react-resizable-handle.react-resizable-handle-s': {
42
- bottom: 0,
43
- cursor: 'ns-resize',
44
- height: theme.spacing(1),
45
- left: 0,
46
- marginLeft: 0,
47
- transform: 'rotate(0deg)',
48
- width: `calc(100% - ${theme.spacing(3)})`
49
- },
50
- '& .react-resizable-handle.react-resizable-handle-se': {
51
- bottom: 0,
52
- cursor: 'nwse-resize',
53
- height: theme.spacing(2),
54
- right: 0,
55
- transform: 'rotate(0deg)',
56
- width: theme.spacing(2)
57
- },
58
- '& .react-resizable-handle::after': {
59
- content: 'none'
60
- },
61
- '& .react-resizable-handle:hover': {
62
- opacity: 1
5
+ export const useDashboardLayoutStyles = makeStyles<boolean>()(
6
+ (theme, isStatic: boolean) => ({
7
+ container: {
8
+ '& .react-grid-item': {
9
+ borderRadius: theme.shape.borderRadius,
10
+ transition: theme.transitions.create('all', {
11
+ delay: 0,
12
+ duration: 100,
13
+ easing: theme.transitions.easing.easeOut
14
+ })
15
+ },
16
+ '& .react-grid-item.react-draggable-dragging': {
17
+ boxShadow: theme.shadows[3]
18
+ },
19
+ '& .react-grid-item.react-grid-placeholder': {
20
+ backgroundColor: alpha(theme.palette.primary.main, 0.7)
21
+ },
22
+ '& .react-grid-item.resizing': {
23
+ boxShadow: theme.shadows[3]
24
+ },
25
+ '& .react-resizable-handle': {
26
+ backgroundColor: theme.palette.action.focus,
27
+ backgroundImage: 'none',
28
+ borderRadius: theme.shape.borderRadius,
29
+ display: isStatic ? 'none' : 'block',
30
+ opacity: 0,
31
+ position: 'absolute'
32
+ },
33
+ '& .react-resizable-handle.react-resizable-handle-e': {
34
+ cursor: 'ew-resize',
35
+ height: `calc(100% - ${theme.spacing(3)})`,
36
+ marginTop: 0,
37
+ right: 0,
38
+ top: 0,
39
+ transform: 'rotate(0deg)',
40
+ width: theme.spacing(1)
41
+ },
42
+ '& .react-resizable-handle.react-resizable-handle-s': {
43
+ bottom: 0,
44
+ cursor: 'ns-resize',
45
+ height: theme.spacing(1),
46
+ left: 0,
47
+ marginLeft: 0,
48
+ transform: 'rotate(0deg)',
49
+ width: `calc(100% - ${theme.spacing(3)})`
50
+ },
51
+ '& .react-resizable-handle.react-resizable-handle-se': {
52
+ bottom: 0,
53
+ cursor: 'nwse-resize',
54
+ height: theme.spacing(2),
55
+ right: 0,
56
+ transform: 'rotate(0deg)',
57
+ width: theme.spacing(2)
58
+ },
59
+ '& .react-resizable-handle::after': {
60
+ content: 'none'
61
+ },
62
+ '& .react-resizable-handle:hover': {
63
+ opacity: 1
64
+ }
63
65
  }
64
- }
65
- }));
66
+ })
67
+ );
66
68
 
67
69
  export const useDashboardItemStyles = makeStyles()((theme) => ({
68
70
  widgetContainer: {
package/src/Dashboard/Grid.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactElement, useMemo } from 'react';
1
+ import { useMemo, ReactElement } from 'react';
2
2
 
3
3
  import { Grid as VisxGrid } from '@visx/visx';
4
4
  import { scaleLinear } from '@visx/scale';
package/src/Dashboard/Item.tsx CHANGED
@@ -18,7 +18,7 @@ interface DashboardItemProps {
18
18
  children: ReactElement;
19
19
  className?: string;
20
20
  header?: ReactElement;
21
- key: string;
21
+ id: string;
22
22
  onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
23
23
  onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
24
24
  onTouchEnd?: (e) => void;
@@ -29,13 +29,13 @@ const Item = forwardRef(
29
29
  (
30
30
  {
31
31
  children,
32
- key,
33
32
  style,
34
33
  className,
35
34
  header,
36
35
  onMouseDown,
37
36
  onMouseUp,
38
- onTouchEnd
37
+ onTouchEnd,
38
+ id
39
39
  }: DashboardItemProps,
40
40
  ref: ForwardedRef<HTMLDivElement>
41
41
  ): ReactElement => {
@@ -55,14 +55,17 @@ const Item = forwardRef(
55
55
  Component: (
56
56
  <div
57
57
  className={className}
58
- key={key}
59
58
  ref={ref}
60
59
  style={style}
61
60
  {...cardContainerListeners}
62
61
  >
63
62
  <Card className={classes.widgetContainer}>
64
63
  {header && (
65
- <div {...listeners} className={classes.widgetHeader}>
64
+ <div
65
+ {...listeners}
66
+ className={classes.widgetHeader}
67
+ data-testid={`${id}_move_panel`}
68
+ >
66
69
  {header}
67
70
  </div>
68
71
  )}
@@ -70,7 +73,7 @@ const Item = forwardRef(
70
73
  </Card>
71
74
  </div>
72
75
  ),
73
- memoProps: [key, style, className, header]
76
+ memoProps: [style, className, header]
74
77
  });
75
78
  }
76
79
  );
package/src/components/Button/Button.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ReactElement, ReactNode, useMemo } from 'react';
1
+ import { ReactElement, ReactNode, useMemo } from 'react';
2
2
 
3
3
  import { Button as MuiButton } from '@mui/material';
4
4
 
package/src/components/DataTable/Item/DataTableItem.tsx CHANGED
@@ -59,6 +59,7 @@ const DataTableItem = forwardRef(
59
59
  <MuiCardActions>
60
60
  <IconButton
61
61
  aria-label="edit"
62
+ data-testid="edit"
62
63
  icon={<EditIcon />}
63
64
  size="small"
64
65
  variant="primary"
@@ -66,6 +67,7 @@ const DataTableItem = forwardRef(
66
67
  />
67
68
  <IconButton
68
69
  aria-label="delete"
70
+ data-testid="delete"
69
71
  icon={<DeleteIcon />}
70
72
  size="small"
71
73
  variant="ghost"
package/src/components/Header/Header.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ReactElement, ReactNode } from 'react';
1
+ import { ReactElement, ReactNode } from 'react';
2
2
 
3
3
  import { Typography as MuiTypography } from '@mui/material';
4
4
 
package/src/components/Modal/ModalActions.tsx CHANGED
@@ -31,7 +31,8 @@ const ModalActions = ({
31
31
  {children || (
32
32
  <>
33
33
  <Button
34
- aria-label="cancel"
34
+ aria-label={labels?.cancel}
35
+ data-testid="cancel"
35
36
  size="small"
36
37
  variant="secondary"
37
38
  onClick={() => onCancel?.()}
@@ -39,7 +40,8 @@ const ModalActions = ({
39
40
  {labels?.cancel}
40
41
  </Button>
41
42
  <Button
42
- aria-label="confirm"
43
+ aria-label={labels?.confirm}
44
+ data-testid="confirm"
43
45
  isDanger={isDanger}
44
46
  size="small"
45
47
  type="submit"