@cdc/dashboard 4.26.4 → 4.26.5

package/src/components/Column.test.tsx

@@ -0,0 +1,176 @@
+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 { DashboardCopyPasteContext } from '../DashboardCopyPasteContext'
+import Column from './Column'
+
+vi.mock('react-dnd', () => ({
+  useDrop: () => [{ isOver: false, canDrop: false }, vi.fn()]
+}))
+
+vi.mock('./Widget/Widget', () => ({
+  default: ({ title }) => <div>{title}</div>
+}))
+
+const renderColumn = ({
+  data,
+  copiedWidget = undefined,
+  sharedFilters = [],
+  visualizations = {}
+}: {
+  data: any
+  copiedWidget?: any
+  sharedFilters?: any[]
+  visualizations?: any
+}) => {
+  const dispatch = vi.fn()
+  const clearCopiedWidget = vi.fn()
+
+  render(
+    <DashboardContext.Provider
+      value={
+        {
+          ...initialState,
+          config: {
+            type: 'dashboard',
+            activeDashboard: 0,
+            dashboard: { sharedFilters },
+            datasets: {},
+            rows: [{ columns: [data], expandCollapseAllButtons: false }],
+            visualizations: {
+              'existing-widget': {
+                uid: 'existing-widget',
+                type: 'markup-include',
+                visualizationType: 'markup-include',
+                contentEditor: { title: 'Existing' }
+              },
+              ...visualizations
+            }
+          },
+          outerContainerRef: vi.fn(),
+          setParentConfig: vi.fn(),
+          isDebug: false,
+          isEditor: true,
+          reloadURLData: vi.fn(),
+          loadAPIFilters: vi.fn(),
+          setAPIFilterDropdowns: vi.fn(),
+          setAPILoading: vi.fn(),
+          data: {}
+        } as any
+      }
+    >
+      <DashboardDispatchContext.Provider value={dispatch}>
+        <DashboardCopyPasteContext.Provider value={{ copiedWidget, copyWidget: vi.fn(), clearCopiedWidget }}>
+          <Column data={data} rowIdx={0} colIdx={0} toggleRow={false} />
+        </DashboardCopyPasteContext.Provider>
+      </DashboardDispatchContext.Provider>
+    </DashboardContext.Provider>
+  )
+
+  return { dispatch, clearCopiedWidget }
+}
+
+describe('Column copy paste slots', () => {
+  it('shows paste-ready text in an empty simple column and dispatches clone on click', () => {
+    const copiedWidget = { sourceWidgetKey: 'source-widget', label: 'Source' }
+    const { dispatch, clearCopiedWidget } = renderColumn({ data: { width: 12 }, copiedWidget })
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Click here to paste copied component or drag and drop a new visualization' })
+    )
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'CLONE_VISUALIZATION',
+      payload: { sourceWidgetKey: 'source-widget', rowIdx: 0, colIdx: 0 }
+    })
+    expect(clearCopiedWidget).toHaveBeenCalled()
+  })
+
+  it('shows paste-ready text in the empty conditional slot and dispatches with entry index', () => {
+    const copiedWidget = { sourceWidgetKey: 'source-widget', label: 'Source' }
+    const { dispatch } = renderColumn({
+      data: { width: 12, conditionalWidgets: [{ widget: 'existing-widget' }] },
+      copiedWidget
+    })
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'Click here to paste copied alternate visualization or drag and drop a new alternate'
+      })
+    )
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'CLONE_VISUALIZATION',
+      payload: { sourceWidgetKey: 'source-widget', rowIdx: 0, colIdx: 0, entryIdx: 1 }
+    })
+  })
+
+  it('labels empty conditional slots as first-match alternates', () => {
+    renderColumn({
+      data: { width: 12, conditionalWidgets: [{ widget: 'existing-widget' }] }
+    })
+
+    expect(screen.getByText('Drag and drop an alternate visualization.')).toBeInTheDocument()
+    expect(
+      screen.getByText('If multiple conditions match, only the first match in this column is shown.')
+    ).toBeInTheDocument()
+  })
+})
+
+describe('Column widget summaries', () => {
+  it('shows dashboard filter labels from user-entered keys when they are configured', () => {
+    renderColumn({
+      data: { width: 12, widget: 'dashboard-filters' },
+      sharedFilters: [
+        { key: 'State', columnName: 'state' },
+        { key: 'Year', columnName: 'year' },
+        { key: 'Topic', columnName: 'topic' },
+        { key: 'Response', columnName: 'response' }
+      ],
+      visualizations: {
+        'dashboard-filters': {
+          uid: 'dashboard-filters',
+          type: 'dashboardFilters',
+          visualizationType: 'dashboardFilters',
+          sharedFilterIndexes: [0, 1, 2, 3]
+        }
+      }
+    })
+
+    expect(screen.getByText('State, Year, Topic, Response')).toBeInTheDocument()
+  })
+
+  it('falls back to dashboard filter columns when labels are not configured', () => {
+    renderColumn({
+      data: { width: 12, widget: 'dashboard-filters' },
+      sharedFilters: [{ key: '', columnName: 'state' }, { columnName: 'year' }],
+      visualizations: {
+        'dashboard-filters': {
+          uid: 'dashboard-filters',
+          type: 'dashboardFilters',
+          visualizationType: 'dashboardFilters',
+          sharedFilterIndexes: [0, 1]
+        }
+      }
+    })
+
+    expect(screen.getByText('state, year')).toBeInTheDocument()
+  })
+
+  it('uses the table label for table summaries', () => {
+    renderColumn({
+      data: { width: 12, widget: 'table-widget' },
+      visualizations: {
+        'table-widget': {
+          uid: 'table-widget',
+          type: 'table',
+          visualizationType: 'table',
+          table: { label: 'Custom Table' }
+        }
+      }
+    })
+
+    expect(screen.getByText('Custom Table')).toBeInTheDocument()
+  })
+})

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