@cdc/dashboard 4.26.4 → 4.26.5

package/src/components/Header/Header.tsx

@@ -13,6 +13,8 @@ type HeaderProps = {
   visualizationKey?: string
 }
 
+type DownloadImageMode = 'off' | 'button' | 'link'
+
 const Header = (props: HeaderProps) => {
   const tabs: Tab[] = ['Dashboard Description', 'Data Table Settings', 'Dashboard Preview']
   const { visualizationKey, subEditor } = props
@@ -51,7 +53,7 @@ const Header = (props: HeaderProps) => {
         return acc
       }, {})
 
-      dispatch({ type: 'SET_DATA', payload: sampleDataRemoved })
+      dispatch({ type: 'SET_DATA', payload: { data: sampleDataRemoved } })
     }
   }
 
@@ -62,6 +64,18 @@ const Header = (props: HeaderProps) => {
     dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
   }
 
+  const getDownloadImageMode = (): DownloadImageMode => {
+    if (!config.table?.downloadImageButton) return 'off'
+    return config.table.downloadImageButtonStyle === 'link' ? 'link' : 'button'
+  }
+
+  const changeDownloadImageMode = (mode: DownloadImageMode) => {
+    const newConfig = { ...config, table: { ...(config.table || {}) } }
+    newConfig.table.downloadImageButton = mode !== 'off'
+    if (mode !== 'off') newConfig.table.downloadImageButtonStyle = mode
+    dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
+  }
+
   const convertStateToConfig = () => {
     const strippedState = cloneConfig(config)
     delete strippedState.newViz
@@ -231,22 +245,27 @@ const Header = (props: HeaderProps) => {
                     />
                     Show URL to Automatically Updated Data
                   </label>
-                  <label>
-                    <input
-                      type='checkbox'
-                      defaultChecked={config.table.downloadImageButton}
-                      onChange={e => changeConfigValue('table', 'downloadImageButton', e.target.checked)}
-                    />
-                    Show Download Image Button
-                  </label>
-                  {config.table.downloadImageButton && (
-                    <input
-                      type='text'
-                      placeholder='Customize label'
-                      defaultValue={config.table.downloadImageLabel}
-                      onChange={e => changeConfigValue('table', 'downloadImageLabel', e.target.value)}
-                    />
-                  )}
+                  <div className='download-image-controls'>
+                    <select
+                      aria-label='Download image display'
+                      className='download-image-mode-select'
+                      value={getDownloadImageMode()}
+                      onChange={e => changeDownloadImageMode(e.target.value as DownloadImageMode)}
+                    >
+                      <option value='off'>Download Image Off</option>
+                      <option value='button'>Download Image Button</option>
+                      <option value='link'>Download Image Link</option>
+                    </select>
+                    {getDownloadImageMode() !== 'off' && (
+                      <input
+                        className='download-image-label-input'
+                        type='text'
+                        placeholder='Customize label'
+                        defaultValue={config.table.downloadImageLabel}
+                        onChange={e => changeConfigValue('table', 'downloadImageLabel', e.target.value)}
+                      />
+                    )}
+                  </div>
                 </div>
               </>
             )}

package/src/components/Row.test.tsx

@@ -0,0 +1,228 @@
+import React from 'react'
+import { fireEvent, render, screen } 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 Row from './Row'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+vi.mock('../images/icon-col-12.svg', () => ({ default: () => <svg data-testid='icon-col-12' /> }))
+vi.mock('../images/icon-col-6.svg', () => ({ default: () => <svg data-testid='icon-col-6' /> }))
+vi.mock('../images/icon-col-4.svg', () => ({ default: () => <svg data-testid='icon-col-4' /> }))
+vi.mock('../images/icon-col-4-8.svg', () => ({ default: () => <svg data-testid='icon-col-4-8' /> }))
+vi.mock('../images/icon-col-8-4.svg', () => ({ default: () => <svg data-testid='icon-col-8-4' /> }))
+vi.mock('../images/icon-toggle.svg', () => ({ default: () => <svg data-testid='icon-toggle' /> }))
+
+const renderRow = (dashboardCondition = undefined) => {
+  const openOverlay = vi.fn()
+
+  render(
+    <GlobalContext.Provider
+      value={{
+        overlay: {
+          object: null,
+          show: false,
+          disableBgClose: false,
+          actions: {
+            openOverlay,
+            toggleOverlay: vi.fn()
+          }
+        }
+      }}
+    >
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config: {
+            type: 'dashboard',
+            dashboard: { sharedFilters: [] },
+            datasets: {},
+            rows: [
+              {
+                columns: [],
+                dashboardCondition,
+                expandCollapseAllButtons: false
+              }
+            ],
+            visualizations: {}
+          } as any,
+          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={vi.fn()}>
+          <Row row={{ columns: [], dashboardCondition, expandCollapseAllButtons: false } as any} idx={0} uuid='row-1' />
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    </GlobalContext.Provider>
+  )
+
+  return { openOverlay }
+}
+
+const renderRowWithConfig = config => {
+  const dispatch = vi.fn()
+
+  render(
+    <GlobalContext.Provider
+      value={{
+        overlay: {
+          object: null,
+          show: false,
+          disableBgClose: false,
+          actions: {
+            openOverlay: vi.fn(),
+            toggleOverlay: vi.fn()
+          }
+        }
+      }}
+    >
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config,
+          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}>
+          <Row row={config.rows[0]} idx={0} uuid='row-1' />
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    </GlobalContext.Provider>
+  )
+
+  return { dispatch }
+}
+
+describe('Row', () => {
+  it('renders the row label without a separator', () => {
+    renderRow()
+
+    expect(screen.getByText('Row 1')).toBeInTheDocument()
+    expect(screen.queryByText('Row - 1')).not.toBeInTheDocument()
+  })
+
+  it('renders separate row toolbar buttons for data and dashboard conditions', () => {
+    const { openOverlay } = renderRow()
+
+    fireEvent.click(screen.getByTitle('Configure Data'))
+    fireEvent.click(screen.getByTitle('Configure Dashboard Condition'))
+
+    expect(openOverlay).toHaveBeenCalledTimes(2)
+  })
+
+  it('does not render a row condition summary when no condition exists', () => {
+    renderRow()
+
+    expect(screen.getByTitle('Configure Dashboard Condition')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Configure Dashboard Condition:/ })).not.toBeInTheDocument()
+  })
+
+  it('shows the active row condition button and summary strip when a condition exists', () => {
+    renderRow({ id: 'row-condition-1', datasetKey: 'condition-data', operator: 'hasData' })
+
+    expect(screen.getByTitle('Configure Dashboard Condition')).toHaveClass('is-active')
+    expect(screen.getByRole('button', { name: "Configure Dashboard Condition: Show when there's data" })).toHaveClass(
+      'dashboard-condition-summary'
+    )
+  })
+
+  it('opens the condition modal from the row condition button or summary strip', () => {
+    const { openOverlay } = renderRow({ id: 'row-condition-1', datasetKey: 'condition-data', operator: 'hasData' })
+
+    fireEvent.click(screen.getByTitle('Configure Dashboard Condition'))
+    fireEvent.click(screen.getByRole('button', { name: "Configure Dashboard Condition: Show when there's data" }))
+
+    expect(openOverlay).toHaveBeenCalledTimes(2)
+  })
+
+  it('remaps row targets and preserves unknown targets when deleting a row', () => {
+    const { dispatch } = renderRowWithConfig({
+      type: 'dashboard',
+      dashboard: {
+        sharedFilters: [
+          {
+            key: 'County',
+            type: 'datafilter',
+            columnName: 'county',
+            usedBy: ['legacy-footnote-target', 'viz-1', 0, 1]
+          }
+        ]
+      },
+      datasets: {},
+      rows: [
+        {
+          columns: [],
+          dashboardCondition: { id: 'row-condition-1', datasetKey: 'condition-data', operator: 'hasData' },
+          expandCollapseAllButtons: false
+        },
+        {
+          columns: [{ width: 12, widget: 'dashboard-filters-1' }],
+          dashboardCondition: { id: 'condition-1', datasetKey: 'condition-data', operator: 'hasData' },
+          expandCollapseAllButtons: false
+        }
+      ],
+      visualizations: {
+        'dashboard-filters-1': {
+          uid: 'dashboard-filters-1',
+          type: 'dashboardFilters',
+          sharedFilterIndexes: [0]
+        }
+      }
+    } as any)
+
+    fireEvent.click(screen.getByTitle('Delete Row'))
+
+    const nextConfig = dispatch.mock.calls[0][0].payload[0]
+    expect(nextConfig.dashboard.sharedFilters[0].usedBy).toEqual(['legacy-footnote-target', 'viz-1', 0])
+  })
+
+  it('assigns distinct row uuids when moving a row even if Date.now matches', () => {
+    const mathRandomSpy = vi.spyOn(Math, 'random')
+    mathRandomSpy.mockReturnValueOnce(0.123456789).mockReturnValueOnce(0.23456789)
+
+    const { dispatch } = renderRowWithConfig({
+      type: 'dashboard',
+      dashboard: { sharedFilters: [] },
+      datasets: {},
+      rows: [
+        {
+          uuid: 'row-a',
+          columns: [],
+          expandCollapseAllButtons: false
+        },
+        {
+          uuid: 'row-b',
+          columns: [],
+          expandCollapseAllButtons: false
+        }
+      ],
+      visualizations: {}
+    } as any)
+
+    fireEvent.click(screen.getByTitle('Move Row Down'))
+
+    const nextConfig = dispatch.mock.calls[0][0].payload[0]
+    expect(nextConfig.rows[0].uuid).not.toEqual(nextConfig.rows[1].uuid)
+    expect(nextConfig.rows[0].uuid).toMatch(/^row-[a-z0-9]{8}$/)
+    expect(nextConfig.rows[1].uuid).toMatch(/^row-[a-z0-9]{8}$/)
+
+    mathRandomSpy.mockRestore()
+  })
+})

package/src/components/Row.tsx

@@ -14,12 +14,18 @@ import EightFourColIcon from '../images/icon-col-8-4.svg'
 import ToggleIcon from '../images/icon-toggle.svg'
 import { ConfigRow } from '../types/ConfigRow'
 import { DataDesignerModal } from './DataDesignerModal'
+import { DashboardConditionModal } from './DashboardConditionModal'
+import { DashboardConditionSummary } from './DashboardConditionSummary'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import Button from '@cdc/core/components/elements/Button'
 import { iconHash } from '../helpers/iconHash'
 import _ from 'lodash'
 import { Visualization } from '@cdc/core/types/Visualization'
 import { labelHash } from '@cdc/core/helpers/labelHash'
+import { removeDashboardFilter } from '../helpers/removeDashboardFilter'
+import { dashboardConditionsSupportedForRow, remapRowTargetsInSharedFilters } from '../helpers/dashboardFilterTargets'
+import { getColumnPrimaryWidget, getColumnWidgetKeys } from '../helpers/dashboardColumnWidgets'
+import { createCoveId } from '@cdc/core/helpers/createCoveId'
 
 type RowMenuProps = {
   rowIdx: number
@@ -46,7 +52,7 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     const newRows = _.cloneDeep(rows)
     newRows[rowIdx].toggle = toggle
     const rowColumns = newRows[rowIdx].columns
-    const columnsWithWidgets = rowColumns.filter(c => c.widget)
+    const columnsWithWidgets = rowColumns.filter(c => getColumnWidgetKeys(c).length > 0)
 
     const totalWidgets = columnsWithWidgets.length
     if (totalWidgets > layout.length) {
@@ -59,7 +65,8 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
 
       // Adds placeholder column name that defaults to the visualization type.
       newRows[rowIdx].columns.forEach((col, idx) => {
-        col.toggleName = col.toggleName || labelHash[config.visualizations[col.widget]?.type] || undefined
+        const primaryWidget = getColumnPrimaryWidget(col)
+        col.toggleName = col.toggleName || labelHash[config.visualizations[primaryWidget]?.type] || undefined
       })
 
       newRows[rowIdx].columns = layout.map((width, colIndex) => {
@@ -88,10 +95,20 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     rows[newIdx] = row
     rows[rowIdx] = temp
 
-    rows[newIdx].uuid = Date.now()
-    rows[rowIdx].uuid = Date.now()
+    const existingRowUuids = rows.map(row => row.uuid).filter(uuid => uuid !== undefined)
+    rows[newIdx].uuid = createCoveId('row', { existingIds: existingRowUuids })
+    rows[rowIdx].uuid = createCoveId('row', { existingIds: [...existingRowUuids, rows[newIdx].uuid] })
 
-    updateConfig({ ...config, rows })
+    const remappedSharedFilters = remapRowTargetsInSharedFilters(
+      config.dashboard.sharedFilters || [],
+      targetRowIndex => {
+        if (targetRowIndex === rowIdx) return newIdx
+        if (targetRowIndex === newIdx) return rowIdx
+        return targetRowIndex
+      }
+    )
+
+    updateConfig({ ...config, rows, dashboard: { ...config.dashboard, sharedFilters: remappedSharedFilters } })
 
     // TODO: Migrate this animation to a React animation library once one is selected for COVE. This is pretty minor so can stay for now.
     let calcRowMove = dir === 'down' ? 202 : -202
@@ -100,6 +117,8 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
     let rowEle = document.querySelector("[data-row-id='" + rowIdx + "']") as HTMLElement
     let rowNewEle = document.querySelector("[data-row-id='" + newIdx + "']") as HTMLElement
 
+    if (!rowEle || !rowNewEle) return
+
     rowEle.style.pointerEvents = 'none'
     rowNewEle.style.pointerEvents = 'none'
     rowEle.style.top = calcRowMove + 'px'
@@ -120,19 +139,47 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
 
   const deleteRow = () => {
     let newVisualizations = { ...config.visualizations }
+    let newSharedFilters = remapRowTargetsInSharedFilters(config.dashboard.sharedFilters || [], targetRowIndex => {
+      if (targetRowIndex === rowIdx) return null
+      if (targetRowIndex > rowIdx) return targetRowIndex - 1
+      return targetRowIndex
+    })
 
-    //delete the instantiated widgets
-    if (rows[rowIdx] && rows[rowIdx].columns && rows[rowIdx].columns.length && config.visualizations) {
+    if (rows[rowIdx]?.columns?.length && config.visualizations) {
       rows[rowIdx].columns.forEach(column => {
-        if (column.widget) {
-          delete newVisualizations[column.widget]
-        }
+        getColumnWidgetKeys(column).forEach(widgetKey => {
+          delete newVisualizations[widgetKey]
+          newSharedFilters.forEach(sharedFilter => {
+            if (sharedFilter.usedBy) {
+              sharedFilter.usedBy = sharedFilter.usedBy.filter(uid => uid !== widgetKey)
+            }
+          })
+        })
       })
     }
 
-    rows.splice(rowIdx, 1) // delete the row
+    rows.splice(rowIdx, 1)
+
+    // Remove shared filters no longer referenced by any remaining dashboardFilters widget,
+    // iterating in reverse so removals don't invalidate earlier indices. removeDashboardFilter
+    // shifts sharedFilterIndexes in all remaining vizs so indices stay consistent.
+    let currentFilters = newSharedFilters
+    let currentVizs = newVisualizations
+    for (let i = currentFilters.length - 1; i >= 0; i--) {
+      const isReferenced = Object.values(currentVizs).some(
+        v => v.type === 'dashboardFilters' && (v as any).sharedFilterIndexes?.includes(i)
+      )
+      if (!isReferenced) {
+        ;[currentFilters, currentVizs] = removeDashboardFilter(i, currentFilters, currentVizs as any)
+      }
+    }
 
-    updateConfig({ ...config, rows, visualizations: newVisualizations })
+    updateConfig({
+      ...config,
+      rows,
+      visualizations: currentVizs,
+      dashboard: { ...config.dashboard, sharedFilters: currentFilters }
+    })
   }
 
   const layoutList = [
@@ -193,7 +240,8 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
       <ul className='row-menu__flyout'>{layoutList}</ul>
       {isMultiColumn && (
         <Button
-          className={`btn row-menu__btn border-0${row.equalHeight ? ' btn-primary' : ''}`}
+          variant={row.equalHeight ? 'primary' : undefined}
+          className='row-menu__btn border-0'
           title={row.equalHeight ? 'Disable Equal Height Rows' : 'Enable Equal Height Rows'}
           onClick={toggleEqualHeight}
         >
@@ -206,7 +254,8 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
       )}
       <div className='spacer'></div>
       <Button
-        className={`btn btn-primary row-menu__btn border-0`}
+        variant='primary'
+        className='row-menu__btn border-0'
         title='Move Row Up'
         onClick={() => moveRow('up')}
         disabled={rowIdx === 0}
@@ -214,7 +263,8 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
         <Icon display='caretUp' color='#fff' size={25} />
       </Button>
       <Button
-        className={'btn btn-primary row-menu__btn border-0'}
+        variant='primary'
+        className='row-menu__btn border-0'
         title='Move Row Down'
         onClick={() => moveRow('down')}
         disabled={rowIdx + 1 === rows.length}
@@ -222,7 +272,8 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
         <Icon display='caretDown' color='#fff' size={25} />
       </Button>
       <Button
-        className={'btn btn-danger row-menu__btn row-menu__btn--remove border-0'}
+        variant='danger'
+        className='row-menu__btn row-menu__btn--remove border-0'
         title='Delete Row'
         onClick={deleteRow}
         disabled={rowIdx === 0 && rows.length === 1}
@@ -237,20 +288,44 @@ type RowProps = { row: ConfigRow; idx: number; uuid: number | string }
 
 const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
   const { overlay } = useGlobalContext()
+  const supportsDashboardConditions = dashboardConditionsSupportedForRow(row)
+  const hasDashboardCondition = !!row.dashboardCondition
+
   return (
     <>
       <div className='builder-row' data-row-id={rowIdx}>
         <RowMenu rowIdx={rowIdx} />
-        <span className='ms-2 mt-n3'>Row - {rowIdx + 1}</span>
+        <span className='builder-row__label'>Row {rowIdx + 1}</span>
         <Button
           title='Configure Data'
-          className='btn btn-configure-row'
+          className='btn-configure-row btn-configure-row--data'
           onClick={() => {
             overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
           }}
         >
           {iconHash['gearMulti']}
         </Button>
+        <Button
+          title={
+            supportsDashboardConditions
+              ? 'Configure Dashboard Condition'
+              : 'Dashboard conditions are not available for toggle or multi-visualization rows'
+          }
+          className={`btn-configure-row btn-configure-row--condition${hasDashboardCondition ? ' is-active' : ''}`}
+          disabled={!supportsDashboardConditions}
+          onClick={() => {
+            overlay?.actions.openOverlay(<DashboardConditionModal rowIndex={rowIdx} />)
+          }}
+        >
+          {iconHash['condition']}
+        </Button>
+        {row.dashboardCondition && (
+          <DashboardConditionSummary
+            className='dashboard-condition-summary--row'
+            dashboardCondition={row.dashboardCondition}
+            rowIndex={rowIdx}
+          />
+        )}
         <div className='column-container'>
           {row.columns
             .filter(column => column.width)