Merge pull request #1501 from fedspendingtransparency/FDG-9867

FDG-9867 New Data Table section that holds the dataset name, filters, and any notes for any data table (Purple outline) should be above the filters.

src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss

@@ -0,0 +1,8 @@
+@import '../../../variables.module.scss';
+
+.infoContainer {
+  margin-top: 1rem;
+  .note {
+    font-weight: $semi-bold-weight;
+  }
+}

src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.spec.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import DataPreviewDatatableBanner from './data-preview-datatable-banner';
+
+describe('DatatableBanner Component', () => {
+  const bannerText = 'THIS IS A TEST';
+  it('renders banner with expected notice', async () => {
+    const { getByText } = render(<DataPreviewDatatableBanner bannerNotice={bannerText} />);
+    expect(getByText(bannerText)).toBeInTheDocument();
+  });
+});

src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+import { infoContainer, note } from './data-preview-datatable-banner.module.scss';
+
+type DatatableBannerProps = {
+  bannerNotice: string;
+};
+
+const DataPreviewDatatableBanner: FunctionComponent<DatatableBannerProps> = ({ bannerNotice }) => {
+  return (
+    <div className={infoContainer}>
+      <span className={note}>Note:</span>
+      <span data-testid="datatable-banner">{' ' + bannerNotice}</span>
+    </div>
+  );
+};
+
+export default DataPreviewDatatableBanner;

src/components/data-preview/data-preview.tsx

@@ -12,14 +12,14 @@ import { matchTableFromApiTables, parseTableSelectionFromUrl, rewriteUrl } from
 import { getApiData } from '../dataset-data/dataset-data-api-helper/dataset-data-api-helper';
 import { queryClient } from '../../../react-query-client';
 import UserFilter from '../filter-download-container/user-filter/user-filter';
-import DatatableBanner from '../filter-download-container/datatable-banner/datatable-banner';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DataPreviewFilterSection from './data-preview-filter-section/data-preview-filter-section';
 import DateRangeFilter from './data-preview-filter-section/date-range-filter/date-range-filter';
 import DataPreviewTableSelectDropdown from './data-preview-dropdown/data-preview-table-select-dropdown';
 import { dataPreview, dataPreviewHeader, dataPreviewTitle, selectedTableName } from './data-preview.module.scss';
 import Analytics from '../../utils/analytics/analytics';
 import { withWindowSize } from 'react-fns';
+import DataPreviewDatatableBanner from './data-preview-datatable-banner/data-preview-datatable-banner';
 
 type DataPreviewProp = {
   config;
@@ -234,6 +234,9 @@ const DataPreview: FunctionComponent<DataPreviewProp> = ({
         />
       </div>
       <div className={selectedTableName}>{selectedTable?.tableName}</div>
+      {config.datatableBanner && <DataPreviewDatatableBanner bannerNotice={config.datatableBanner} />}
+      {selectedTable?.userFilter?.notice && <DataPreviewDatatableBanner bannerNotice={selectedTable.userFilter.notice} />}
+      {selectedTable?.apiFilter?.notice && <DataPreviewDatatableBanner bannerNotice={selectedTable.apiFilter.notice} />}
       <div>
         {tableColumnSortData && (
           <DataPreviewFilterSection
@@ -274,28 +277,8 @@ const DataPreview: FunctionComponent<DataPreviewProp> = ({
                     hideButtons={detailApi && !detailViewState}
                   />
                 )}
-                {selectedTable.userFilter && (
-                  <UserFilter
-                    selectedTable={selectedTable}
-                    onUserFilter={setUserFilterSelection}
-                    apiData={apiData}
-                    setResetFilters={setResetFilters}
-                    allTablesSelected={allTablesSelected}
-                  />
-                )}
-                {selectedTable.apiFilter && (
-                  <UserFilter
-                    selectedTable={selectedTable}
-                    onUserFilter={setUserFilterSelection}
-                    setResetFilters={setResetFilters}
-                    allTablesSelected={allTablesSelected}
-                    setDateRange={setDateRange}
-                    sharedApiFilterOptions={config?.sharedApiFilterOptions}
-                  />
-                )}
               </>
             )}
-            {config.datatableBanner && <DatatableBanner bannerNotice={config.datatableBanner} />}
             {!selectedTable && (
               <div data-testid="dateRangePlaceholder">
                 <h3 className={placeholderText}>Date Range</h3>