Dashboard fixes

packages/core/components/AdvancedEditor/AdvancedEditor.tsx

@@ -8,6 +8,26 @@ import _ from 'lodash'
 import Tooltip from '../ui/Tooltip'
 import EmbedEditor from './EmbedEditor'
 
+const UNDEFINED_SENTINELS = new Set(['__undefined__', '__\u200bundefined__'])
+
+const sanitizeConfigForAdvancedEditor = <T,>(input: T): T => {
+  if (input === undefined || input === null) return input
+
+  // Normalize values so copy/export from JsonEditor stays valid JSON.
+  const serialized = JSON.stringify(input, (_key, value) => {
+    if (typeof value === 'string' && UNDEFINED_SENTINELS.has(value)) return undefined
+    return value
+  })
+
+  if (serialized === undefined) return input
+
+  try {
+    return JSON.parse(serialized)
+  } catch {
+    return input
+  }
+}
+
 export const AdvancedEditor = ({
   loadConfig,
   config,
@@ -28,30 +48,30 @@ export const AdvancedEditor = ({
   }
 
   const onUpdate: UpdateFunction = val => {
-    setConfigTextbox(val.newData)
+    setConfigTextbox(sanitizeConfigForAdvancedEditor(val.newData))
+  }
+
+  const getParsedConfig = () => {
+    let parsedConfig = stripConfig(config)
+    if (config.type !== 'dashboard') {
+      parsedConfig = convertStateToConfig()
+    }
+
+    return sanitizeConfigForAdvancedEditor(parsedConfig)
   }
 
   useEffect(() => {
     // Only process config when advanced editor is open to improve performance
     if (advancedToggle) {
-      let parsedConfig = stripConfig(config)
-      if (config.type !== 'dashboard') {
-        parsedConfig = convertStateToConfig()
-      }
-
-      setConfigTextbox(parsedConfig)
+      setConfigTextbox(getParsedConfig())
     }
   }, [config, advancedToggle])
 
   // Initialize config when advanced editor is first opened
   const handleToggleOpen = () => {
     if (!advancedToggle) {
       // Process config only when opening for the first time
-      let parsedConfig = stripConfig(config)
-      if (config.type !== 'dashboard') {
-        parsedConfig = convertStateToConfig()
-      }
-      setConfigTextbox(parsedConfig)
+      setConfigTextbox(getParsedConfig())
     }
     setAdvancedToggle(!advancedToggle)
   }
@@ -107,7 +127,7 @@ export const AdvancedEditor = ({
             <button
               className='btn btn-success m-2 p-2'
               onClick={() => {
-                loadConfig(configTextboxValue)
+                loadConfig(sanitizeConfigForAdvancedEditor(configTextboxValue))
                 setAdvancedToggle(!advancedToggle)
               }}
             >

packages/core/components/ComboBox/combobox.styles.css

@@ -26,7 +26,7 @@
     font-size: 0.833rem;
     font-weight: 300;
     line-height: normal;
-    padding: 0.5rem 3rem 0.5rem 0.5rem;
+    padding: calc(0.5rem - 0.5px) 3rem calc(0.5rem - 0.5px) 0.5rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     width: 100%;
   }

packages/core/components/EditorPanel/components/MarkupVariablesEditor.tsx

@@ -296,7 +296,14 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                                 ]}
                                 updateField={(_section, _subsection, _fieldName, value) => {
                                   if (value === 'metadata') {
-                                    updateVariable(index, { metadataKey: metadataKeys[0] || '', columnName: '', conditions: [] })
+                                    const defaultMetadataKey = metadataKeys[0] || ''
+                                    updateVariable(index, {
+                                      metadataKey: defaultMetadataKey,
+                                      columnName: '',
+                                      conditions: [],
+                                      name: defaultMetadataKey,
+                                      tag: generateTag(defaultMetadataKey)
+                                    })
                                   } else {
                                     updateVariable(index, { metadataKey: undefined, columnName: '' })
                                   }
@@ -315,8 +322,8 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                                 updateField={(_section, _subsection, _fieldName, value) => {
                                   updateVariable(index, {
                                     metadataKey: value,
-                                    name: variable.name || value,
-                                    tag: variable.tag || generateTag(value)
+                                    name: value,
+                                    tag: generateTag(value)
                                   })
                                 }}
                               />
@@ -332,7 +339,11 @@ const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
                                   ...getAvailableColumns.map(col => ({ value: col, label: col }))
                                 ]}
                                 updateField={(_section, _subsection, _fieldName, value) => {
-                                  updateVariable(index, { columnName: value })
+                                  updateVariable(index, {
+                                    columnName: value,
+                                    name: value,
+                                    tag: generateTag(value)
+                                  })
                                 }}
                               />
                             </div>

packages/core/components/Footnotes/Footnotes.tsx

@@ -20,7 +20,7 @@ const Footnotes: React.FC<FootnotesProps> = ({ footnotes, footerClassName = 'mt-
   }
 
   return (
-    <footer className={`col-12 m-3 ${footerClassName} mb-0`}>
+    <footer className='col-12 ${footerClassName}'>
       <ul className='cove-footnotes'>
         {footnotes.map((note, i) => {
           return (

packages/core/components/Footnotes/footnotes.css

@@ -1,3 +1,8 @@
+:is(footer).cove-footnotes-footer {
+  margin: 0.25rem 0 0;
+  padding: 0;
+}
+
 :is(ul).cove-footnotes {
   :is(li) {
     list-style: none;

packages/core/components/MultiSelect/multiselect.styles.css

@@ -10,11 +10,15 @@
       &[aria-disabled='true'] {
         background: var(--lightestGray);
       }
-      border: 1px solid var(--lightGray);
+      border: 1px solid var(--cool-gray-10);
       border-radius: 5px;
       display: inline-block;
+      font-family: var(--app-font-secondary);
+      font-size: var(--filter-select-font-size);
+      font-weight: 300;
+      line-height: normal;
       min-width: 200px;
-      padding: 7px;
+      padding: 6.5px 7px;
       width: 100%;
       :is(button) {
         background: none;
@@ -28,12 +32,18 @@
         margin-right: 5px;
         padding: 0 0 0 5px;
       }
+      & > span {
+        position: relative;
+        top: 2px;
+      }
       .expand {
         color: var(--mediumGray);
         float: right;
         margin-bottom: -3px;
         margin-right: -6px;
-        padding: 2px 0px;
+        padding: 2.5px 0px;
+        position: relative;
+        top: 2px;
         &:focus {
           outline: none;
         }
@@ -52,7 +62,7 @@
   }
   .dropdown {
     background: white;
-    border: 1px solid var(--lightGray);
+    border: 1px solid var(--cool-gray-10);
     margin-top: 0px;
     max-height: 200px;
     min-height: 40px;

packages/core/components/NestedDropdown/nesteddropdown.styles.css

@@ -61,6 +61,7 @@
   .nested-dropdown-input-container {
     border-radius: 0.25rem;
     display: block;
+    padding: calc(0.4rem + 1px) 0.75rem;
     position: relative;
     width: calc(100% + 7px);
     & > span.list-arrow {

packages/dashboard/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -56,7 +56,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   const getVizTitle = (viz, vizKey) => {
     let vizName = viz.general?.title || viz.title || vizKey
     if (viz.visualizationType === 'markup-include') {
-      vizName = viz.contentEditor.title || vizKey
+      vizName = viz.contentEditor?.title || vizKey
     }
     return vizName
   }