Push comments, fix localstorage

Author: MrFlashAccount

app/gui/src/dashboard/components/MarkdownViewer/MarkdownViewer.tsx

@@ -1,11 +1,11 @@
 /** @file A Markdown viewer component. */
-import * as React from 'react'
 
 import { useLogger } from '#/providers/LoggerProvider'
 import { useText } from '#/providers/TextProvider'
 import { type UrlTransformer } from '@/components/MarkdownEditor/imageUrlTransformer'
 import { Err, Ok } from '@/util/data/result'
 import { type TestIdProps } from '../AriaComponents'
+import { MarkdownEditor } from './defaultRenderer'
 
 /** Props for a {@link MarkdownViewer}. */
 export interface MarkdownViewerProps extends TestIdProps {
@@ -14,13 +14,6 @@ export interface MarkdownViewerProps extends TestIdProps {
   readonly imgUrlResolver: (relativePath: string) => Promise<string>
 }
 
-const LazyMarkdownEditor = React.lazy(() =>
-  import('#/components/MarkdownViewer/defaultRenderer').then(
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    ({ MarkdownEditor }) => MarkdownEditor,
-  ),
-)
-
 /**
  * Markdown viewer component.
  * Parses markdown passed in as a `text` prop into HTML and displays it.
@@ -42,8 +35,9 @@ export function MarkdownViewer(props: MarkdownViewerProps) {
         },
       )
 
+  console.log('MarkdownViewer', { text })
   return (
-    <LazyMarkdownEditor
+    <MarkdownEditor
       content={text}
       transformImageUrl={transformImageUrl}
       toolbar={false}

app/gui/src/dashboard/components/MarkdownViewer/defaultRenderer.ts

@@ -4,4 +4,4 @@ import { vueComponent } from '#/utilities/vue'
 import MarkdownEditorVue from '@/components/MarkdownEditor.vue'
 
 // eslint-disable-next-line no-restricted-syntax
-export const MarkdownEditor = vueComponent(MarkdownEditorVue)
+export const MarkdownEditor = vueComponent(MarkdownEditorVue).default

app/gui/src/dashboard/layouts/AssetPanel/AssetPanel.tsx

@@ -4,7 +4,7 @@
  * It is used to view and interact with assets in the drive.
  */
 import { AnimatePresence, motion } from 'framer-motion'
-import { memo, startTransition } from 'react'
+import { lazy, memo, startTransition } from 'react'
 
 import type { BackendType } from 'enso-common/src/services/Backend'
 
@@ -16,24 +16,18 @@ import InspectIcon from '#/assets/inspect.svg'
 import VersionsIcon from '#/assets/versions.svg'
 import { ErrorBoundary } from '#/components/ErrorBoundary'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import { AssetDocs } from '#/layouts/AssetDocs'
 import { isLocalCategory, type Category } from '#/layouts/CategorySwitcher/Category'
 import { useBackend } from '#/providers/BackendProvider'
+import { useFeatureFlag } from '#/providers/FeatureFlagsProvider'
 import { useText } from '#/providers/TextProvider'
 import { useStore } from '#/utilities/zustand'
-import { useFeatureFlag } from '../../providers/FeatureFlagsProvider'
 import {
   assetPanelStore,
   useIsAssetPanelExpanded,
   useSetIsAssetPanelExpanded,
 } from './AssetPanelState'
 import { AssetPanelTabs } from './components/AssetPanelTabs'
 import { AssetPanelToggle } from './components/AssetPanelToggle'
-import { AssetProperties } from './components/AssetProperties'
-import { AssetVersions } from './components/AssetVersions'
-import { ProjectExecutions } from './components/ProjectExecutions'
-import { ProjectExecutionsCalendar } from './components/ProjectExecutionsCalendar'
-import { ProjectSessions } from './components/ProjectSessions'
 import type { AssetPanelTab } from './types'
 
 const ASSET_SIDEBAR_COLLAPSED_WIDTH = 48
@@ -46,6 +40,29 @@ export interface AssetPanelProps {
   readonly category: Category
 }
 
+const LazyAssetDocs = lazy(() =>
+  import('#/layouts/AssetDocs').then((module) => ({ default: module.AssetDocs })),
+)
+const LazyAssetProperties = lazy(() =>
+  import('./components/AssetProperties').then((module) => ({ default: module.AssetProperties })),
+)
+const LazyAssetVersions = lazy(() =>
+  import('./components/AssetVersions').then((module) => ({ default: module.AssetVersions })),
+)
+const LazyProjectSessions = lazy(() =>
+  import('./components/ProjectSessions').then((module) => ({ default: module.ProjectSessions })),
+)
+const LazyProjectExecutions = lazy(() =>
+  import('./components/ProjectExecutions').then((module) => ({
+    default: module.ProjectExecutions,
+  })),
+)
+const LazyProjectExecutionsCalendar = lazy(() =>
+  import('./components/ProjectExecutionsCalendar').then((module) => ({
+    default: module.ProjectExecutionsCalendar,
+  })),
+)
+
 /**
  * The asset panel is a sidebar that can be expanded or collapsed.
  * It is used to view and interact with assets in the drive.
@@ -182,27 +199,31 @@ const InternalAssetPanelTabs = memo(function InternalAssetPanelTabs(
             <div className="flex h-full flex-col bg-background-hex">
               <ErrorBoundary resetKeys={[itemId]}>
                 <AssetPanelTabs.TabPanel id="settings">
-                  <AssetProperties backend={backend} isReadonly={isReadonly} category={category} />
+                  <LazyAssetProperties
+                    backend={backend}
+                    isReadonly={isReadonly}
+                    category={category}
+                  />
                 </AssetPanelTabs.TabPanel>
 
                 <AssetPanelTabs.TabPanel id="versions">
-                  <AssetVersions backend={backend} />
+                  <LazyAssetVersions backend={backend} />
                 </AssetPanelTabs.TabPanel>
 
                 <AssetPanelTabs.TabPanel id="sessions">
-                  <ProjectSessions backend={backend} />
+                  <LazyProjectSessions backend={backend} />
                 </AssetPanelTabs.TabPanel>
 
                 <AssetPanelTabs.TabPanel id="executions">
-                  <ProjectExecutions backend={backend} />
+                  <LazyProjectExecutions backend={backend} />
                 </AssetPanelTabs.TabPanel>
 
                 <AssetPanelTabs.TabPanel id="executionsCalendar">
-                  <ProjectExecutionsCalendar backend={backend} />
+                  <LazyProjectExecutionsCalendar backend={backend} />
                 </AssetPanelTabs.TabPanel>
 
                 <AssetPanelTabs.TabPanel id="docs">
-                  <AssetDocs backend={backend} />
+                  <LazyAssetDocs backend={backend} />
                 </AssetPanelTabs.TabPanel>
               </ErrorBoundary>
             </div>

app/gui/src/dashboard/providers/LocalStorageProvider.tsx

@@ -68,20 +68,29 @@ export function useLocalStorageState<K extends LocalStorageKey>(
   const { localStorage } = useLocalStorage()
   const { sanitize } = options
 
+  const id = React.useId()
+
   const [value, privateSetValue] = React.useState<LocalStorageData[K] | undefined>(() => {
     let savedValue: LocalStorageData[K] | undefined = localStorage.get(key)
     if (savedValue !== undefined && sanitize) {
       savedValue = sanitize(savedValue)
     }
+
     if (savedValue === undefined) {
       return defaultValue
     }
+
     return savedValue
   })
 
   const setValue = useEventCallback(
     (newValue: React.SetStateAction<LocalStorageData[K] | undefined>) => {
+      console.trace('setValue', key, newValue)
       privateSetValue((currentValue) => {
+        console.log('privateSetValue', {
+          currentValue,
+          newValue,
+        })
         const nextValue = typeof newValue === 'function' ? newValue(currentValue) : newValue
 
         if (nextValue === undefined) {
@@ -95,13 +104,13 @@ export function useLocalStorageState<K extends LocalStorageKey>(
     },
   )
 
-  React.useEffect(
-    () =>
-      localStorage.subscribe(key, (newValue) => {
-        privateSetValue(newValue ?? defaultValue)
-      }),
-    [defaultValue, key, localStorage],
-  )
+  React.useEffect(() => {
+    localStorage.lock(key, id)
+
+    return () => {
+      localStorage.unlock(key, id)
+    }
+  }, [key, localStorage, id])
 
   return [value, setValue]
 }

app/gui/src/dashboard/providers/ProjectsProvider.tsx

@@ -124,15 +124,24 @@ export default function ProjectsProvider(props: ProjectsProviderProps) {
   )
 
   const addLaunchedProject = eventCallbacks.useEventCallback((project: LaunchedProject) => {
-    setLaunchedProjects((current) => [...current, project])
+    console.trace('addLaunchedProject', project)
+    setLaunchedProjects((current) => {
+      console.log('addLaunchedProject', {
+        current,
+        project,
+      })
+      return [...current, project]
+    })
   })
   const removeLaunchedProject = eventCallbacks.useEventCallback((projectId: LaunchedProjectId) => {
+    console.log('removeLaunchedProject', projectId)
     setLaunchedProjects((current) =>
       current.filter(({ id, hybrid }) => id !== projectId && hybrid?.cloudProjectId !== projectId),
     )
   })
   const updateLaunchedProjects = eventCallbacks.useEventCallback(
     (update: (projects: readonly LaunchedProject[]) => readonly LaunchedProject[]) => {
+      console.log('updateLaunchedProjects', update)
       setLaunchedProjects((current) => update(current))
     },
   )

app/gui/src/dashboard/utilities/LocalStorage.ts

@@ -53,6 +53,20 @@ export default class LocalStorage {
   localStorageKey = common.PRODUCT_NAME.toLowerCase()
   protected values: Partial<LocalStorageData>
   private readonly eventTarget = new EventTarget()
+  private readonly locks = new Map<
+    LocalStorageKey,
+    {
+      /**
+       * Whether the key is locked.
+       */
+      readonly locked: true
+      /**
+       * The ID of the function that locked the key.
+       * Only this function can unlock the key or change the value.
+       */
+      readonly allowedIdToChange: string
+    }
+  >()
 
   /** Create a {@link LocalStorage}. */
   private constructor() {
@@ -119,10 +133,44 @@ export default class LocalStorage {
     return this.values[key]
   }
 
+  /**
+   * Lock a key.
+   * When a key is locked, it will not be updated until it is unlocked.
+   */
+  lock<K extends LocalStorageKey>(key: K, allowedIdToChange: string) {
+    this.locks.set(key, {
+      locked: true,
+      allowedIdToChange,
+    })
+  }
+
+  /**
+   * Unlock a key.
+   */
+  unlock<K extends LocalStorageKey>(key: K, allowedIdToChange: string) {
+    const lock = this.locks.get(key)
+    if (lock == null) {
+      return
+    }
+
+    if (lock.allowedIdToChange !== allowedIdToChange) {
+      return
+    }
+
+    this.locks.delete(key)
+  }
+
   /** Write an entry to the stored data, and save. */
-  set<K extends LocalStorageKey>(key: K, value: LocalStorageData[K]) {
+  set<K extends LocalStorageKey>(key: K, value: LocalStorageData[K], idToChange?: string) {
     this.assertRegisteredKey(key)
 
+    const lock = this.locks.get(key)
+    if (lock != null) {
+      if (lock.allowedIdToChange !== idToChange) {
+        return
+      }
+    }
+
     this.values[key] = value
 
     this.eventTarget.dispatchEvent(new Event(key))
@@ -197,9 +245,16 @@ export default class LocalStorage {
   /**
    * Delete an entry from the stored data, and save.
    */
-  delete<K extends LocalStorageKey>(key: K) {
+  delete<K extends LocalStorageKey>(key: K, idToChange?: string) {
     this.assertRegisteredKey(key)
 
+    const lock = this.locks.get(key)
+    if (lock != null) {
+      if (lock.allowedIdToChange !== idToChange) {
+        return
+      }
+    }
+
     // The key being deleted is one of a statically known set of keys.
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete this.values[key]

app/gui/src/project-view/components/MarkdownEditor.vue

@@ -39,6 +39,8 @@ defineExpose({
     inner.value?.putTextAtCoords(text, coords)
   },
 })
+
+console.log('MarkdownEditor', { content: props.content })
 </script>
 
 <template>

app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue

@@ -67,6 +67,8 @@ defineExpose({
     putTextAt(text, pos, pos)
   },
 })
+
+console.log('MarkdownEditorImpl', {})
 </script>
 
 <template>