@cdc/dashboard 4.26.3 → 4.26.5

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.test.tsx

@@ -0,0 +1,164 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DashboardContext, DashboardDispatchContext, initialState } from '../../../DashboardContext'
+import { GlobalContext } from '@cdc/core/components/GlobalContext'
+import DashboardFiltersEditor from './DashboardFiltersEditor'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+vi.mock('@hello-pangea/dnd', () => ({
+  DragDropContext: ({ children }) => <div>{children}</div>,
+  Droppable: ({ children }) => <div>{children({ droppableProps: {}, innerRef: vi.fn(), placeholder: null })}</div>,
+  Draggable: ({ children }) => (
+    <div>
+      {children(
+        {
+          draggableProps: { style: {} },
+          dragHandleProps: {},
+          innerRef: vi.fn()
+        },
+        { isDragging: false }
+      )}
+    </div>
+  )
+}))
+
+const renderEditor = (visual = { grayBackground: false }, sharedFilters = [], sharedFilterIndexes = []) => {
+  const updateConfig = vi.fn()
+  const dispatch = vi.fn()
+  const vizConfig = {
+    uid: 'dashboardFilters1',
+    type: 'dashboardFilters',
+    visualizationType: 'dashboardFilters',
+    filterBehavior: 'Filter Change',
+    filterIntro: '',
+    sharedFilterIndexes,
+    visual
+  } as any
+
+  const rendered = render(
+    <GlobalContext.Provider
+      value={{
+        overlay: {
+          object: null,
+          show: false,
+          disableBgClose: false,
+          actions: {
+            openOverlay: vi.fn(),
+            toggleOverlay: vi.fn()
+          }
+        }
+      }}
+    >
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config: {
+            type: 'dashboard',
+            dashboard: { sharedFilters },
+            datasets: {},
+            rows: [],
+            visualizations: {
+              dashboardFilters1: vizConfig
+            }
+          } as any,
+          data: {},
+          outerContainerRef: vi.fn(),
+          setParentConfig: vi.fn(),
+          isDebug: false,
+          isEditor: true,
+          reloadURLData: vi.fn(),
+          loadAPIFilters: vi.fn(),
+          setAPIFilterDropdowns: vi.fn(),
+          setAPILoading: vi.fn()
+        }}
+      >
+        <DashboardDispatchContext.Provider value={dispatch}>
+          <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={vizConfig} />
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    </GlobalContext.Provider>
+  )
+
+  return { ...rendered, dispatch, updateConfig, vizConfig }
+}
+
+describe('DashboardFiltersEditor', () => {
+  it('renders a Visual accordion with a Gray Background option', () => {
+    renderEditor()
+
+    expect(screen.getByText('Visual')).toBeInTheDocument()
+    expect(screen.getAllByLabelText('Use Gray Background Style')[0]).not.toBeChecked()
+  })
+
+  it('updates visual.grayBackground when Gray Background is toggled', () => {
+    const { updateConfig, vizConfig } = renderEditor()
+
+    fireEvent.click(screen.getAllByLabelText('Use Gray Background Style')[0])
+
+    expect(updateConfig).toHaveBeenCalledWith({
+      ...vizConfig,
+      visual: {
+        grayBackground: true
+      }
+    })
+  })
+
+  it('updates filterIntro from the General panel', async () => {
+    const { updateConfig, vizConfig } = renderEditor()
+
+    fireEvent.change(screen.getByLabelText('Filter intro text'), {
+      target: { value: 'Choose filters before viewing results.' }
+    })
+
+    await waitFor(() => {
+      expect(updateConfig).toHaveBeenCalledWith({
+        ...vizConfig,
+        filterIntro: 'Choose filters before viewing results.'
+      })
+    })
+  })
+
+  it.each([
+    ['combobox', 'tab-simple', 'Show'],
+    ['tab-simple', 'combobox', 'Show'],
+    ['dropdown', 'multi-select', ['Show']]
+  ])('applies the configured default when switching a data filter from %s to %s', (initialStyle, nextStyle, active) => {
+    const sharedFilter = {
+      key: 'Status',
+      type: 'datafilter',
+      filterStyle: initialStyle,
+      showDropdown: true,
+      values: ['Show', 'Hide'],
+      orderedValues: ['Show', 'Hide'],
+      columnName: 'status',
+      defaultValue: 'Show',
+      active: '',
+      order: 'cust'
+    }
+    const { container, dispatch } = renderEditor({ grayBackground: false }, [sharedFilter], [0])
+
+    fireEvent.click(container.querySelector('.editor-field-item__header button') as HTMLButtonElement)
+    fireEvent.change(screen.getAllByLabelText('Filter Style')[0], { target: { value: nextStyle } })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_SHARED_FILTERS',
+      payload: [
+        {
+          ...sharedFilter,
+          active,
+          apiFilter: {
+            apiEndpoint: '',
+            subgroupValueSelector: '',
+            textSelector: '',
+            valueSelector: ''
+          },
+          filterStyle: nextStyle
+        }
+      ]
+    })
+  })
+})

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -22,6 +22,7 @@ import { FILTER_STYLE } from '../../../types/FilterStyles'
 import { handleSorting } from '@cdc/core/components/Filters'
 import { removeDashboardFilter } from '../../../helpers/removeDashboardFilter'
 import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
+import Button from '@cdc/core/components/elements/Button'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -54,6 +55,11 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
   const [canAddExisting, setCanAddExisting] = useState(false)
   const [isNestedDragHovered, setIsNestedDragHovered] = useState(false)
 
+  const getActiveValueForFilterStyle = (filter: SharedFilter, filterStyle: string) => {
+    const defaultValue = filter.defaultValue || filter.values?.[0] || ''
+    return filterStyle === FILTER_STYLE.multiSelect ? (defaultValue ? [defaultValue] : []) : defaultValue
+  }
+
   const updateFilterProp = (prop: string, index: number, value) => {
     const newSharedFilters = cloneDeep(sharedFilters)
     const {
@@ -80,7 +86,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     } else if (prop === 'filterStyle') {
       newSharedFilters[index] = {
         ...newSharedFilters[index],
-        active: '',
+        active: getActiveValueForFilterStyle(newSharedFilters[index], value),
         apiFilter: {
           apiEndpoint: '',
           subgroupValueSelector: '',
@@ -187,6 +193,15 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               </Tooltip>
             }
           />
+          <TextField
+            type='textarea'
+            className='filter-editor__compact-textarea'
+            label='Filter intro text'
+            value={vizConfig.filterIntro || ''}
+            updateField={(_section, _subsection, _key, value) => {
+              updateConfig({ ...vizConfig, filterIntro: value })
+            }}
+          />
           {vizConfig.filterBehavior === 'Apply Button' && (
             <TextField
               label='Apply Filter Button Text'
@@ -243,6 +258,29 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
         </AccordionItemPanel>
       </AccordionItem>
 
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Visual</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <CheckBox
+            label='Use Gray Background Style'
+            section='visual'
+            fieldName='grayBackground'
+            value={vizConfig.visual?.grayBackground ?? false}
+            updateField={(_section, _subsection, _key, value) => {
+              updateConfig({
+                ...vizConfig,
+                visual: {
+                  ...vizConfig.visual,
+                  grayBackground: value
+                }
+              })
+            }}
+          />
+        </AccordionItemPanel>
+      </AccordionItem>
+
       <AccordionItem>
         <AccordionItemHeading>
           <AccordionItemButton>Filters</AccordionItemButton>
@@ -314,9 +352,9 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               )}
             </Droppable>
           </DragDropContext>
-          <button onClick={addNewFilter} className='btn btn-primary full-width'>
+          <Button variant='primary' fullWidth onClick={addNewFilter}>
             Add Filter
-          </button>
+          </Button>
           {canAddExisting ? (
             <label>
               <span className='edit-label column-heading'>
@@ -338,18 +376,20 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                 value={''}
                 options={[{ value: '', label: 'Select' }, ...(existingOptions || [])]}
                 onChange={e => {
+                  const parsed = Number(e.target.value)
+                  if (!e.target.value || isNaN(parsed)) return
                   updateConfig({
                     ...vizConfig,
-                    sharedFilterIndexes: [...vizConfig.sharedFilterIndexes, e.target.value]
+                    sharedFilterIndexes: [...vizConfig.sharedFilterIndexes, parsed]
                   })
                   setCanAddExisting(false)
                 }}
               />
             </label>
           ) : (
-            <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>
+            <Button variant='primary' fullWidth className='mt-2' onClick={() => setCanAddExisting(true)}>
               Add Existing Dashboard Filter
-            </button>
+            </Button>
           )}
         </AccordionItemPanel>
       </AccordionItem>

package/src/components/DashboardFilters/DashboardFiltersEditor/components/APIModal.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { SharedFilter } from '../../../../types/SharedFilter'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import Button from '@cdc/core/components/elements/Button'
 
 type APIModalProps = {
   filter: SharedFilter
@@ -107,8 +108,9 @@ const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPI
         )}
       </div>
       <div className='d-flex justify-content-end mt-2'>
-        <button
-          className='btn btn-primary mt-2'
+        <Button
+          variant='primary'
+          className='mt-2'
           onClick={() =>
             updateAPIFilter(
               APIEndpoint,
@@ -120,7 +122,7 @@ const APIModal: React.FC<APIModalProps> = ({ filter, isNestedDropdown, updateAPI
           }
         >
           Save
-        </button>
+        </Button>
       </div>
     </fieldset>
   )

package/src/components/DashboardFilters/DashboardFiltersEditor/components/DeleteFilterModal.tsx

@@ -1,58 +1,59 @@
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-import Modal from '@cdc/core/components/ui/Modal'
-import { DashboardContext } from '../../../../DashboardContext'
-import { useContext } from 'react'
-import { DashboardFilters } from '../../../../types/DashboardFilters'
-
-type DeleteFilterProps = {
-  removeFilterCompletely: (number) => void
-  removeFilterFromViz: (number) => void
-  filterIndex: number
-}
-
-const DeleteFilterModal: React.FC<DeleteFilterProps> = ({
-  removeFilterCompletely,
-  removeFilterFromViz,
-  filterIndex
-}) => {
-  const { overlay } = useGlobalContext()
-  const { config } = useContext(DashboardContext)
-
-  const filterUsedByMany =
-    Object.values(config.visualizations).filter(viz => {
-      return (viz as DashboardFilters).sharedFilterIndexes?.map(Number).includes(Number(filterIndex))
-    }).length > 1
-
-  const message = filterUsedByMany
-    ? 'This filter is used by multiple visualizations. You can either delete the filter from this visualization only or you can delete the filter completely, which will also remove it from other visualizations.'
-    : 'Are you sure you want to delete this filter?'
-  return (
-    <Modal showClose={true}>
-      <Modal.Content>
-        <p>{message}</p>
-        {filterUsedByMany && (
-          <button
-            className='btn btn-warning'
-            onClick={() => {
-              removeFilterFromViz(filterIndex)
-              overlay?.actions.toggleOverlay()
-            }}
-          >
-            Delete from Visualization
-          </button>
-        )}
-        <button
-          className='btn btn-danger'
-          onClick={() => {
-            removeFilterCompletely(filterIndex)
-            overlay?.actions.toggleOverlay()
-          }}
-        >
-          Delete{filterUsedByMany ? ' Completely' : ''}
-        </button>
-      </Modal.Content>
-    </Modal>
-  )
-}
-
-export default DeleteFilterModal
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { DashboardContext } from '../../../../DashboardContext'
+import { useContext } from 'react'
+import { DashboardFilters } from '../../../../types/DashboardFilters'
+import Button from '@cdc/core/components/elements/Button'
+
+type DeleteFilterProps = {
+  removeFilterCompletely: (number) => void
+  removeFilterFromViz: (number) => void
+  filterIndex: number
+}
+
+const DeleteFilterModal: React.FC<DeleteFilterProps> = ({
+  removeFilterCompletely,
+  removeFilterFromViz,
+  filterIndex
+}) => {
+  const { overlay } = useGlobalContext()
+  const { config } = useContext(DashboardContext)
+
+  const filterUsedByMany =
+    Object.values(config.visualizations).filter(viz => {
+      return (viz as DashboardFilters).sharedFilterIndexes?.map(Number).includes(Number(filterIndex))
+    }).length > 1
+
+  const message = filterUsedByMany
+    ? 'This filter is used by multiple visualizations. You can either delete the filter from this visualization only or you can delete the filter completely, which will also remove it from other visualizations.'
+    : 'Are you sure you want to delete this filter?'
+  return (
+    <Modal showClose={true}>
+      <Modal.Content>
+        <p>{message}</p>
+        {filterUsedByMany && (
+          <Button
+            variant='warning'
+            onClick={() => {
+              removeFilterFromViz(filterIndex)
+              overlay?.actions.toggleOverlay()
+            }}
+          >
+            Delete from Visualization
+          </Button>
+        )}
+        <Button
+          variant='danger'
+          onClick={() => {
+            removeFilterCompletely(filterIndex)
+            overlay?.actions.toggleOverlay()
+          }}
+        >
+          Delete{filterUsedByMany ? ' Completely' : ''}
+        </Button>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+export default DeleteFilterModal