From 8ee67a0663c4bf70bd26ddaa04cac6d3edacda9f Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Tue, 29 Oct 2024 23:24:06 +0100 Subject: [PATCH] add editor yaml fabback --- .../app/src/components/Editor/Editor.css.ts | 7 ++ packages/app/src/components/Editor/Editor.tsx | 98 +++++++++++++++++-- .../components/Editor/store/editor.store.ts | 19 ++-- .../Editor/store/plugins/editorUpdater.ts | 4 + 4 files changed, 108 insertions(+), 20 deletions(-) diff --git a/packages/app/src/components/Editor/Editor.css.ts b/packages/app/src/components/Editor/Editor.css.ts index 5a96bc4..bd6087d 100644 --- 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 index 2a9016b..f4fdda0 100644 --- 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 ( <> - + - {}} - onMount={editor.setEditorView} - onDiagnosticsChange={ - editor.actions.setDiagnostics - } - /> + } + when={editor.initialized()} + > + {}} + onMount={editor.setEditorView} + onDiagnosticsChange={ + editor.actions.setDiagnostics + } + /> + @@ -181,3 +198,64 @@ export function Editor(props: EditorProps) { ); } + +function YamlEditorFallback() { + const editor = useContext(EditorContext); + + createEffect(() => console.log(editor?.source.split('\n'))); + return ( +
+ + {(row, index) => { + const match = row.match(/^(\s*)(\S.*)/)!; + const leadingWhitespace = match ? match[1] : row; + const text = match ? match[2] : null; + + return ( +
+ + {String(index() + 1).padStart(3, '0')} + + + {leadingWhitespace} + + + {text || leadingWhitespace} + +
+ ); + }} + +
+ ); +} diff --git a/packages/app/src/components/Editor/store/editor.store.ts b/packages/app/src/components/Editor/store/editor.store.ts index 3b78de0..256deb3 100644 --- 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(() => ({ }; }) .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 index 0e64225..1356507 100644 --- 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 & YamlDocumentSessionPlugin>()( _ => { + const [initialized, setInitialized] = createSignal(false); const [session, setSession] = createSignal>(); const [editorView, setEditorView] = createSignal(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); }, }; },