WCMS-21486: Add data dictionary info banner when data dictionaries ar…

…e enabled and prop is passed (#230)
GetDKAN · Jul 19, 2024 · 181fb8c · 181fb8c
1 parent c5963bf
commit 181fb8c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 8 deletions.
diff --git a/src/components/DatasetTableTab/DatasetTableTab.test.jsx b/src/components/DatasetTableTab/DatasetTableTab.test.jsx
@@ -19,4 +19,25 @@ describe('<DatasetTableTab />', () => {
     expect(screen.getByRole("table")).toBeInTheDocument();
     expect(screen.getByRole("navigation")).toHaveClass("ds-c-pagination");
   });
+  test("Renders data dictionary info banner if prop is provided", () => {
+    resource.setSort = jest.fn();
+    render(
+      <DatasetTable
+        resource={resource}
+        distribution={distribution.distribution[0]}
+        rootUrl={"test/api/"}
+        dataDictionaryBanner={true}
+      />)
+    expect(screen.getByText('Click on the "Data Dictionary" tab above for full column definitions')).toBeInTheDocument();
+  });
+  test("Does not render data dictionary info banner if prop is not provided", () => {
+    resource.setSort = jest.fn();
+    render(
+      <DatasetTable
+        resource={resource}
+        distribution={distribution.distribution[0]}
+        rootUrl={"test/api/"}
+      />)
+    expect(screen.queryByText('Click on the "Data Dictionary" tab above for full column definitions')).not.toBeInTheDocument();
+  });
 });
diff --git a/src/components/DatasetTableTab/index.tsx b/src/components/DatasetTableTab/index.tsx
@@ -3,7 +3,7 @@ import qs from 'qs';
 import DataTable from '../Datatable/Datatable';
 import { transformTableSortToQuerySort } from '../../services/useDatastore/transformSorts';
 import { buildCustomColHeaders } from '../../templates/FilteredResource/functions';
-import { Pagination, Dropdown, Spinner } from '@cmsgov/design-system';
+import { Pagination, Dropdown, Spinner, Alert } from '@cmsgov/design-system';
 import DataTableHeader from '../DatatableHeader';
 import QueryBuilder from '../QueryBuilder';
 import { DistributionType, ColumnType, ResourceType } from '../../types/dataset';
@@ -16,8 +16,26 @@ export function prepareColumns(columns : any, schema : any) {
   }));
 }
 
-const DatasetTable = ({ id, distribution, resource, rootUrl, customColumns = [], jsonUrl = undefined }
-  : {id: string, distribution: DistributionType, resource: ResourceType, rootUrl: string, customColumns: Array<ColumnType>, jsonUrl?: string}
+type DatasetTableTabProps = {
+  id: string,
+  distribution: DistributionType,
+  resource: ResourceType,
+  rootUrl: string,
+  customColumns: Array<ColumnType>,
+  jsonUrl?: string,
+  dataDictionaryBanner: boolean,
+}
+
+const DatasetTable = ({
+    id,
+    distribution,
+    resource,
+    rootUrl,
+    customColumns = [],
+    jsonUrl = undefined,
+    dataDictionaryBanner
+   }
+  : DatasetTableTabProps
   ) => {
   const defaultPage = 1;
   const defaultPageSize = 10;
@@ -51,6 +69,11 @@ const DatasetTable = ({ id, distribution, resource, rootUrl, customColumns = [],
     return (
       <>
         <QueryBuilder resource={resource} id={distribution.identifier} customColumns={customColumnHeaders} />
+        {dataDictionaryBanner && (
+          <div className="ds-u-display--flex">
+            <Alert>Click on the "Data Dictionary" tab above for full column definitions</Alert>
+          </div>
+        )}
         {<DataTableHeader resource={resource} downloadURL={downloadURL} unfilteredDownloadURL={distribution.data.downloadURL} jsonUrl={jsonUrl} /> }
         <div className="ds-u-border-x--1 ds-u-border-bottom--1">
           <DataTable

diff --git a/src/templates/Dataset/index.tsx b/src/templates/Dataset/index.tsx
@@ -46,7 +46,8 @@ const Dataset = ({
   dataDictionaryUrl,
   borderlessTabs = false,
   defaultPageSize = 25,
-  dataDictionaryCSV = false
+  dataDictionaryCSV = false,
+  dataDictionaryBanner = false
 } : DatasetPageType) => {
   const options = location.search
     ? { ...qs.parse(location.search, { ignoreQueryPrefix: true }) }
@@ -132,6 +133,8 @@ const Dataset = ({
     else if (window.location.hash.substring(1) != selectedTab)
       setSelectedTab(window.location.hash.substring(1))
   }, [distribution, window.location.hash])
+
+  const displayDataDictionaryTab = ((distribution.data && distribution.data.describedBy && distribution.data.describedByType === 'application/vnd.tableschema+json') || (datasetSitewideDictionary && datasetSitewideDictionary.length > 0)) as boolean;
 
   return (
     <>
@@ -172,7 +175,14 @@ const Dataset = ({
                       }
                       className={ borderlessTabs ? 'ds-u-border--0 ds-u-padding-x--0' : '' }
                     >
-                      <DatasetTable id={id} distribution={distribution} resource={resource} rootUrl={rootUrl} customColumns={customColumns} />
+                      <DatasetTable
+                        id={id}
+                        distribution={distribution}
+                        resource={resource}
+                        rootUrl={rootUrl}
+                        customColumns={customColumns}
+                        dataDictionaryBanner={dataDictionaryBanner && displayDataDictionaryTab}
+                      />
                     </TabPanel>
                   )}
                   <TabPanel
@@ -187,7 +197,7 @@ const Dataset = ({
                   >
                     <DatasetOverview resource={resource} dataset={dataset} distributions={distributions} metadataMapping={metadataMapping} />
                   </TabPanel>
-                  {(distribution.data && distribution.data.describedBy && distribution.data.describedByType === 'application/vnd.tableschema+json') || (datasetSitewideDictionary && datasetSitewideDictionary.length) ? (
+                  {displayDataDictionaryTab && (
                     <TabPanel
                       id={'data-dictionary'}
                       tab={
@@ -206,8 +216,7 @@ const Dataset = ({
                         csvDownload={dataDictionaryCSV}
                       />
                     </TabPanel>
-                  )
-                  : null}
+                  )}
                   { distribution && distribution.data && (
                     <TabPanel
                       id={'api'}

diff --git a/src/types/dataset.ts b/src/types/dataset.ts
@@ -69,6 +69,7 @@ export type DatasetPageType = {
   borderlessTabs: boolean,
   defaultPageSize: Number,
   dataDictionaryCSV: boolean,
+  dataDictionaryBanner: boolean,
 }