@cdc/dashboard 4.26.3 → 4.26.5

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

@@ -0,0 +1,304 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import FilterEditor from './FilterEditor'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const baseConfig = {
+  dashboard: {
+    sharedFilters: []
+  },
+  datasets: {
+    'nested-data.json': {
+      data: [
+        { region: 'North', year: '2023', quarter: 'Q1' },
+        { region: 'North', year: '2023', quarter: 'Q2' }
+      ]
+    }
+  },
+  rows: [
+    {
+      columns: [
+        {
+          width: 12,
+          conditionalWidgets: [
+            {
+              widget: 'viz-1',
+              dashboardCondition: {
+                id: 'row-1-col-1-condition',
+                datasetKey: 'nested-data.json',
+                operator: 'hasData'
+              }
+            }
+          ]
+        }
+      ],
+      dashboardCondition: {
+        id: 'row-1-condition',
+        datasetKey: 'nested-data.json',
+        operator: 'hasData'
+      },
+      expandCollapseAllButtons: false
+    },
+    {
+      columns: [
+        {
+          width: 12,
+          widget: 'viz-2',
+          dashboardCondition: {
+            id: 'row-2-col-1-condition',
+            datasetKey: 'nested-data.json',
+            operator: 'hasData'
+          }
+        }
+      ],
+      dashboardCondition: {
+        id: 'row-2-condition',
+        datasetKey: 'nested-data.json',
+        operator: 'hasData'
+      },
+      expandCollapseAllButtons: false,
+      toggle: true
+    }
+  ],
+  visualizations: {
+    'viz-1': {
+      uid: 'viz-1',
+      type: 'markup-include',
+      contentEditor: {
+        title: 'First Markup'
+      }
+    },
+    'viz-2': {
+      uid: 'viz-2',
+      type: 'markup-include',
+      contentEditor: {
+        title: 'Toggle Markup'
+      }
+    }
+  }
+} as any
+
+const createNestedFilter = (type: 'datafilter' | 'urlfilter') =>
+  ({
+    key: 'Year and Quarter',
+    type,
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    subGrouping: {
+      columnName: 'quarter',
+      valuesLookup: {
+        '2023': { values: ['Q1', 'Q2'] },
+        '2024': { values: ['Q3', 'Q4'] }
+      }
+    },
+    ...(type === 'urlfilter'
+      ? {
+          apiFilter: {
+            apiEndpoint: '/api/nested-options',
+            valueSelector: 'year',
+            subgroupValueSelector: 'quarter'
+          }
+        }
+      : {})
+  } as any)
+
+describe('FilterEditor API filter subgroup text selector', () => {
+  it('displays subgroupTextSelector value from apiFilter', () => {
+    const filter = {
+      ...createNestedFilter('urlfilter'),
+      apiFilter: {
+        apiEndpoint: '/api/nested-options',
+        valueSelector: 'year',
+        subgroupValueSelector: 'quarter',
+        subgroupTextSelector: 'quarterName'
+      }
+    } as any
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    expect(screen.getByDisplayValue('quarterName')).toBeInTheDocument()
+  })
+
+  it('shows empty string when subgroupTextSelector is absent', () => {
+    const filter = createNestedFilter('urlfilter') as any
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    const inputs = screen.getAllByRole('textbox')
+    const subgroupTextInput = inputs.find(el =>
+      el.closest('label')?.textContent?.includes('Subgroup Display Text Selector')
+    )
+    expect(subgroupTextInput).toHaveValue('')
+  })
+})
+
+describe('FilterEditor nested dropdown display toggle', () => {
+  it.each([
+    ['data-backed nested filters', createNestedFilter('datafilter')],
+    ['api-backed nested filters', createNestedFilter('urlfilter')]
+  ])('renders the checkbox below Create query parameters for %s', (_label, filter) => {
+    const updateFilterProp = vi.fn()
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={updateFilterProp}
+      />
+    )
+
+    const queryParameters = screen.getByLabelText('Create query parameters')
+    const displaySubgroupingOnly = screen.getByLabelText('Display subgrouping only')
+
+    expect(displaySubgroupingOnly).not.toBeChecked()
+
+    const queryParametersLabel = queryParameters.closest('label')
+    const displaySubgroupingOnlyLabel = displaySubgroupingOnly.closest('label')
+    const isBelowQueryParameters = !!(
+      queryParametersLabel &&
+      displaySubgroupingOnlyLabel &&
+      queryParametersLabel.compareDocumentPosition(displaySubgroupingOnlyLabel) & Node.DOCUMENT_POSITION_FOLLOWING
+    )
+
+    expect(isBelowQueryParameters).toBe(true)
+
+    fireEvent.click(displaySubgroupingOnly)
+
+    expect(updateFilterProp).toHaveBeenCalledWith('displaySubgroupingOnly', true)
+  })
+
+  it.each([
+    [
+      'data-backed non-nested filters',
+      {
+        ...createNestedFilter('datafilter'),
+        filterStyle: 'dropdown'
+      }
+    ],
+    [
+      'api-backed non-nested filters',
+      {
+        ...createNestedFilter('urlfilter'),
+        filterStyle: 'dropdown'
+      }
+    ]
+  ])('does not render the checkbox for %s', (_label, filter) => {
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    expect(screen.queryByLabelText('Display subgrouping only')).not.toBeInTheDocument()
+  })
+
+  it('uses row targets for row conditions and does not expose dashboard condition ids in Used By options', () => {
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: {
+            sharedFilters: [
+              {
+                ...createNestedFilter('datafilter'),
+                filterStyle: 'dropdown'
+              }
+            ]
+          }
+        }}
+        filter={{
+          ...createNestedFilter('datafilter'),
+          filterStyle: 'dropdown'
+        }}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    const expandButtons = screen.getAllByLabelText('Expand')
+    fireEvent.click(expandButtons[0])
+
+    expect(screen.getByText('Row 1')).toBeInTheDocument()
+    expect(screen.queryByText('Row 1 Dashboard Condition')).not.toBeInTheDocument()
+    expect(screen.queryByText('Row 1 Column 1 Component 1 Dashboard Condition')).not.toBeInTheDocument()
+    expect(screen.queryByText('Row 2 Dashboard Condition')).not.toBeInTheDocument()
+    expect(screen.queryByText('Row 2 Column 1 Dashboard Condition')).not.toBeInTheDocument()
+  })
+
+  it('updates dashboard shared filter note text', async () => {
+    const filter = {
+      ...createNestedFilter('datafilter'),
+      filterStyle: 'dropdown',
+      note: 'Existing note'
+    }
+    const updateFilterProp = vi.fn()
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={updateFilterProp}
+      />
+    )
+
+    fireEvent.change(screen.getByLabelText('Note'), { target: { value: 'Helpful note' } })
+
+    await waitFor(() => {
+      expect(updateFilterProp).toHaveBeenCalledWith('note', 'Helpful note')
+    })
+  })
+})

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

@@ -1,7 +1,7 @@
-import { getVizRowColumnLocator } from '../../../../helpers/getVizRowColumnLocator'
 import { Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { useEffect, useMemo, useState } from 'react'
+import { getSharedFilterTargetOptions } from '../../../../helpers/dashboardFilterTargets'
 import { SharedFilter } from '../../../../types/SharedFilter'
 
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
@@ -10,7 +10,6 @@ import Icon from '@cdc/core/components/ui/Icon'
 import MultiSelect from '@cdc/core/components/MultiSelect'
 import Loading from '@cdc/core/components/Loading'
 import { DashboardConfig } from '../../../../types/DashboardConfig'
-import { Visualization } from '@cdc/core/types/Visualization'
 import { hasDashboardApplyBehavior } from '../../../../helpers/hasDashboardApplyBehavior'
 import APIModal from './APIModal'
 import NestedDropDownDashboard from './NestedDropDownDashboard'
@@ -19,6 +18,7 @@ import { filterOrderOptions } from '@cdc/core/helpers/filterOrderOptions'
 import FilterOrder from '@cdc/core/components/EditorPanel/VizFilterEditor/components/FilterOrder'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import Modal from '@cdc/core/components/ui/Modal'
+import Button from '@cdc/core/components/elements/Button'
 
 type FilterEditorProps = {
   config: DashboardConfig
@@ -51,43 +51,18 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
     .filter(({ key }) => key !== filter.key)
     .map(({ key }) => key)
 
-  const vizRowColumnLocator = getVizRowColumnLocator(config.rows)
-
   const getVizTitle = (viz, vizKey) => {
     let vizName = viz.general?.title || viz.title || vizKey
     if (viz.visualizationType === 'markup-include') {
-      vizName = viz.contentEditor.title || vizKey
+      vizName = viz.contentEditor?.title || vizKey
     }
     return vizName
   }
 
   const [usedByNameLookup, usedByOptions] = useMemo(() => {
-    const nameLookup = {}
-    const vizOptions = Object.keys(config.visualizations).filter(vizKey => {
-      const vizLookup = vizRowColumnLocator[vizKey]
-      if (!vizLookup) return false
-      const viz = config.visualizations[vizKey] as Visualization
-      if (viz.type === 'dashboardFilters') return false
-      const vizName = getVizTitle(viz, vizKey)
-
-      nameLookup[vizKey] = vizName
-      const usesSharedFilter = viz.usesSharedFilter
-      const rowIndex = vizLookup.row
-      const dataConfiguredOnRow = config.rows[rowIndex].dataKey
-      return filter.setBy !== vizKey && !usesSharedFilter && !dataConfiguredOnRow
-    })
-    const rowOptions: number[] = []
-
-    config.rows.forEach((row, rowIndex) => {
-      if (!!row.dataKey) {
-        nameLookup[rowIndex] = `Row ${rowIndex + 1}`
-        rowOptions.push(rowIndex)
-      }
-    })
-
-    const rowsNotSelected = rowOptions.filter(row => !filter.usedBy || filter.usedBy.indexOf(row.toString()) === -1)
-    return [nameLookup, [...vizOptions, ...rowsNotSelected]]
-  }, [config.visualizations, filter.usedBy, filter.setBy, vizRowColumnLocator])
+    const { nameLookup, options } = getSharedFilterTargetOptions(config, filter)
+    return [nameLookup, options]
+  }, [config, filter])
 
   const useParameters = useMemo(() => {
     if (filter.subGrouping) return !!(filter.setByQueryParameter && filter.subGrouping?.setByQueryParameter)
@@ -223,11 +198,20 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
 
           <TextField
             label='Label'
+            fieldName='key'
             value={filter.key}
             updateField={(_section, _subSection, _key, value) => {
               updateLabel(value)
             }}
           />
+          <TextField
+            type='textarea'
+            className='filter-editor__compact-textarea'
+            label='Note'
+            fieldName='note'
+            value={filter.note || ''}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('note', value)}
+          />
           {filter.filterStyle === FILTER_STYLE.multiSelect && (
             <TextField
               label='Select Limit'
@@ -292,7 +276,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                   {filter.filterBy === 'Query String' && filter.usedBy && filter.usedBy.length > 0 && (
                     <div className='bg-info-subtle p-2 my-2' style={{ fontSize: '0.9em' }}>
                       <Icon display='info' style={{ marginRight: '0.5rem' }} />
-                      Will apply to datasets used by selected widgets
+                      Will apply to datasets used by selected targets
                     </div>
                   )}
                   {filter.filterBy === 'File Name' && (
@@ -405,7 +389,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                     </label>
                     <label>
                       <span>Subgroup Display Text Selector: </span>
-                      <input value={filter?.apifilter?.subgroupTextSelector || ''} disabled />
+                      <input value={filter?.apiFilter?.subgroupTextSelector || ''} disabled />
                       <Tooltip style={{ textTransform: 'none' }}>
                         <Tooltip.Target>
                           <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -419,12 +403,13 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                   </div>
                 )}
 
-                <button
+                <Button
+                  variant='primary'
+                  className='mt-2'
                   onClick={() => handleEditAPIValues(filter, isNestedDropdown, updateAPIFilter)}
-                  className='btn btn-primary mt-2'
                 >
                   Edit API Values
-                </button>
+                </Button>
               </div>
 
               <label>
@@ -451,6 +436,18 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                 </span>
               </label>
 
+              {isNestedDropdown && (
+                <label>
+                  <input
+                    type='checkbox'
+                    checked={!!filter.displaySubgroupingOnly}
+                    aria-label='Display subgrouping only'
+                    onChange={e => updateFilterProp('displaySubgroupingOnly', e.target.checked)}
+                  />
+                  <span> Display subgrouping only</span>
+                </label>
+              )}
+
               {!!parentFilters.length && (
                 <label>
                   <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
@@ -596,6 +593,16 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                       </Tooltip>
                     </span>
                   </label>
+
+                  <label>
+                    <input
+                      type='checkbox'
+                      checked={!!filter.displaySubgroupingOnly}
+                      aria-label='Display subgrouping only'
+                      onChange={e => updateFilterProp('displaySubgroupingOnly', e.target.checked)}
+                    />
+                    <span> Display subgrouping only</span>
+                  </label>
                 </>
               )}
               <Select

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

@@ -242,7 +242,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
         />
       )}
 
-      {/* Default Value for Sub Group */}
+      {/* Default Value for Subgroup */}
       {subGrouping?.columnName && (filter.defaultValue || filter.active) && subGrouping.valuesLookup && (
         <Select
           value={subGrouping.defaultValue}
@@ -255,7 +255,7 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
             const newSubGrouping = { ...subGrouping, defaultValue: value }
             updateFilterProp('subGrouping', newSubGrouping)
           }}
-          label={'Sub Group Default Value'}
+          label={'Subgroup Default Value'}
           initial={'Select'}
         />
       )}

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

@@ -0,0 +1,142 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DashboardContext, DashboardDispatchContext, initialState } from '../../DashboardContext'
+import DashboardFiltersWrapper from './DashboardFiltersWrapper'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const createSharedFilter = (overrides = {}) =>
+  ({
+    key: 'Year',
+    type: 'datafilter',
+    filterStyle: 'dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    active: '2023',
+    columnName: 'year',
+    parents: [],
+    ...overrides
+  } as any)
+
+const renderWrapper = ({
+  grayBackground,
+  sharedFilters = [createSharedFilter()],
+  sharedFilterIndexes = [0],
+  isEditor = false
+}: {
+  grayBackground?: boolean
+  sharedFilters?: any[]
+  sharedFilterIndexes?: any[]
+  isEditor?: boolean
+} = {}) => {
+  const visualizationConfig = {
+    uid: 'dashboardFilters1',
+    type: 'dashboardFilters',
+    visualizationType: 'dashboardFilters',
+    filterBehavior: 'Filter Change',
+    filterIntro: 'Choose a <strong>year</strong> to update the dashboard.',
+    sharedFilterIndexes,
+    visual: grayBackground === undefined ? undefined : { grayBackground }
+  } as any
+
+  return render(
+    <DashboardContext.Provider
+      value={{
+        ...initialState,
+        config: {
+          type: 'dashboard',
+          dashboard: { sharedFilters },
+          datasets: {},
+          rows: [],
+          visualizations: {
+            dashboardFilters1: visualizationConfig
+          }
+        } as any,
+        data: {},
+        outerContainerRef: vi.fn(),
+        setParentConfig: vi.fn(),
+        isDebug: false,
+        isEditor: false,
+        reloadURLData: vi.fn(),
+        loadAPIFilters: vi.fn(),
+        setAPIFilterDropdowns: vi.fn(),
+        setAPILoading: vi.fn()
+      }}
+    >
+      <DashboardDispatchContext.Provider value={vi.fn()}>
+        <DashboardFiltersWrapper
+          apiFilterDropdowns={{}}
+          visualizationConfig={visualizationConfig}
+          setConfig={vi.fn()}
+          currentViewport={'lg' as any}
+          isEditor={isEditor}
+          interactionLabel='dashboard-test'
+        />
+      </DashboardDispatchContext.Provider>
+    </DashboardContext.Provider>
+  )
+}
+
+describe('DashboardFiltersWrapper visual styles', () => {
+  it('wraps filters in the dashboard filters callout when grey background is enabled', () => {
+    const { container } = renderWrapper({ grayBackground: true })
+
+    expect(container.querySelector('.cdc-callout.cdc-callout--dashboard-filters')).toBeInTheDocument()
+  })
+
+  it.each([false, undefined])('keeps the existing unwrapped layout when grayBackground is %s', value => {
+    const { container } = renderWrapper({ grayBackground: value })
+
+    expect(container.querySelector('.cdc-callout.cdc-callout--dashboard-filters')).not.toBeInTheDocument()
+  })
+
+  it('renders filter intro text above dashboard filter controls', () => {
+    const { container } = renderWrapper()
+    const intro = container.querySelector('.filters-section__intro-text')
+
+    expect(intro).toBeInTheDocument()
+    expect(intro).toHaveTextContent('Choose a year to update the dashboard.')
+    expect(intro?.querySelector('strong')).toHaveTextContent('year')
+  })
+
+  it('renders no dashboard filters container when every referenced filter is hidden', () => {
+    const { container } = renderWrapper({ sharedFilters: [createSharedFilter({ showDropdown: false })] })
+
+    expect(container.querySelector('.cove-dashboard-filters-container')).not.toBeInTheDocument()
+  })
+
+  it('renders no dashboard filters container when sharedFilterIndexes is empty', () => {
+    const { container } = renderWrapper({ sharedFilterIndexes: [] })
+
+    expect(container.querySelector('.cove-dashboard-filters-container')).not.toBeInTheDocument()
+  })
+
+  it('renders no dashboard filters container when sharedFilterIndexes only references missing filters', () => {
+    const { container } = renderWrapper({ sharedFilterIndexes: [4] })
+
+    expect(container.querySelector('.cove-dashboard-filters-container')).not.toBeInTheDocument()
+  })
+
+  it('keeps the editor sidebar available without rendering an empty runtime filters container', () => {
+    const { container, getByText } = renderWrapper({
+      sharedFilters: [createSharedFilter({ showDropdown: false })],
+      isEditor: true
+    })
+
+    expect(getByText('Configure Dashboard Filters')).toBeInTheDocument()
+    expect(container.querySelector('.cove-dashboard-filters-container')).not.toBeInTheDocument()
+  })
+
+  it.each([
+    ['urlfilter', createSharedFilter({ type: 'urlfilter', showDropdown: false })],
+    ['nestedDropdown', createSharedFilter({ filterStyle: 'nested-dropdown', showDropdown: false })],
+    ['tabSimple', createSharedFilter({ filterStyle: 'tab-simple', showDropdown: false })]
+  ])('keeps %s dashboard filters visible under dashboard-specific rules', (_label, filter) => {
+    const { container } = renderWrapper({ sharedFilters: [filter] })
+
+    expect(container.querySelector('.cove-dashboard-filters-container')).toBeInTheDocument()
+  })
+})