From f296f4c8bf7b73d94ed9fb13ee2dc67c37d92f15 Mon Sep 17 00:00:00 2001
From: Jordan Dachroeden <jordan.dachroeden@kc.frb.org>
Date: Wed, 20 Nov 2024 09:02:07 -0600
Subject: [PATCH 1/2] FDG-9867 Update table banner

---
 .../data-preview-datatable-banner.module.scss | 14 +++++++++++
 .../data-preview-datatable-banner.spec.tsx    | 11 ++++++++
 .../data-preview-datatable-banner.tsx         | 17 +++++++++++++
 src/components/data-preview/data-preview.tsx  | 25 +++----------------
 4 files changed, 46 insertions(+), 21 deletions(-)
 create mode 100644 src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss
 create mode 100644 src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.spec.tsx
 create mode 100644 src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.tsx

diff --git a/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss b/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss
new file mode 100644
index 000000000..de93a2a07
--- /dev/null
+++ b/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss
@@ -0,0 +1,14 @@
+@import '../../../variables.module.scss';
+
+.infoContainer {
+  margin-top: 1rem;
+  .note {
+    font-weight: $semi-bold-weight;
+  }
+}
+
+@media (min-width: $breakpoint-sm) {
+  .infoContainer {
+    margin-right: 2.5rem;
+  }
+}
diff --git a/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.spec.tsx b/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.spec.tsx
new file mode 100644
index 000000000..36925bd95
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.tsx b/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.tsx
new file mode 100644
index 000000000..be7ea1fee
--- /dev/null
+++ b/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;
diff --git a/src/components/data-preview/data-preview.tsx b/src/components/data-preview/data-preview.tsx
index 017402310..9b9ea1743 100644
--- a/src/components/data-preview/data-preview.tsx
+++ b/src/components/data-preview/data-preview.tsx
@@ -12,7 +12,6 @@ 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';
@@ -20,6 +19,7 @@ import DataPreviewTableSelectDropdown from './data-preview-dropdown/data-preview
 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>

From 9f2470ea144df52aea45ebf362fd6f5d986506fd Mon Sep 17 00:00:00 2001
From: Jordan Dachroeden <jordan.dachroeden@kc.frb.org>
Date: Wed, 20 Nov 2024 09:05:35 -0600
Subject: [PATCH 2/2] FDG-9867 Update style

---
 .../data-preview-datatable-banner.module.scss               | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss b/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss
index de93a2a07..42d3c1a24 100644
--- a/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss
+++ b/src/components/data-preview/data-preview-datatable-banner/data-preview-datatable-banner.module.scss
@@ -6,9 +6,3 @@
     font-weight: $semi-bold-weight;
   }
 }
-
-@media (min-width: $breakpoint-sm) {
-  .infoContainer {
-    margin-right: 2.5rem;
-  }
-}