@cdc/dashboard 4.26.3 → 4.26.5

package/src/components/Column.tsx

@@ -1,12 +1,14 @@
 import React, { useContext } from 'react'
 import { useDrop } from 'react-dnd'
 
-import { DashboardContext } from '../DashboardContext'
+import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
+import { DashboardCopyPasteContext } from '../DashboardCopyPasteContext'
 import Widget from './Widget/Widget'
+import { getColumnWidgetEntries, hasConditionalWidgets } from '../helpers/dashboardColumnWidgets'
 
 type ColumnProps = {
   // column data passed from parent
-  data: Object[]
+  data: any
   // row index
   rowIdx: number
   // column index
@@ -15,8 +17,54 @@ type ColumnProps = {
   toggleRow: boolean
 }
 
-const Column: React.FC<ColumnProps> = ({ data, rowIdx, colIdx, toggleRow }) => {
+const formatSummaryList = items => {
+  const summaryItems = items.filter(Boolean)
+  if (!summaryItems.length) return undefined
+
+  return summaryItems.join(', ')
+}
+
+const getDashboardFiltersTitle = (config, sharedFilters = []) => {
+  const filters = config.sharedFilterIndexes?.map(index => sharedFilters[Number(index)]).filter(Boolean) || []
+  return formatSummaryList(
+    filters.map(
+      filter =>
+        filter.key?.trim() ||
+        filter.columnName ||
+        filter.apiFilter?.textSelector ||
+        filter.apiFilter?.valueSelector ||
+        filter.queryParameter
+    )
+  )
+}
+
+const handleTitle = (config, sharedFilters = []) => {
+  if (!config) return
+  if (config.type === 'map') return config.general.title
+  if (config.type === 'markup-include') return config.contentEditor?.title
+  if (config.type === 'dashboardFilters') return getDashboardFiltersTitle(config, sharedFilters)
+  if (config.type === 'table') return config.table?.label
+  return config.title
+}
+
+type ConditionalColumnProps = {
+  data: any
+  rowIdx: number
+  colIdx: number
+  toggleRow: boolean
+}
+
+type SimpleColumnProps = {
+  data: any
+  rowIdx: number
+  colIdx: number
+  toggleRow: boolean
+}
+
+const SimpleColumn: React.FC<SimpleColumnProps> = ({ data, rowIdx, colIdx, toggleRow }) => {
   const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const { copiedWidget, clearCopiedWidget } = useContext(DashboardCopyPasteContext)
 
   const [{ isOver, canDrop }, drop] = useDrop(
     () => ({
@@ -32,7 +80,7 @@ const Column: React.FC<ColumnProps> = ({ data, rowIdx, colIdx, toggleRow }) => {
         canDrop: !!monitor.canDrop()
       })
     }),
-    [config.activeDashboard]
+    [config.activeDashboard, rowIdx, colIdx, data.widget]
   )
 
   const widget = data.widget ? config?.visualizations[data.widget] : null
@@ -46,21 +94,38 @@ const Column: React.FC<ColumnProps> = ({ data, rowIdx, colIdx, toggleRow }) => {
 
   if (widget) {
     classNames.push('column--populated')
+  } else if (copiedWidget) {
+    classNames.push('column--paste-ready')
   }
 
-  const handleTitle = config => {
-    if (!config) return
-    if (config.type === 'map') return config.general.title
-    if (config.type === 'markup-include') return config.contentEditor?.title
-    return config.title
+  const pasteCopiedWidget = () => {
+    if (!copiedWidget || widget) return
+
+    dispatch({
+      type: 'CLONE_VISUALIZATION',
+      payload: { sourceWidgetKey: copiedWidget.sourceWidgetKey, rowIdx, colIdx }
+    })
+    clearCopiedWidget()
   }
 
   return (
-    <div className={classNames.join(' ')} ref={drop}>
+    <div
+      className={classNames.join(' ')}
+      ref={drop}
+      onClick={pasteCopiedWidget}
+      onKeyDown={event => {
+        if (!copiedWidget || widget) return
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          pasteCopiedWidget()
+        }
+      }}
+      role={!widget && copiedWidget ? 'button' : undefined}
+      tabIndex={!widget && copiedWidget ? 0 : undefined}
+    >
       {widget ? (
         <Widget
-          columnData={data}
-          title={handleTitle(widget)}
+          title={handleTitle(widget, config.dashboard?.sharedFilters)}
           widgetConfig={{ rowIdx, colIdx, ...widget }}
           type={widget.visualizationType ?? widget.general?.geoType}
           toggleRow={toggleRow}
@@ -68,11 +133,147 @@ const Column: React.FC<ColumnProps> = ({ data, rowIdx, colIdx, toggleRow }) => {
         />
       ) : (
         <p className='builder-column__text'>
-          Drag and drop <br /> visualization
+          {copiedWidget ? (
+            'Click here to paste copied component or drag and drop a new visualization'
+          ) : (
+            <>
+              Drag and drop <br /> visualization
+            </>
+          )}
+        </p>
+      )}
+    </div>
+  )
+}
+
+type ConditionalColumnSlotProps = {
+  rowIdx: number
+  colIdx: number
+  toggleRow: boolean
+  entryIndex?: number
+  widgetKey?: string
+}
+
+const ConditionalColumnSlot: React.FC<ConditionalColumnSlotProps> = ({
+  rowIdx,
+  colIdx,
+  toggleRow,
+  entryIndex,
+  widgetKey
+}) => {
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const { copiedWidget, clearCopiedWidget } = useContext(DashboardCopyPasteContext)
+
+  const [{ isOver, canDrop }, drop] = useDrop(
+    () => ({
+      accept: 'vis-widget',
+      drop: () => ({
+        rowIdx,
+        colIdx,
+        entryIdx: entryIndex,
+        canDrop
+      }),
+      canDrop: () => !widgetKey,
+      collect: monitor => ({
+        isOver: monitor.isOver(),
+        canDrop: !!monitor.canDrop()
+      })
+    }),
+    [config.activeDashboard, rowIdx, colIdx, entryIndex, widgetKey]
+  )
+
+  const widget = widgetKey ? config?.visualizations[widgetKey] : null
+  if (widget && !widget.uid) widget.uid = widgetKey
+  const classNames = ['builder-column--conditional__slot']
+
+  if (isOver && canDrop) {
+    classNames.push('column--drop')
+  }
+
+  if (widget) {
+    classNames.push('column--populated')
+  } else if (copiedWidget) {
+    classNames.push('column--paste-ready')
+  }
+
+  const pasteCopiedWidget = () => {
+    if (!copiedWidget || widget) return
+
+    dispatch({
+      type: 'CLONE_VISUALIZATION',
+      payload: { sourceWidgetKey: copiedWidget.sourceWidgetKey, rowIdx, colIdx, entryIdx: entryIndex }
+    })
+    clearCopiedWidget()
+  }
+
+  return (
+    <div
+      className={classNames.join(' ')}
+      ref={drop}
+      onClick={pasteCopiedWidget}
+      onKeyDown={event => {
+        if (!copiedWidget || widget) return
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          pasteCopiedWidget()
+        }
+      }}
+      role={!widget && copiedWidget ? 'button' : undefined}
+      tabIndex={!widget && copiedWidget ? 0 : undefined}
+    >
+      {widget ? (
+        <Widget
+          title={handleTitle(widget, config.dashboard?.sharedFilters)}
+          widgetConfig={{ rowIdx, colIdx, entryIdx: entryIndex, ...widget }}
+          type={widget.visualizationType ?? widget.general?.geoType}
+          toggleRow={toggleRow}
+          widgetInRow
+        />
+      ) : (
+        <p className='builder-column__text'>
+          {copiedWidget ? (
+            'Click here to paste copied alternate visualization or drag and drop a new alternate'
+          ) : (
+            <>
+              Drag and drop an alternate visualization.
+              <span className='builder-column__hint'>
+                If multiple conditions match, only the first match in this column is shown.
+              </span>
+            </>
+          )}
         </p>
       )}
     </div>
   )
 }
 
+const ConditionalColumn: React.FC<ConditionalColumnProps> = ({ data, rowIdx, colIdx, toggleRow }) => {
+  const widgetEntries = getColumnWidgetEntries(data)
+
+  return (
+    <div className={['builder-column', 'builder-column--conditional', 'column-size--' + data.width].join(' ')}>
+      {widgetEntries.map((entry, entryIndex) => (
+        <ConditionalColumnSlot
+          key={`${rowIdx}-${colIdx}-${entryIndex}-${entry.widget}`}
+          rowIdx={rowIdx}
+          colIdx={colIdx}
+          toggleRow={toggleRow}
+          entryIndex={entryIndex}
+          widgetKey={entry.widget}
+        />
+      ))}
+      <ConditionalColumnSlot rowIdx={rowIdx} colIdx={colIdx} toggleRow={toggleRow} entryIndex={widgetEntries.length} />
+    </div>
+  )
+}
+
+const Column: React.FC<ColumnProps> = ({ data, rowIdx, colIdx, toggleRow }) => {
+  if (hasConditionalWidgets(data)) {
+    return <ConditionalColumn data={data} rowIdx={rowIdx} colIdx={colIdx} toggleRow={toggleRow} />
+  }
+
+  return <SimpleColumn data={data} rowIdx={rowIdx} colIdx={colIdx} toggleRow={toggleRow} />
+}
+
 export default Column

package/src/components/DashboardConditionModal.test.tsx

@@ -0,0 +1,420 @@
+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 { DashboardConditionModal } from './DashboardConditionModal'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+vi.mock('@cdc/core/components/ui/Tooltip', () => {
+  const Tooltip = ({ children }) => <div data-testid='tooltip'>{children}</div>
+  Tooltip.Target = ({ children }) => <>{children}</>
+  Tooltip.Content = ({ children }) => <>{children}</>
+  return { default: Tooltip }
+})
+
+const buildConfig = () =>
+  ({
+    type: 'dashboard',
+    dashboard: {
+      sharedFilters: []
+    },
+    datasets: {
+      'condition-data': {
+        data: [
+          { region: 'North', status: 'visible' },
+          { region: 'South', status: 'hidden' }
+        ]
+      }
+    },
+    rows: [
+      {
+        columns: [{ width: 12, widget: 'markup-1' }],
+        expandCollapseAllButtons: false
+      }
+    ],
+    visualizations: {
+      'markup-1': {
+        uid: 'markup-1',
+        type: 'markup-include',
+        visualizationType: 'markup-include',
+        contentEditor: {
+          inlineHTML: '<p>Example</p>',
+          showHeader: true,
+          srcUrl: '',
+          title: 'Example',
+          useInlineHTML: true
+        }
+      }
+    }
+  } as any)
+
+const buildConditionalConfig = (dashboardCondition = undefined) =>
+  ({
+    ...buildConfig(),
+    rows: [
+      {
+        columns: [
+          {
+            width: 12,
+            conditionalWidgets: [{ widget: 'markup-1', dashboardCondition }]
+          }
+        ],
+        expandCollapseAllButtons: false
+      }
+    ]
+  } as any)
+
+const renderModal = () => {
+  const dispatch = vi.fn()
+  const toggleOverlay = vi.fn()
+
+  render(
+    <GlobalContext.Provider
+      value={{
+        overlay: {
+          object: null,
+          show: true,
+          disableBgClose: false,
+          actions: {
+            openOverlay: vi.fn(),
+            toggleOverlay
+          }
+        }
+      }}
+    >
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config: buildConfig(),
+          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}>
+          <DashboardConditionModal rowIndex={0} columnIndex={0} />
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    </GlobalContext.Provider>
+  )
+
+  return { dispatch, toggleOverlay }
+}
+
+const renderRowModal = (dashboardCondition = undefined) => {
+  const dispatch = vi.fn()
+  const toggleOverlay = vi.fn()
+
+  render(
+    <GlobalContext.Provider
+      value={{
+        overlay: {
+          object: null,
+          show: true,
+          disableBgClose: false,
+          actions: {
+            openOverlay: vi.fn(),
+            toggleOverlay
+          }
+        }
+      }}
+    >
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config: {
+            ...buildConfig(),
+            rows: [
+              {
+                columns: [{ width: 12, widget: 'markup-1' }],
+                dashboardCondition,
+                expandCollapseAllButtons: false
+              }
+            ]
+          },
+          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}>
+          <DashboardConditionModal rowIndex={0} />
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    </GlobalContext.Provider>
+  )
+
+  return { dispatch, toggleOverlay }
+}
+
+const renderConditionalEntryModal = (dashboardCondition = undefined) => {
+  const dispatch = vi.fn()
+
+  render(
+    <GlobalContext.Provider
+      value={{
+        overlay: {
+          object: null,
+          show: true,
+          disableBgClose: false,
+          actions: {
+            openOverlay: vi.fn(),
+            toggleOverlay: vi.fn()
+          }
+        }
+      }}
+    >
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config: buildConditionalConfig(dashboardCondition),
+          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}>
+          <DashboardConditionModal rowIndex={0} columnIndex={0} entryIndex={0} />
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    </GlobalContext.Provider>
+  )
+
+  return { dispatch }
+}
+
+describe('DashboardConditionModal', () => {
+  it('shows component-specific condition type tooltip copy and delayed field guidance', () => {
+    renderModal()
+
+    expect(screen.getByRole('combobox', { name: /Condition Type/i })).toBeInTheDocument()
+    expect(screen.getByText(/Choose whether this component should appear/)).toBeInTheDocument()
+
+    fireEvent.change(screen.getByRole('combobox', { name: /Condition Type/i }), {
+      target: { value: 'columnHasAnyValue' }
+    })
+
+    expect(screen.queryByText(/Select the dataset column to inspect for this condition/)).not.toBeInTheDocument()
+    expect(screen.queryByText(/Choose one or more matching values from the selected column/)).not.toBeInTheDocument()
+    expect(screen.queryByText('Column Values')).not.toBeInTheDocument()
+
+    fireEvent.change(screen.getAllByRole('combobox')[1], {
+      target: { value: 'condition-data' }
+    })
+
+    expect(screen.getByText(/Select the dataset column to inspect for this condition/)).toBeInTheDocument()
+    expect(screen.queryByText(/Choose one or more matching values from the selected column/)).not.toBeInTheDocument()
+
+    fireEvent.change(screen.getAllByRole('combobox')[2], { target: { value: 'region' } })
+
+    expect(screen.getByText('Column Values')).toBeInTheDocument()
+    expect(screen.getByText(/Choose one or more matching values from the selected column/)).toBeInTheDocument()
+  })
+
+  it('shows row-specific condition type tooltip copy for row editing', () => {
+    renderRowModal()
+
+    expect(screen.getByText(/Choose whether this row should appear/)).toBeInTheDocument()
+    expect(screen.queryByText(/Choose whether this component should appear/)).not.toBeInTheDocument()
+  })
+
+  it('saves a hasData condition', () => {
+    const { dispatch, toggleOverlay } = renderModal()
+
+    fireEvent.change(screen.getByRole('combobox', { name: /Condition Type/i }), { target: { value: 'hasData' } })
+    fireEvent.change(screen.getAllByRole('combobox')[1], {
+      target: { value: 'condition-data' }
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_ROW',
+      payload: {
+        rowIndex: 0,
+        rowData: {
+          columns: [
+            expect.objectContaining({
+              conditionalWidgets: [
+                expect.objectContaining({
+                  widget: 'markup-1',
+                  dashboardCondition: expect.objectContaining({
+                    datasetKey: 'condition-data',
+                    operator: 'hasData'
+                  })
+                })
+              ]
+            })
+          ]
+        }
+      }
+    })
+    expect(toggleOverlay).toHaveBeenCalledWith(false)
+  })
+
+  it('converts a simple column into conditional mode only after save', () => {
+    const { dispatch } = renderModal()
+
+    fireEvent.change(screen.getByRole('combobox', { name: /Condition Type/i }), { target: { value: 'hasData' } })
+    fireEvent.change(screen.getAllByRole('combobox')[1], {
+      target: { value: 'condition-data' }
+    })
+
+    expect(dispatch).not.toHaveBeenCalled()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_ROW',
+      payload: {
+        rowIndex: 0,
+        rowData: {
+          columns: [
+            expect.objectContaining({
+              widget: undefined,
+              conditionalWidgets: [
+                expect.objectContaining({
+                  widget: 'markup-1',
+                  dashboardCondition: expect.objectContaining({
+                    datasetKey: 'condition-data',
+                    operator: 'hasData'
+                  })
+                })
+              ]
+            })
+          ]
+        }
+      }
+    })
+  })
+
+  it('collapses a one-entry conditional column back to simple mode when its condition is removed', () => {
+    const { dispatch } = renderConditionalEntryModal({
+      id: 'existing-condition',
+      datasetKey: 'condition-data',
+      operator: 'hasData'
+    })
+
+    fireEvent.change(screen.getByRole('combobox', { name: /Condition Type/i }), { target: { value: '' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_ROW',
+      payload: {
+        rowIndex: 0,
+        rowData: {
+          columns: [
+            expect.objectContaining({
+              widget: 'markup-1',
+              conditionalWidgets: undefined
+            })
+          ]
+        }
+      }
+    })
+  })
+
+  it('collapses conditional mode back to simple mode when the last condition is removed', () => {
+    const { dispatch } = renderConditionalEntryModal({
+      id: 'existing-condition',
+      datasetKey: 'condition-data',
+      operator: 'hasData'
+    })
+
+    fireEvent.change(screen.getByRole('combobox', { name: /Condition Type/i }), { target: { value: '' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_ROW',
+      payload: {
+        rowIndex: 0,
+        rowData: {
+          columns: [expect.objectContaining({ widget: 'markup-1', conditionalWidgets: undefined })]
+        }
+      }
+    })
+  })
+
+  it('requires dataset, column, and values for Column Has Any Value', () => {
+    renderModal()
+
+    fireEvent.change(screen.getByRole('combobox', { name: /Condition Type/i }), {
+      target: { value: 'columnHasAnyValue' }
+    })
+
+    const saveButton = screen.getByRole('button', { name: 'Save' })
+    expect(saveButton).toBeDisabled()
+
+    fireEvent.change(screen.getAllByRole('combobox')[1], {
+      target: { value: 'condition-data' }
+    })
+    expect(saveButton).toBeDisabled()
+
+    fireEvent.change(screen.getAllByRole('combobox')[2], { target: { value: 'region' } })
+    expect(saveButton).toBeDisabled()
+
+    fireEvent.click(screen.getByLabelText('Expand'))
+    fireEvent.click(screen.getByText('North'))
+
+    expect(saveButton).not.toBeDisabled()
+  })
+
+  it('allows filtersIncomplete without dataset, column, or values', () => {
+    const { dispatch } = renderModal()
+
+    fireEvent.change(screen.getByRole('combobox', { name: /Condition Type/i }), {
+      target: { value: 'filtersIncomplete' }
+    })
+
+    expect(screen.getByRole('option', { name: 'Show when filters are incomplete' })).toBeInTheDocument()
+    expect(screen.getAllByRole('combobox')).toHaveLength(1)
+    expect(screen.queryByText('Column Values')).not.toBeInTheDocument()
+
+    const saveButton = screen.getByRole('button', { name: 'Save' })
+    expect(saveButton).not.toBeDisabled()
+
+    fireEvent.click(saveButton)
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_ROW',
+      payload: {
+        rowIndex: 0,
+        rowData: {
+          columns: [
+            expect.objectContaining({
+              conditionalWidgets: [
+                expect.objectContaining({
+                  widget: 'markup-1',
+                  dashboardCondition: expect.objectContaining({
+                    operator: 'filtersIncomplete'
+                  })
+                })
+              ]
+            })
+          ]
+        }
+      }
+    })
+    expect(
+      dispatch.mock.calls[0][0].payload.rowData.columns[0].conditionalWidgets[0].dashboardCondition
+    ).not.toHaveProperty('datasetKey')
+  })
+})