Save workspace by name

web/src/components/features/workspace/LoadWorkspaceModal/LoadWorkspaceModal.tsx

@@ -0,0 +1,93 @@
+import {
+  DefaultButton,
+  DefaultSpacing,
+  getScreenSelector,
+  IconButton,
+  IStackItemProps,
+  mergeStyles,
+  Stack,
+  useTheme,
+} from '@fluentui/react'
+import React, { useEffect } from 'react'
+import { Dialog } from '~/components/elements/modals/Dialog'
+import { db } from '~/store/db'
+
+interface Props {
+  isOpen?: boolean
+  onDismiss?: () => void
+  onSelect?: (workspace: string) => void
+}
+
+export const LoadWorkspaceModal: React.FC<Props> = ({ isOpen, onDismiss, onSelect }) => {
+  const { semanticColors } = useTheme()
+
+  const modalStyles = {
+    main: {
+      maxWidth: 840,
+    },
+  }
+
+  const [names, setNames] = React.useState<string[]>([])
+
+  useEffect(() => {
+    setNames([])
+
+    if (isOpen) {
+      db.getAllWorkspaces().then((workspaces) => {
+        if (workspaces) {
+          setNames(workspaces.map((workspace) => workspace.name as string))
+        }
+      })
+    }
+  }, [isOpen])
+
+  return (
+    <Dialog label="Workspaces" styles={modalStyles} isOpen={isOpen} onDismiss={onDismiss}>
+      <Stack styles={{ root: { margin: `0 -${DefaultSpacing.s1}` } }}>
+        {!names || names.length === 0 ? (
+          <div style={{ margin: '8px' }}>No workspaces found</div>
+        ) : (
+          names.map((name) => (
+            <Stack.Item
+              key={name}
+              styles={{
+                root: mergeStyles({
+                  display: 'flex',
+                  boxSizing: 'border-box',
+                  marginBottom: DefaultSpacing.s1,
+                }) as IStackItemProps['styles'],
+              }}
+            >
+              <Stack
+                horizontal
+                tokens={{ childrenGap: DefaultSpacing.s1 }}
+                horizontalAlign="space-between"
+                style={{ width: '100%' }}
+              >
+                <Stack.Item grow>
+                  <DefaultButton
+                    text={name}
+                    onClick={() => onSelect?.(name)}
+                    styles={{
+                      root: { width: '100%', borderColor: semanticColors.variantBorder },
+                      textContainer: { textTransform: 'capitalize', textAlign: 'left' },
+                    }}
+                  />
+                </Stack.Item>
+                <Stack.Item>
+                  <IconButton
+                    iconProps={{ iconName: 'Delete' }}
+                    onClick={async () => {
+                      await db.deleteWorkspace(name)
+                      setNames(names.filter((n) => n !== name))
+                    }}
+                  />
+                </Stack.Item>
+              </Stack>
+            </Stack.Item>
+          ))
+        )}
+      </Stack>
+    </Dialog>
+  )
+}

web/src/components/features/workspace/LoadWorkspaceModal/index.ts

@@ -0,0 +1 @@
+export { LoadWorkspaceModal } from './LoadWorkspaceModal';

web/src/components/features/workspace/SaveWorkspaceModal/SaveWorkspaceModal.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react'
+import { Stack, TextField, DefaultButton, PrimaryButton, DefaultSpacing, type IStackTokens } from '@fluentui/react'
+
+import { Dialog } from '~/components/elements/modals/Dialog'
+import { DialogActions } from '~/components/elements/modals/DialogActions'
+
+interface Props {
+  isOpen: boolean,
+  workspaceName: string | undefined,
+  nameValidator?: (name: string) => string | undefined,
+  onClose: (name?: string) => void
+}
+
+const verticalStackTokens: IStackTokens = {
+  childrenGap: DefaultSpacing.s1,
+}
+
+const validateName = (value?: string, validatorFn?: Props['nameValidator']): string | undefined => {
+  value = value?.trim();
+
+  if (!value?.length) {
+    return 'Workspace name is required'
+  }
+
+  return validatorFn?.(value)
+}
+
+const modalStyles = {
+  main: {
+    maxWidth: 480,
+  },
+}
+
+export const SaveWorkspaceModal: React.FC<Props> = ({ isOpen, onClose, nameValidator, workspaceName }) => {
+  const [name, setName] = useState(workspaceName)
+  const [isDirty, setIsDirty] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
+  const [isValid, setIsValid] = useState(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      return
+    }
+    setIsDirty(false)
+  }, [isOpen])
+
+  useEffect(() => {
+    const errMsg = validateName(name, nameValidator)
+    setErrorMessage(errMsg)
+    setIsValid(!errMsg)
+  }, [name, nameValidator])
+
+  useEffect(() => {
+    setName(workspaceName)
+  }, [workspaceName])
+
+  return (
+    <Dialog
+      label="Save Workspace"
+      isOpen={isOpen}
+      styles={modalStyles}
+      onDismiss={() => {
+        onClose()
+      }}
+    >
+      <Stack tokens={verticalStackTokens}>
+        <Stack.Item>
+          <span>Enter workspace name:</span>
+        </Stack.Item>
+        <Stack.Item>
+          <TextField
+            autoFocus
+            minLength={1}
+            defaultValue={name}
+            placeholder="Workspace Name"
+            onChange={(_, value) => {
+              setName(value)
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && isValid) {
+                onClose(name)
+              } else {
+                setIsDirty(true)
+              }
+            }}
+            onGetErrorMessage={(value) => {
+              if (!isDirty) {
+                return undefined
+              }
+
+              setIsDirty(true)
+              return errorMessage
+            }}
+          />
+        </Stack.Item>
+        <Stack.Item>
+          <DialogActions>
+            <DefaultButton
+              text="Cancel"
+              onClick={() => {
+                onClose()
+              }}
+            />
+            <PrimaryButton
+              text="OK"
+              onClick={() => {
+                onClose(name)
+              }}
+              disabled={!isValid}
+            />
+          </DialogActions>
+        </Stack.Item>
+      </Stack>
+    </Dialog>
+  )
+}

web/src/components/features/workspace/SaveWorkspaceModal/index.ts

@@ -0,0 +1 @@
+export { SaveWorkspaceModal } from '../SaveWorkspaceModal/SaveWorkspaceModal';

web/src/components/features/workspace/Workspace/index.ts

@@ -1 +1 @@
-export * from './Workspace'
+export * from './Workspace'

web/src/components/layout/Header/Header.tsx

@@ -13,10 +13,14 @@ import { SharePopup } from '~/components/utils/SharePopup'
 
 import { dispatchTerminalSettingsChange } from '~/store/terminal'
 import {
+  dispatchDeleteWorkspace,
   dispatchFormatFile,
   dispatchLoadSnippet,
   dispatchLoadSnippetFromSource,
+  dispatchLoadWorkspace,
+  dispatchSaveWorkspace,
   dispatchShareSnippet,
+  dispatchUpdateWorkspaceName,
 } from '~/store/workspace/dispatchers'
 import {
   connect,
@@ -30,6 +34,9 @@ import {
 
 import './Header.css'
 
+import { SaveWorkspaceModal } from '~/components/features/workspace/SaveWorkspaceModal'
+import { LoadWorkspaceModal } from '~/components/features/workspace/LoadWorkspaceModal'
+
 /**
  * Unique class name for share button to use as popover target.
  */
@@ -39,6 +46,8 @@ interface HeaderState {
   showSettings?: boolean
   showAbout?: boolean
   showExamples?: boolean
+  showLoadWorkspace?: boolean
+  showSaveWorkspace?: boolean
   loading?: boolean
   goVersions?: VersionsInfo
 }
@@ -49,6 +58,7 @@ interface StateProps {
   running?: boolean
   sharedSnippetName?: string | null
   hideThemeToggle?: boolean
+  workspaceName?: string
 }
 
 interface Props extends StateProps {
@@ -63,6 +73,8 @@ class HeaderContainer extends ThemeableComponent<Props, HeaderState> {
       showSettings: false,
       showAbout: false,
       loading: false,
+      showSaveWorkspace: false,
+      showLoadWorkspace: false,
     }
   }
 
@@ -104,6 +116,24 @@ class HeaderContainer extends ThemeableComponent<Props, HeaderState> {
           this.props.dispatch(runFileDispatcher)
         },
       },
+      {
+        key: 'load',
+        text: 'Load',
+        iconProps: { iconName: 'Upload', style: { transform: 'rotate(90deg)' } },
+        disabled: this.isDisabled,
+        onClick: () => {
+          this.setState({ showLoadWorkspace: true })
+        },
+      },
+      {
+        key: 'save',
+        text: 'Save',
+        iconProps: { iconName: 'Save' },
+        disabled: this.isDisabled,
+        onClick: () => {
+          this.setState({ showSaveWorkspace: true })
+        },
+      },
       {
         key: 'share',
         text: 'Share',
@@ -190,6 +220,28 @@ class HeaderContainer extends ThemeableComponent<Props, HeaderState> {
     ]
   }
 
+  private onLoadWorkspaceClose(name: string | undefined) {
+    if (name) {
+      this.props.dispatch(dispatchLoadWorkspace(name))
+    }
+
+    this.setState({ showLoadWorkspace: false })
+  }
+
+  private onWorkspaceDelete(name: string | undefined) {
+    if (name) {
+      this.props.dispatch(dispatchDeleteWorkspace(name))
+    }
+  }
+
+  private onSaveWorkspaceClose(name: string | undefined) {
+    if (name) {
+      this.props.dispatch(dispatchSaveWorkspace(name))
+    }
+
+    this.setState({ showSaveWorkspace: false })
+  }
+
   private onSettingsClose(changes: SettingsChanges) {
     if (changes.monaco) {
       // Update monaco state if some of its settings were changed
@@ -218,7 +270,7 @@ class HeaderContainer extends ThemeableComponent<Props, HeaderState> {
   }
 
   render() {
-    const { showAbout, showSettings, showExamples } = this.state
+    const { showAbout, showSettings, showExamples, showSaveWorkspace } = this.state
     const { sharedSnippetName } = this.props
     return (
       <header className="header" style={{ backgroundColor: this.theme.palette.white }}>
@@ -254,15 +306,30 @@ class HeaderContainer extends ThemeableComponent<Props, HeaderState> {
           onDismiss={() => this.setState({ showExamples: false })}
           onSelect={(s) => this.onSnippetSelected(s)}
         />
+        <SaveWorkspaceModal
+          isOpen={showSaveWorkspace || false}
+          onClose={(args) => this.onSaveWorkspaceClose(args)}
+          workspaceName={this.props.workspaceName}
+        />
+        <LoadWorkspaceModal
+          isOpen={this.state.showLoadWorkspace || false}
+          onDismiss={() => {
+            this.onLoadWorkspaceClose(undefined)
+          }}
+          onSelect={(x: string) => {
+            this.onLoadWorkspaceClose(x)
+          }}
+        />
       </header>
     )
   }
 }
 
-export const Header = connect<StateProps, {}>(({ settings, status, ui }) => ({
+export const Header = connect<StateProps, {}>(({ settings, status, ui, workspace }) => ({
   darkMode: settings.darkMode,
   loading: status?.loading,
   running: status?.running,
   hideThemeToggle: settings.useSystemTheme,
   sharedSnippetName: ui?.shareCreated ? ui?.snippetId : undefined,
+  workspaceName: workspace.name,
 }))(HeaderContainer)