3.1.0 - Data Dictionary page updates and changes for Open Payments to…

… upgrade to 3.x (#173) * Open Payments 3.x upgrade * Data Dictionary Tab Pagination and Mobile scroll * 3.1.0 and fix tests * Support disabling pagination on search page * Port over mobile search button style with an optional prop * width bug * Backport OP improvements, add a filter by default to the QueryBuilder * Fix tests * Revert useDatastore change from 3.x release and some typescript things * Fix search bar on non OP sites * Fix regressions
GetDKAN · Mar 18, 2024 · e6cf1ad · e6cf1ad
1 parent e15940a
commit e6cf1ad
Show file tree

Hide file tree

Showing 23 changed files with 203 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",

diff --git a/src/components/DataTablePageResults/DataTablePageResults.tsx b/src/components/DataTablePageResults/DataTablePageResults.tsx
@@ -24,12 +24,17 @@ const DataTablePageResults = ({
   const page = offset / limit;
   const startTotal = () => (page * limit + 1)
   return (
-    <p className={className}>{`${startTotal().toLocaleString()} - ${ofTotal().toLocaleString()} of ${numTotalRows.toLocaleString()} rows`}</p>
+    <p className={`ds-u-margin-bottom--2 ${className}`}>
+      Displaying{' '}
+      <span className="ds-u-font-weight--bold">{`${startTotal().toLocaleString()} - ${ofTotal().toLocaleString()}`}</span>{' '}
+      of <span className="ds-u-font-weight--bold">{`${numTotalRows.toLocaleString()}`}</span>{' '}
+      results
+    </p>
   );
 };
 
 DataTablePageResults.defaultProps = {
-  className: 'data-table-results ds-u-margin-bottom--2',
+  className: 'data-table-results',
 };
 
 DataTablePageResults.propTypes = {

diff --git a/src/components/DatasetDataDictionaryTab/index.tsx b/src/components/DatasetDataDictionaryTab/index.tsx
@@ -1,61 +1,100 @@
-import React from 'react';
-import { useQuery } from '@tanstack/react-query';
+import React, {useState} from 'react';
 import withQueryProvider from '../../utilities/QueryProvider/QueryProvider';
+import { useReactTable, getCoreRowModel, flexRender, createColumnHelper, getPaginationRowModel } from '@tanstack/react-table';
 
-import { Table, TableHead, TableRow, TableCell, TableBody } from '@cmsgov/design-system';
+import { Table, TableHead, TableRow, TableCell, TableBody, Pagination } from '@cmsgov/design-system';
 import { DatasetDictionaryItemType } from '../../types/dataset';
 
 const DataDictionary = (
-  { datasetDictionary, title } : 
-  { datasetDictionary: DatasetDictionaryItemType[], title: string}) => {
+  { datasetDictionary, title, pageSize = 20 } : 
+  { datasetDictionary: DatasetDictionaryItemType[], title: string, pageSize: number}) => {
+  const [pagination, setPagination] = useState({
+    pageIndex: 1,
+    pageSize: pageSize,
+  });
 
+  const columnHelper = createColumnHelper<DatasetDictionaryItemType>()
   const tableColumns = [
-    {
-      colName: "name",
-      UIName: "Name"
-    },
-    {
-      colName: "title",
-      UIName: "Title"
-    },
-    {
-      colName: "type",
-      UIName: "Type"
-    },
-    {
-      colName: "format",
-      UIName: "Format"
-    }
+    columnHelper.accessor('name', {
+      header: 'Name',
+    }),
+    columnHelper.accessor('title', {
+      header: 'Title',
+    }),
+    columnHelper.accessor('type', {
+      header: 'Type',
+    }),
+    columnHelper.accessor('format', {
+      header: 'Format',
+    }),
   ];
 
+  const table = useReactTable({
+    data: datasetDictionary,
+    columns: tableColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    state: {
+      pagination: pagination
+    }
+  });
 
   return (
     <>
       <h2 className="ds-text-heading--2xl ds-u-margin-y--3">{title}</h2>
-      <Table>
-        <TableHead>
-          <TableRow>
-            { tableColumns.map((col) => {
-              return (
-                <TableCell>{col.UIName}</TableCell>
-              )
-            }) }
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {datasetDictionary.map((row : DatasetDictionaryItemType) => {      
-            return (
+      <div className="ds-u-overflow--auto ds-u-border-x--1">
+        <Table className="dc-c-datatable">
+          <TableHead>
+            {table.getHeaderGroups().map(headerGroup => (
               <TableRow>
-                { tableColumns.map((col) => {
+                {headerGroup.headers.map(header => {
                   return (
-                    <TableCell>{row[col.colName]}</TableCell>
+                    <TableCell>{flexRender(header.column.columnDef.header, header.getContext()) as React.ReactNode}</TableCell>
                   )
-                })}
+                }) }
               </TableRow>
             )
-          })}
-        </TableBody>
-      </Table>
+            )}
+          </TableHead>
+          <TableBody>
+            {table.getRowModel().rows.map((row, index) => { 
+              const even = (index + 1) % 2 === 0;     
+              return (
+                <TableRow className={`${even ? "dc-c-datatable--even-row" : ""}`}>
+                  {row.getVisibleCells().map((cell) => {
+                    return (
+                      <TableCell
+                      {...{
+                        key: cell.id
+                      }}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext()) as React.ReactNode}
+                      </TableCell>
+                    )
+                  })}
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </div>
+      {datasetDictionary.length > pageSize ? (
+        <Pagination
+          totalPages={Math.ceil(datasetDictionary.length / pagination.pageSize)}
+          currentPage={pagination.pageIndex + 1}
+          onPageChange={(evt, page) => {
+            evt.preventDefault();
+            setPagination({
+              pageIndex: page - 1,
+              pageSize: pageSize
+            })
+          }}
+          renderHref={(page) => {
+            return '';
+          }}
+        />
+      ): ''}
     </>
   )
 }

diff --git a/src/components/DatasetSearchFacets/dataset-search-facets.scss b/src/components/DatasetSearchFacets/dataset-search-facets.scss
@@ -6,10 +6,27 @@
       padding-left: 32px;
     }
   }
+  div.--alt-style input {
+    @media only screen and (max-width: 544px) {
+      --text-input__border-radius: 50px;
+      --text-input__border-color: #c6b7b7;
+      height: 61px;
+    }
+  }
+
   .ds-c-field__before {
     left: 16px;
     top: 12px;
   }
+  .dc-c-search-button-mobile {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    position: absolute;
+    right: 18px;
+    top: 2px;
+    z-index: 1000;
+    height: 57px;
+  }
 }
 
 .dkan-dataset-search--facet-container {

diff --git a/src/components/DatasetSearchListItem/index.tsx b/src/components/DatasetSearchListItem/index.tsx
@@ -16,6 +16,7 @@ type SearchItemProps = {
   identifier: string;
   downloadUrl?: string | null;
   largeFile: boolean;
+  paginationEnabled: boolean;
 }
 
 const dangerousDescriptionElement = ({ children } : {children: string}) => (
@@ -24,7 +25,7 @@ const dangerousDescriptionElement = ({ children } : {children: string}) => (
 
 const DatasetSearchListItem = (props: SearchItemProps) => {
   const desktop = useMediaQuery({ minWidth: 1024 });
-  const { title, modified, description, theme, identifier, downloadUrl, largeFile = false } = props;
+  const { title, modified, description, theme, identifier, downloadUrl, largeFile = false, paginationEnabled } = props;
 
   let linkContainerClasses = 'ds-l-col--12 ds-u-margin-bottom--2';
   let linkClasses = 'ds-c-button ds-u-display--block ds-u-text-align--left';
@@ -37,7 +38,6 @@ const DatasetSearchListItem = (props: SearchItemProps) => {
     <TextTruncate
       line={3}
       element={'p'}
-      containerClassName="ds-u-margin-top--0"
       truncateText="…"
       textElement={dangerousDescriptionElement}
       text={description}
@@ -46,10 +46,10 @@ const DatasetSearchListItem = (props: SearchItemProps) => {
   );
 
   return (
-    <li className="dc-c-search-list-item" key={identifier}>
-      <div className="dc-c-searchlist-item ds-u-border-top--1 ds-u-margin-bottom--4">
+    <li className="dc-c-search-list-item ds-u-padding-top--3" key={identifier}>
+      <div className={`dc-c-searchlist-item ${paginationEnabled ? 'ds-u-border-top--1' : 'ds-u-border-bottom--1 ds-u-padding-bottom--3'}`}>
         <div className="ds-l-row ds-u-align-items--start">
-          <span className="ds-l-col--12 ds-u-text-align--right ds-u-padding-top--2">
+          <span className={`ds-l-col--12 ds-u-text-align--right ${paginationEnabled ? 'ds-u-padding-top--2' : 'ds-u-padding-top--0'}`}>
             Updated <TransformedDate date={modified} />
           </span>
           <h2 className="ds-l-col--12 ds-text-heading--2xl">
@@ -59,7 +59,7 @@ const DatasetSearchListItem = (props: SearchItemProps) => {
         <div className="ds-l-row">
           <div className="ds-l-col--12 ds-l-md-col--12">{truncatedDescription}</div>
         </div>
-        <ul className="ds-l-row ds-u-padding--0 ds-u-flex-direction--row">
+        <ul className="ds-l-row ds-u-padding--0 ds-u-flex-direction--row ds-u-margin-top--4">
           <li className={linkContainerClasses}>
             <span className={linkClasses}>
               <Link to={`/dataset/${identifier}#overview`}>

diff --git a/src/components/DatasetTableTab/index.tsx b/src/components/DatasetTableTab/index.tsx
@@ -64,7 +64,7 @@ const DatasetTable = ({ id, distribution, resource, rootUrl, customColumns = [],
         </div>
         <div className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end ds-u-md-justify-content--between ds-u-margin-top--2 ds-u-align-items--center">
           <Pagination
-            totalPages={Math.ceil(resource.count / pageSize)}
+            totalPages={Math.ceil(resource.count ? resource.count / pageSize : 1)}
             currentPage={page}
             onPageChange={(evt, page) => {
               evt.preventDefault();

diff --git a/src/components/DatatableHeader/DatatableHeader.test.jsx b/src/components/DatatableHeader/DatatableHeader.test.jsx
@@ -12,7 +12,8 @@ describe('<DatatableHeader />', () => {
         downloadUrl={"https://test.gov/test.csv"}
       />);
 
-    expect(screen.getByText("1 - 25 of 69 rows")).toBeInTheDocument();
+    const el = screen.getByText('Displaying', {exact: false})
+    expect(el.textContent).toEqual("Displaying 1 - 25 of 69 results");
     expect(screen.getByText("Export CSV")).toBeInTheDocument();
   });
 });
diff --git a/src/components/DatatableHeader/index.tsx b/src/components/DatatableHeader/index.tsx
@@ -17,7 +17,7 @@ const DataTableHeader = ({ resource, downloadURL, jsonUrl } : {resource: Resourc
             offset={offset}
           />
         </div>
-        <div className="dc-c-resource-header--buttons ds-l-col--12 ds-l-md-col--8 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end ds-u-margin-bottom--2 ds-u-md-margin-bottom--0 ds-u-padding-x--0">
+        <div className="dc-c-resource-header--buttons ds-l-col--12 ds-l-lg-col--8 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end ds-u-margin-bottom--2 ds-u-md-margin-bottom--0 ds-u-padding-x--0">
           <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-sm-margin-right--2 ds-u-margin-bottom--2 ds-u-sm-margin-bottom--0">
             <Tooltip
               onOpen={() => {

diff --git a/src/components/PageHeader/index.tsx b/src/components/PageHeader/index.tsx
@@ -6,10 +6,10 @@ type pageHeaderProps = {
 const PageHeader = (props: pageHeaderProps) => {
   const { headerText } = props;
   return (
-    <div className="ds-l-container ds-u-padding-top--4">
+    <div className="ds-l-container">
       <div className="ds-l-row">
         <div className="ds-l-md-col--8">
-          <h1 className="dc-c-entity__name ds-text-heading--3xl ds-u-margin-bottom--6">
+          <h1 className="dc-c-entity__name ds-text-heading--3xl ds-u-margin-bottom--4">
             <span className="ds-u-margin-right--2" data-testid="profile-full-name">
               {headerText}
             </span>

diff --git a/src/components/QueryBuilder/QueryBuilder.test.jsx b/src/components/QueryBuilder/QueryBuilder.test.jsx
@@ -28,11 +28,11 @@ describe('<QueryBuilder />', () => {
     await act(() => {
       screen.getByRole("button", { name: "+ Add another filter" }).click();
     });
-    expect(screen.getByRole("group")).toBeInTheDocument();
+    expect(screen.queryAllByRole("group")).toHaveLength(2);
 
     await act(() => {
-      screen.getByRole("button", { name: "Delete filter" }).click();
+      screen.getAllByRole("button", { name: "Delete filter" })[0].click();
     });
-    expect(screen.queryByRole("group")).not.toBeInTheDocument();
+    expect(screen.queryAllByRole("group")).toHaveLength(1);
   });
 });
diff --git a/src/components/QueryBuilder/index.tsx b/src/components/QueryBuilder/index.tsx
@@ -78,7 +78,11 @@ const QueryBuilder = (props: QueryBuilderPropTypes) => {
   };
 
   React.useEffect(() => {
-    addCondition(conditions);
+    if (conditions.length) {
+      addCondition(conditions);
+    } else {
+      addCondition(null);
+    }
     setTitleConditions(conditions);
   }, []);
   React.useEffect(() => {

diff --git a/src/components/ResourceInformation/index.tsx b/src/components/ResourceInformation/index.tsx
@@ -9,7 +9,7 @@ const ResourceInformation = ({ resource } : {resource: ResourceType}) => {
       <div className="ds-u-display--flex ds-u-text-align--center ds-u-justify-content--center ds-u-md-justify-content--start">
         <div className="ds-u-fill--gray-lightest ds-u-radius ds-u-margin-right--1 ds-u-padding--2">
           <div className="ds-u-padding-top--05">Rows</div>
-          <div className="ds-u-font-weight--bold">{count.toLocaleString()}</div>
+          <div className="ds-u-font-weight--bold">{count ? count.toLocaleString() : ''}</div>
         </div>
         <div className="ds-u-fill--gray-lightest ds-u-radius ds-u-margin-right--1 ds-u-padding--2">
           <div>

diff --git a/src/components/SearchButton/index.tsx b/src/components/SearchButton/index.tsx
@@ -1,14 +1,25 @@
 import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import { Button } from '@cmsgov/design-system';
 
 type SearchButtonProps = {
   text?: string;
+  altMobileStyle?: boolean;
 };
 
 const SearchButton = (props: SearchButtonProps) => {
-  const { text } = props;
-
-  return (
+  const { text, altMobileStyle } = props;
+  const sm = useMediaQuery({ minWidth: 0, maxWidth: 768 });
+  return (altMobileStyle && sm) ? (
+    <Button
+      className="ds-u-margin-left--auto ds-u-padding-x--0 ds-c-button--solid dc-c-search-button-mobile"
+      size="big"
+      type="submit"
+      style={{ width: '70px' }}
+    >
+      <span className="fas fa-search small-text" />
+    </Button>
+  ) : (
     <Button type="submit" variation="solid" className="ds-l-col--2">
       <span className="fas fa-search small-text ds-u-sm-display--none" />
       <div className="full-text ds-u-display--none ds-u-sm-display--inline-block ds-u-display--flex ds-u-align-items--center">

diff --git a/src/services/useDatastore/fetch.js b/src/services/useDatastore/fetch.js
@@ -42,12 +42,12 @@ export async function fetchDataFromQuery(
       groupings: groupings,
       ...additionalParams,
     },
-    paramsSerializer: {
-      serialize: qs.stringify
+    //paramsSerializer: {
+    //  serialize: qs.stringify
+    //},
+    paramsSerializer: (params) => {
+      return qs.stringify(params);
     },
-    // paramsSerializer: (params) => {
-    //   return qs.stringify(params);
-    // },
   }).then((res) => {
     const { data } = res;
     const propertyKeys =