fix: Unedited markdown widgets not persisting (#2019)

Resolves #1777

Changes Implemented:
- Added checks, modified hydration logic, and added new conditions for what is considered a closed markdown, to ensure proper persistence of markdown widget

Author: AkshatJawne

packages/dashboard-core-plugins/src/MarkdownPlugin.tsx

@@ -3,8 +3,6 @@ import { nanoid } from 'nanoid';
 import {
   assertIsDashboardPluginProps,
   DashboardPluginComponentProps,
-  dehydrate,
-  hydrate,
   LayoutUtils,
   useListener,
 } from '@deephaven/dashboard';
@@ -21,24 +19,6 @@ export type MarkdownComponentState = {
 export function MarkdownPlugin(props: MarkdownPluginProps): JSX.Element | null {
   assertIsDashboardPluginProps(props);
   const { id, layout, panelManager, registerComponent } = props;
-  const dehydrateMarkdown = useCallback(config => {
-    const { title, componentState, props: configProps } = config;
-    let { panelState = null }: MarkdownComponentState = configProps;
-    if (componentState != null) {
-      ({ panelState = null } = componentState as MarkdownComponentState);
-    }
-    if (
-      title == null ||
-      panelState == null ||
-      panelState.content == null ||
-      panelState.content.length === 0 ||
-      panelState.content === MarkdownUtils.DEFAULT_CONTENT
-    ) {
-      // We don't want to save it if there's no content
-      return null;
-    }
-    return dehydrate(config);
-  }, []);
 
   const handleOpen = useCallback(
     ({
@@ -52,16 +32,12 @@ export function MarkdownPlugin(props: MarkdownPluginProps): JSX.Element | null {
       const openedMarkdowns = panelManager.getOpenedPanelConfigsOfType(
         MarkdownPanel.COMPONENT
       );
-      const closedMarkdowns = panelManager.getClosedPanelConfigsOfType(
-        MarkdownPanel.COMPONENT
-      );
       const usedTitles = openedMarkdowns.map(markdown => markdown.title ?? '');
       const panelTitle =
         title != null && title !== ''
           ? title
           : MarkdownUtils.getNewMarkdownTitle(usedTitles);
-      const content =
-        closedMarkdowns.length > 0 ? null : MarkdownUtils.DEFAULT_CONTENT;
+      const content = null;
       const config = {
         type: 'react-component' as const,
         component: MarkdownPanel.COMPONENT,
@@ -90,19 +66,14 @@ export function MarkdownPlugin(props: MarkdownPluginProps): JSX.Element | null {
   useEffect(
     function registerComponentsAndReturnCleanup() {
       const cleanups = [
-        registerComponent(
-          MarkdownPanel.COMPONENT,
-          MarkdownPanel,
-          hydrate,
-          dehydrateMarkdown
-        ),
+        registerComponent(MarkdownPanel.COMPONENT, MarkdownPanel),
       ];
 
       return () => {
         cleanups.forEach(cleanup => cleanup());
       };
     },
-    [dehydrateMarkdown, registerComponent]
+    [registerComponent]
   );
 
   useListener(layout.eventHub, MarkdownEvent.OPEN, handleOpen);

packages/dashboard-core-plugins/src/controls/markdown/MarkdownUtils.ts

@@ -1,3 +1,6 @@
+import { ClosedPanels } from '@deephaven/dashboard';
+import memoize from 'memoize-one';
+
 class MarkdownUtils {
   static DEFAULT_TITLE = 'Note';
 
@@ -19,6 +22,17 @@ class MarkdownUtils {
 
     return title;
   }
+
+  static getClosedMarkdowns = memoize((closedPanels: ClosedPanels) =>
+    closedPanels
+      .filter(
+        panel =>
+          panel.component === 'MarkdownPanel' &&
+          panel.props.panelState.content !== '' &&
+          panel.props.panelState.content !== null
+      )
+      .reverse()
+  );
 }
 
 export default MarkdownUtils;

packages/dashboard-core-plugins/src/panels/MarkdownPanel.tsx

@@ -10,7 +10,6 @@ import memoize from 'memoize-one';
 import { connect } from 'react-redux';
 import {
   ClosedPanel,
-  ClosedPanels,
   DashboardPanelProps,
   getClosedPanelsForDashboard,
   LayoutUtils,
@@ -27,6 +26,7 @@ import MarkdownContainer from '../controls/markdown/MarkdownContainer';
 import MarkdownStartPage from '../controls/markdown/MarkdownStartPage';
 import './MarkdownPanel.scss';
 import type MarkdownEditorType from '../controls/markdown/MarkdownEditor';
+import MarkdownUtils from '../controls/markdown/MarkdownUtils';
 
 const MarkdownEditor = lazy(
   () => import('../controls/markdown/MarkdownEditor')
@@ -77,11 +77,17 @@ export class MarkdownPanel extends Component<
     const { panelState } = props;
     let content = null;
     if (panelState != null && panelState.content != null) {
-      ({ content } = panelState);
+      if (panelState.content !== '') {
+        ({ content } = panelState);
+      } else {
+        content = MarkdownUtils.DEFAULT_CONTENT;
+      }
     }
 
     this.state = {
-      isStartPageShown: content == null,
+      isStartPageShown:
+        content == null &&
+        this.getClosedMarkdowns(props.closedPanels).length !== 0,
       isEditing: false,
       content,
 
@@ -123,9 +129,7 @@ export class MarkdownPanel extends Component<
     }
   }
 
-  getClosedMarkdowns = memoize((closedPanels: ClosedPanels) =>
-    closedPanels.filter(panel => panel.component === 'MarkdownPanel').reverse()
-  );
+  getClosedMarkdowns = memoize(MarkdownUtils.getClosedMarkdowns);
 
   handleContainerDoubleClick(event: MouseEvent<Element>): void {
     const { isEditing } = this.state;
@@ -242,7 +246,7 @@ export class MarkdownPanel extends Component<
                   this.markdownEditor = markdownEditor;
                 }}
                 isEditing={isEditing}
-                content={content ?? undefined}
+                content={content ?? MarkdownUtils.DEFAULT_CONTENT}
                 onEditorInitialized={this.handleEditorInitialized}
               />
             </Suspense>

packages/dashboard/src/PanelManager.ts

@@ -362,9 +362,11 @@ class PanelManager {
         config.component,
         config
       );
-      (dehydratedConfig as ClosedPanel).parentStackId =
-        LayoutUtils.getStackForConfig(root, config)?.config.id;
-      this.closed.push(dehydratedConfig);
+      if (dehydratedConfig != null) {
+        (dehydratedConfig as ClosedPanel).parentStackId =
+          LayoutUtils.getStackForConfig(root, config)?.config.id;
+        this.closed.push(dehydratedConfig);
+      }
     }
   }