add editor yaml fabback

riccardoperra · Oct 29, 2024 · 8ee67a0 · 8ee67a0
1 parent 00270e3
commit 8ee67a0
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 20 deletions.
diff --git a/packages/app/src/components/Editor/Editor.css.ts b/packages/app/src/components/Editor/Editor.css.ts
@@ -36,3 +36,10 @@ export const resizablePanel = style({
   display: 'flex',
   overflow: 'hidden',
 });
+
+export const loader = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '18px',
+});
diff --git a/packages/app/src/components/Editor/Editor.tsx b/packages/app/src/components/Editor/Editor.tsx
@@ -1,9 +1,19 @@
 import {EditorSidebar} from './LeftSidebar/EditorSidebar';
 import * as styles from './Editor.css';
+import * as fallbackStyles from '~/ui/components/Fallback.css';
 import {EditorHeader} from './Header/Header';
 import {provideState} from 'statebuilder';
 import {EditorUiStore} from './store/ui.store';
-import {lazy, Match, Show, Suspense, Switch} from 'solid-js';
+import {
+  createEffect,
+  For,
+  lazy,
+  Match,
+  Show,
+  Suspense,
+  Switch,
+  useContext,
+} from 'solid-js';
 import {YamlEditor} from './YamlEditor/YamlEditor';
 import {EditorStatusBar} from './StatusBar/StatusBar';
 import Resizable from '@corvu/resizable';
@@ -14,6 +24,7 @@ import {JobPanelEditor} from './Jobs/JobPanelEditor/JobPanelEditor';
 import {YamlMergeView} from './YamlEditor/MergeView';
 import {DiagnosticPanel} from './DiagnosticPanel/DiagnosticPanel';
 import {EditorRepositoryHeaderName} from './Header/RepositoryHeaderName';
+import {EditorContext} from './editor.context';
 
 const Canvas = lazy(() =>
   Promise.all([import('elkjs'), import('./Canvas/Canvas')]).then(([, m]) => ({
@@ -55,7 +66,7 @@ export function Editor(props: EditorProps) {
 
             return (
               <>
-                <Resizable.Panel class={styles.resizablePanel}>
+                <Resizable.Panel class={styles.resizablePanel} initialSize={1}>
                   <Resizable
                     orientation={'horizontal'}
                     class={styles.editorResizable}
@@ -84,14 +95,19 @@ export function Editor(props: EditorProps) {
                                   <EditorSidebar position={'left'}>
                                     <Switch>
                                       <Match when={leftPanel() === 'code'}>
-                                        <YamlEditor
-                                          code={editor.yamlSession.source()}
-                                          setCode={() => {}}
-                                          onMount={editor.setEditorView}
-                                          onDiagnosticsChange={
-                                            editor.actions.setDiagnostics
-                                          }
-                                        />
+                                        <Show
+                                          fallback={<YamlEditorFallback />}
+                                          when={editor.initialized()}
+                                        >
+                                          <YamlEditor
+                                            code={editor.yamlSession.source()}
+                                            setCode={() => {}}
+                                            onMount={editor.setEditorView}
+                                            onDiagnosticsChange={
+                                              editor.actions.setDiagnostics
+                                            }
+                                          />
+                                        </Show>
                                       </Match>
                                       <Match when={leftPanel() === 'merge'}>
                                         <YamlMergeView
@@ -167,6 +183,7 @@ export function Editor(props: EditorProps) {
 
                 <Resizable.Panel
                   minSize={0.1}
+                  initialSize={0}
                   collapsible
                   class={styles.resizablePanel}
                 >
@@ -181,3 +198,64 @@ export function Editor(props: EditorProps) {
     </div>
   );
 }
+
+function YamlEditorFallback() {
+  const editor = useContext(EditorContext);
+
+  createEffect(() => console.log(editor?.source.split('\n')));
+  return (
+    <div
+      style={{
+        'margin-top': '12px',
+        display: 'flex',
+        'flex-direction': 'column',
+        gap: '4px',
+      }}
+    >
+      <For each={editor?.source.split('\n')}>
+        {(row, index) => {
+          const match = row.match(/^(\s*)(\S.*)/)!;
+          const leadingWhitespace = match ? match[1] : row;
+          const text = match ? match[2] : null;
+
+          return (
+            <div
+              style={{display: 'flex', 'flex-wrap': 'nowrap', height: '16px'}}
+            >
+              <span
+                class={fallbackStyles.fallback}
+                style={{
+                  'margin-left': '24px',
+                  'margin-right': '16px',
+                  'font-size': '13.5px',
+                  'line-height': '14px',
+                }}
+              >
+                {String(index() + 1).padStart(3, '0')}
+              </span>
+              <span
+                style={{
+                  'font-size': '13.5px',
+                  'line-height': '17px',
+                  'white-space': 'pre-wrap',
+                }}
+              >
+                {leadingWhitespace}
+              </span>
+              <span
+                style={{
+                  'font-size': '13.5px',
+                  'line-height': '17px',
+                  'white-space': 'nowrap',
+                }}
+                class={fallbackStyles.fallback}
+              >
+                {text || leadingWhitespace}
+              </span>
+            </div>
+          );
+        }}
+      </For>
+    </div>
+  );
+}
diff --git a/packages/app/src/components/Editor/store/editor.store.ts b/packages/app/src/components/Editor/store/editor.store.ts
@@ -1,9 +1,9 @@
-import { type WorkflowTemplate } from '@pipelineui/workflow-parser';
-import { createEffect, on, untrack, useContext } from 'solid-js';
-import { defineStore } from 'statebuilder';
-import { withProxyCommands } from 'statebuilder/commands';
-import type { Diagnostic } from 'vscode-languageserver-protocol';
-import { EditorContext } from '../editor.context';
+import {type WorkflowTemplate} from '@pipelineui/workflow-parser';
+import {createEffect, on, untrack, useContext} from 'solid-js';
+import {defineStore} from 'statebuilder';
+import {withProxyCommands} from 'statebuilder/commands';
+import type {Diagnostic} from 'vscode-languageserver-protocol';
+import {EditorContext} from '../editor.context';
 import type {
   EditorWorkflowStructure,
   JobEnvironment,
@@ -15,9 +15,9 @@ import type {
   WorkflowStructureJobStep,
   WorkflowTypesTriggerEvent,
 } from './editor.types';
-import { withEditorSessionState } from './plugins/editorUpdater';
-import { withGithubYamlManager } from './plugins/githubYamlManager';
-import { withYamlDocumentSession } from './plugins/yamlSession';
+import {withEditorSessionState} from './plugins/editorUpdater';
+import {withGithubYamlManager} from './plugins/githubYamlManager';
+import {withYamlDocumentSession} from './plugins/yamlSession';
 
 export interface EditorState {
   selectedJobId: string | null;
@@ -96,7 +96,6 @@ export const EditorStore = defineStore<EditorState>(() => ({
     };
   })
   .extend((_, context) => {
-    context.hooks.onDestroy(() => console.log('destroy this'));
     context.hooks.onInit(() => {
       const context = useContext(EditorContext)!;
       _.initEditSession(context.source).then();

diff --git a/packages/app/src/components/Editor/store/plugins/editorUpdater.ts b/packages/app/src/components/Editor/store/plugins/editorUpdater.ts
@@ -15,6 +15,7 @@ import type {YamlDocumentSessionPlugin} from './yamlSession';
 export const withEditorSessionState = () =>
   makePlugin.typed<Store<EditorState> & YamlDocumentSessionPlugin>()(
     _ => {
+      const [initialized, setInitialized] = createSignal(false);
       const [session, setSession] =
         createSignal<Document.Parsed<ParsedNode, true>>();
       const [editorView, setEditorView] = createSignal<EditorView | null>(null);
@@ -55,6 +56,7 @@ export const withEditorSessionState = () =>
         setSession,
         editorView,
         setEditorView,
+        initialized,
         utils: {
           createStepJobUpdater,
         },
@@ -88,6 +90,8 @@ export const withEditorSessionState = () =>
 
           _.set('template', reconcile(resolvedTemplate));
           _.set('structure', reconcile(parsedStructure));
+
+          setInitialized(true);
         },
       };
     },