[dev] Revert "feature: [dev-8574] Advanced Editor updates (#1372)"

This reverts commit 56d002e.

packages/chart/src/components/EditorPanel/EditorPanel.tsx

@@ -2708,7 +2708,7 @@ const EditorPanel = () => {
             <Panels.Annotate name='Text Annotations' />
             {/* {(config.visualizationType === 'Bar' || config.visualizationType === 'Line') && <Panels.DateHighlighting name='Date Highlighting' />} */}
           </Accordion>
-          {config.type !== 'Spark Line' && <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />}
+          {config.type !== 'Spark Line' && <AdvancedEditor loadConfig={updateConfig} state={config} convertStateToConfig={convertStateToConfig} />}
         </Layout.Sidebar>
       </ErrorBoundary>
     </EditorPanelContext.Provider>

packages/core/components/AdvancedEditor/AdvancedEditor.tsx → packages/core/components/AdvancedEditor.jsx

@@ -1,33 +1,23 @@
 import React, { useState, useEffect } from 'react'
-import MapIcon from '../../assets/map-folded.svg'
-import ChartIcon from '../../assets/icon-chart-bar.svg'
-import MarkupIncludeIcon from '../../assets/icon-code.svg'
-import { JsonEditor, UpdateFunction } from 'json-edit-react'
-import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
-import './advanced-editor-styles.css'
-import _ from 'lodash'
+import MapIcon from '../assets/map-folded.svg'
+import ChartIcon from '../assets/icon-chart-bar.svg'
+import MarkupIncludeIcon from '../assets/icon-code.svg'
 
-export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
-  const [advancedToggle, _setAdvancedToggle] = useState(false)
-  const [configTextboxValue, setConfigTextbox] = useState('')
-  const setAdvancedToggle = val => {
-    _setAdvancedToggle(val)
-    onExpandCollapse()
-  }
-
-  const onUpdate: UpdateFunction = val => {
-    setConfigTextbox(JSON.stringify(val.newData))
-  }
+export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
+  const [advancedToggle, setAdvancedToggle] = useState(false)
+  const [configTextboxValue, setConfigTextbox] = useState({})
 
   useEffect(() => {
-    let parsedConfig = stripConfig(config)
-    if (config.type !== 'dashboard') {
-      parsedConfig = convertStateToConfig()
+    let parsedData = state
+    if (state.type !== 'dashboard') {
+      parsedData = convertStateToConfig()
+    } else {
+      parsedData = JSON.parse(JSON.stringify(parsedData))
     }
-    const formattedConfig = JSON.stringify(parsedConfig, undefined, 2)
+    const formattedData = JSON.stringify(parsedData, undefined, 2)
 
-    setConfigTextbox(formattedConfig)
-  }, [config])
+    setConfigTextbox(formattedData)
+  }, [state])
 
   const typeLookup = {
     chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
@@ -36,13 +26,13 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
     'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
   }
 
-  if (!config.type) return <></>
+  if (!state.type) return <></>
   return (
     <>
-      <a href={typeLookup[config.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
-        {typeLookup[config.type][2]}
+      <a href={typeLookup[state.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
+        {typeLookup[state.type][2]}
         <div>
-          <span className='heading-3'>Get Help with {typeLookup[config.type][0]}</span>
+          <span className='heading-3'>Get Help with {typeLookup[state.type][0]}</span>
           <p>Examples and documentation</p>
         </div>
       </a>
@@ -62,21 +52,16 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
               This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
             </p>
             <button
-              className='btn '
+              className='btn'
               onClick={() => {
                 navigator.clipboard.writeText(configTextboxValue)
+                alert('Copied!')
               }}
             >
               Copy to Clipboard
             </button>
-            <JsonEditor className='advanced-json-editor' data={JSON.parse(configTextboxValue)} onUpdate={onUpdate} rootName='' />
-            <button
-              className='btn full-width'
-              onClick={() => {
-                loadConfig(JSON.parse(configTextboxValue))
-                setAdvancedToggle(!advancedToggle)
-              }}
-            >
+            <textarea value={configTextboxValue} onChange={event => setConfigTextbox(event.target.value)} />
+            <button className='btn full-width' onClick={() => loadConfig(JSON.parse(configTextboxValue))}>
               Apply
             </button>
           </React.Fragment>

packages/core/package.json

@@ -21,7 +21,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "html2canvas": "^1.4.1",
-    "json-edit-react": "^1.12.0",
     "papaparse": "^5.3.0",
     "prop-types": "^15.8.1",
     "react-accessible-accordion": "^5.0.0",

packages/dashboard/src/CdcDashboardComponent.tsx

@@ -529,7 +529,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         <DndProvider backend={HTML5Backend}>
           <div className='header-container'>
             <Header />
-            <VisualizationsPanel />
+            <VisualizationsPanel loadConfig={newConfig => dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })} config={state.config} />
           </div>
 
           <div className='layout-container'>

packages/dashboard/src/components/VisualizationsPanel.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import type { Visualization } from '@cdc/core/types/Visualization'
+import Widget from './Widget'
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
+import { Table } from '@cdc/core/types/Table'
+
+const addVisualization = (type, subType) => {
+  const modalWillOpen = type !== 'markup-include'
+  const newVisualizationConfig: Partial<Visualization> = {
+    filters: [],
+    filterBehavior: 'Filter Change',
+    newViz: type !== 'table',
+    openModal: modalWillOpen,
+    uid: type + Date.now(),
+    type
+  }
+
+  switch (type) {
+    case 'chart':
+      newVisualizationConfig.visualizationType = subType
+      break
+    case 'map':
+      newVisualizationConfig.general = {}
+      newVisualizationConfig.general.geoType = subType
+      break
+    case 'data-bite' || 'waffle-chart' || 'filtered-text':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'table':
+      const tableConfig: Table = { label: 'Data Table', show: true, showDownloadUrl: false, showVertical: true, expanded: true, collapsible: true }
+      newVisualizationConfig.table = tableConfig
+      newVisualizationConfig.columns = {}
+      newVisualizationConfig.dataFormat = {}
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'markup-include':
+      newVisualizationConfig.contentEditor = {
+        inlineHTML: '<h2>Inline HTML</h2>',
+        markupVariables: [],
+        showHeader: true,
+        srcUrl: '#example',
+        title: 'Markup Include',
+        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
+    default:
+      newVisualizationConfig.visualizationType = type
+      break
+  }
+
+  return newVisualizationConfig
+}
+
+const VisualizationsPanel = ({ loadConfig, config }) => (
+  <div className='visualizations-panel'>
+    <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' />
+    </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' />
+    </div>
+    <span className='subheading-3'>Misc.</span>
+    <div className='drag-grid'>
+      <Widget addVisualization={() => addVisualization('data-bite', '')} type='data-bite' />
+      <Widget addVisualization={() => addVisualization('waffle-chart', '')} type='waffle-chart' />
+      <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
+      <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
+      <Widget addVisualization={() => addVisualization('filter-dropdowns', '')} type='filter-dropdowns' />
+      <Widget addVisualization={() => addVisualization('table', '')} type='table' />
+    </div>
+    <span className='subheading-3'>Advanced</span>
+    <AdvancedEditor loadConfig={loadConfig} state={config} convertStateToConfig={() => undefined} />
+  </div>
+)
+
+export default VisualizationsPanel

packages/dashboard/src/scss/grid.scss

@@ -7,6 +7,15 @@ $red: #f74242;
   margin-left: calc($editorWidth + 1em);
 }
 
+.visualizations-panel {
+  background-color: #fff;
+  padding: 1em;
+  width: $editorWidth;
+  border-right: #c7c7c7 1px solid;
+  z-index: 1;
+  overflow-y: scroll;
+}
+
 .hidden.editor-panel + .builder-grid {
   margin-left: 0 !important;
 }

packages/dashboard/src/scss/variables.scss

@@ -1,5 +1 @@
 $editorWidth: 350px;
-
-:root {
-  --editorWidth: #{$editorWidth};
-}