@cdc/dashboard 4.26.3 → 4.26.5

package/src/components/Widget/Widget.test.tsx

@@ -0,0 +1,218 @@
+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 { GlobalContext } from '@cdc/core/components/GlobalContext'
+import Widget from './Widget'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+let latestDragSpec: any
+
+vi.mock('react-dnd', () => ({
+  useDrag: spec => {
+    latestDragSpec = spec
+    return [{ isDragging: false }, () => {}]
+  }
+}))
+
+const renderWidget = (
+  options: {
+    copiedWidget?: any
+    copyWidget?: any
+    clearCopiedWidget?: any
+    dispatch?: any
+    type?: string
+    title?: string
+    widgetConfig?: any
+  } = {}
+) => {
+  const openOverlay = vi.fn()
+  const copyWidget = options.copyWidget || vi.fn()
+  const clearCopiedWidget = options.clearCopiedWidget || vi.fn()
+  const dispatch = options.dispatch || vi.fn()
+  const type = options.type || 'markup-include'
+  const title = options.title ?? 'Example'
+  const widgetConfig = options.widgetConfig || {
+    uid: 'markup-1',
+    rowIdx: 0,
+    colIdx: 0,
+    entryIdx: 0,
+    type: 'markup-include',
+    visualizationType: 'markup-include',
+    contentEditor: { title: 'Example' }
+  }
+
+  const renderResult = render(
+    <GlobalContext.Provider
+      value={{
+        overlay: {
+          object: null,
+          show: false,
+          disableBgClose: false,
+          actions: {
+            openOverlay,
+            toggleOverlay: vi.fn()
+          }
+        }
+      }}
+    >
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config: {
+            type: 'dashboard',
+            activeDashboard: 0,
+            dashboard: { sharedFilters: [] },
+            datasets: {},
+            rows: [
+              {
+                columns: [
+                  {
+                    width: 12,
+                    conditionalWidgets: [
+                      {
+                        widget: 'markup-1',
+                        dashboardCondition: {
+                          id: 'column-condition-1',
+                          datasetKey: 'condition-data',
+                          operator: 'hasData'
+                        }
+                      }
+                    ]
+                  }
+                ],
+                expandCollapseAllButtons: false
+              }
+            ],
+            visualizations: {
+              'markup-1': {
+                uid: 'markup-1',
+                type: 'markup-include',
+                visualizationType: 'markup-include',
+                contentEditor: { title: 'Example' }
+              }
+            }
+          } as any,
+          outerContainerRef: vi.fn(),
+          setParentConfig: vi.fn(),
+          isDebug: false,
+          isEditor: true,
+          reloadURLData: vi.fn(),
+          loadAPIFilters: vi.fn(),
+          setAPIFilterDropdowns: vi.fn(),
+          setAPILoading: vi.fn(),
+          data: {}
+        }}
+      >
+        <DashboardDispatchContext.Provider value={dispatch}>
+          <DashboardCopyPasteContext.Provider
+            value={{ copiedWidget: options.copiedWidget, copyWidget, clearCopiedWidget }}
+          >
+            <Widget title={title} toggleRow={false} type={type} widgetConfig={widgetConfig} widgetInRow />
+          </DashboardCopyPasteContext.Provider>
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    </GlobalContext.Provider>
+  )
+
+  return { ...renderResult, openOverlay, copyWidget, clearCopiedWidget, dispatch }
+}
+
+describe('Widget', () => {
+  it('shows the active widget condition button and summary strip when a column condition exists', () => {
+    renderWidget()
+
+    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 widget condition button or summary strip', () => {
+    const { openOverlay } = renderWidget()
+
+    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('shows a copy button for populated widgets and stores the copied widget label', () => {
+    const { copyWidget } = renderWidget()
+
+    fireEvent.click(screen.getByTitle('Copy Component'))
+
+    expect(copyWidget).toHaveBeenCalledWith({ sourceWidgetKey: 'markup-1', label: 'Example' })
+  })
+
+  it('uses a delete button for removing widgets', () => {
+    const { dispatch } = renderWidget()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Delete Component' }))
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'DELETE_WIDGET',
+      payload: { uid: 'markup-1' }
+    })
+  })
+
+  it('shows labels for waffle and gauge visualization type aliases', () => {
+    renderWidget({
+      type: 'TP5 Waffle',
+      title: '',
+      widgetConfig: {
+        uid: 'waffle-1',
+        rowIdx: 0,
+        colIdx: 0,
+        type: 'waffle-chart',
+        visualizationType: 'TP5 Waffle'
+      }
+    })
+
+    expect(screen.getByText('Waffle Chart')).toBeInTheDocument()
+  })
+
+  it('marks the copied widget and lets the active copy button cancel copy mode', () => {
+    const clearCopiedWidget = vi.fn()
+    const { container, copyWidget } = renderWidget({
+      copiedWidget: { sourceWidgetKey: 'markup-1', label: 'Example' },
+      clearCopiedWidget
+    })
+
+    expect(container.querySelector('.widget')).toHaveClass('widget--copied-source')
+    expect(screen.getByTitle('Copy Component')).toHaveClass('is-active')
+    expect(screen.getByRole('button', { name: 'Clear copied component' })).toHaveTextContent('Copied')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Clear copied component' }))
+
+    expect(clearCopiedWidget).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(screen.getByTitle('Copy Component'))
+
+    expect(clearCopiedWidget).toHaveBeenCalledTimes(2)
+    expect(copyWidget).not.toHaveBeenCalled()
+  })
+
+  it('clears copy mode after a successful widget move', () => {
+    const clearCopiedWidget = vi.fn()
+    const dispatch = vi.fn()
+    renderWidget({ clearCopiedWidget, dispatch })
+
+    latestDragSpec.end(null, { getDropResult: () => ({ rowIdx: 0, colIdx: 0 }) })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'MOVE_VISUALIZATION',
+      payload: {
+        rowIdx: 0,
+        colIdx: 0,
+        entryIdx: undefined,
+        widget: expect.objectContaining({ uid: 'markup-1' })
+      }
+    })
+    expect(clearCopiedWidget).toHaveBeenCalled()
+  })
+})

package/src/components/Widget/Widget.tsx

@@ -2,20 +2,25 @@ import React, { useContext, useState } from 'react'
 import { useDrag } from 'react-dnd'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import { DashboardCopyPasteContext } from '../../DashboardCopyPasteContext'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import Icon from '@cdc/core/components/ui/Icon'
+import Button from '@cdc/core/components/elements/Button'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { iconHash } from '../../helpers/iconHash'
 import _ from 'lodash'
 import { DataDesignerModal } from '../DataDesignerModal'
+import { DashboardConditionModal } from '../DashboardConditionModal'
+import { DashboardConditionSummary } from '../DashboardConditionSummary'
 import { labelHash } from '@cdc/core/helpers/labelHash'
+import { dashboardConditionsSupportedForRow } from '../../helpers/dashboardFilterTargets'
+import { getConditionalWidgets, hasConditionalWidgets } from '../../helpers/dashboardColumnWidgets'
 import './widget.styles.css'
 
-type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number }
+type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number; entryIdx?: number }
 type WidgetProps = {
   title: string
-  columnData?: any
   widgetConfig?: WidgetConfig
   addVisualization?: Function
   type: string
@@ -25,7 +30,6 @@ type WidgetProps = {
 
 const Widget = ({
   title,
-  columnData,
   widgetConfig,
   addVisualization,
   type,
@@ -34,11 +38,13 @@ const Widget = ({
 }: WidgetProps) => {
   const { overlay } = useGlobalContext()
   const { config, data, isEditor } = useContext(DashboardContext)
+  const { copiedWidget, copyWidget, clearCopiedWidget } = useContext(DashboardCopyPasteContext)
   const dispatch = useContext(DashboardDispatchContext)
+  const column = widgetConfig ? config.rows[widgetConfig.rowIdx]?.columns?.[widgetConfig.colIdx] : undefined
 
   const [isEditing, setIsEditing] = useState(false)
   const [toggleName, setToggleName] = useState(
-    columnData?.toggleName || labelHash[config?.visualizations[columnData?.widget]?.type] || ''
+    column?.toggleName || labelHash[config?.visualizations[widgetConfig?.uid as string]?.type || type] || ''
   )
 
   const transform = new DataTransform()
@@ -48,14 +54,16 @@ const Widget = ({
 
     if (!result) return null
 
-    const { rowIdx, colIdx } = result
+    const { rowIdx, colIdx, entryIdx } = result
 
     if (undefined !== widgetConfig?.rowIdx) {
-      dispatch({ type: 'MOVE_VISUALIZATION', payload: { rowIdx, colIdx, widget: widgetConfig } })
+      dispatch({ type: 'MOVE_VISUALIZATION', payload: { rowIdx, colIdx, entryIdx, widget: widgetConfig } })
+      clearCopiedWidget()
     } else if (!!addVisualization) {
       // Item does not exist, instantiate a new one
       const newViz = addVisualization()
-      dispatch({ type: 'ADD_VISUALIZATION', payload: { newViz, rowIdx, colIdx } })
+      dispatch({ type: 'ADD_VISUALIZATION', payload: { newViz, rowIdx, colIdx, entryIdx } })
+      clearCopiedWidget()
     }
   }
 
@@ -110,7 +118,7 @@ const Widget = ({
             // the HEADER component removes the data when you toggle to the main viz panel.
             // data will be cached only when it's loaded via dashboard preview.
             ;(responseData as any).sample = true
-            dispatch({ type: 'SET_DATA', payload: { ...data, [dataKey]: responseData } })
+            dispatch({ type: 'SET_DATA', payload: { data: { ...data, [dataKey]: responseData } } })
           })
           .catch(error => {
             console.error('Failed to fetch sample data:', error)
@@ -128,6 +136,20 @@ const Widget = ({
     loadSampleData()
   }
 
+  const copyCurrentWidget = () => {
+    if (!widgetConfig?.uid) return
+
+    if (copiedWidget?.sourceWidgetKey === widgetConfig.uid) {
+      clearCopiedWidget()
+      return
+    }
+
+    copyWidget({
+      sourceWidgetKey: widgetConfig.uid as string,
+      label: title || labelHash[type] || type
+    })
+  }
+
   let isConfigurationReady = false
   const dataConfiguredForRow = !!config.rows[widgetConfig?.rowIdx]?.dataKey
   if (dataConfiguredForRow || ['dashboardFilters', 'markup-include'].includes(type)) {
@@ -156,25 +178,55 @@ const Widget = ({
   }
 
   const needsDataConfiguration = !dataConfiguredForRow && widgetConfig?.type !== 'dashboardFilters'
+  const rowSupportsDashboardConditions = widgetConfig
+    ? dashboardConditionsSupportedForRow(config.rows[widgetConfig.rowIdx])
+    : false
+  const conditionalWidgets = hasConditionalWidgets(column) ? getConditionalWidgets(column) : []
+  const hasDashboardCondition =
+    widgetConfig && widgetConfig.entryIdx !== undefined
+      ? !!conditionalWidgets[widgetConfig.entryIdx]?.dashboardCondition
+      : false
+  const dashboardCondition =
+    widgetConfig && widgetConfig.entryIdx !== undefined
+      ? conditionalWidgets[widgetConfig.entryIdx]?.dashboardCondition
+      : undefined
+  const isCopiedWidget = !!widgetConfig?.uid && copiedWidget?.sourceWidgetKey === widgetConfig.uid
 
   const widgetContent = (
     <div
-      className={`widget ${toggleRow ? 'd-block widget--toggle' : ''} ${isDragging && 'dragging'}`}
+      className={`widget ${toggleRow ? 'd-block widget--toggle' : ''} ${widgetInRow ? 'widget--in-row' : ''} ${
+        isCopiedWidget ? 'widget--copied-source' : ''
+      } ${isDragging && 'dragging'}`}
       style={{ maxHeight: widgetInRow && toggleRow ? '180px' : '180px', minHeight: '100%' }}
     >
       <Icon display='move' className='drag-icon' />
-      <div className='widget__content'>
+      {isCopiedWidget && (
+        <button
+          type='button'
+          className='widget__copied-badge'
+          aria-label='Clear copied component'
+          onClick={clearCopiedWidget}
+        >
+          <span>Copied</span>
+          <Icon display='close' base />
+        </button>
+      )}
+      <div
+        className={`widget__content${widgetConfig?.rowIdx !== undefined ? ' widget__content--with-menu' : ''}${
+          dashboardCondition ? ' widget__content--has-condition' : ''
+        }`}
+      >
         {widgetConfig?.rowIdx !== undefined && (
           <div className='widget-menu'>
             {isConfigurationReady && (
-              <button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
+              <Button title='Configure Visualization' className='btn-configure' onClick={editWidget}>
                 {iconHash['tools']}
-              </button>
+              </Button>
             )}
             {needsDataConfiguration && (
-              <button
+              <Button
                 title='Configure Data'
-                className='btn btn-configure'
+                className='btn-configure'
                 onClick={() => {
                   overlay?.actions.openOverlay(
                     <DataDesignerModal rowIndex={widgetConfig.rowIdx} vizKey={widgetConfig.uid} />
@@ -182,16 +234,67 @@ const Widget = ({
                 }}
               >
                 {iconHash['gear']}
-              </button>
+              </Button>
             )}
-            <div className='widget-menu-item' onClick={deleteWidget}>
+            <Button
+              title={
+                rowSupportsDashboardConditions
+                  ? 'Configure Dashboard Condition'
+                  : 'Dashboard conditions are not available for toggle or multi-visualization rows'
+              }
+              className={`btn-configure btn-configure--condition${hasDashboardCondition ? ' is-active' : ''}`}
+              disabled={!rowSupportsDashboardConditions}
+              onClick={() => {
+                overlay?.actions.openOverlay(
+                  <DashboardConditionModal
+                    rowIndex={widgetConfig.rowIdx}
+                    columnIndex={widgetConfig.colIdx}
+                    entryIndex={widgetConfig.entryIdx}
+                  />
+                )
+              }}
+            >
+              {iconHash['condition']}
+            </Button>
+            <Button
+              title='Copy Component'
+              className={`btn-configure btn-configure--copy${isCopiedWidget ? ' is-active' : ''}`}
+              aria-pressed={isCopiedWidget}
+              onClick={copyCurrentWidget}
+            >
+              <Icon display='copy' base />
+            </Button>
+            <Button className='btn-configure btn-configure--delete' title='Delete Component' onClick={deleteWidget}>
               <Icon display='close' base />
-            </div>
+            </Button>
           </div>
         )}
-        {iconHash[type]}
-        <span>{labelHash[type]}</span>
-        <span>{title}</span>
+        {widgetConfig?.rowIdx !== undefined && dashboardCondition && (
+          <DashboardConditionSummary
+            className='dashboard-condition-summary--widget'
+            dashboardCondition={dashboardCondition}
+            rowIndex={widgetConfig.rowIdx}
+            columnIndex={widgetConfig.colIdx}
+            entryIndex={widgetConfig.entryIdx}
+          />
+        )}
+        {widgetInRow ? (
+          <>
+            <div className='widget__summary'>
+              <span className='widget__type-icon'>{iconHash[type]}</span>
+              <span className='widget__summary-text'>
+                <span className='widget__type-label'>{labelHash[type]}</span>
+              </span>
+            </div>
+            <span className='widget__title'>{title}</span>
+          </>
+        ) : (
+          <>
+            {iconHash[type]}
+            <span>{labelHash[type]}</span>
+            <span>{title}</span>
+          </>
+        )}
         {widgetConfig?.newViz && type !== 'dashboardFilters' && (
           <span onClick={editWidget} className='config-needed'>
             Configuration needed

package/src/components/Widget/widget.styles.css

@@ -33,25 +33,69 @@
 .widget-menu {
   align-items: center;
   display: flex;
-  justify-content: space-between;
+  gap: 6px;
+  justify-content: flex-end;
+  padding: 2px;
 }
 
-.btn-configure {
-  background: none;
-  height: 20px;
-  margin: 0 5px;
-  padding: 0;
-  width: 20px;
+.widget-menu .cove-button.btn-configure {
+  align-items: center;
+  background: transparent !important;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  color: var(--mediumGray);
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  line-height: 1;
+  margin: 0;
+  min-height: 28px;
+  padding: 4px;
+  transform: none;
+  width: 28px;
+}
+
+.widget-menu .cove-button.btn-configure:hover:not(:disabled),
+.widget-menu .cove-button.btn-configure:active:not(:disabled) {
+  background: rgba(0, 94, 170, 0.08) !important;
+  box-shadow: none;
+  transform: none;
+}
+
+.widget-menu .cove-button.btn-configure:focus {
+  outline: none !important;
+}
+
+.widget-menu .cove-button.btn-configure:focus-visible {
+  background: rgba(0, 94, 170, 0.08) !important;
+  box-shadow: inset 0 0 0 2px currentColor;
+  outline: none !important;
+}
+
+.widget-menu .cove-button.btn-configure.btn-configure--condition.is-active {
+  background: var(--dashboard-condition-active-blue-bg, #f2f7fb) !important;
+  box-shadow: inset 0 0 0 1px var(--dashboard-condition-active-blue, var(--blue));
+  color: var(--dashboard-condition-active-blue, var(--blue));
+}
+
+.widget-menu .cove-button.btn-configure.btn-configure--condition.is-active:hover:not(:disabled),
+.widget-menu .cove-button.btn-configure.btn-configure--condition.is-active:active:not(:disabled) {
+  background: var(--dashboard-condition-active-blue-bg-hover, #e6eff7) !important;
+  box-shadow: inset 0 0 0 1px var(--dashboard-condition-active-blue, var(--blue));
 }
 
-.widget-menu-item {
-  cursor: pointer;
+.widget-menu .cove-button.btn-configure svg {
   display: block;
-  height: 20px;
-  user-select: none;
-  width: 20px;
+  height: 1.1em;
+  margin-bottom: 0;
+  top: 0;
+  transform: translateY(2px);
+  vertical-align: middle;
+  width: 1.1em;
 }
 
-.widget-menu-item svg {
-  fill: var(--mediumGray);
+.widget-menu .cove-button.btn-configure.btn-configure--condition svg {
+  transform: translateY(2px) scale(1.15);
+  transform-origin: center;
 }

package/src/components/dashboard-condition-modal.css

@@ -0,0 +1,76 @@
+.cove-overlay:has(.dashboard-condition-modal) {
+  align-items: flex-start;
+}
+
+.cove-overlay__wrapper:has(.dashboard-condition-modal) {
+  align-items: flex-start;
+  padding: 2.5rem 0;
+}
+
+.cove-overlay__container:has(.dashboard-condition-modal) {
+  margin: 0 auto !important;
+}
+
+.dashboard-condition-modal__fields {
+  display: grid;
+  gap: 1rem;
+}
+
+.dashboard-condition-modal__select {
+  min-height: 41px;
+}
+
+.dashboard-condition-modal label {
+  align-items: flex-start;
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-condition-modal .edit-label {
+  align-items: center;
+  color: #333;
+  display: inline-flex;
+  font-size: 0.95rem;
+  font-weight: 600;
+  gap: 0.125rem;
+  margin-bottom: 0.5rem;
+  width: 100%;
+}
+
+.dashboard-condition-modal .cove-form-select {
+  border: 1px solid #c7c7c7;
+  border-radius: 0.333rem;
+  display: block;
+  height: 41px;
+  margin-top: 0;
+  min-height: 41px;
+  padding-left: 0.875rem;
+  padding-right: 2.5rem;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+  width: 100%;
+}
+
+.dashboard-condition-modal .cove-form-select:hover {
+  border-color: var(--blue);
+}
+
+.dashboard-condition-modal .cove-form-select:focus {
+  border-color: var(--blue);
+  box-shadow: none;
+  outline: 0;
+}
+
+.dashboard-condition-modal .cove-multiselect {
+  margin-top: 0.25rem;
+}
+
+.dashboard-condition-modal__multiselect-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-condition-modal__tooltip-text {
+  font-weight: 400;
+  margin: 0;
+}