WCMS-22095: Clean up /data route components

src/components/Datatable/Datatable.jsx

@@ -50,7 +50,7 @@ const DataTable = ({
  const [ highlightRow, setHighlightRow ] = useState(null);
 
  useEffect(() => {
- if (!columnOrder.length)
+ if (columnOrder && !columnOrder.length)
  setColumnOrder(table_columns.map(c => c.accessorKey))
  }, [columnOrder])
 

src/components/ResourceFooter/index.jsx

@@ -8,7 +8,6 @@ const ResourceFooter = ({ resource }) => {
  <div>
  {values.length > 0 && (
  <Pagination
- id="test-default"
  currentPage={Number(offset) / limit + 1}
  totalPages={Math.ceil(Number(count) / limit)}
  onPageChange={(evt, page) => {

src/components/ResourceHeader/index.jsx

@@ -1,14 +1,8 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import React from 'react';
 import { useMediaQuery } from 'react-responsive';
-import { usePopper } from 'react-popper';
 import {
- HelpDrawerToggle,
  Button,
  Tooltip,
- Spinner,
- Accordion,
- AccordionItem,
 } from '@cmsgov/design-system';
 import DataTablePageResults from '../DataTablePageResults';
 import DataTableDensity from '../DataTableDensity';
@@ -20,9 +14,6 @@ import './resource-header.scss';
 
 const ResourceHeader = ({
  setTablePadding,
- id,
- distribution,
- includeFiltered,
  includeDensity,
  includeDownload,
  resource,
@@ -32,32 +23,19 @@ const ResourceHeader = ({
  const md = useMediaQuery({ minWidth: 0, maxWidth: 768 });
  const { limit, offset, count, setLimit, setOffset } = resource;
  const intCount = count ? parseInt(count) : 0;
- const [referenceElement, setReferenceElement] = useState(null);
- const [popperElement, setPopperElement] = useState(null);
- const [arrowElement, setArrowElement] = useState(null);
- const { styles, attributes } = usePopper(referenceElement, popperElement, {
- modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
- });
 
  return (
  <div className="dc-c-resource-header">
- <div className="ds-l-row">
- <div className="ds-l-col--12">
- {includeFiltered && (
- <Link className="ds-c-button ds-c-button--solid" to={`/dataset/${id}/data`}>
- View and filter data
- </Link>
- )}
- </div>
- </div>
  <div className="ds-l-row ds-u-align-items--center">
- <div className="ds-l-col--12 ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center">
- <div className="ds-u-font-weight--bold ds-u-margin-bottom--2">
- <DataTablePageResults
- totalRows={parseInt(intCount)}
- limit={parseInt(limit)}
- offset={parseInt(offset)}
- />
+ <div className="ds-l-col--12 ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center ds-u-margin-bottom--2">
+ <div className="ds-u-font-weight--bold">
+ {(!resource.loading && resource.count !== null) && (
+ <DataTablePageResults
+ totalRows={parseInt(intCount)}
+ limit={parseInt(limit)}
+ offset={parseInt(offset)}
+ />
+ )}
  </div>
  <div className="dc-c-resource-header--buttons">
  {includeDownload && (
@@ -101,7 +79,7 @@ const ResourceHeader = ({
  ariaLabel="Display settings"
  title={
  <div className="dc-c-display-settings">
- <DataTableRowChanger limit={limit} setLimit={setLimit} setOffset={setOffset} />
+ <DataTableRowChanger limit={Number(limit)} setLimit={setLimit} setOffset={setOffset} />
  {includeDensity && (
  <DataTableDensity
  setTablePadding={setTablePadding}

src/components/ResourcePreview/index.jsx

@@ -46,6 +46,7 @@ const ResourcePreview = ({
  }
  sortTransform={transformTableSortToQuerySort}
  tablePadding={tablePadding}
+ loading={resource.loading}
  className="dc-c-datatable"
  customColumnFilter={DefaultColumnFilter}
  />

src/templates/FilteredResource/FilteredResourceBody.jsx

@@ -13,7 +13,6 @@ import TransformedDate from '../../components/TransformedDate';
 import FilteredResourceDescription from './FilteredResourceDescription';
 import 'swagger-ui-react/swagger-ui.css';
 import { DataTableContext } from '../Dataset';
-import { ManageColumnsContext } from '../../components/DatasetTableTab/DataTableStateWrapper';
 
 const FilteredResourceBody = ({
  id,
@@ -109,29 +108,18 @@ const FilteredResourceBody = ({
  <ResourceHeader
  includeDensity={true}
  setTablePadding={setTablePadding}
- distribution={distribution}
  resource={resource}
  downloadUrl={downloadUrl}
  tablePadding={tablePadding}
  includeDownload
  />
- <ManageColumnsContext.Provider value={{
- columnOrder: [],
- setColumnOrder: () => {},
- columnVisibility: {},
- setColumnVisibility: () => {},
- page: 1,
- setPage: () => {}
- }}>
- <ResourcePreview
- id={distribution.identifier}
- tablePadding={tablePadding}
- columnSettings={columnSettings}
- columnWidths={columnWidths}
- />
-
- <ResourceFooter resource={resource} />
- </ManageColumnsContext.Provider>
+ <ResourcePreview
+ id={distribution.identifier}
+ tablePadding={tablePadding}
+ columnSettings={columnSettings}
+ columnWidths={columnWidths}
+ />
+ <ResourceFooter resource={resource} />
  </div>
  </DataTableContext.Provider>
  ) : (

src/templates/FilteredResource/filtered-resource.scss

@@ -1,17 +1,5 @@
-.dc-c-resource-action {
- min-height: 100%;
-}
-
-.dc-filtered-resource-toggle {
- align-self: center;
-}
-
-.dc-c-filterd-resouce-drawer {
- .ds-c-help-drawer__footer {
- h4 {
- display: none;
- }
- }
+.dc-c-resource-header .data-table-results {
+ margin: 0;
 }
 
 .dc-c-resource-header--buttons {