Merge pull request #1707 from fedspendingtransparency/FDG-9980

FDG-9980 Data Table Mobile View - Table Select Dialog

Author: chasls2

src/components/data-preview/data-preview-dropdown/data-preview-table-select-dropdown.tsx

@@ -9,9 +9,7 @@ import DataPreviewDropdownDialogSearch from '../data-preview-dropdown-search/dat
 import { pxToNumber } from '../../../helpers/styles-helper/styles-helper';
 import { breakpointLg } from '../data-preview.module.scss';
 import DataPreviewMobileDialog from '../data-preview-mobile-dialog/data-preview-mobile-dialog';
-import DataPreviewMobileFilterList, {
-  placeholderDataTables,
-} from '../data-preview-filter-section/data-preview-mobile-filter-list/data-preview-mobile-filter-list';
+import DataPreviewMobileFilterList from '../data-preview-filter-section/data-preview-mobile-filter-list/data-preview-mobile-filter-list';
 
 const DataPreviewTableSelectDropdown: FunctionComponent<ITableSelectDropdown> = ({
   apis,
@@ -56,7 +54,7 @@ const DataPreviewTableSelectDropdown: FunctionComponent<ITableSelectDropdown> =
       selectedOption={allTablesSelected ? allTablesOption.tableName : selectedTable?.tableName}
       active={active}
       setActive={setActive}
-      dropdownWidth="30rem"
+      dropdownWidth={width < pxToNumber(breakpointLg) ? '20rem' : '30rem'}
     />
   );
 
@@ -156,7 +154,7 @@ const DataPreviewTableSelectDropdown: FunctionComponent<ITableSelectDropdown> =
               onClose={handleCancel}
               filterName="Data Tables"
               searchText="Search data tables"
-              filterComponent={<DataPreviewMobileFilterList filterOptions={placeholderDataTables} />}
+              filterComponent={<DataPreviewMobileFilterList filterOptions={options} getName={option => option.tableName} />}
             />
           )}
         </>

src/components/data-preview/data-preview-filter-section/data-preview-mobile-filter-list/data-preview-mobile-filter-list.spec.js

@@ -13,32 +13,47 @@ const mockFilters = [
 
 describe('Data preview mobile filter list', () => {
   it('Renders a list of buttons', () => {
-    const { getAllByRole } = render(<DataPreviewMobileFilterList filterOptions={mockFilters} />);
+    const { getAllByRole } = render(
+      <DataPreviewMobileFilterList filterOptions={mockFilters} getName={option => option.name} getSecondary={option => option.secondary} />
+    );
     const buttons = getAllByRole('button');
     expect(buttons.length).toEqual(6);
   });
 
   it('Renders the parts of each button', () => {
-    const { getByText } = render(<DataPreviewMobileFilterList filterOptions={mockFilters} />);
+    const { getByText } = render(
+      <DataPreviewMobileFilterList filterOptions={mockFilters} getName={option => option.name} getSecondary={option => option.secondary} />
+    );
     expect(getByText('Record Date')).toBeInTheDocument();
     expect(getByText('Last 5 years')).toBeInTheDocument();
   });
 
   it('Adds the selected class onto selected filters', () => {
-    const { getByRole } = render(<DataPreviewMobileFilterList filterOptions={mockFilters} />);
+    const { getByRole } = render(
+      <DataPreviewMobileFilterList filterOptions={mockFilters} getName={option => option.name} getSecondary={option => option.secondary} />
+    );
     expect(getByRole('button', { name: 'Parent ID No filter applied' })).toHaveClass('selected');
     expect(getByRole('button', { name: 'Record Date Last 5 years' })).not.toHaveClass('selected');
   });
 
   it('Adds the active class onto active filters', () => {
-    const { getByRole } = render(<DataPreviewMobileFilterList filterOptions={mockFilters} />);
+    const { getByRole } = render(
+      <DataPreviewMobileFilterList filterOptions={mockFilters} getName={option => option.name} getSecondary={option => option.secondary} />
+    );
     expect(getByRole('button', { name: 'Record Date Last 5 years' })).toHaveClass('active');
     expect(getByRole('button', { name: 'Parent ID No filter applied' })).not.toHaveClass('active');
   });
 
   it('Calls the onClick handle upon button click', () => {
     const clickHandlerSpy = jest.fn();
-    const { getByRole } = render(<DataPreviewMobileFilterList onClick={clickHandlerSpy} filterOptions={mockFilters} />);
+    const { getByRole } = render(
+      <DataPreviewMobileFilterList
+        onClick={clickHandlerSpy}
+        filterOptions={mockFilters}
+        getName={option => option.name}
+        getSecondary={option => option.secondary}
+      />
+    );
     const button = getByRole('button', { name: 'Record Date Last 5 years' });
     fireEvent.click(button);
     expect(clickHandlerSpy).toHaveBeenCalled();

src/components/data-preview/data-preview-filter-section/data-preview-mobile-filter-list/data-preview-mobile-filter-list.tsx

@@ -20,27 +20,28 @@ export const placeholderFilters = [
   { name: 'Current Month Budget Amount', secondary: 'No filter applied', selected: false, active: false },
 ];
 
-export const placeholderDataTables = [
-  { name: 'All Data Tables (Download Only)', secondary: null, selected: true, active: false },
-  { name: 'Summary of Receipts, Outlays, and the Deficit/Surplus of the U.S. Government', secondary: null, selected: false, active: false },
-  { name: 'Summary of Budget and Off-Budget Results and Financing of the U.S. Government', secondary: null, selected: false, active: false },
-];
-
 export interface IMobileFilterList {
   filterOptions: { name: string; secondary?: string; selected?: boolean; active?: boolean }[];
   onClick: () => void;
+  getName: (option: any) => string;
+  getSecondary: (option: any) => string;
 }
 
-const DataPreviewMobileFilterList: FunctionComponent<IMobileFilterList> = ({ filterOptions = placeholderFilters, onClick }) => {
+const DataPreviewMobileFilterList: FunctionComponent<IMobileFilterList> = ({
+  filterOptions = placeholderFilters,
+  onClick,
+  getName,
+  getSecondary = option => option.secondary,
+}) => {
   return (
     <>
       {filterOptions.map((filterOption, index) => {
         return (
           <div key={index}>
             <button className={`${buttonSleeve} ${filterOption.selected ? selected : ''} ${filterOption.active ? active : ''}`} onClick={onClick}>
               <div className={left}>
-                <span className={optionName}>{filterOption.name}</span>
-                {filterOption.secondary && <span className={optionSecondary}>{filterOption.secondary}</span>}
+                <span className={optionName}>{getName(filterOption)}</span>
+                {getSecondary(filterOption) && <span className={optionSecondary}>{getSecondary(filterOption)}</span>}
               </div>
               <div className={right}>
                 <FontAwesomeIcon icon={faCaretRight} />

src/components/data-preview/data-preview-filter-section/data-preview-table-filters/data-preview-table-filters.tsx

@@ -84,7 +84,13 @@ const DataPreviewTableFilters: FunctionComponent<ITableFilters> = ({
               onClose={handleCancel}
               filterName="Filters"
               searchText="Search filters"
-              filterComponent={<DataPreviewMobileFilterList filterOptions={placeholderFilters} />}
+              filterComponent={
+                <DataPreviewMobileFilterList
+                  filterOptions={placeholderFilters}
+                  getName={option => option.name}
+                  getSecondary={option => option.secondary}
+                />
+              }
             />
           )}
         </>

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

@@ -259,6 +259,8 @@ export const DataPreview: FunctionComponent<IDataPreview> = ({
     return customFormat?.dateFormat && fieldType === 'DATE' ? moment(detailDate).format(customFormat.dateFormat) : detailDate;
   };
 
+  const checkDataDisplays = config.apis.every(api => (api?.dataDisplays?.length || 0) <= 1);
+
   return (
     <DatasetSectionContainer id="data-preview-table">
       <DataTableProvider config={config} detailViewState={detailViewState}>
@@ -278,7 +280,7 @@ export const DataPreview: FunctionComponent<IDataPreview> = ({
               selectedPivot={selectedPivot}
               setSelectedPivot={setSelectedPivot}
               pivotsUpdated={pivotsUpdated}
-              hideDropdown={(config.apis.length === 1 || (detailApi && config.apis.length === 2)) && config.apis[0]?.dataDisplays?.length <= 1}
+              hideDropdown={(config.apis.length === 1 || (detailApi && config.apis.length === 2)) && checkDataDisplays}
               detailViewState={detailViewState}
               width={width}
             />