fix: workflows management plugin bundle size

packages/kbn-optimizer/limits.yml

@@ -197,4 +197,4 @@ pageLoadAssetSize:
   wciSalesforce: 8506
   workchatApp: 12411
   workchatFramework: 5706
-  workflowsManagement: 475041
+  workflowsManagement: 4657

src/platform/plugins/shared/workflows_management/common/index.ts

@@ -7,50 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { generateYamlSchemaFromConnectors } from '@kbn/workflows';
-
 export const PLUGIN_ID = 'workflows';
 export const PLUGIN_NAME = 'Workflows';
 
 export const WORKFLOWS_EXECUTIONS_INDEX = '.kibana-workflow-executions';
 export const WORKFLOWS_STEP_EXECUTIONS_INDEX = '.kibana-workflow-step-executions';
 export const WORKFLOWS_EXECUTION_LOGS_INDEX = '.kibana-workflow-execution-logs';
 
-// TODO: remove this...
-const connectors = [
-  {
-    type: 'console',
-    params: [
-      {
-        name: 'message',
-        type: 'string' as const,
-      },
-    ],
-  },
-  // TODO: this should be fetched from the action type registry
-  {
-    type: 'slack.sendMessage',
-    params: [
-      {
-        name: 'message',
-        type: 'string' as const,
-      },
-    ],
-  },
-  {
-    type: 'delay',
-    params: [
-      {
-        name: 'delay',
-        type: 'number' as const,
-      },
-    ],
-  },
-];
-
-export const WORKFLOW_ZOD_SCHEMA = generateYamlSchemaFromConnectors(connectors);
-export const WORKFLOW_ZOD_SCHEMA_LOOSE = generateYamlSchemaFromConnectors(connectors, true);
-export {
-  convertToWorkflowGraph,
-  convertToSerializableGraph,
-} from './lib/build_execution_graph/build_execution_graph';
+// DO NOT IMPORT MODULES HERE. Otherwise it will inflate the initial plugin bundle size.

src/platform/plugins/shared/workflows_management/common/schema.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { generateYamlSchemaFromConnectors } from '@kbn/workflows';
+
+// TODO: replace with dynamically fetching connectors actions and subactions via ActionsClient or other service once we decide on that.
+
+const connectors = [
+  {
+    type: 'console',
+    params: [
+      {
+        name: 'message',
+        type: 'string' as const,
+      },
+    ],
+  },
+  {
+    type: 'slack.sendMessage',
+    params: [
+      {
+        name: 'message',
+        type: 'string' as const,
+      },
+    ],
+    // TODO: fetch from ActionsClient.getAll()
+    availableConnectorIds: ['keep-playground', 'keep-demo'],
+  },
+  {
+    type: 'delay',
+    params: [
+      {
+        name: 'delay',
+        type: 'number' as const,
+      },
+    ],
+  },
+];
+
+export const WORKFLOW_ZOD_SCHEMA = generateYamlSchemaFromConnectors(connectors);
+export const WORKFLOW_ZOD_SCHEMA_LOOSE = generateYamlSchemaFromConnectors(connectors, true);

src/platform/plugins/shared/workflows_management/public/features/run_workflow/ui/test_workflow_modal.tsx

@@ -21,7 +21,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { AuthenticatedUser } from '@kbn/security-plugin-types-common';
 import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/react';
-import { WorkflowExecution } from '../../workflow_detail/ui/workflow_execution';
+import { WorkflowExecution } from '../../workflow_execution_detail/ui';
 
 export function TestWorkflowModal({
   workflowYaml,

src/platform/plugins/shared/workflows_management/public/features/workflow_editor/ui/index.tsx

@@ -8,8 +8,13 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
-import { WorkflowYAMLEditor } from '../../../widgets/workflow_yaml_editor/ui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui';
+
+const WorkflowYAMLEditor = React.lazy(() =>
+  import('../../../widgets/workflow_yaml_editor/ui').then((module) => ({
+    default: module.WorkflowYAMLEditor,
+  }))
+);
 
 interface WorkflowEditorProps {
   workflowId: string;
@@ -77,12 +82,14 @@ export function WorkflowEditor({ workflowId, value, onChange, hasChanges }: Work
         )}
       </EuiFlexItem>
       <EuiFlexItem css={{ flex: 1, minHeight: 0, height: '100%' }}>
-        <WorkflowYAMLEditor
-          workflowId={workflowId}
-          filename={`${workflowId}.yaml`}
-          value={value}
-          onChange={(v) => onChange(v ?? '')}
-        />
+        <React.Suspense fallback={<EuiLoadingSpinner />}>
+          <WorkflowYAMLEditor
+            workflowId={workflowId}
+            filename={`${workflowId}.yaml`}
+            value={value}
+            onChange={(v) => onChange(v ?? '')}
+          />
+        </React.Suspense>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

src/platform/plugins/shared/workflows_management/public/features/workflow_execution_detail/ui/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { WorkflowExecution } from './workflow_execution';

src/platform/plugins/shared/workflows_management/public/features/workflow_execution_detail/ui/workflow_execution.lazy.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+
+export const WorkflowExecutionLazy = React.lazy(() =>
+  import('./workflow_execution').then((module) => ({
+    default: module.WorkflowExecution,
+  }))
+);

src/platform/plugins/shared/workflows_management/public/features/workflow_detail/ui/workflow_execution.tsx → src/platform/plugins/shared/workflows_management/public/features/workflow_execution_detail/ui/workflow_execution.tsx

@@ -25,10 +25,10 @@ import { useWorkflowExecution } from '../../../entities/workflows/model/useWorkf
 import { StatusBadge } from '../../../shared/ui/status_badge';
 import { WorkflowVisualEditor } from '../../workflow_visual_editor/ui';
 import { parseWorkflowYamlToJSON } from '../../../../common/lib/yaml-utils';
-import { WORKFLOW_ZOD_SCHEMA_LOOSE } from '../../../../common';
+import { WORKFLOW_ZOD_SCHEMA_LOOSE } from '../../../../common/schema';
 import { WorkflowExecutionLogsTable } from '../../workflow_execution_logs/ui';
 
-interface WorkflowExecutionProps {
+export interface WorkflowExecutionProps {
   workflowExecutionId: string;
   workflowYaml: string;
   fields?: Array<keyof EsWorkflowStepExecution>;

src/platform/plugins/shared/workflows_management/public/features/workflow_execution_list/ui/index.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { FormattedRelative } from '@kbn/i18n-react';
 import { ExecutionStatus, WorkflowDetailDto } from '@kbn/workflows';
 import { useWorkflowExecutions } from '../../../entities/workflows/model/useWorkflowExecutions';
-import { WorkflowExecution } from '../../workflow_detail/ui/workflow_execution';
+import { WorkflowExecution } from '../../workflow_execution_detail/ui/workflow_execution';
 import { StatusBadge } from '../../../shared/ui/status_badge';
 import { useWorkflowUrlState } from '../../../hooks/use_workflow_url_state';
 

src/platform/plugins/shared/workflows_management/public/index.ts

@@ -15,4 +15,7 @@ export function plugin() {
   return new WorkflowsPlugin();
 }
 export type { WorkflowsPluginSetup, WorkflowsPluginStart } from './types';
-export { WorkflowExecution } from './features/workflow_detail/ui/workflow_execution';
+
+// for use in workflows example plugin. TODO: revisit, maybe move to shared package.
+export type { WorkflowExecutionProps } from './features/workflow_execution_detail/ui/workflow_execution';
+export { WorkflowExecutionLazy as WorkflowExecution } from './features/workflow_execution_detail/ui/workflow_execution.lazy';

src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/index.tsx

@@ -21,6 +21,9 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { WorkflowYaml } from '@kbn/workflows';
+import { WORKFLOW_ZOD_SCHEMA_LOOSE } from '../../../common/schema';
+import { parseWorkflowYamlToJSON } from '../../../common/lib/yaml-utils';
 import { useWorkflowActions } from '../../entities/workflows/model/useWorkflowActions';
 import { useWorkflowDetail } from '../../entities/workflows/model/useWorkflowDetail';
 import { WorkflowEventModal } from '../../features/run_workflow/ui/workflow_event_modal';
@@ -29,6 +32,12 @@ import { WorkflowExecutionList } from '../../features/workflow_execution_list/ui
 import { useWorkflowUrlState } from '../../hooks/use_workflow_url_state';
 import { TestWorkflowModal } from '../../features/run_workflow/ui/test_workflow_modal';
 
+const WorkflowVisualEditor = React.lazy(() =>
+  import('../../features/workflow_visual_editor/ui').then((module) => ({
+    default: module.WorkflowVisualEditor,
+  }))
+);
+
 export function WorkflowDetailPage({ id }: { id: string }) {
   const { application, chrome, notifications } = useKibana().services;
   const {
@@ -56,6 +65,11 @@ export function WorkflowDetailPage({ id }: { id: string }) {
   const originalWorkflowYaml = useMemo(() => workflow?.yaml ?? '', [workflow]);
   const [hasChanges, setHasChanges] = useState(false);
 
+  const workflowYamlObject = useMemo(
+    () => (workflowYaml ? parseWorkflowYamlToJSON(workflowYaml, WORKFLOW_ZOD_SCHEMA_LOOSE) : null),
+    [workflowYaml]
+  );
+
   useEffect(() => {
     setWorkflowYaml(workflow?.yaml ?? '');
     setHasChanges(false);
@@ -137,6 +151,13 @@ export function WorkflowDetailPage({ id }: { id: string }) {
             />
           )}
         </EuiFlexItem>
+        <EuiFlexItem>
+          {workflowYamlObject?.data && (
+            <React.Suspense fallback={<EuiLoadingSpinner />}>
+              <WorkflowVisualEditor workflow={workflowYamlObject.data as WorkflowYaml} />
+            </React.Suspense>
+          )}
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
   };

src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/index.tsx

@@ -11,7 +11,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { monaco } from '@kbn/monaco';
 import { getJsonSchemaFromYamlSchema } from '@kbn/workflows';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { WORKFLOW_ZOD_SCHEMA } from '../../../../common';
+import { WORKFLOW_ZOD_SCHEMA } from '../../../../common/schema';
 import { YamlEditor } from '../../../shared/ui/yaml_editor';
 import { useYamlValidation } from '../lib/use_yaml_validation';
 import { navigateToErrorPosition } from '../lib/utils';

src/platform/plugins/shared/workflows_management/server/scheduler/scheduler_service.ts

@@ -14,7 +14,10 @@ import { v4 as generateUuid } from 'uuid';
 import { TaskManagerStartContract } from '@kbn/task-manager-plugin/server';
 import { WorkflowsService } from '../workflows_management/workflows_management_service';
 import { extractConnectorIds } from './lib/extract_connector_ids';
-import { convertToWorkflowGraph, convertToSerializableGraph } from '../../common';
+import {
+  convertToWorkflowGraph,
+  convertToSerializableGraph,
+} from '../../common/lib/build_execution_graph/build_execution_graph';
 
 const findWorkflowsByTrigger = (triggerType: string): WorkflowExecutionEngineModel[] => {
   return [];

src/platform/plugins/shared/workflows_management/server/tasks/workflow_task_runner.ts

@@ -12,7 +12,10 @@ import type { Logger } from '@kbn/core/server';
 import type { ConcreteTaskInstance } from '@kbn/task-manager-plugin/server';
 import { WorkflowExecutionEngineModel } from '@kbn/workflows';
 import type { WorkflowsExecutionEnginePluginStart } from '@kbn/workflows-execution-engine/server';
-import { convertToSerializableGraph, convertToWorkflowGraph } from '../../common';
+import {
+  convertToSerializableGraph,
+  convertToWorkflowGraph,
+} from '../../common/lib/build_execution_graph/build_execution_graph';
 import { extractConnectorIds } from '../scheduler/lib/extract_connector_ids';
 import type { WorkflowsService } from '../workflows_management/workflows_management_service';
 

src/platform/plugins/shared/workflows_management/server/workflows_management/workflows_management_api.ts

@@ -17,11 +17,12 @@ import {
   WorkflowExecutionEngineModel,
   UpdatedWorkflowResponseDto,
   transformWorkflowYamlJsontoEsWorkflow,
+  WorkflowYaml,
 } from '@kbn/workflows';
 import { parseWorkflowYamlToJSON } from '../../common/lib/yaml-utils';
 import { WorkflowsService } from './workflows_management_service';
 import { SchedulerService } from '../scheduler/scheduler_service';
-import { WORKFLOW_ZOD_SCHEMA_LOOSE } from '../../common';
+import { WORKFLOW_ZOD_SCHEMA_LOOSE } from '../../common/schema';
 
 export interface GetWorkflowsParams {
   triggerType?: 'schedule' | 'event';
@@ -112,8 +113,7 @@ export class WorkflowsManagementApi {
       throw parsedYaml.error;
     }
 
-    // @ts-expect-error - TODO: fix this
-    const workflowToCreate = transformWorkflowYamlJsontoEsWorkflow(parsedYaml.data);
+    const workflowToCreate = transformWorkflowYamlJsontoEsWorkflow(parsedYaml.data as WorkflowYaml);
 
     return await this.schedulerService.runWorkflow(
       {

src/platform/plugins/shared/workflows_management/server/workflows_management/workflows_management_service.ts

@@ -19,8 +19,7 @@ import {
   WorkflowExecutionListDto,
   WorkflowListDto,
 } from '@kbn/workflows';
-
-import { WORKFLOW_ZOD_SCHEMA_LOOSE } from '../../common';
+import { WORKFLOW_ZOD_SCHEMA_LOOSE } from '../../common/schema';
 import { parseWorkflowYamlToJSON } from '../../common/lib/yaml-utils';
 import {
   WORKFLOW_SAVED_OBJECT_TYPE,