Merge pull request #3903 from dlabrecq/table

Replace deprecated PatternFly table components

Author: dlabrecq

src/components/drawers/exports/exportsTable.tsx

@@ -1,5 +1,4 @@
 import {
-  Bullseye,
   Button,
   ButtonVariant,
   EmptyState,
@@ -9,22 +8,20 @@ import {
   EmptyStateIcon,
   Label,
   Popover,
-  Spinner,
 } from '@patternfly/react-core';
 import { DownloadIcon } from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { OutlinedClockIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { SyncIcon } from '@patternfly/react-icons/dist/esm/icons/sync-icon';
-import { sortable, SortByDirection, TableVariant } from '@patternfly/react-table';
-import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated';
 import type { Query } from 'api/queries/query';
 import { getQuery } from 'api/queries/query';
 import type { Report } from 'api/reports/report';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
+import { DataTable } from 'routes/components/dataTable';
 import type { DropdownWrapperItem } from 'routes/components/dropdownWrapper';
 import { DropdownWrapper } from 'routes/components/dropdownWrapper';
 import { EmptyFilterState } from 'routes/components/state/emptyFilterState';
@@ -34,38 +31,24 @@ import { styles } from './exportsTable.styles';
 interface ExportsTableOwnProps {
   isLoading?: boolean;
   onClose();
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   query: Query;
   report: Report;
 }
 
 interface ExportsTableState {
   columns?: any[];
-  loadingRows?: any[];
   rows?: any[];
 }
 
 type ExportsTableProps = ExportsTableOwnProps & WrappedComponentProps;
 
-export const ExportsTableColumnIds = {
-  actions: 'actions',
-  created: 'created',
-  expires: 'expires',
-  names: 'names',
-  status: 'status',
-};
-
 class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableState> {
   public state: ExportsTableState = {
     columns: [],
     rows: [],
   };
 
-  constructor(props: ExportsTableProps) {
-    super(props);
-    this.handleOnSort = this.handleOnSort.bind(this);
-  }
-
   public componentDidMount() {
     this.initDatum();
   }
@@ -91,69 +74,44 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
 
     const columns = [
       {
-        id: ExportsTableColumnIds.names,
+        name: intl.formatMessage(messages.names, { count: 1 }),
         orderBy: 'name',
-        title: intl.formatMessage(messages.names, { count: 1 }),
-        ...(isSortable && { transforms: [sortable] }),
+        isSortable,
       },
       {
-        id: ExportsTableColumnIds.created,
+        name: intl.formatMessage(messages.timeOfExport),
         orderBy: 'created',
-        title: intl.formatMessage(messages.timeOfExport),
-        ...(isSortable && { transforms: [sortable] }),
+        isSortable,
       },
       {
-        id: ExportsTableColumnIds.expires,
+        name: intl.formatMessage(messages.expiresOn),
         orderBy: 'expires',
-        title: intl.formatMessage(messages.expiresOn),
-        ...(isSortable && { transforms: [sortable] }),
+        isSortable,
       },
       {
-        id: ExportsTableColumnIds.status,
-        title: intl.formatMessage(messages.statusActions),
+        name: intl.formatMessage(messages.statusActions),
       },
       {
-        id: ExportsTableColumnIds.actions,
-        title: '',
+        name: '',
       },
     ];
 
     if (report.data.length) {
       report.data.map((item: any) => {
         rows.push({
           cells: [
-            { title: <div>{item.name}</div>, id: ExportsTableColumnIds.names },
-            { title: <div>{item.created}</div>, id: ExportsTableColumnIds.created },
-            { title: <div>{item.expires}</div>, id: ExportsTableColumnIds.expires },
-            { title: this.getStatus(item.status), id: ExportsTableColumnIds.status },
-            { title: this.getActions(), id: ExportsTableColumnIds.actions },
+            { value: item.name },
+            { value: item.created },
+            { value: item.expires },
+            { value: this.getStatus(item.status) },
+            { value: this.getActions() },
           ],
           item,
         });
       });
     }
-
-    const loadingRows = [
-      {
-        heightAuto: true,
-        cells: [
-          {
-            props: { colSpan: 7 },
-            title: (
-              <Bullseye>
-                <div style={{ textAlign: 'center' }}>
-                  <Spinner size="xl" />
-                </div>
-              </Bullseye>
-            ),
-          },
-        ],
-      },
-    ];
-
     this.setState({
       columns,
-      loadingRows,
       rows,
     });
   };
@@ -198,27 +156,6 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
     );
   };
 
-  private getSortBy = () => {
-    const { query } = this.props;
-    const { columns } = this.state;
-
-    let index = -1;
-    let direction: any = SortByDirection.asc;
-
-    for (const key of Object.keys(query.order_by)) {
-      let c = 0;
-      for (const column of columns) {
-        if (column.orderBy === key) {
-          direction = query.order_by[key] === 'asc' ? SortByDirection.asc : SortByDirection.desc;
-          index = c;
-          break;
-        }
-        c++;
-      }
-    }
-    return index > -1 ? { index, direction } : {};
-  };
-
   private getStatus = (status: string) => {
     const { intl } = this.props;
 
@@ -288,36 +225,20 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
     console.log('handleOnDownload clicked');
   };
 
-  private handleOnSort = (event, index, direction) => {
-    const { onSort } = this.props;
-    const { columns } = this.state;
-
-    if (onSort) {
-      const orderBy = columns[index - 1].orderBy;
-      const isSortAscending = direction === SortByDirection.asc;
-      onSort(orderBy, isSortAscending);
-    }
-  };
-
   public render() {
-    const { intl, isLoading } = this.props;
-    const { columns, loadingRows, rows } = this.state;
+    const { intl, isLoading, onSort, query } = this.props;
+    const { columns, rows } = this.state;
 
     return (
-      <>
-        <Table
-          aria-label={intl.formatMessage(messages.exportsTableAriaLabel)}
-          cells={columns}
-          rows={isLoading ? loadingRows : rows}
-          sortBy={this.getSortBy()}
-          onSort={this.handleOnSort}
-          variant={TableVariant.compact}
-        >
-          <TableHeader />
-          <TableBody />
-        </Table>
-        {rows.length === 0 && <div style={styles.emptyState}>{this.getEmptyState()}</div>}
-      </>
+      <DataTable
+        ariaLabel={intl.formatMessage(messages.exportsTableAriaLabel)}
+        columns={columns}
+        emptyState={this.getEmptyState()}
+        isLoading={isLoading}
+        onSort={onSort}
+        rows={rows}
+        orderBy={query.order_by}
+      />
     );
   }
 }

src/routes/components/dataTable/dataTable.tsx

@@ -23,14 +23,15 @@ import { withRouter } from 'utils/router';
 import { styles } from './dataTable.styles';
 
 interface DataTableOwnProps {
+  ariaLabel?: string;
   columns?: any[];
   emptyState?: React.ReactNode;
   filterBy: any;
   isActionsCell?: boolean;
   isLoading?: boolean;
   isSelectable?: boolean;
   onSelect(items: any[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy: any;
   rows?: any[];
   selectedItems?: ComputedReportItem[];
@@ -114,12 +115,12 @@ class DataTable extends React.Component<DataTableProps, any> {
   };
 
   public render() {
-    const { columns, intl, isActionsCell, isLoading, isSelectable, rows, variant } = this.props;
+    const { ariaLabel, columns, intl, isActionsCell, isLoading, isSelectable, rows, variant } = this.props;
 
     return (
       <>
         <Table
-          aria-label={intl.formatMessage(messages.dataTableAriaLabel)}
+          aria-label={ariaLabel ? ariaLabel : intl.formatMessage(messages.dataTableAriaLabel)}
           className="tableOverride"
           gridBreakPoint="grid-2xl"
           variant={TableVariant.compact}

src/routes/components/dataTable/expandableTable.tsx

@@ -29,7 +29,7 @@ interface ExpandableTableOwnProps {
   isActionsCell?: boolean;
   isAllExpanded?: boolean;
   isLoading?: boolean;
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy: any;
   rows?: any[];
   selectedItems?: ComputedReportItem[];

src/routes/components/dataTable/selectableTable.tsx

@@ -24,7 +24,7 @@ interface SelectableTableOwnProps {
   emptyState?: ReactNode;
   filterBy: any;
   isLoading?: boolean;
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   onRowClick(rowIndex: number);
   orderBy: any;
   rows?: any[];

src/routes/details/awsBreakdown/instances/instancesTable.tsx

@@ -21,7 +21,7 @@ interface InstancesTableOwnProps {
   isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   query?: Query;
   report?: Report;
@@ -203,9 +203,9 @@ const InstancesTable: React.FC<InstancesTableProps> = ({
     );
   };
 
-  const handleOnSort = (value: string, isSortAscending: boolean) => {
+  const handleOnSort = (sortType: string, isSortAscending: boolean) => {
     if (onSort) {
-      onSort(value, isSortAscending);
+      onSort(sortType, isSortAscending);
     }
   };
 

src/routes/details/awsDetails/detailsTable.tsx

@@ -33,7 +33,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   query?: Query;
   report: AwsReport;

src/routes/details/azureDetails/detailsTable.tsx

@@ -31,7 +31,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   groupByTagKey?: string;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   query?: Query;
   report: AzureReport;

src/routes/details/components/pvcChart/modal/pvcTable.tsx

@@ -13,7 +13,7 @@ import { formatUsage, unitsLookupKey } from 'utils/format';
 interface PvcTableOwnProps {
   filterBy?: any;
   isLoading?: boolean;
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   report: OcpReport;
   reportQueryString: string;
@@ -115,9 +115,9 @@ const PvcTable: React.FC<PvcTableProps> = ({ filterBy, isLoading, onSort, orderB
     setRows(filteredRows);
   };
 
-  const handleOnSort = (value: string, isSortAscending: boolean) => {
+  const handleOnSort = (sortType: string, isSortAscending: boolean) => {
     if (onSort) {
-      onSort(value, isSortAscending);
+      onSort(sortType, isSortAscending);
     }
   };
 

src/routes/details/gcpDetails/detailsTable.tsx

@@ -31,7 +31,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   query?: Query;
   report: GcpReport;

src/routes/details/ibmDetails/detailsTable.tsx

@@ -31,7 +31,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   query?: Query;
   report: IbmReport;

src/routes/details/ociDetails/detailsTable.tsx

@@ -31,7 +31,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   groupByTagKey?: string;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   query?: Query;
   report: OciReport;

src/routes/details/ocpDetails/detailsTable.tsx

@@ -42,7 +42,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   isLoading?: boolean;
   isRosToggleEnabled?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   query?: Query;
   report: OcpReport;

src/routes/details/rhelDetails/detailsTable.tsx

@@ -33,7 +33,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean);
+  onSort(sortType: string, isSortAscending: boolean);
   orderBy?: any;
   query?: Query;
   report: RhelReport;

src/routes/explorer/explorerTable.tsx

@@ -55,7 +55,7 @@ interface ExplorerTableOwnProps extends RouterComponentProps, WrappedComponentPr
   isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
-  onSort(value: string, isSortAscending: boolean, date: string);
+  onSort(sortType: string, isSortAscending: boolean, date: string);
   perspective: PerspectiveType;
   query: Query;
   report: Report;