feat: sunsetting legacy editor (#4908)

Author: doc-han

.env.example

@@ -297,10 +297,6 @@
 # LOCAL_ADAPTORS=true
 # OPENFN_ADAPTORS_REPO=/path/to/repo/
 # OPENFN_ADAPTORS_REPO=/path/to/private,/path/to/canonical
-#
-# Control whether metrics reported by the Workflow editor or Job editor are
-# written to the Lightning logs.
-# UI_METRICS_ENABLED=false
 
 # ==============================================================================
 # <><><> WEBHOOK RETRY SETTINGS <><><>

CHANGELOG.md

@@ -46,6 +46,8 @@ and this project adheres to
   implicitly introduces a limit of 100 concurrent channels per Websocket
   connection (transport). If worker instances are set with a concurrency higher
   than 100, this will result in failures.
+- Replaced the legacy editor with the collaborative editor for all users
+  [#4402](https://github.com/OpenFn/lightning/issues/4402)
 
 ### Fixed
 

DEPLOYMENT.md

@@ -224,7 +224,6 @@ For SMTP, the following environment variables are required:
 | `ADAPTORS_REGISTRY_JSON_PATH`                     | Path to adaptor registry file. When provided, the app will attempt to read from it then later fallback to the internet                                                                                                                                          |
 | `SECRET_KEY_BASE`                                 | A secret key used as a base to generate secrets for encrypting and signing data.                                                                                                                                                                                |
 | `SENTRY_DSN`                                      | If using Sentry for error monitoring, your DSN                                                                                                                                                                                                                  |
-| `UI_METRICS_ENABLED`                              | Enable serverside tracking of certain metrics related to the UI. This s temporary functionality. Defaults to `false`.                                                                                                                                           |
 | `URL_HOST`                                        | The host used for writing URLs (e.g., `demo.openfn.org`)                                                                                                                                                                                                        |
 | `URL_PORT`                                        | The port, usually `443` for production                                                                                                                                                                                                                          |
 | `URL_SCHEME`                                      | The scheme for writing URLs (e.g., `https`)                                                                                                                                                                                                                     |

assets/css/app.css

@@ -942,14 +942,6 @@
     min-height: 4.5rem;
   }
 
-  .job-editor-panel.collapsed .close-button {
-    @apply pb-0;
-  }
-
-  .job-editor-panel.collapsed[data-editor-disabled='true'] .close-button {
-    min-height: 3.75rem;
-  }
-
   #output-logs.collapsed .close-button {
     margin-bottom: 5.5rem;
   }

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

@@ -20,7 +20,7 @@ import { type Monaco, MonacoEditor, setTheme } from '../../monaco';
 import { addKeyboardShortcutOverrides } from '../../monaco/keyboard-overrides';
 import { useHandleDiffDismissed } from '../contexts/MonacoRefContext';
 
-import createCompletionProvider from '../../editor/magic-completion';
+import createCompletionProvider from '../utils/magic-completion';
 
 import { LoadingIndicator } from './common/LoadingIndicator';
 import { Cursors } from './Cursors';

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

@@ -3,13 +3,10 @@ import { useCallback, useContext, useState } from 'react';
 
 import { useURLState } from '#/react/lib/use-url-state';
 
-import { buildClassicalEditorUrl } from '../../utils/editorUrlConversion';
 import * as dataclipApi from '../api/dataclips';
 import { StoreContext } from '../contexts/StoreProvider';
-import { channelRequest } from '../hooks/useChannel';
 import { getCsrfToken } from '../lib/csrf';
 import { useActiveRun } from '../hooks/useHistory';
-import { useSession } from '../hooks/useSession';
 import {
   useIsNewWorkflow,
   useLimits,
@@ -228,7 +225,6 @@ export function Header({
   const isCreateWorkflowPanelCollapsed = useIsCreateWorkflowPanelCollapsed();
   const importPanelState = useImportPanelState();
   const { selectedTemplate } = useTemplatePanel();
-  const { provider } = useSession();
   const limits = useLimits();
   const { isReadOnly } = useWorkflowReadOnly();
   const { hasChanges } = useUnsavedChanges();
@@ -365,25 +361,6 @@ export function Header({
     }
   }, [firstTriggerId, openRunPanel, selectNode, updateSearchParams]);
 
-  const handleSwitchToLegacyEditor = useCallback(async () => {
-    if (!provider?.channel || !projectId || !workflowId) return;
-
-    try {
-      await channelRequest(provider.channel, 'switch_to_legacy_editor', {});
-
-      // Build legacy editor URL and navigate
-      const legacyUrl = buildClassicalEditorUrl({
-        projectId,
-        workflowId,
-        searchParams: new URLSearchParams(window.location.search),
-        isNewWorkflow,
-      });
-      window.location.href = legacyUrl;
-    } catch (error) {
-      console.error('Failed to switch to legacy editor:', error);
-    }
-  }, [provider, projectId, workflowId, isNewWorkflow]);
-
   useKeyboardShortcut(
     'Control+Enter, Meta+Enter',
     () => {
@@ -452,26 +429,6 @@ export function Header({
         <div className="mx-auto sm:px-4 lg:px-4 py-6 flex items-center h-20 text-sm gap-2">
           <Breadcrumbs>{children}</Breadcrumbs>
           <ReadOnlyWarning className="ml-3" />
-          {projectId && workflowId && (
-            <Tooltip
-              content={
-                <span>
-                  Looking for the old version of the workflow builder? You can
-                  switch back for a few more days by clicking this icon. (But it
-                  will soon be retired!)
-                </span>
-              }
-              side="bottom"
-            >
-              <button
-                type="button"
-                onClick={() => void handleSwitchToLegacyEditor()}
-                className="w-6 h-6 place-self-center text-slate-500 hover:text-slate-400 cursor-pointer"
-              >
-                <span className="hero-question-mark-circle"></span>
-              </button>
-            </Tooltip>
-          )}
           <ActiveCollaborators className="ml-2" />
           <div className="grow ml-2"></div>
 

assets/js/collaborative-editor/hooks/useWorkflow.tsx

@@ -561,7 +561,7 @@ export const useWorkflowActions = () => {
             const searchParams = new URLSearchParams(url.search);
             searchParams.delete('method'); // Close left panel
             const queryString = searchParams.toString();
-            const newUrl = `/projects/${projectId}/w/${workflowId}/legacy${queryString ? `?${queryString}` : ''}`;
+            const newUrl = `/projects/${projectId}/w/${workflowId}${queryString ? `?${queryString}` : ''}`;
             window.history.pushState({}, '', newUrl);
             // Mark workflow as no longer new after first save
             sessionContextStore.clearIsNewWorkflow();

assets/js/collaborative-editor/stores/createWorkflowStore.ts

@@ -132,10 +132,10 @@ import { produce } from 'immer';
 import type { Channel } from 'phoenix';
 import type { PhoenixChannelProvider } from 'y-phoenix-channel';
 import * as Y from 'yjs';
-import { z } from 'zod';
 
 import _logger from '#/utils/logger';
 
+import { DEFAULT_TEXT } from '../../workflow-store/constants';
 import type { WorkflowState as YAMLWorkflowState } from '../../yaml/types';
 import { reconcileDanglingReferences } from '../adapters/reconcileDanglingReferences';
 import { YAMLStateToYDoc } from '../adapters/YAMLStateToYDoc';
@@ -908,16 +908,11 @@ export const createWorkflowStore = () => {
     const jobsArray = ydoc.getArray('jobs');
     const jobMap = new Y.Map();
 
-    // Default body text shown in the Monaco editor for new jobs
-    const defaultBody = `// Check out the Job Writing Guide for help getting started:
-// https://docs.openfn.org/documentation/jobs/job-writing-guide
-`;
-
     ydoc.transact(() => {
       jobMap.set('id', job.id);
       jobMap.set('name', job.name);
       // Always initialize body as Y.Text with default if empty
-      jobMap.set('body', new Y.Text(job.body || defaultBody));
+      jobMap.set('body', new Y.Text(job.body || DEFAULT_TEXT));
       // Set adaptor field (defaults to common if not provided)
       jobMap.set('adaptor', job.adaptor);
       // Initialize credential fields to null

assets/js/editor/lib/es5.min.dts.js …ollaborative-editor/utils/es5.min.dts.jsassets/js/editor/lib/es5.min.dts.js renamed to assets/js/collaborative-editor/utils/es5.min.dts.js assets/js/editor/lib/es5.min.dts.js renamed to assets/js/collaborative-editor/utils/es5.min.dts.js

@@ -7,5 +7,5 @@ export default `
 
   // hack to remove undefined from code suggest
   // https://github.com/microsoft/monaco-editor/issues/2018
-  declare module undefined 
+  declare module undefined
 `;

assets/js/collaborative-editor/utils/loadDTS.ts

@@ -1,6 +1,6 @@
 import { fetchDTSListing, fetchFile } from '@openfn/describe-package';
 
-import dts_es5 from '../../editor/lib/es5.min.dts';
+import dts_es5 from './es5.min.dts';
 
 export type Lib = {
   content: string;