Add workflow template publishing feature to collaborative editor

CHANGELOG.md

@@ -17,6 +17,9 @@ and this project adheres to
 
 ### Added
 
+- Add workflow template publishing to collaborative editor
+  [#3921](https://github.com/OpenFn/lightning/issues/3921)
+
 ### Changed
 
 - Enable usage limit checks across the whole application

assets/js/collaborative-editor/components/WorkflowEditor.tsx

@@ -203,6 +203,7 @@ export function WorkflowEditor({
   const showInspector =
     searchParams.get('panel') === 'settings' ||
     searchParams.get('panel') === 'code' ||
+    searchParams.get('panel') === 'publish-template' ||
     Boolean(currentNode.node);
 
   const handleMethodChange = (method: 'template' | 'import' | 'ai' | null) => {

assets/js/collaborative-editor/components/form/index.tsx

@@ -6,6 +6,7 @@ import { useValidation } from '#/collaborative-editor/hooks/useValidation';
 import { NumberField } from './number-field';
 import { SelectField } from './select-field';
 import { TextField } from './text-field';
+import { TextAreaField } from './textarea-field';
 import { ToggleField } from './toggle-field';
 
 export const { fieldContext, formContext, useFieldContext } =
@@ -17,6 +18,7 @@ const { useAppForm: useBaseAppForm } = createFormHook({
   formContext,
   fieldComponents: {
     TextField,
+    TextAreaField,
     SelectField,
     ToggleField,
     NumberField,

assets/js/collaborative-editor/components/form/text-field.tsx

@@ -5,9 +5,11 @@ import { useFieldContext } from '.';
 export function TextField({
   label,
   disabled = false,
+  placeholder,
 }: {
   label: string;
   disabled?: boolean;
+  placeholder?: string;
 }) {
   const field = useFieldContext<string>();
   return (
@@ -18,6 +20,7 @@ export function TextField({
         value={field.state.value || ''}
         onChange={e => field.handleChange(e.target.value)}
         disabled={disabled}
+        placeholder={placeholder}
         className={INPUT_CLASSES}
       />
     </FormField>

assets/js/collaborative-editor/components/form/textarea-field.tsx

@@ -0,0 +1,30 @@
+import { FormField, INPUT_CLASSES } from './form-field';
+
+import { useFieldContext } from '.';
+
+export function TextAreaField({
+  label,
+  disabled = false,
+  placeholder,
+  rows = 4,
+}: {
+  label: string;
+  disabled?: boolean;
+  placeholder?: string;
+  rows?: number;
+}) {
+  const field = useFieldContext<string>();
+  return (
+    <FormField name={field.name} label={label} meta={field.state.meta}>
+      <textarea
+        id={field.name}
+        value={field.state.value || ''}
+        onChange={e => field.handleChange(e.target.value)}
+        disabled={disabled}
+        placeholder={placeholder}
+        rows={rows}
+        className={INPUT_CLASSES}
+      />
+    </FormField>
+  );
+}

assets/js/collaborative-editor/components/inspector/CodeViewPanel.tsx

@@ -1,10 +1,15 @@
 import { useMemo } from 'react';
 import YAML from 'yaml';
 
-import { useWorkflowState } from '#/collaborative-editor/hooks/useWorkflow';
+import {
+  useWorkflowState,
+  useCanPublishTemplate,
+} from '#/collaborative-editor/hooks/useWorkflow';
 import { notifications } from '#/collaborative-editor/lib/notifications';
 import type { WorkflowState as YAMLWorkflowState } from '#/yaml/types';
 import { convertWorkflowStateToSpec } from '#/yaml/util';
+import { useURLState } from '#/react/lib/use-url-state';
+import { cn } from '#/utils/cn';
 
 export function CodeViewPanel() {
   // Read workflow data from store - LoadingBoundary guarantees non-null
@@ -78,6 +83,15 @@ export function CodeViewPanel() {
     }
   };
 
+  // Template publishing state and handlers
+  const { canPublish, buttonDisabled, tooltipMessage, buttonText } =
+    useCanPublishTemplate();
+  const { updateSearchParams } = useURLState();
+
+  const handlePublishTemplate = () => {
+    updateSearchParams({ panel: 'publish-template' });
+  };
+
   if (!workflow) {
     return <div className="px-4 py-5 text-gray-500">Loading...</div>;
   }
@@ -125,6 +139,23 @@ export function CodeViewPanel() {
           >
             Copy Code
           </button>
+          {canPublish && (
+            <button
+              id="publish-template-btn"
+              type="button"
+              onClick={handlePublishTemplate}
+              disabled={buttonDisabled}
+              {...(tooltipMessage && { title: tooltipMessage })}
+              className={cn(
+                'rounded-md px-3 py-2 text-sm font-semibold shadow-xs min-w-[8rem]',
+                buttonDisabled
+                  ? 'bg-primary-300 text-white cursor-not-allowed'
+                  : 'bg-primary-600 text-white hover:bg-primary-700 cursor-pointer'
+              )}
+            >
+              {buttonText}
+            </button>
+          )}
         </div>
       </div>
     </>