From 182b7fb8ca208fbfb321413598def857fa140214 Mon Sep 17 00:00:00 2001
From: Bethany Dunfield <bethany.dunfield@civicactions.com>
Date: Fri, 13 Sep 2024 09:23:18 -0600
Subject: [PATCH 1/2] WCMS-22095: Clean up /data route components

---
 src/components/Datatable/Datatable.jsx        |  2 +-
 src/components/ResourceFooter/index.jsx       |  1 -
 src/components/ResourceHeader/index.jsx       | 40 +++++--------------
 src/components/ResourcePreview/index.jsx      |  1 +
 .../FilteredResource/FilteredResourceBody.jsx | 26 ++++--------
 5 files changed, 18 insertions(+), 52 deletions(-)

diff --git a/src/components/Datatable/Datatable.jsx b/src/components/Datatable/Datatable.jsx
index a4aec083..b613ebeb 100644
--- a/src/components/Datatable/Datatable.jsx
+++ b/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])
 
diff --git a/src/components/ResourceFooter/index.jsx b/src/components/ResourceFooter/index.jsx
index ae6c699e..83aa6cdc 100644
--- a/src/components/ResourceFooter/index.jsx
+++ b/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) => {
diff --git a/src/components/ResourceHeader/index.jsx b/src/components/ResourceHeader/index.jsx
index f51af246..15523f03 100644
--- a/src/components/ResourceHeader/index.jsx
+++ b/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)}
-            />
+            {(!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}
diff --git a/src/components/ResourcePreview/index.jsx b/src/components/ResourcePreview/index.jsx
index 9a2c0d4b..e14cb171 100644
--- a/src/components/ResourcePreview/index.jsx
+++ b/src/components/ResourcePreview/index.jsx
@@ -46,6 +46,7 @@ const ResourcePreview = ({
         }
         sortTransform={transformTableSortToQuerySort}
         tablePadding={tablePadding}
+        loading={resource.loading}
         className="dc-c-datatable"
         customColumnFilter={DefaultColumnFilter}
       />
diff --git a/src/templates/FilteredResource/FilteredResourceBody.jsx b/src/templates/FilteredResource/FilteredResourceBody.jsx
index c57fd180..09cefaac 100644
--- a/src/templates/FilteredResource/FilteredResourceBody.jsx
+++ b/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>
           ) : (

From dfcfcd3df67ff73e37dca0cfefd3d762600c6bcc Mon Sep 17 00:00:00 2001
From: Bethany Dunfield <bethany.dunfield@civicactions.com>
Date: Mon, 16 Sep 2024 08:31:34 -0600
Subject: [PATCH 2/2] Fix for margin blink during loading state

---
 src/components/ResourceHeader/index.jsx          |  4 ++--
 .../FilteredResource/filtered-resource.scss      | 16 ++--------------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/ResourceHeader/index.jsx b/src/components/ResourceHeader/index.jsx
index 15523f03..55accf46 100644
--- a/src/components/ResourceHeader/index.jsx
+++ b/src/components/ResourceHeader/index.jsx
@@ -27,8 +27,8 @@ const ResourceHeader = ({
   return (
     <div className="dc-c-resource-header">
       <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">
+        <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)}
diff --git a/src/templates/FilteredResource/filtered-resource.scss b/src/templates/FilteredResource/filtered-resource.scss
index 366b0d2e..e1cb6ca4 100644
--- a/src/templates/FilteredResource/filtered-resource.scss
+++ b/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 {