Allow users to import workflows from base templates (#3136)

* allow users to create workflows from base templates

* update changelog

* test selecting a different template

* style panel buttons

* top line

* tailwind style

* working

* remove unused

* add tests

* run formatter

* fix tests

* remove extra BG

---------

Co-authored-by: Taylor Downs <[email protected]>

Author: midigofrank

CHANGELOG.md

@@ -19,7 +19,9 @@ and this project adheres to
 
 - AI Assistant: add metadata column to chat sessions
   [#3054](https://github.com/OpenFn/lightning/issues/3054)
-  
+- Allow users to create workflows from base templates
+  [#3110](https://github.com/OpenFn/lightning/issues/3110)
+
 ### Changed
 
 ### Fixed

assets/js/hooks/FileDropzone.ts

@@ -0,0 +1,95 @@
+interface FileDropzoneHook {
+  el: HTMLElement;
+  destroy?: () => void;
+  mounted(): void;
+  destroyed(): void;
+}
+
+const FileDropzone = {
+  mounted() {
+    const dropzone = this.el;
+    const targetSelector = dropzone.dataset['target'];
+    if (!targetSelector) {
+      console.error('No target selector specified');
+      return;
+    }
+    
+    const fileInput = document.querySelector<HTMLInputElement>(targetSelector);
+
+    if (!fileInput) {
+      console.error('Target file input not found:', targetSelector);
+      return;
+    }
+
+    const highlight = () => {
+      dropzone.classList.add('border-indigo-600', 'bg-indigo-50/50');
+      dropzone.classList.remove('border-gray-900/25');
+    };
+
+    const unhighlight = () => {
+      dropzone.classList.remove('border-indigo-600', 'bg-indigo-50/50');
+      dropzone.classList.add('border-gray-900/25');
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      unhighlight();
+
+      const dt = e.dataTransfer;
+      if (!dt?.files) return;
+      
+      const files = dt.files;
+      if (files.length > 0) {
+        const file = files[0];
+        if (!file) return;
+        
+        // Check if file is yaml/yml
+        if (file.name.match(/\.(ya?ml)$/i)) {
+          // Create a new FileList-like object
+          const dataTransfer = new DataTransfer();
+          dataTransfer.items.add(file);
+          fileInput.files = dataTransfer.files;
+          
+          // Trigger change event to notify any listeners
+          fileInput.dispatchEvent(new Event('change', { bubbles: true }));
+        } else {
+          console.error('Invalid file type. Please upload a YAML file.');
+        }
+      }
+    };
+
+    const handleDragEvent = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      highlight();
+    };
+
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      unhighlight();
+    };
+
+    dropzone.addEventListener('dragenter', handleDragEvent);
+    dropzone.addEventListener('dragover', handleDragEvent);
+    dropzone.addEventListener('dragleave', handleDragLeave);
+    dropzone.addEventListener('drop', handleDrop);
+
+    // Cleanup
+    this.destroy = () => {
+      dropzone.removeEventListener('dragenter', handleDragEvent);
+      dropzone.removeEventListener('dragover', handleDragEvent);
+      dropzone.removeEventListener('dragleave', handleDragLeave);
+      dropzone.removeEventListener('drop', handleDrop);
+    };
+  },
+
+  destroyed() {
+    if (this.destroy) {
+      this.destroy();
+    }
+  }
+} as FileDropzoneHook;
+
+export default FileDropzone; 

assets/js/hooks/index.ts

@@ -7,6 +7,7 @@ import type { PhoenixHook } from './PhoenixHook';
 import LogLineHighlight from './LogLineHighlight';
 import WorkflowToYAML from '../yaml/WorkflowToYAML';
 import YAMLToWorkflow from '../yaml/YAMLToWorkflow';
+import TemplateToWorkflow from '../yaml/TemplateToWorkflow';
 import ElapsedIndicator from './ElapsedIndicator';
 import {
   TabbedContainer,
@@ -24,10 +25,13 @@ import {
   CloseNodePanelViaEscape,
 } from './KeyHandlers';
 
+import FileDropzone from "./FileDropzone";
+
 export {
   LogLineHighlight,
   WorkflowToYAML,
   YAMLToWorkflow,
+  TemplateToWorkflow,
   ElapsedIndicator,
   TabbedContainer,
   TabbedSelector,
@@ -39,6 +43,7 @@ export {
   AltRunViaCtrlShiftEnter,
   CloseInspectorPanelViaEscape,
   CloseNodePanelViaEscape,
+  FileDropzone,
 };
 
 export { ReactComponent } from '#/react/hooks';

assets/js/workflow-editor/index.ts

@@ -1,15 +1,12 @@
 // Hook for Workflow Editor Component
-import { DEFAULT_TEXT } from '../editor/Editor';
 import type { PhoenixHook } from '../hooks/PhoenixHook';
 import type { Lightning } from '../workflow-diagram/types';
-import { randomUUID } from '../common';
 import type { mount } from './component';
 import {
   type Patch,
   type PendingAction,
   type WorkflowProps,
   createWorkflowStore,
-  type ChangeArgs,
 } from './store';
 
 export type WorkflowEditorEntrypoint = PhoenixHook<
@@ -40,33 +37,6 @@ export type WorkflowEditorEntrypoint = PhoenixHook<
   { baseUrl?: string | undefined }
 >;
 
-const createNewWorkflow = (): Required<ChangeArgs> => {
-  const triggers = [
-    {
-      id: randomUUID(),
-      type: 'webhook' as 'webhook',
-    },
-  ];
-  const jobs = [
-    {
-      id: randomUUID(),
-      name: 'New job',
-      adaptor: '@openfn/language-common@latest',
-      body: DEFAULT_TEXT,
-    },
-  ];
-
-  const edges = [
-    {
-      id: randomUUID(),
-      source_trigger_id: triggers[0].id,
-      target_job_id: jobs[0].id,
-      condition_type: 'always',
-    },
-  ];
-  return { triggers, jobs, edges };
-};
-
 // To support temporary workflow editor metrics submissions to Lightning
 // server.
 let workflowLoadParamsStart: number | null = null;
@@ -249,12 +219,6 @@ export default {
   }) {
     this.workflowStore.setState(_state => payload);
 
-    if (!payload.triggers.length && !payload.jobs.length) {
-      // Create a placeholder chart and push it back up to the server
-      const diff = createNewWorkflow();
-      this.workflowStore.getState().add(diff);
-    }
-
     this.maybeMountComponent();
     let end = new Date();
     console.debug('current-worflow-params processed', new Date().toISOString());

assets/js/yaml/TemplateToWorkflow.ts

@@ -0,0 +1,16 @@
+import type { PhoenixHook } from '../hooks/PhoenixHook';
+import { parseWorkflowTemplate, convertWorkflowSpecToState } from './util';
+
+const TemplateToWorkflow = {
+  mounted() {
+    this.handleEvent('template_selected', (payload: { template: string }) => {
+      const workflowSpec = parseWorkflowTemplate(payload.template);
+      const workflowState = convertWorkflowSpecToState(workflowSpec);
+      this.pushEventTo(this.el, 'template-parsed', {
+        workflow: workflowState,
+      });
+    });
+  },
+} as PhoenixHook;
+
+export default TemplateToWorkflow;

assets/js/yaml/YAMLToWorkflow.ts

@@ -1,10 +1,6 @@
 import type { PhoenixHook } from '../hooks/PhoenixHook';
 import type { WorkflowSpec, WorkflowState } from './types';
-import {
-  parseWorkflowYAML,
-  convertWorkflowSpecToState,
-  defaultWorkflowState,
-} from './util';
+import { parseWorkflowYAML, convertWorkflowSpecToState } from './util';
 
 function transformServerErrors(
   errors: Record<string, any>,
@@ -75,13 +71,6 @@ const YAMLToWorkflow = {
       this.validateYAML(yamlString);
     });
   },
-  destroyed() {
-    // reset server state
-    this.updateServerState(defaultWorkflowState());
-  },
-  updateServerState(state: WorkflowState) {
-    this.pushEvent('validate', { workflow: state });
-  },
   validateYAML(workflowYAML: string) {
     this.errorEl.classList.add('hidden');
     this.errorEl.textContent = '';
@@ -100,8 +89,6 @@ const YAMLToWorkflow = {
             const errors = transformServerErrors(response['errors']);
             this.errorEl.textContent = errors[0];
             this.errorEl.classList.remove('hidden');
-          } else {
-            this.updateServerState(this.workflowState);
           }
         }
       );

assets/js/yaml/util.ts

@@ -17,38 +17,6 @@ const hyphenate = (str: string) => {
   return str.replace(/\s+/g, '-');
 };
 
-export const defaultWorkflowState = (): WorkflowState => {
-  const trigger: StateTrigger = {
-    id: randomUUID(),
-    type: 'webhook',
-    enabled: true,
-  };
-
-  // intentionally left out adaptor because of the @latest stuff
-  const job: StateJob = {
-    id: randomUUID(),
-    name: 'New Job',
-    body: '// job body here',
-  };
-
-  const edge: StateEdge = {
-    id: randomUUID(),
-    source_trigger_id: trigger.id,
-    target_job_id: job.id,
-    enabled: true,
-    condition_type: 'always',
-  };
-
-  const workflowState: WorkflowState = {
-    name: '',
-    jobs: [job],
-    edges: [edge],
-    triggers: [trigger],
-  };
-
-  return workflowState;
-};
-
 export const convertWorkflowStateToSpec = (
   workflowState: WorkflowState
 ): WorkflowSpec => {
@@ -237,6 +205,12 @@ export const parseWorkflowYAML = (yamlString: string): WorkflowSpec => {
   return parsedYAML as WorkflowSpec;
 };
 
+export const parseWorkflowTemplate = (code: string): WorkflowSpec => {
+  const parsedYAML = YAML.parse(code);
+
+  return parsedYAML as WorkflowSpec;
+};
+
 const humanizeAjvError = (error: ErrorObject): string => {
   switch (error.keyword) {
     case 'required':

lib/lightning_web/components/layout_components.ex

@@ -99,7 +99,7 @@ defmodule LightningWeb.LayoutComponents do
         }
       }
     />
-    <div class="flex-none bg-white shadow-xs">
+    <div class="flex-none bg-white shadow-xs border-b border-gray-200">
       <div class={[@title_class, @title_height]}>
         <%= if @current_user do %>
           <nav class="flex" aria-label="Breadcrumb">

lib/lightning_web/live/workflow_live/edit.ex

@@ -177,7 +177,7 @@ defmodule LightningWeb.WorkflowLive.Edit do
           :if={@show_new_workflow_panel}
           id="new-workflow-panel"
           module={LightningWeb.WorkflowLive.NewWorkflowComponent}
-          workflow_form={@workflow_form}
+          workflow={@workflow}
           project_id={@project.id}
         />
         <div class="relative h-full flex grow" id={"workflow-edit-#{@workflow.id}"}>