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
 
 ### Fixed

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

@@ -219,6 +219,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

@@ -5,6 +5,13 @@ import { useWorkflowState } 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 {
+  useUser,
+  useWorkflowTemplate,
+  useLatestSnapshotLockVersion,
+} from '#/collaborative-editor/hooks/useSessionContext';
+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 +85,30 @@ export function CodeViewPanel() {
     }
   };
 
+  // Template publishing state and handlers
+  const user = useUser();
+  const workflowTemplate = useWorkflowTemplate();
+  const latestSnapshotLockVersion = useLatestSnapshotLockVersion();
+  const { updateSearchParams } = useURLState();
+
+  // Check if workflow has unsaved changes by comparing lock versions
+  const hasUnsavedChanges =
+    workflow?.lock_version !== latestSnapshotLockVersion;
+
+  const handlePublishTemplate = () => {
+    updateSearchParams({ panel: 'publish-template' });
+  };
+
+  const buttonText = workflowTemplate ? 'Update Template' : 'Publish Template';
+
+  const buttonDisabled = hasUnsavedChanges || !user?.support_user;
+
+  const tooltipMessage = hasUnsavedChanges
+    ? `You must save your workflow first before ${workflowTemplate ? 'updating' : 'publishing'} a template.`
+    : !user?.support_user
+      ? 'Only superusers can publish templates'
+      : undefined;
+
   if (!workflow) {
     return <div className="px-4 py-5 text-gray-500">Loading...</div>;
   }
@@ -125,6 +156,23 @@ export function CodeViewPanel() {
           >
             Copy Code
           </button>
+          {user?.support_user && (
+            <button
+              id="publish-template-btn"
+              type="button"
+              onClick={handlePublishTemplate}
+              disabled={buttonDisabled}
+              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>
     </>