Use StatusBox to wrap ResourceDataView render output

Author: vojtechszocs

frontend/packages/console-app/src/components/data-view/ResourceDataView.tsx

@@ -20,16 +20,20 @@ import {
   ColumnLayout,
   K8sResourceCommon,
 } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
+import { EmptyBox } from '@console/shared/src/components/empty-state/EmptyBox';
+import { StatusBox } from '@console/shared/src/components/status/StatusBox';
 import { createColumnManagementModal } from '@console/internal/components/modals';
 import { TableColumn } from '@console/internal/module/k8s';
 import { DataViewLabelFilter } from './DataViewLabelFilter';
-import { ResourceFilters } from './types';
-import { useResourceDataViewData, GetDataViewRows } from './useResourceDataViewData';
+import { ResourceFilters, GetDataViewRows } from './types';
+import { useResourceDataViewData } from './useResourceDataViewData';
 import { useResourceDataViewFilters } from './useResourceDataViewFilters';
 
 export type ResourceDataViewProps<TData, TCustomRowData, TFilters> = {
+  label?: string;
   data: TData[];
   loaded: boolean;
+  loadError?: any;
   columns: TableColumn<TData>[];
   columnLayout?: ColumnLayout;
   columnManagementID?: string;
@@ -42,6 +46,7 @@ export type ResourceDataViewProps<TData, TCustomRowData, TFilters> = {
   hideNameLabelFilters?: boolean;
   hideLabelFilter?: boolean;
   hideColumnManagement?: boolean;
+  mock?: boolean;
 };
 
 /**
@@ -52,8 +57,10 @@ export const ResourceDataView = <
   TCustomRowData = any,
   TFilters extends ResourceFilters = ResourceFilters
 >({
+  label,
   data,
   loaded,
+  loadError,
   columns,
   columnLayout,
   columnManagementID,
@@ -66,6 +73,7 @@ export const ResourceDataView = <
   hideNameLabelFilters,
   hideLabelFilter,
   hideColumnManagement,
+  mock,
 }: ResourceDataViewProps<TData, TCustomRowData, TFilters>) => {
   const { t } = useTranslation();
 
@@ -136,48 +144,59 @@ export const ResourceDataView = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [additionalFilterNodes, t]);
 
-  return (
-    <DataView activeState={activeState}>
-      <DataViewToolbar
-        filters={
-          <DataViewFilters values={filters} onChange={(_e, values) => onSetFilters(values)}>
-            {dataViewFiltersNodes}
-          </DataViewFilters>
-        }
-        clearAllFilters={clearAllFilters}
-        actions={
-          !hideColumnManagement && (
-            <ResponsiveActions breakpoint="lg">
-              <ResponsiveAction
-                isPersistent
-                variant="plain"
-                onClick={() =>
-                  createColumnManagementModal({
-                    columnLayout,
-                    noLimit: true,
-                  })
-                }
-                aria-label={t('public~Column management')}
-                data-test="manage-columns"
-              >
-                <Tooltip content={t('public~Manage columns')} trigger="mouseenter">
-                  <ColumnsIcon />
-                </Tooltip>
-              </ResponsiveAction>
-            </ResponsiveActions>
-          )
-        }
-        pagination={<Pagination itemCount={filteredData.length} {...pagination} />}
-      />
-      <InnerScrollContainer>
-        <DataViewTable
-          columns={dataViewColumns}
-          rows={dataViewRows}
-          bodyStates={{ empty: bodyEmpty, loading: bodyLoading }}
-          gridBreakPoint=""
-          variant="compact"
+  return mock ? (
+    <EmptyBox label={label} />
+  ) : (
+    <StatusBox
+      label={label}
+      data={filteredData}
+      unfilteredData={data}
+      loaded={loaded}
+      loadError={loadError}
+      skeleton={<div className="loading-skeleton--table" />}
+    >
+      <DataView activeState={activeState}>
+        <DataViewToolbar
+          filters={
+            <DataViewFilters values={filters} onChange={(_e, values) => onSetFilters(values)}>
+              {dataViewFiltersNodes}
+            </DataViewFilters>
+          }
+          clearAllFilters={clearAllFilters}
+          actions={
+            !hideColumnManagement && (
+              <ResponsiveActions breakpoint="lg">
+                <ResponsiveAction
+                  isPersistent
+                  variant="plain"
+                  onClick={() =>
+                    createColumnManagementModal({
+                      columnLayout,
+                      noLimit: true,
+                    })
+                  }
+                  aria-label={t('public~Column management')}
+                  data-test="manage-columns"
+                >
+                  <Tooltip content={t('public~Manage columns')} trigger="mouseenter">
+                    <ColumnsIcon />
+                  </Tooltip>
+                </ResponsiveAction>
+              </ResponsiveActions>
+            )
+          }
+          pagination={<Pagination itemCount={filteredData.length} {...pagination} />}
         />
-      </InnerScrollContainer>
-    </DataView>
+        <InnerScrollContainer>
+          <DataViewTable
+            columns={dataViewColumns}
+            rows={dataViewRows}
+            bodyStates={{ empty: bodyEmpty, loading: bodyLoading }}
+            gridBreakPoint=""
+            variant="compact"
+          />
+        </InnerScrollContainer>
+      </DataView>
+    </StatusBox>
   );
 };

frontend/packages/console-app/src/components/data-view/types.ts

@@ -1,6 +1,9 @@
 import { DataViewTh, DataViewTd } from '@patternfly/react-data-view';
 import { SortByDirection } from '@patternfly/react-table';
-import { K8sResourceCommon } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
+import {
+  K8sResourceCommon,
+  RowProps,
+} from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 
 export type ResourceFilters = {
   name: string;
@@ -16,3 +19,11 @@ export type ResourceDataViewColumn<
 };
 
 export type ResourceDataViewRow = DataViewTd[];
+
+/**
+ * Maps Console `RowProps` data to DataView compatible format.
+ */
+export type GetDataViewRows<TData, TCustomRowData> = (
+  data: RowProps<TData, TCustomRowData>[],
+  columns: ResourceDataViewColumn<TData>[],
+) => ResourceDataViewRow[];

frontend/packages/console-app/src/components/data-view/useResourceDataViewData.tsx

@@ -10,14 +10,9 @@ import {
 } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 import { useActiveColumns } from '@console/internal/components/factory/Table/active-columns-hook';
 import { sortResourceByValue } from '@console/internal/components/factory/Table/sort';
-import { ResourceDataViewColumn, ResourceDataViewRow } from './types';
+import { ResourceDataViewColumn, GetDataViewRows } from './types';
 import { useResourceDataViewSort } from './useResourceDataViewSort';
 
-export type GetDataViewRows<TData, TCustomRowData> = (
-  data: RowProps<TData, TCustomRowData>[],
-  columns: ResourceDataViewColumn<TData>[],
-) => ResourceDataViewRow[];
-
 const isDataViewConfigurableColumn = (
   column: DataViewTh,
 ): column is Extract<DataViewTh, { cell: React.ReactNode }> => {

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -163,7 +163,7 @@ export const TableData: React.FC<TableDataProps> = require('@console/internal/co
  *     showNamespaceOverride: false,
  *     columnManagementID,
  *   });
- *   return userSettingsAreLoaded ? <VirtualizedTable columns={activeColumns} {...otherProps} /> : null
+ *   return userSettingsLoaded ? <VirtualizedTable columns={activeColumns} {...otherProps} /> : null
  * ```
  */
 export const useActiveColumns: UseActiveColumns = require('@console/internal/components/factory/Table/active-columns-hook')