Add markup includes to editor home page

Author: jayb

packages/dashboard/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -46,24 +46,7 @@ const addVisualization = (type, subType) => {
       newVisualizationConfig.visualizationType = type
       break
     case 'markup-include':
-      newVisualizationConfig.contentEditor = {
-        inlineHTML: '<h2>Inline HTML</h2>',
-        markupVariables: [],
-        showHeader: true,
-        srcUrl: '#example',
-        useInlineHTML: true
-      }
-      newVisualizationConfig.theme = 'theme-blue'
-      newVisualizationConfig.visual = {
-        border: false,
-        accent: false,
-        background: false,
-        hideBackgroundColor: false,
-        borderColorTheme: false
-      }
-      newVisualizationConfig.showEditorPanel = true
       newVisualizationConfig.visualizationType = type
-
       break
     case 'dashboardFilters': {
       newVisualizationConfig.sharedFilterIndexes = []

packages/editor/src/components/ChooseTab.tsx

@@ -27,6 +27,7 @@ import ComboChartIcon from '@cdc/core/assets/icon-combo-chart.svg'
 import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
 import TableIcon from '@cdc/core/assets/icon-table.svg'
 import WarmingStripesIcon from '@cdc/core/assets/icon-warming-stripes.svg'
+import CodeIcon from '@cdc/core/assets/icon-code.svg'
 import Icon from '@cdc/core/components/ui/Icon'
 
 import {
@@ -317,6 +318,16 @@ const buttons = [
     content: `Specify the calculation of a single data point (such as a percentage value) and present it on a horizontal
               scale.`
   },
+  {
+    id: 26,
+    category: 'General',
+    label: 'Markup Include',
+    type: 'markup-include',
+    subType: null,
+    orientation: null,
+    icon: <CodeIcon />,
+    content: 'Include custom HTML markup or embed content from external URLs.'
+  },
   {
     id: 17,
     category: 'General',

packages/editor/src/scss/choose-vis-tab.scss

@@ -14,7 +14,7 @@
     display: grid;
     gap: 1em;
     &.category_general {
-      grid-template-columns: repeat(5, 160px);
+      grid-template-columns: repeat(6, 160px);
     }
     &.category_charts {
       grid-template-columns: repeat(7, 160px);

packages/markup-include/src/CdcMarkupInclude.tsx

@@ -124,7 +124,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
       processedConfig.filters = addValuesToFilters(processedConfig.filters, responseData)
     }
 
-    updateConfig({ ...configObj, ...processedConfig })
+    updateConfig({ ...defaults, ...processedConfig })
     dispatch({ type: 'SET_LOADING', payload: false })
   }
 

packages/markup-include/src/data/initial-state.js

@@ -1,19 +1,22 @@
 export default {
   contentEditor: {
-    inlineHTML: '<h2>Inline HTML</h2>',
+    inlineHTML: '<strong>Inline HTML</strong>',
+    markupVariables: [],
     showHeader: true,
     srcUrl: '#example',
     title: '',
     titleStyle: 'small',
-    useInlineHTML: false,
+    useInlineHTML: true,
     showNoDataMessage: false,
     noDataMessageText: 'No Data Available'
   },
   data: [],
   legend: {},
   newViz: true,
+  showEditorPanel: true,
   theme: 'theme-blue',
   type: 'markup-include',
+  visualizationType: 'markup-include',
   runtime: null,
   visual: {
     border: false,