fixes

riccardoperra · Oct 31, 2024 · 99859c8 · 99859c8
1 parent 1948e21
commit 99859c8
Show file tree

Hide file tree

Showing 57 changed files with 173 additions and 308 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -18,7 +18,7 @@
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
-    "@codeui/kit": "^0.1.4",
+    "@codeui/kit": "link:/Users/riccardoperra/WebstormProjects/codeui/packages/kit",
     "@corvu/resizable": "^0.2.3",
     "@kobalte/core": "^0.13.7",
     "@kobalte/utils": "^0.9.1",

diff --git a/packages/app/src/components/Editor/Canvas/Canvas.tsx b/packages/app/src/components/Editor/Canvas/Canvas.tsx
@@ -1,5 +1,5 @@
-import {EditorStore} from '#editor-store/editor.store';
-import type {WorkflowStructureJob} from '#editor-store/editor.types';
+import {EditorStore} from '~/store/editor/editor.store';
+import type {WorkflowStructureJob} from '~/store/editor/editor.types';
 import type {ElkExtendedEdge, ElkNode} from 'elkjs';
 import {createResource, onCleanup, onMount, Suspense, untrack} from 'solid-js';
 import {provideState} from 'statebuilder';
@@ -24,8 +24,6 @@ function createNodes(jobs: WorkflowStructureJob[]) {
     return acc;
   }, {} as FlowNodeMap);
 
-  console.log('my jobs', jobs);
-
   return import('elkjs').then(({default: ELK}) => {
     const graph: ElkNode = {
       id: 'root',
@@ -119,8 +117,6 @@ function createNodes(jobs: WorkflowStructureJob[]) {
           return [...acc, ...jobEdge];
         }, [] as FlowConnection[]);
 
-        console.log(mappedNodes);
-
         return {
           size: {
             width: layout.width!,

diff --git a/packages/app/src/components/Editor/DiagnosticPanel/DiagnosticPanel.tsx b/packages/app/src/components/Editor/DiagnosticPanel/DiagnosticPanel.tsx
@@ -5,7 +5,7 @@ import {
   panel,
 } from './DiagnosticPanel.css';
 import {provideState} from 'statebuilder';
-import {EditorStore} from '#editor-store/editor.store';
+import {EditorStore} from '~/store/editor/editor.store';
 import {For} from 'solid-js';
 import {Icon} from '#ui/components/Icon';
 import type {Diagnostic} from 'vscode-languageserver-protocol';

diff --git a/packages/app/src/components/Editor/Editor.tsx b/packages/app/src/components/Editor/Editor.tsx
@@ -3,12 +3,12 @@ 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 {EditorUiStore} from '../../store/editor/ui.store';
 import {For, lazy, Match, Show, Suspense, Switch, useContext} from 'solid-js';
 import {EditorStatusBar} from './StatusBar/StatusBar';
 import Resizable from '@corvu/resizable';
 import {EditorResizableHandler} from './Layout/Resizable/Resizable';
-import {EditorStore} from './store/editor.store';
+import {EditorStore} from '../../store/editor/editor.store';
 import {PropertiesPanelEditor} from './Properties/PropertiesPanelEditor';
 import {JobPanelEditor} from './Jobs/JobPanelEditor/JobPanelEditor';
 import {YamlMergeView} from './YamlEditor/MergeView';
@@ -140,7 +140,7 @@ export function Editor(props: EditorProps) {
 
                           <Resizable.Panel
                             initialSize={0.17}
-                            minSize={0.1}
+                            minSize={0.15}
                             collapsible
                             class={styles.resizablePanel}
                           >

diff --git a/packages/app/src/components/Editor/Flow/FlowContainer.tsx b/packages/app/src/components/Editor/Flow/FlowContainer.tsx
@@ -1,7 +1,7 @@
 import * as styles from './FlowContainer.css';
 import {onMount, type ParentProps} from 'solid-js';
 import {provideState} from 'statebuilder';
-import {CanvasStore} from '../store/canvas.store';
+import {CanvasStore} from '../../../store/editor/canvas.store';
 
 export function FlowContainer(
   props: ParentProps<{

diff --git a/packages/app/src/components/Editor/Flow/FlowItem.tsx b/packages/app/src/components/Editor/Flow/FlowItem.tsx
@@ -1,8 +1,8 @@
 import * as styles from './FlowItem.css';
 import {provideState} from 'statebuilder';
-import {EditorStore} from '../store/editor.store';
+import {EditorStore} from '../../../store/editor/editor.store';
 import {Show} from 'solid-js';
-import type {WorkflowStructureJob} from '#editor-store/editor.types';
+import type {WorkflowStructureJob} from '~/store/editor/editor.types';
 
 interface FlowItemProps {
   job: WorkflowStructureJob;

diff --git a/packages/app/src/components/Editor/Flow/engine/Connectors/Connection.tsx b/packages/app/src/components/Editor/Flow/engine/Connectors/Connection.tsx
@@ -57,13 +57,13 @@ function ConnectionNode(props: {source: FlowNode; target: FlowNode}) {
 export function Connection(props: ConnectionProps) {
   const {nodes, sceneRef} = getNodeContext();
 
-  const sourceNode = () => {
-    return nodes[props.connection.source.nodeId];
-  };
+  const sourceNode = createMemo(() => {
+    return nodes()[props.connection.source.nodeId];
+  });
 
-  const targetNode = () => {
-    return nodes[props.connection.target.nodeId];
-  };
+  const targetNode = createMemo(() => {
+    return nodes()[props.connection.target.nodeId];
+  });
 
   return (
     <Show when={sourceNode() && targetNode()}>

diff --git a/packages/app/src/components/Editor/Flow/engine/FlowRenderer.tsx b/packages/app/src/components/Editor/Flow/engine/FlowRenderer.tsx
@@ -13,9 +13,9 @@ export interface FlowRendererProps {
 }
 
 export function FlowRenderer(props: FlowRendererProps) {
-  const [nodes, setNodes] = createStore<FlowNodeMap>({...props.nodes});
+  const [nodes, setNodes] = createSignal<FlowNodeMap>({...props.nodes});
 
-  const [connections, setConnections] = createStore<FlowConnection[]>(
+  const [connections, setConnections] = createSignal<FlowConnection[]>(
     props.connections,
   );
 

diff --git a/packages/app/src/components/Editor/Flow/engine/Scene.tsx b/packages/app/src/components/Editor/Flow/engine/Scene.tsx
@@ -1,19 +1,19 @@
 import {Entries} from '@solid-primitives/keyed';
+import {createEffect, For} from 'solid-js';
+import {Connection} from './Connectors/Connection';
 import {Node} from './Node';
 import {getNodeContext} from './store';
-import {For} from 'solid-js';
-import {Connection} from './Connectors/Connection';
 
 export function FlowScene() {
-  const {nodes, connections, setSceneRef} = getNodeContext();
+  const nodeContext = getNodeContext();
 
   return (
-    <div style={{width: '100%', height: '100%'}} ref={setSceneRef}>
-      <Entries of={nodes}>
+    <div style={{width: '100%', height: '100%'}} ref={nodeContext.setSceneRef}>
+      <Entries of={nodeContext.nodes()}>
         {(key, value) => <Node nodeId={key} value={value()} />}
       </Entries>
 
-      <For each={connections}>
+      <For each={nodeContext.connections()}>
         {connection => <Connection connection={connection} />}
       </For>
     </div>

diff --git a/packages/app/src/components/Editor/Flow/engine/store.ts b/packages/app/src/components/Editor/Flow/engine/store.ts
@@ -15,11 +15,11 @@ export interface RegisterNodeOptions {
 export interface NodeStoreContextValue {
   selectedNodeId: Accessor<string | null>;
   registerNode: (data: RegisterNodeOptions) => () => void;
-  nodes: FlowNodeMap;
+  nodes: Accessor<FlowNodeMap>;
   renderNode: (node: FlowNode) => JSX.Element;
   sceneRef: Accessor<HTMLDivElement | null>;
   setSceneRef: Setter<HTMLDivElement | null>;
-  connections: FlowConnection[];
+  connections: Accessor<FlowConnection[]>;
 }
 
 export const NodeStoreContext = createContext<NodeStoreContextValue>();

diff --git a/packages/app/src/components/Editor/Header/Header.tsx b/packages/app/src/components/Editor/Header/Header.tsx
@@ -1,4 +1,4 @@
-import {EditorStore} from '#editor-store/editor.store';
+import {EditorStore} from '~/store/editor/editor.store';
 import {Icon} from '#ui/components/Icon';
 import {
   Button,
@@ -13,7 +13,7 @@ import {provideState} from 'statebuilder';
 import {UserStore} from '~/store/user.store';
 import {createScratchFork, updateScratch} from '../../../lib/scratchApi';
 import {EditorContext} from '../editor.context';
-import {EditorUiStore} from '../store/ui.store';
+import {EditorUiStore} from '../../../store/editor/ui.store';
 import * as styles from './EditorHeader.css';
 
 export interface EditorHeaderProps {

diff --git a/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobForm/JobForm.tsx b/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobForm/JobForm.tsx
@@ -8,7 +8,7 @@ import {JobStepsForm} from '../JobStepsForm/JobStepsForm';
 import {formStyles} from '#editor-layout/Panel/Form/Form.css';
 import {provideState} from 'statebuilder';
 import {PanelEditorStore} from '../panel-editor.store';
-import {EditorStore} from '#editor-store/editor.store';
+import {EditorStore} from '~/store/editor/editor.store';
 import {EnvironmentVariablesForm} from '../../../common/EnvironmentVariables/EnvironmentVariablesForm';
 
 export function JobForm() {
@@ -90,16 +90,16 @@ export function JobForm() {
         </FullWidthPanelRow>
 
         <FullWidthPanelRow>
-          <Select<string[]>
+          <Select<string>
             aria-label={'Needs input'}
             multiple={true}
             options={needsOptions()}
+            valueComponentMultiple={options => options().join(', ')}
             value={job().needs}
             onChange={options => {
               editorStore.actions.updateJobNeeds({
                 jobId: job().$nodeId,
-                // TODO: Fix select types
-                needs: options as unknown as string[],
+                needs: options,
               });
             }}
             size={'sm'}
@@ -108,6 +108,7 @@ export function JobForm() {
             slotClasses={{
               root: formStyles.inlineInputRoot,
               label: formStyles.inlineInputLabel,
+              itemValue: formStyles.selectTextValueMultiple,
             }}
           />
         </FullWidthPanelRow>

diff --git a/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobPanelEditor.css.ts b/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobPanelEditor.css.ts
@@ -1,4 +1,4 @@
-import {style} from '@vanilla-extract/css';
+import {globalStyle, style} from '@vanilla-extract/css';
 import {appTheme} from '#ui/theme.css';
 import {themeVars} from '@codeui/kit';
 
@@ -13,3 +13,13 @@ export const nav = style({
   paddingRight: appTheme.spacing['3'],
   borderBottom: themeVars.separator,
 });
+
+globalStyle(`${nav} > button`, {
+  flexShrink: 0,
+});
+
+globalStyle(`${nav} > span`, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
diff --git a/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobPanelEditor.tsx b/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobPanelEditor.tsx
@@ -7,24 +7,24 @@ import {JobForm} from './JobForm/JobForm';
 import {IconButton} from '@codeui/kit';
 import {Icon} from '#ui/components/Icon';
 import * as styles from './JobPanelEditor.css';
+import {EditorState} from '@codemirror/state';
+import {EditorStore} from '../../../../store/editor/editor.store';
 
 export function JobPanelEditor() {
   const panelStore = provideState(PanelEditorStore);
 
   return (
     <>
       <div class={styles.nav}>
-        <Show when={panelStore.get.activeStep}>
-          <IconButton
-            aria-label={'Back'}
-            size={'sm'}
-            theme={'secondary'}
-            variant={'ghost'}
-            onClick={() => panelStore.actions.setActiveStepId(null)}
-          >
-            <Icon name={'arrow_left_alt'} />
-          </IconButton>
-        </Show>
+        <IconButton
+          aria-label={'Back'}
+          size={'sm'}
+          theme={'secondary'}
+          variant={'ghost'}
+          onClick={() => panelStore.back()}
+        >
+          <Icon name={'arrow_left_alt'} />
+        </IconButton>
         <span>{panelStore.headerPanelLabel()}</span>
       </div>
       <PanelGroup>

diff --git a/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobStepsForm/JobStep/JobStepForm.tsx b/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobStepsForm/JobStep/JobStepForm.tsx
@@ -8,13 +8,13 @@ import {
 import * as formStyles from '#editor-layout/Panel/Form/Form.css';
 import {PanelHeader} from '#editor-layout/Panel/Form/PanelHeader';
 import {provideState} from 'statebuilder';
-import {EditorStore} from '#editor-store/editor.store';
+import {EditorStore} from '~/store/editor/editor.store';
 import {PanelContent} from '#editor-layout/Panel/Form/PanelContent';
 import {Show} from 'solid-js';
 import type {
   WorkflowStructureJobActionStep,
   WorkflowStructureJobRunStep,
-} from '#editor-store/editor.types';
+} from '~/store/editor/editor.types';
 import {PanelEditorStore} from '../../panel-editor.store';
 import {PanelDivider} from '#editor-layout/Panel/Form/PanelDivider';
 import {EnvironmentVariablesForm} from '../../../../common/EnvironmentVariables/EnvironmentVariablesForm';

diff --git a/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobStepsForm/JobStepsForm.css.ts b/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobStepsForm/JobStepsForm.css.ts
@@ -19,4 +19,17 @@ export const listItem = style({
   color: themeVars.accent10,
   justifyContent: 'space-between',
   paddingLeft: appTheme.spacing['2'],
+  background: themeVars.accent4,
+  borderRadius: '6px',
+});
+
+export const listItemName = style({
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const listItemActions = style({
+  flexShrink: 0,
 });
diff --git a/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobStepsForm/JobStepsForm.tsx b/packages/app/src/components/Editor/Jobs/JobPanelEditor/JobStepsForm/JobStepsForm.tsx
@@ -1,18 +1,23 @@
-import {container, listItem} from './JobStepsForm.css';
-import {createEffect, createSignal, For} from 'solid-js';
-import {provideState} from 'statebuilder';
-import {PanelEditorStore} from '../panel-editor.store';
+import {PanelHeader} from '#editor-layout/Panel/Form/PanelHeader';
+import {PanelPlusButton} from '#editor-layout/Panel/Form/PanelPlusButton';
+import {EditorStore} from '~/store/editor/editor.store';
+import {Icon} from '#ui/components/Icon';
 import {
   Button,
   IconButton,
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@codeui/kit';
-import {Icon} from '#ui/components/Icon';
-import {EditorStore} from '#editor-store/editor.store';
-import {PanelHeader} from '#editor-layout/Panel/Form/PanelHeader';
-import {PanelPlusButton} from '#editor-layout/Panel/Form/PanelPlusButton';
+import {createSignal, For} from 'solid-js';
+import {provideState} from 'statebuilder';
+import {PanelEditorStore} from '../panel-editor.store';
+import {
+  container,
+  listItem,
+  listItemActions,
+  listItemName,
+} from './JobStepsForm.css';
 
 export function JobStepsForm() {
   const panelStore = provideState(PanelEditorStore);
@@ -41,9 +46,9 @@ export function JobStepsForm() {
             const [deleting, setDeleting] = createSignal(false);
             return (
               <li class={listItem}>
-                {step.name || step.id}
+                <span class={listItemName}>{step.name || step.id}</span>
 
-                <div>
+                <div class={listItemActions}>
                   <IconButton
                     size={'xs'}
                     theme={'secondary'}

diff --git a/packages/app/src/components/Editor/Jobs/JobPanelEditor/panel-editor.store.ts b/packages/app/src/components/Editor/Jobs/JobPanelEditor/panel-editor.store.ts
@@ -1,5 +1,5 @@
 import {defineStore} from 'statebuilder';
-import {EditorStore} from '#editor-store/editor.store';
+import {EditorStore} from '~/store/editor/editor.store';
 import {createMemo} from 'solid-js';
 import {withProxyCommands} from 'statebuilder/commands';
 
@@ -39,7 +39,17 @@ export const PanelEditorStore = defineStore<PanelEditorState>(() => ({
     });
 
     return {
+      back() {
+        if (_.get.activeStep) {
+          _.actions.setActiveStepId(null);
+        } else {
+          editorStore.actions.setSelectedJobId(null);
+        }
+      },
       selectedJob: editorStore.selectedJob,
+      deselectJob() {
+        editorStore.actions.setSelectedJobId(null);
+      },
       selectedStep,
       headerPanelLabel: () => {
         const selectedJob = editorStore.selectedJob()!;

diff --git a/packages/app/src/components/Editor/Layout/Panel/Form/Form.css.ts b/packages/app/src/components/Editor/Layout/Panel/Form/Form.css.ts
@@ -32,7 +32,15 @@ export const panelForm = recipe({
   },
 });
 
+export const selectTextValueMultiple = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
 export const formStyles = {
   inlineInputLabel,
   inlineInputRoot,
+
+  selectTextValueMultiple,
 };
diff --git a/...pp/src/components/Editor/Properties/EnvironmentVariablesForm/EnvironmentVariablesForm.tsx b/...pp/src/components/Editor/Properties/EnvironmentVariablesForm/EnvironmentVariablesForm.tsx
@@ -1,6 +1,6 @@
 import {provideState} from 'statebuilder';
-import {EditorStore} from '../../store/editor.store';
-import type {WorkflowStructureEnvItem} from '../../store/editor.types';
+import {EditorStore} from '../../../../store/editor/editor.store';
+import type {WorkflowStructureEnvItem} from '../../../../store/editor/editor.types';
 import {EnvironmentVariablesForm} from '../../common/EnvironmentVariables/EnvironmentVariablesForm';
 
 export function PropertiesEnvironmentVariablesForm() {