@cdc/dashboard 4.26.4 → 4.26.5

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -11,8 +11,12 @@ import { MouseEventHandler } from 'react'
 import Loader from '@cdc/core/components/Loader'
 import Button from '@cdc/core/components/elements/Button'
 import _ from 'lodash'
-import { DROPDOWN_STYLES } from '@cdc/core/components/Filters/components/Dropdown'
+import { getDropdownStyles } from '@cdc/core/components/Filters/components/Dropdown'
 import Tabs from '@cdc/core/components/Filters/components/Tabs'
+import FilterNote from '@cdc/core/components/Filters/components/FilterNote'
+import parse from 'html-react-parser'
+import './dashboardfilter.styles.css'
+import { isVisibleDashboardFilter } from '../../helpers/filterVisibility'
 
 type DashboardFilterProps = {
   show: number[]
@@ -20,6 +24,7 @@ type DashboardFilterProps = {
   apiFilterDropdowns: APIFilterDropdowns
   handleOnChange: (index: number, value: string | string[]) => void
   showSubmit: boolean
+  filterIntro?: string
   applyFilters: MouseEventHandler<HTMLButtonElement>
   applyFiltersButtonText?: string
   handleReset?: MouseEventHandler<HTMLButtonElement>
@@ -31,6 +36,7 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
   apiFilterDropdowns,
   handleOnChange,
   showSubmit,
+  filterIntro,
   applyFilters,
   applyFiltersButtonText,
   handleReset
@@ -58,186 +64,198 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
     ])
   }
 
+  const visibleFilterIndexes = show.filter(filterIndex => isVisibleDashboardFilter(sharedFilters[filterIndex]))
+  const formClasses = [
+    'dashboard-filters__form',
+    'filters-section__wrapper',
+    visibleFilterIndexes.length > 1 ? 'filters-section__wrapper--multiple' : 'filters-section__wrapper--single'
+  ]
+
   return (
-    <form className='d-flex flex-wrap'>
-      {show.map(filterIndex => {
-        const filter = sharedFilters[filterIndex]
-        const urlFilterType = filter.type === 'urlfilter'
-        const label = stripDuplicateLabelIncrement(filter.key || '')
-
-        if (
-          !urlFilterType &&
-          !filter.showDropdown &&
-          filter.filterStyle !== FILTER_STYLE.nestedDropdown &&
-          filter.filterStyle !== FILTER_STYLE.tabSimple
-        )
-          return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
-        const values: JSX.Element[] = []
-
-        const _key = filter.apiFilter?.apiEndpoint
-        const loading = apiFilterDropdowns[_key] === null
-
-        const multiValues: { value; label }[] = []
-        const nestedOptions: NestedOptions = getNestedOptions({
-          orderedValues: filter.orderedValues,
-          values: filter.values,
-          subGrouping: filter.subGrouping
-        })
-
-        if (_key && apiFilterDropdowns[_key]) {
-          // URL Filter
-          if (filter.filterStyle !== FILTER_STYLE.nestedDropdown) {
-            apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
-              values.push(
-                <option key={`${value}-option-${index}`} value={value}>
-                  {text}
-                </option>
-              )
-              multiValues.push({ value, label: text })
+    <>
+      {filterIntro && <p className='filters-section__intro-text cove-prose mb-3 w-100'>{parse(filterIntro)}</p>}
+      <form className={formClasses.join(' ')}>
+        {show.map(filterIndex => {
+          const filter = sharedFilters[filterIndex]
+
+          if (!isVisibleDashboardFilter(filter))
+            return <React.Fragment key={`${filter?.key || 'missing'}-filtersection-${filterIndex}-option`} />
+
+          const label = stripDuplicateLabelIncrement(filter.key || '')
+          const values: JSX.Element[] = []
+
+          const _key = filter.apiFilter?.apiEndpoint
+          const loading = apiFilterDropdowns[_key] === null
+
+          const multiValues: { value; label }[] = []
+          const nestedOptions: NestedOptions = getNestedOptions({
+            orderedValues: filter.orderedValues,
+            values: filter.values,
+            subGrouping: filter.subGrouping
+          })
+
+          if (_key && apiFilterDropdowns[_key]) {
+            // URL Filter
+            if (filter.filterStyle !== FILTER_STYLE.nestedDropdown) {
+              apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
+                values.push(
+                  <option key={`${value}-option-${index}`} value={value}>
+                    {text}
+                  </option>
+                )
+                multiValues.push({ value, label: text })
+              })
+            }
+          } else {
+            // Data Filter
+            const orderedFilterValues = filter.orderedValues || filter.values
+            orderedFilterValues?.forEach((filterOption, index) => {
+              const labeledOpt = filter.labels && filter.labels[filterOption]
+              const resetLabelHasMatch = (filterOption || labeledOpt) === filter.resetLabel
+
+              if (!resetLabelHasMatch) {
+                values.push(
+                  <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                    {labeledOpt || filterOption}
+                  </option>
+                )
+              } else {
+                // add label to the front of list if it matches with reset label
+                values.unshift(
+                  <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                    {labeledOpt || filterOption}
+                  </option>
+                )
+              }
+
+              multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
             })
           }
-        } else {
-          // Data Filter
-          const orderedFilterValues = filter.orderedValues || filter.values
-          orderedFilterValues?.forEach((filterOption, index) => {
-            const labeledOpt = filter.labels && filter.labels[filterOption]
-            const resetLabelHasMatch = (filterOption || labeledOpt) === filter.resetLabel
-
-            if (!resetLabelHasMatch) {
-              values.push(
-                <option key={`${filter.key}-option-${index}`} value={filterOption}>
-                  {labeledOpt || filterOption}
-                </option>
-              )
-            } else {
-              // add label to the front of list if it matches with reset label
-              values.unshift(
-                <option key={`${filter.key}-option-${index}`} value={filterOption}>
-                  {labeledOpt || filterOption}
-                </option>
-              )
-            }
 
-            multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
-          })
-        }
-
-        const isDisabled = !values.length
-        // push reset label only if it does not includes in filter values options
-        if (filter.resetLabel && !filter.values.includes(filter.resetLabel) && !_key) {
-          values.unshift(
-            <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
-              {filter.resetLabel}
-            </option>
+          const isDisabled = !values.length
+          // push reset label only if it does not includes in filter values options
+          if (filter.resetLabel && !filter.values.includes(filter.resetLabel) && !_key) {
+            values.unshift(
+              <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
+                {filter.resetLabel}
+              </option>
+            )
+          }
+
+          const isTabSimple = filter.filterStyle === FILTER_STYLE.tabSimple
+          const dropdownStyles = getDropdownStyles(Boolean(filter.note?.trim()))
+          const formGroupClass = [
+            'dashboard-filters__field',
+            'form-group',
+            loading ? 'loading-filter' : '',
+            isTabSimple ? 'w-100' : ''
+          ]
+            .filter(Boolean)
+            .join(' ')
+          return (
+            <div className={formGroupClass} key={`${filter.key}-filtersection-${filterIndex}`}>
+              {label && (
+                <label className='font-weight-bold mb-2' htmlFor={`filter-${filterIndex}`}>
+                  {label}
+                </label>
+              )}
+              <FilterNote note={filter.note} />
+              {filter.filterStyle === FILTER_STYLE.tabSimple ? (
+                <Tabs
+                  filter={filter}
+                  index={filterIndex}
+                  changeFilterActive={(index, value) => handleOnChange(index, value)}
+                  loading={loading}
+                />
+              ) : filter.filterStyle === FILTER_STYLE.multiSelect ? (
+                <MultiSelect
+                  label={label}
+                  options={multiValues}
+                  fieldName={filterIndex}
+                  updateField={updateField}
+                  selected={filter.active as string[]}
+                  limit={filter.selectLimit || 5}
+                  loading={loading}
+                />
+              ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
+                <NestedDropdown
+                  activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
+                  activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
+                  displaySubgroupingOnly={filter.displaySubgroupingOnly}
+                  filterIndex={filterIndex}
+                  options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
+                  listLabel={label}
+                  handleSelectedItems={value => updateField(null, null, filterIndex, value)}
+                  loading={loading}
+                />
+              ) : filter.filterStyle === FILTER_STYLE.combobox ? (
+                <ComboBox
+                  options={multiValues}
+                  fieldName={filterIndex}
+                  updateField={updateField}
+                  selected={(filter.queuedActive || filter.active) as string}
+                  label={label}
+                  loading={loading}
+                  placeholder={filter.resetLabel || '- Select -'}
+                />
+              ) : (
+                <>
+                  <select
+                    id={`filter-${filterIndex}`}
+                    className={`cove-form-select ${dropdownStyles}`}
+                    data-index='0'
+                    value={loading ? 'Loading...' : filter.queuedActive || filter.active}
+                    onChange={val => {
+                      handleOnChange(filterIndex, val.target.value)
+                    }}
+                    disabled={loading || isDisabled}
+                  >
+                    {loading && <option value='Loading...'>Loading...</option>}
+                    {/* For API filters, show placeholder when no value is selected */}
+                    {_key && nullVal(filter) && (
+                      <option key={`reset-label`} value=''>
+                        {filter.resetLabel || '- Select One -'}
+                      </option>
+                    )}
+                    {/* For non-API filters or when no value is selected, show empty option */}
+                    {!_key && nullVal(filter) && (
+                      <option key={`select`} value=''>
+                        {filter.resetLabel || '- Select -'}
+                      </option>
+                    )}
+                    {values}
+                  </select>
+                  {loading && <Loader spinnerType={'text-secondary'} />}
+                </>
+              )}
+            </div>
           )
-        }
-
-        const isTabSimple = filter.filterStyle === FILTER_STYLE.tabSimple
-        const formGroupClass = `form-group${isTabSimple ? '' : ' me-4'} mb-1${loading ? ' loading-filter' : ''}${
-          isTabSimple ? ' w-100' : ''
-        }`
-        return (
-          <div className={formGroupClass} key={`${filter.key}-filtersection-${filterIndex}`}>
-            {label && (
-              <label className='font-weight-bold mb-2' htmlFor={`filter-${filterIndex}`}>
-                {label}
-              </label>
-            )}
-            {filter.filterStyle === FILTER_STYLE.tabSimple ? (
-              <Tabs
-                filter={filter}
-                index={filterIndex}
-                changeFilterActive={(index, value) => handleOnChange(index, value)}
-                loading={loading}
-              />
-            ) : filter.filterStyle === FILTER_STYLE.multiSelect ? (
-              <MultiSelect
-                label={label}
-                options={multiValues}
-                fieldName={filterIndex}
-                updateField={updateField}
-                selected={filter.active as string[]}
-                limit={filter.selectLimit || 5}
-                loading={loading}
-              />
-            ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
-              <NestedDropdown
-                activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
-                activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
-                displaySubgroupingOnly={filter.displaySubgroupingOnly}
-                filterIndex={filterIndex}
-                options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
-                listLabel={label}
-                handleSelectedItems={value => updateField(null, null, filterIndex, value)}
-                loading={loading}
-              />
-            ) : filter.filterStyle === FILTER_STYLE.combobox ? (
-              <ComboBox
-                options={multiValues}
-                fieldName={filterIndex}
-                updateField={updateField}
-                selected={(filter.queuedActive || filter.active) as string}
-                label={label}
-                loading={loading}
-                placeholder={filter.resetLabel || '- Select -'}
-              />
-            ) : (
-              <>
-                <select
-                  id={`filter-${filterIndex}`}
-                  className={`cove-form-select ${DROPDOWN_STYLES}`}
-                  data-index='0'
-                  value={loading ? 'Loading...' : filter.queuedActive || filter.active}
-                  onChange={val => {
-                    handleOnChange(filterIndex, val.target.value)
-                  }}
-                  disabled={loading || isDisabled}
-                >
-                  {loading && <option value='Loading...'>Loading...</option>}
-                  {/* For API filters, show placeholder when no value is selected */}
-                  {_key && nullVal(filter) && (
-                    <option key={`reset-label`} value=''>
-                      {filter.resetLabel || '- Select One -'}
-                    </option>
-                  )}
-                  {/* For non-API filters or when no value is selected, show empty option */}
-                  {!_key && nullVal(filter) && (
-                    <option key={`select`} value=''>
-                      {filter.resetLabel || '- Select -'}
-                    </option>
-                  )}
-                  {values}
-                </select>
-                {loading && <Loader spinnerType={'text-secondary'} />}
-              </>
+        })}
+        {showSubmit && (
+          <div className='dashboard-filters__actions'>
+            <Button
+              variant='primary'
+              className='mb-1 me-2'
+              onClick={applyFilters}
+              disabled={visibleFilterIndexes.some(filterIndex => {
+                const emptyFilterValues = [undefined, '', '- Select -']
+                return (
+                  emptyFilterValues.includes(sharedFilters[filterIndex]?.queuedActive) &&
+                  emptyFilterValues.includes(sharedFilters[filterIndex]?.active)
+                )
+              })}
+            >
+              {applyFiltersButtonText || 'GO!'}
+            </Button>
+            {handleReset && (
+              <Button variant='link' className='mb-1' onClick={handleReset}>
+                Clear Filters
+              </Button>
             )}
           </div>
-        )
-      })}
-      {showSubmit && (
-        <div className='dashboard-filters__actions'>
-          <Button
-            variant='primary'
-            className='mb-1 me-2'
-            onClick={applyFilters}
-            disabled={show.some(filterIndex => {
-              const emptyFilterValues = [undefined, '', '- Select -']
-              return (
-                emptyFilterValues.includes(sharedFilters[filterIndex].queuedActive) &&
-                emptyFilterValues.includes(sharedFilters[filterIndex].active)
-              )
-            })}
-          >
-            {applyFiltersButtonText || 'GO!'}
-          </Button>
-          {handleReset && (
-            <Button variant='link' className='mb-1' onClick={handleReset}>
-              Clear Filters
-            </Button>
-          )}
-        </div>
-      )}
-    </form>
+        )}
+      </form>
+    </>
   )
 }
 

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

@@ -55,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 {
@@ -81,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: '',
@@ -188,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'
@@ -244,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>
@@ -339,9 +376,11 @@ 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)
                 }}