@cdc/dashboard 4.26.4 → 4.26.5

package/src/components/VisualizationRow.tsx

@@ -1,5 +1,5 @@
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import Toggle from './Toggle'
 import cloneDeep from 'lodash/cloneDeep'
 import { ConfigRow } from '../types/ConfigRow'
@@ -11,6 +11,12 @@ import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
 import DashboardSharedFilters, { APIFilterDropdowns } from './DashboardFilters'
 import { DashboardContext } from '../DashboardContext'
 import { ViewPort } from '@cdc/core/types/ViewPort'
+import { evaluateDashboardCondition } from '../helpers/dashboardConditions'
+import { dashboardConditionsSupportedForRow } from '../helpers/dashboardFilterTargets'
+import {
+  hasAuthoredWidgetEntries,
+  resolveColumnWidgetEntry as resolveDashboardColumnWidgetEntry
+} from '../helpers/dashboardColumnWidgets'
 import { getVizConfig } from '../helpers/getVizConfig'
 import { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
 import CollapsibleVisualizationRow from './CollapsibleVisualizationRow'
@@ -21,6 +27,7 @@ import ExpandCollapseButtons from './ExpandCollapseButtons'
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { hasVisibleDashboardFiltersForIndexes } from '../helpers/filterVisibility'
 
 type VisualizationWrapperProps = {
   allExpanded: boolean
@@ -63,6 +70,8 @@ type VizRowProps = {
   rowIndex: number
   inNoDataState: boolean
   setSharedFilter: Function
+  clearSharedFilter: (key: string) => void
+  hasActiveSharedFilter: (key: string) => boolean
   updateChildConfig: Function
   apiFilterDropdowns: APIFilterDropdowns
   currentViewport: ViewPort
@@ -79,6 +88,8 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   rowIndex: index,
   inNoDataState,
   setSharedFilter,
+  clearSharedFilter,
+  hasActiveSharedFilter,
   updateChildConfig,
   apiFilterDropdowns,
   currentViewport,
@@ -87,7 +98,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   interactionLabel = ''
 }) => {
   const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
-  const [toggledRow, setToggled] = React.useState<number>(0)
+  const [toggledRow, setToggled] = useState<number>(0)
   const rowRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -166,9 +177,27 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     }
   }
 
-  const tp5CountInRow = row.columns.reduce((count, col) => {
-    if (!col.widget) return count
-    const viz = config.visualizations[col.widget]
+  const shouldIgnoreDashboardConditions = !dashboardConditionsSupportedForRow(row)
+  const columnDashboardConditionEvaluations = useMemo(
+    () =>
+      row.columns.map(column =>
+        resolveDashboardColumnWidgetEntry(column, {
+          evaluateCondition: dashboardCondition => {
+            if (shouldIgnoreDashboardConditions || !dashboardCondition) {
+              return { matches: true, resolved: true }
+            }
+
+            return evaluateDashboardCondition(dashboardCondition, dashboardFilteredData[dashboardCondition.id])
+          }
+        })
+      ),
+    [dashboardFilteredData, row.columns, shouldIgnoreDashboardConditions]
+  )
+
+  const tp5CountInRow = columnDashboardConditionEvaluations.reduce((count, evaluation) => {
+    const widgetKey = evaluation?.widget
+    if (!widgetKey) return count
+    const viz = config.visualizations[widgetKey]
     if (!viz) return count
 
     const isTp5DataBite = viz.type === 'data-bite' && (viz as any).biteStyle === 'tp5'
@@ -182,7 +211,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   const shouldEqualizeRow = !!row.equalHeight || needsTP5AutoEqualization
 
   // Layer TP5 equalization for row-level title consistency and same-type internals.
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!shouldEqualizeRow) return
 
     const rowElement = rowRef.current
@@ -205,9 +234,10 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     }
   }, [shouldEqualizeRow, row.columns, config.activeDashboard, filteredDataOverride, dashboardFilteredData[index]])
 
-  const isFilterRow = row.columns.some(
-    col => col.widget && config.visualizations[col.widget]?.type === 'dashboardFilters'
-  )
+  const isFilterRow = columnDashboardConditionEvaluations.some(evaluation => {
+    const widgetKey = evaluation?.widget
+    return widgetKey && config.visualizations[widgetKey]?.type === 'dashboardFilters'
+  })
   const needsEqualHeight = shouldEqualizeRow && !isFilterRow
 
   const show = useMemo(() => {
@@ -219,6 +249,33 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   }, [config.activeDashboard, toggledRow])
 
   const _data = dashboardFilteredData[index] || row.formattedData || []
+  const isMultiVizGroupRow = !!row.originalMultiVizColumn && !!filteredDataOverride
+  const rowDashboardCondition = useMemo(() => {
+    if (shouldIgnoreDashboardConditions || !row.dashboardCondition) {
+      return { matches: true, resolved: true }
+    }
+
+    return evaluateDashboardCondition(row.dashboardCondition, dashboardFilteredData[row.dashboardCondition.id])
+  }, [dashboardFilteredData, row.dashboardCondition, shouldIgnoreDashboardConditions])
+  const hasVisibleWidgetColumn = row.columns.some((_column, columnIndex) => {
+    if (!row.columns[columnIndex].width) return false
+
+    const widgetKey = columnDashboardConditionEvaluations[columnIndex]?.widget
+    if (!widgetKey) return false
+
+    const visualization = config.visualizations[widgetKey]
+    if (visualization?.type !== 'dashboardFilters') return true
+
+    return hasVisibleDashboardFiltersForIndexes(
+      config.dashboard.sharedFilters,
+      (visualization as DashboardFilters).sharedFilterIndexes
+    )
+  })
+
+  if (!rowDashboardCondition.matches || !hasVisibleWidgetColumn) {
+    return null
+  }
+
   const dataGroups =
     row.multiVizColumn &&
     _data.reduce((acc, dataRow) => {
@@ -235,7 +292,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     const applyFilters = dashboardFilters.filter(v => !v.autoLoad).flatMap(v => v.sharedFilterIndexes)
     if (hasDashboardApplyBehavior(config.visualizations) && vizConfig.autoLoad) {
       return applyFilters.some(index => {
-        const { queuedActive, active, subGrouping } = config.dashboard.sharedFilters[index]
+        const filter = config.dashboard.sharedFilters[index]
+        if (!filter) return false
+        const { queuedActive, active, subGrouping } = filter
         if (!active && !queuedActive) return true
         if (!queuedActive) return false
         // for nested dropdowns
@@ -294,11 +353,27 @@ const VisualizationRow: React.FC<VizRowProps> = ({
       )}
       {row.columns.map((col, colIndex) => {
         if (col.width) {
-          if (!col.widget)
-            return <div key={`row__${index}__col__${colIndex}`} className={`col-12 col-md-${col.width}`}></div>
+          const resolvedWidget = columnDashboardConditionEvaluations[colIndex]?.widget
+          const hasAuthoredWidgets = hasAuthoredWidgetEntries(col)
+          const hiddenByDashboardCondition = hasAuthoredWidgets && !resolvedWidget
+          if (!resolvedWidget) {
+            if (!hasAuthoredWidgets && (isMultiVizGroupRow || row.toggle)) {
+              return null
+            }
+
+            return (
+              <div
+                key={`row__${index}__col__${colIndex}`}
+                className={`col-12 col-md-${col.width}${
+                  hiddenByDashboardCondition ? ' dashboard-condition-hidden' : ''
+                }`}
+                data-dashboard-condition-hidden={hiddenByDashboardCondition || undefined}
+              ></div>
+            )
+          }
 
           const visualizationConfig = getVizConfig(
-            col.widget,
+            resolvedWidget,
             index,
             config,
             rawData,
@@ -311,9 +386,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
           const setsSharedFilter =
             config.dashboard.sharedFilters &&
-            config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0
+            config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === resolvedWidget).length > 0
           const setSharedFilterValue = setsSharedFilter
-            ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active
+            ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === resolvedWidget)[0].active
             : undefined
           const tableLink = (
             <a
@@ -349,9 +424,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
           const hiddenDashboardFilters =
             type === 'dashboardFilters' &&
-            sharedFilterIndexes &&
-            sharedFilterIndexes.filter(idx => config.dashboard.sharedFilters?.[idx]?.showDropdown === false).length ===
-              sharedFilterIndexes.length
+            !hasVisibleDashboardFiltersForIndexes(config.dashboard.sharedFilters, sharedFilterIndexes)
 
           const vizWrapperClass = `col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
             hideVisualization ? ' hide-parent-visualization' : ''
@@ -371,12 +444,12 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             >
               {type === 'chart' && (
                 <CdcChart
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig as ChartConfig}
                   dashboardConfig={config}
                   datasets={config.datasets}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
                   isDashboard={true}
@@ -386,13 +459,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'map' && (
                 <CdcMap
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   showLoader={false}
                   setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+                  clearSharedFilter={setsSharedFilter ? clearSharedFilter : undefined}
+                  hasActiveSharedFilter={setsSharedFilter ? hasActiveSharedFilter(resolvedWidget) : false}
                   setSharedFilterValue={setSharedFilterValue}
                   isDashboard={true}
                   link={link}
@@ -402,11 +477,11 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'data-bite' && (
                 <CdcDataBite
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
                   rawData={rawData?.[visualizationConfig.dataKey] || []}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   isDashboard={true}
                   isEditor={config.editing === true}
@@ -415,11 +490,11 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'waffle-chart' && (
                 <CdcWaffleChart
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
                   rawData={rawData?.[visualizationConfig.dataKey] || []}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   isDashboard={true}
                   interactionLabel={interactionLabel}
@@ -427,22 +502,22 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'markup-include' && (
                 <CdcMarkupInclude
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
                   datasets={config.datasets}
                   isDashboard={true}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   interactionLabel={interactionLabel}
                 />
               )}
               {type === 'filtered-text' && (
                 <CdcFilteredText
-                  key={col.widget}
+                  key={resolvedWidget}
                   config={visualizationConfig}
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
                   isDashboard={true}
                 />
@@ -450,9 +525,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               {type === 'dashboardFilters' && (
                 <DashboardSharedFilters
                   setConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
-                  key={col.widget}
+                  key={resolvedWidget}
                   visualizationConfig={visualizationConfig as DashboardFilters}
                   apiFilterDropdowns={apiFilterDropdowns}
                   currentViewport={currentViewport}
@@ -461,11 +536,11 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               )}
               {type === 'table' && (
                 <DataTableStandAlone
-                  key={col.widget}
+                  key={resolvedWidget}
                   updateConfig={newConfig => {
-                    updateChildConfig(col.widget, newConfig)
+                    updateChildConfig(resolvedWidget, newConfig)
                   }}
-                  visualizationKey={col.widget}
+                  visualizationKey={resolvedWidget}
                   config={visualizationConfig as TableConfig}
                   viewport={currentViewport}
                   interactionLabel={interactionLabel}

package/src/components/VisualizationsPanel/VisualizationsPanel.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DashboardContext, DashboardDispatchContext, initialState } from '../../DashboardContext'
+import VisualizationsPanel from './VisualizationsPanel'
+
+vi.mock('../Widget/Widget', () => ({
+  default: ({ type }: { type: string }) => <div data-testid='creation-widget'>{type}</div>
+}))
+
+vi.mock('@cdc/core/components/AdvancedEditor', () => ({
+  default: () => <div data-testid='advanced-editor' />
+}))
+
+describe('VisualizationsPanel', () => {
+  it('does not expose filtered-text in dashboard creation surfaces', () => {
+    render(
+      <DashboardContext.Provider
+        value={{
+          ...initialState,
+          config: {
+            type: 'dashboard',
+            dashboard: { sharedFilters: [] },
+            datasets: {},
+            rows: [],
+            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(),
+          data: {}
+        }}
+      >
+        <DashboardDispatchContext.Provider value={vi.fn()}>
+          <VisualizationsPanel />
+        </DashboardDispatchContext.Provider>
+      </DashboardContext.Provider>
+    )
+
+    const creationTypes = screen.getAllByTestId('creation-widget').map(widget => widget.textContent)
+    expect(creationTypes).toContain('markup-include')
+    expect(creationTypes).not.toContain('filtered-text')
+  })
+})

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -12,6 +12,8 @@ const VisualizationsPanel = () => {
   const [advancedEditing, setAdvancedEditing] = useState(false)
   const { config, isEditor } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
+  const createVisualization = (type, subType) =>
+    addVisualization(type, subType, { existingIds: Object.keys(config.visualizations || {}) })
   const loadConfig = incomingConfig => {
     const newConfig = !incomingConfig.multiDashboards
       ? incomingConfig
@@ -29,25 +31,24 @@ const VisualizationsPanel = () => {
       <p style={{ fontSize: '14px' }}>Click and drag an item onto the grid to add it to your dashboard.</p>
       <span className='subheading-3'>Chart</span>
       <div className='drag-grid'>
-        <Widget addVisualization={() => addVisualization('chart', 'Bar')} type='Bar' />
-        <Widget addVisualization={() => addVisualization('chart', 'Line')} type='Line' />
-        <Widget addVisualization={() => addVisualization('chart', 'Pie')} type='Pie' />
-        <Widget addVisualization={() => addVisualization('chart', 'Sankey')} type='Sankey' />
+        <Widget addVisualization={() => createVisualization('chart', 'Bar')} type='Bar' />
+        <Widget addVisualization={() => createVisualization('chart', 'Line')} type='Line' />
+        <Widget addVisualization={() => createVisualization('chart', 'Pie')} type='Pie' />
+        <Widget addVisualization={() => createVisualization('chart', 'Sankey')} type='Sankey' />
       </div>
       <span className='subheading-3'>Map</span>
       <div className='drag-grid'>
-        <Widget addVisualization={() => addVisualization('map', 'us')} type='us' />
-        <Widget addVisualization={() => addVisualization('map', 'world')} type='world' />
-        <Widget addVisualization={() => addVisualization('map', 'single-state')} type='single-state' />
+        <Widget addVisualization={() => createVisualization('map', 'us')} type='us' />
+        <Widget addVisualization={() => createVisualization('map', 'world')} type='world' />
+        <Widget addVisualization={() => createVisualization('map', 'single-state')} type='single-state' />
       </div>
       <span className='subheading-3'>Misc.</span>
       <div className='drag-grid'>
-        <Widget addVisualization={() => addVisualization('data-bite', '')} type='data-bite' />
-        <Widget addVisualization={() => addVisualization('waffle-chart', 'Waffle')} type='waffle-chart' />
-        <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
-        <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
-        <Widget addVisualization={() => addVisualization('dashboardFilters', '')} type='dashboardFilters' />
-        <Widget addVisualization={() => addVisualization('table', '')} type='table' />
+        <Widget addVisualization={() => createVisualization('data-bite', '')} type='data-bite' />
+        <Widget addVisualization={() => createVisualization('waffle-chart', 'Waffle')} type='waffle-chart' />
+        <Widget addVisualization={() => createVisualization('markup-include', '')} type='markup-include' />
+        <Widget addVisualization={() => createVisualization('dashboardFilters', '')} type='dashboardFilters' />
+        <Widget addVisualization={() => createVisualization('table', '')} type='table' />
       </div>
       <AdvancedEditor
         loadConfig={loadConfig}

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()
+  })
+})