@centreon/ui 24.4.1-MON-21278-Delete-a-basic-token.8 → 24.4.1-MON-33109-dashboard-list.29

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/Dialog/Confirm/index.tsx +2 -10
  3. package/src/Dialog/index.tsx +1 -8
  4. package/src/Listing/index.tsx +131 -117
  5. package/src/api/useFetchQuery/index.ts +7 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@centreon/ui",
3
- "version": "24.4.1-MON-21278-Delete-a-basic-token.8",
3
+ "version": "24.4.1-MON-33109-dashboard-list.29",
4
4
  "description": "Centreon UI Components",
5
5
  "scripts": {
6
6
  "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
package/src/Dialog/Confirm/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { ButtonProps, DialogContentText, Typography } from '@mui/material';
1
+ import { DialogContentText, Typography } from '@mui/material';
2
2
 
3
3
  import Dialog, { Props as DialogProps } from '..';
4
4
 
@@ -6,23 +6,15 @@ type Props = DialogProps & {
6
6
  children?: JSX.Element;
7
7
  labelMessage?: string | null;
8
8
  labelSecondMessage?: string | null;
9
- restCancelButtonProps?: ButtonProps;
10
- restConfirmButtonProps?: ButtonProps;
11
9
  };
12
10
 
13
11
  const Confirm = ({
14
12
  labelMessage,
15
13
  labelSecondMessage,
16
14
  children,
17
- restCancelButtonProps,
18
- restConfirmButtonProps,
19
15
  ...rest
20
16
  }: Props): JSX.Element => (
21
- <Dialog
22
- restCancelButtonProps={restCancelButtonProps}
23
- restConfirmButtonProps={restConfirmButtonProps}
24
- {...rest}
25
- >
17
+ <Dialog {...rest}>
26
18
  <DialogContentText>
27
19
  {labelMessage && <Typography>{labelMessage}</Typography>}
28
20
  {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
package/src/Dialog/index.tsx CHANGED
@@ -9,8 +9,7 @@ import {
9
9
  DialogContent,
10
10
  DialogActions,
11
11
  DialogProps,
12
- CircularProgress,
13
- ButtonProps
12
+ CircularProgress
14
13
  } from '@mui/material';
15
14
 
16
15
  import { DataTestAttributes } from '../@types/data-attributes';
@@ -49,8 +48,6 @@ export type Props = {
49
48
  onClose?: () => void;
50
49
  onConfirm: (event, value?) => void;
51
50
  open: boolean;
52
- restCancelButtonProps?: ButtonProps;
53
- restConfirmButtonProps?: ButtonProps;
54
51
  submitting?: boolean;
55
52
  } & DialogProps &
56
53
  DataTestAttributes;
@@ -73,8 +70,6 @@ const Dialog = ({
73
70
  dialogContentClassName,
74
71
  dialogActionsClassName,
75
72
  dialogConfirmButtonClassName,
76
- restCancelButtonProps,
77
- restConfirmButtonProps,
78
73
  ...rest
79
74
  }: Props): JSX.Element => {
80
75
  const { classes, cx } = useStyles({ contentWidth });
@@ -106,7 +101,6 @@ const Dialog = ({
106
101
  data-testid="Cancel"
107
102
  disabled={cancelDisabled}
108
103
  onClick={onCancel}
109
- {...restCancelButtonProps}
110
104
  >
111
105
  {labelCancel}
112
106
  </Button>
@@ -119,7 +113,6 @@ const Dialog = ({
119
113
  disabled={confirmDisabled}
120
114
  endIcon={submitting && <CircularProgress size={15} />}
121
115
  onClick={onConfirm}
122
- {...restConfirmButtonProps}
123
116
  >
124
117
  {labelConfirm}
125
118
  </Button>
package/src/Listing/index.tsx CHANGED
@@ -93,9 +93,11 @@ export interface Props<TRow> {
93
93
  columnConfiguration?: ColumnConfiguration;
94
94
  columns: Array<Column>;
95
95
  currentPage?: number;
96
+ customListingComponent?: JSX.Element;
96
97
  customPaginationClassName?: string;
97
98
  disableRowCheckCondition?: (row) => boolean;
98
99
  disableRowCondition?: (row) => boolean;
100
+ displayCustomListing?: boolean;
99
101
  getHighlightRowCondition?: (row: TRow) => boolean;
100
102
  getId?: (row: TRow) => RowId;
101
103
  headerMemoProps?: Array<unknown>;
@@ -138,6 +140,8 @@ const defaultColumnConfiguration = {
138
140
  export const performanceRowsLimit = 60;
139
141
 
140
142
  const Listing = <TRow extends { id: RowId }>({
143
+ customListingComponent,
144
+ displayCustomListing,
141
145
  limit = 10,
142
146
  visualizationActions,
143
147
  columns,
@@ -494,6 +498,7 @@ const Listing = <TRow extends { id: RowId }>({
494
498
  onSelectColumns={onSelectColumns}
495
499
  />
496
500
  </div>
501
+
497
502
  <ParentSize
498
503
  parentSizeStyles={{
499
504
  height: '100%',
@@ -509,132 +514,141 @@ const Listing = <TRow extends { id: RowId }>({
509
514
  height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
510
515
  }}
511
516
  >
512
- <Table
513
- stickyHeader
514
- className={classes.table}
515
- component="div"
516
- role={undefined}
517
- size="small"
518
- >
519
- <ListingHeader
520
- areColumnsEditable={areColumnsEditable}
521
- checkable={checkable}
522
- columnConfiguration={columnConfiguration}
523
- columns={columns}
524
- listingVariant={listingVariant}
525
- memoProps={headerMemoProps}
526
- predefinedRowsSelection={predefinedRowsSelection}
527
- rowCount={limit - emptyRows}
528
- selectedRowCount={selectedRows.length}
529
- sortField={sortField}
530
- sortOrder={sortOrder}
531
- onSelectAllClick={selectAllRows}
532
- onSelectColumns={onSelectColumns}
533
- onSelectRowsWithCondition={onSelectRowsWithCondition}
534
- onSort={onSort}
535
- />
536
-
537
- <TableBody
538
- className={classes.tableBody}
517
+ {displayCustomListing ? (
518
+ customListingComponent
519
+ ) : (
520
+ <Table
521
+ stickyHeader
522
+ className={classes.table}
539
523
  component="div"
540
- onMouseLeave={clearHoveredRow}
524
+ role={undefined}
525
+ size="small"
541
526
  >
542
- {rowsToDisplay.map((row, index) => {
543
- const isRowSelected = isSelected(row);
544
- const isRowHovered = equals(hoveredRowId, getId(row));
545
- const isSubItem = allSubItemIds.includes(row.id);
546
-
547
- return (
548
- <ListingRow
549
- checkable={
550
- checkable && (!isSubItem || subItems.canCheckSubItems)
551
- }
552
- columnConfiguration={columnConfiguration}
553
- columnIds={columns.map(prop('id'))}
554
- disableRowCondition={disableRowCondition}
555
- isHovered={isRowHovered}
556
- isSelected={isRowSelected}
557
- isShiftKeyDown={isShiftKeyDown}
558
- key={
559
- gte(limit, performanceRowsLimit)
560
- ? `row_${index}`
561
- : getId(row)
562
- }
563
- lastSelectionIndex={lastSelectionIndex}
564
- limit={limit}
565
- listingVariant={listingVariant}
566
- row={row}
567
- rowColorConditions={rowColorConditions}
568
- shiftKeyDownRowPivot={shiftKeyDownRowPivot}
569
- subItemsPivots={subItemsPivots}
570
- tabIndex={-1}
571
- visibleColumns={visibleColumns}
572
- onClick={(): void => {
573
- onRowClick(row);
574
- }}
575
- onFocus={(): void => hoverRow(row)}
576
- onMouseOver={(): void => hoverRow(row)}
577
- >
578
- {checkable &&
579
- (!isSubItem || subItems.canCheckSubItems ? (
580
- <Cell
581
- align="left"
582
- className={classes.checkbox}
583
- disableRowCondition={disableRowCondition}
584
- isRowHovered={isRowHovered}
585
- row={row}
586
- rowColorConditions={rowColorConditions}
587
- onClick={(event): void => selectRow(event, row)}
588
- >
589
- <Checkbox
590
- checked={isRowSelected}
591
- disabled={
592
- disableRowCheckCondition(row) ||
593
- disableRowCondition(row)
594
- }
595
- inputProps={{
596
- 'aria-label': `Select row ${getId(row)}`
597
- }}
527
+ <ListingHeader
528
+ areColumnsEditable={areColumnsEditable}
529
+ checkable={checkable}
530
+ columnConfiguration={columnConfiguration}
531
+ columns={columns}
532
+ listingVariant={listingVariant}
533
+ memoProps={headerMemoProps}
534
+ predefinedRowsSelection={predefinedRowsSelection}
535
+ rowCount={limit - emptyRows}
536
+ selectedRowCount={selectedRows.length}
537
+ sortField={sortField}
538
+ sortOrder={sortOrder}
539
+ onSelectAllClick={selectAllRows}
540
+ onSelectColumns={onSelectColumns}
541
+ onSelectRowsWithCondition={onSelectRowsWithCondition}
542
+ onSort={onSort}
543
+ />
544
+
545
+ <TableBody
546
+ className={classes.tableBody}
547
+ component="div"
548
+ onMouseLeave={clearHoveredRow}
549
+ >
550
+ {rowsToDisplay.map((row, index) => {
551
+ const isRowSelected = isSelected(row);
552
+ const isRowHovered = equals(hoveredRowId, getId(row));
553
+ const isSubItem = allSubItemIds.includes(row.id);
554
+
555
+ return (
556
+ <ListingRow
557
+ checkable={
558
+ checkable &&
559
+ (!isSubItem || subItems.canCheckSubItems)
560
+ }
561
+ columnConfiguration={columnConfiguration}
562
+ columnIds={columns.map(prop('id'))}
563
+ disableRowCondition={disableRowCondition}
564
+ isHovered={isRowHovered}
565
+ isSelected={isRowSelected}
566
+ isShiftKeyDown={isShiftKeyDown}
567
+ key={
568
+ gte(limit, performanceRowsLimit)
569
+ ? `row_${index}`
570
+ : getId(row)
571
+ }
572
+ lastSelectionIndex={lastSelectionIndex}
573
+ limit={limit}
574
+ listingVariant={listingVariant}
575
+ row={row}
576
+ rowColorConditions={rowColorConditions}
577
+ shiftKeyDownRowPivot={shiftKeyDownRowPivot}
578
+ subItemsPivots={subItemsPivots}
579
+ tabIndex={-1}
580
+ visibleColumns={visibleColumns}
581
+ onClick={(): void => {
582
+ onRowClick(row);
583
+ }}
584
+ onFocus={(): void => hoverRow(row)}
585
+ onMouseOver={(): void => hoverRow(row)}
586
+ >
587
+ {checkable &&
588
+ (!isSubItem || subItems.canCheckSubItems ? (
589
+ <Cell
590
+ align="left"
591
+ className={classes.checkbox}
592
+ disableRowCondition={disableRowCondition}
593
+ isRowHovered={isRowHovered}
594
+ row={row}
595
+ rowColorConditions={rowColorConditions}
596
+ onClick={(event): void => selectRow(event, row)}
597
+ >
598
+ <Checkbox
599
+ checked={isRowSelected}
600
+ disabled={
601
+ disableRowCheckCondition(row) ||
602
+ disableRowCondition(row)
603
+ }
604
+ inputProps={{
605
+ 'aria-label': `Select row ${getId(row)}`
606
+ }}
607
+ />
608
+ </Cell>
609
+ ) : (
610
+ <Cell
611
+ align="left"
612
+ disableRowCondition={disableRowCondition}
613
+ isRowHovered={isRowHovered}
614
+ row={row}
615
+ rowColorConditions={rowColorConditions}
598
616
  />
599
- </Cell>
600
- ) : (
601
- <Cell
602
- align="left"
617
+ ))}
618
+
619
+ {visibleColumns.map((column) => (
620
+ <DataCell
621
+ column={column}
603
622
  disableRowCondition={disableRowCondition}
623
+ getHighlightRowCondition={
624
+ getHighlightRowCondition
625
+ }
604
626
  isRowHovered={isRowHovered}
627
+ isRowSelected={isRowSelected}
628
+ key={`${getId(row)}-${column.id}`}
629
+ labelCollapse={subItems.labelCollapse}
630
+ labelExpand={subItems.labelExpand}
631
+ listingVariant={listingVariant}
605
632
  row={row}
606
633
  rowColorConditions={rowColorConditions}
634
+ subItemsRowProperty={subItems?.getRowProperty(
635
+ row
636
+ )}
607
637
  />
608
638
  ))}
609
-
610
- {visibleColumns.map((column) => (
611
- <DataCell
612
- column={column}
613
- disableRowCondition={disableRowCondition}
614
- getHighlightRowCondition={getHighlightRowCondition}
615
- isRowHovered={isRowHovered}
616
- isRowSelected={isRowSelected}
617
- key={`${getId(row)}-${column.id}`}
618
- labelCollapse={subItems.labelCollapse}
619
- labelExpand={subItems.labelExpand}
620
- listingVariant={listingVariant}
621
- row={row}
622
- rowColorConditions={rowColorConditions}
623
- subItemsRowProperty={subItems?.getRowProperty(row)}
624
- />
625
- ))}
626
- </ListingRow>
627
- );
628
- })}
629
-
630
- {rows.length < 1 &&
631
- (loading ? (
632
- <SkeletonLoader rows={limit} />
633
- ) : (
634
- <EmptyResult label={t(labelNoResultFound)} />
635
- ))}
636
- </TableBody>
637
- </Table>
639
+ </ListingRow>
640
+ );
641
+ })}
642
+
643
+ {rows.length < 1 &&
644
+ (loading ? (
645
+ <SkeletonLoader rows={limit} />
646
+ ) : (
647
+ <EmptyResult label={t(labelNoResultFound)} />
648
+ ))}
649
+ </TableBody>
650
+ </Table>
651
+ )}
638
652
  </Box>
639
653
  )}
640
654
  </ParentSize>
package/src/api/useFetchQuery/index.ts CHANGED
@@ -21,6 +21,7 @@ export interface UseFetchQueryProps<T> {
21
21
  catchError?: (props: CatchErrorProps) => void;
22
22
  decoder?: JsonDecoder.Decoder<T>;
23
23
  defaultFailureMessage?: string;
24
+ doNotCancelCallsOnUnmount?: boolean;
24
25
  fetchHeaders?: HeadersInit;
25
26
  getEndpoint: (params?: PrefetchEndpointParams) => string;
26
27
  getQueryKey: () => QueryKey;
@@ -59,7 +60,8 @@ const useFetchQuery = <T extends object>({
59
60
  isPaginated,
60
61
  queryOptions,
61
62
  httpCodesBypassErrorSnackbar = [],
62
- baseEndpoint
63
+ baseEndpoint,
64
+ doNotCancelCallsOnUnmount = false
63
65
  }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
64
66
  const dataRef = useRef<T | undefined>(undefined);
65
67
 
@@ -169,6 +171,10 @@ const useFetchQuery = <T extends object>({
169
171
 
170
172
  useEffect(() => {
171
173
  return (): void => {
174
+ if (doNotCancelCallsOnUnmount) {
175
+ return;
176
+ }
177
+
172
178
  queryClient.cancelQueries({ queryKey: getQueryKey() });
173
179
  };
174
180
  }, []);