Process Deployment Shortcuts

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/process-deployment-view.tsx

@@ -30,9 +30,8 @@ import { getLatestDeployment, getVersionInstances, getYoungestInstance } from '.
 import useColors from './use-colors';
 import useTokens from './use-tokens';
 import { DeployedProcessInfo } from '@/lib/engines/deployment';
-import StartFormModal from './start-form-modal';
+import StartFormModal from '@/components/start-form-modal';
 import useInstanceVariables from './use-instance-variables';
-import { inlineScript, inlineUserTaskData } from '@proceed/user-task-helper';
 
 export default function ProcessDeploymentView({
   processId,
@@ -117,7 +116,7 @@ export default function ProcessDeploymentView({
     };
   }, [deploymentInfo, selectedVersionId, selectedInstanceId]);
 
-  const { variableDefinitions, variables } = useInstanceVariables({
+  const { variableDefinitions } = useInstanceVariables({
     process: deploymentInfo,
     version: currentVersion,
   });
@@ -194,14 +193,6 @@ export default function ProcessDeploymentView({
                         if (typeof startForm !== 'string') return startForm;
 
                         if (startForm) {
-                          const mappedVariables = Object.fromEntries(
-                            variables
-                              .filter((variable) => variable.value !== undefined)
-                              .map((variable) => [variable.name, variable.value]),
-                          );
-                          startForm = inlineScript(startForm, '', '', variableDefinitions);
-                          startForm = inlineUserTaskData(startForm, mappedVariables, []);
-
                           setStartForm(startForm);
                         } else {
                           return startInstance(versionId);
@@ -364,19 +355,13 @@ export default function ProcessDeploymentView({
 
         <StartFormModal
           html={startForm}
+          variableDefinitions={variableDefinitions}
           onSubmit={async (submitVariables) => {
             const versionId = getLatestDeployment(deploymentInfo).versionId;
 
-            const mappedVariables: Record<string, { value: any }> = {};
-
-            // set the values of variables to the ones coming from the start form
-            Object.entries(submitVariables).forEach(
-              ([key, value]) => (mappedVariables[key] = { value }),
-            );
-
             // start the instance with the initial variable values from the start form
             await wrapServerCall({
-              fn: () => startInstance(versionId, mappedVariables),
+              fn: () => startInstance(versionId, submitVariables),
 
               onSuccess: async (instanceId) => {
                 await refetch();

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/deployments-view.tsx

@@ -9,13 +9,13 @@ import DeploymentsList from './deployments-list';
 import { Folder } from '@/lib/data/folder-schema';
 import { Process, ProcessMetadata } from '@/lib/data/process-schema';
 import { useEnvironment } from '@/components/auth-can';
-import { processHasChangesSinceLastVersion } from '@/lib/data/processes';
+import { processUnchangedFromBasedOnVersion } from '@/lib/data/processes';
 import type { DeployedProcessInfo } from '@/lib/engines/deployment';
 import { useRouter } from 'next/navigation';
 import { deployProcess as serverDeployProcess } from '@/lib/engines/server-actions';
 import { wrapServerCall } from '@/lib/wrap-server-call';
 import { SpaceEngine } from '@/lib/engines/machines';
-import { userError } from '@/lib/user-error';
+import { isUserErrorResponse, userError } from '@/lib/user-error';
 import { removeDeployment as serverRemoveDeployment } from '@/lib/engines/server-actions';
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -58,22 +58,29 @@ const DeploymentsView = ({
     startCheckingProcessVersion(async () => {
       wrapServerCall({
         fn: async () => {
-          const processChangedSinceLastVersion = await processHasChangesSinceLastVersion(
+          const unchangedVersion = await processUnchangedFromBasedOnVersion(
             process.id,
             space.spaceId,
           );
-          if (typeof processChangedSinceLastVersion === 'object')
-            return processChangedSinceLastVersion;
+          if (isUserErrorResponse(unchangedVersion)) {
+            return unchangedVersion;
+          }
 
-          let latestVersion = process.versions[0];
-          for (const version of process.versions)
-            if (+version.createdOn > +latestVersion.createdOn) latestVersion = version;
+          let versionToUse = unchangedVersion;
 
-          if (!latestVersion) throw userError('Process has no versions').error;
+          if (!versionToUse) {
+            let latestVersion = process.versions[0];
+            for (const version of process.versions)
+              if (+version.createdOn > +latestVersion.createdOn) latestVersion = version;
+
+            versionToUse = latestVersion.id;
+          }
+
+          if (!versionToUse) throw userError('Process has no versions').error;
 
           const res = await serverDeployProcess(
             process.id,
-            latestVersion.id,
+            versionToUse,
             space.spaceId,
             'dynamic',
             forceEngine,

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/modeler-toolbar.tsx

@@ -1,11 +1,10 @@
 import { ComponentProps, use, useEffect, useState } from 'react';
 import { is as bpmnIs } from 'bpmn-js/lib/util/ModelUtil';
-import { App, Tooltip, Button, Space, Select, SelectProps, Divider } from 'antd';
+import { Tooltip, Button, Space, Divider, Select, SelectProps } from 'antd';
 import { Toolbar, ToolbarGroup } from '@/components/toolbar';
 import styles from './modeler-toolbar.module.scss';
 import Icon, {
   InfoCircleOutlined,
-  PlusOutlined,
   UndoOutlined,
   RedoOutlined,
   ArrowUpOutlined,
@@ -17,15 +16,13 @@ import { PiDownloadSimple } from 'react-icons/pi';
 import { SvgGantt, SvgXML } from '@/components/svg';
 import PropertiesPanel from './properties-panel';
 import useModelerStateStore from './use-modeler-state-store';
-import { useRouter, useSearchParams, usePathname } from 'next/navigation';
-import VersionCreationButton from '@/components/version-creation-button';
+import { useRouter, useSearchParams } from 'next/navigation';
 import useMobileModeler from '@/lib/useMobileModeler';
-import { createVersion, updateProcess, getProcessBPMN } from '@/lib/data/processes';
+import { updateProcess } from '@/lib/data/processes';
 import { Root } from 'bpmn-js/lib/model/Types';
 import { useEnvironment } from '@/components/auth-can';
 import { ShareModal } from '@/components/share-modal/share-modal';
 import { useAddControlCallback } from '@/lib/controls-store';
-import { spaceURL } from '@/lib/utils';
 import { isUserErrorResponse } from '@/lib/user-error';
 import useTimelineViewStore from '@/lib/use-timeline-view-store';
 import { handleOpenDocumentation } from '../../processes-helper';
@@ -42,7 +39,8 @@ import { Element } from 'bpmn-js/lib/model/Types';
 import { ScriptTaskEditorEnvironment } from './script-task-editor/script-task-editor-environment';
 import { Folder } from '@/lib/data/folder-schema';
 
-const LATEST_VERSION = { id: '-1', name: 'Latest Version', description: '' };
+import VersionAndDeploy, { LATEST_VERSION } from './version-and-deploy-section';
+import { spaceURL } from '@/lib/utils';
 
 type ModelerToolbarProps = {
   process: Process;
@@ -60,13 +58,11 @@ const ModelerToolbar = ({
 }: ModelerToolbarProps) => {
   const processId = process.id;
 
-  const router = useRouter();
-  const pathname = usePathname();
   const environment = useEnvironment();
-  const app = App.useApp();
-  const message = app.message;
   const env = use(EnvVarsContext);
 
+  const router = useRouter();
+
   const [showUserTaskEditor, setShowUserTaskEditor] = useState(false);
 
   const [showPropertiesPanel, setShowPropertiesPanel] = useState(false);
@@ -170,41 +166,6 @@ const ModelerToolbar = ({
 
   const selectedVersionId = query.get('version');
 
-  const createProcessVersion = async (values: {
-    versionName: string;
-    versionDescription: string;
-  }) => {
-    try {
-      // Ensure latest BPMN on server.
-      const xml = (await modeler?.getXML()) as string;
-      if (isUserErrorResponse(await updateProcess(processId, environment.spaceId, xml)))
-        throw new Error();
-
-      if (
-        isUserErrorResponse(
-          await createVersion(
-            values.versionName,
-            values.versionDescription,
-            processId,
-            environment.spaceId,
-          ),
-        )
-      )
-        throw new Error();
-
-      // reimport the new version since the backend has added versionBasedOn information that would
-      // be overwritten by following changes
-      const newBpmn = await getProcessBPMN(processId, environment.spaceId);
-      if (newBpmn && typeof newBpmn === 'string') {
-        await modeler?.loadBPMN(newBpmn);
-      }
-
-      router.refresh();
-      message.success('Version Created');
-    } catch (_) {
-      message.error('Something went wrong');
-    }
-  };
   const handlePropertiesPanelToggle = () => {
     setShowPropertiesPanel(!showPropertiesPanel);
   };
@@ -316,15 +277,9 @@ const ModelerToolbar = ({
                   label: name,
                 }))}
             />
+            <VersionAndDeploy process={process} />
             {!showMobileView && LATEST_VERSION.id === selectedVersion.id && (
               <>
-                <Tooltip title="Release a new Version of the Process">
-                  <VersionCreationButton
-                    icon={<PlusOutlined />}
-                    createVersion={createProcessVersion}
-                    disabled={isListView}
-                  ></VersionCreationButton>
-                </Tooltip>
                 <Tooltip title="Undo">
                   <Button icon={<UndoOutlined />} onClick={handleUndo} disabled={!canUndo}></Button>
                 </Tooltip>

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/modeler.tsx

@@ -58,10 +58,6 @@ const Modeler = ({ versionName, process, folder, inEditing, ...divProps }: Model
   const setFullScreen = useModelerStateStore((state) => state.setFullScreen);
   const setIsExecutable = useModelerStateStore((state) => state.setIsExecutable);
 
-  useEffect(() => {
-    setIsExecutable(process.executable || false);
-  }, [process]);
-
   const { isListView, processContextPath } = useProcessView();
 
   /// Derived State
@@ -167,7 +163,6 @@ const Modeler = ({ versionName, process, folder, inEditing, ...divProps }: Model
   }, [process.id]);
 
   useEffect(() => {
-    console.log('modeler changed');
     setModeler(modeler.current);
 
     setCanUndo(false);
@@ -210,7 +205,6 @@ const Modeler = ({ versionName, process, folder, inEditing, ...divProps }: Model
 
   const onRootChange = useCallback<Required<BPMNCanvasProps>['onRootChange']>(
     async (root) => {
-      console.log('root changed');
       setRootElement(root);
       // When the current root (the visible layer [the main
       // process/collaboration or some collapsed subprocess]) is changed to a
@@ -275,7 +269,6 @@ const Modeler = ({ versionName, process, folder, inEditing, ...divProps }: Model
     // (unless the subprocess does not exist anymore because the process
     // changed)
     setLoaded(true);
-    console.log('onLoaded');
     if (subprocessId && modeler.current) {
       const canvas = modeler.current.getCanvas();
       const subprocessPlane = canvas
@@ -289,6 +282,13 @@ const Modeler = ({ versionName, process, folder, inEditing, ...divProps }: Model
         );
       }
     }
+
+    // set the executable value for the currently open version
+    const root = modeler.current?.getCurrentRoot();
+    if (root && bpmnIs(root, 'bpmn:Process')) {
+      const executable = root.businessObject.isExecutable;
+      setIsExecutable(executable || false);
+    }
   }, [messageApi, subprocessId]);
 
   const onShapeRemove = useCallback<Required<BPMNCanvasProps>['onShapeRemove']>((element) => {

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/script-task-editor/script-task-editor.tsx

@@ -1,14 +1,6 @@
 'use client';
 
-import {
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  forwardRef,
-} from 'react';
+import { useEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';
 import dynamic from 'next/dynamic';
 import {
   Button,
@@ -275,10 +267,15 @@ const ScriptEditor = forwardRef<ScriptEditorRef, ScriptEditorProps>(
                   <IoExtensionPuzzleOutline style={{ transform: 'translateY(2px)' }} size={15} />
                 }
                 onClick={() => setSelectedEditor('blockly')}
+                disabled={!canEdit}
               >
                 No-Code Block Editor
               </Button>
-              <Button icon={<FormOutlined size={15} />} onClick={() => setSelectedEditor('JS')}>
+              <Button
+                icon={<FormOutlined size={15} />}
+                onClick={() => setSelectedEditor('JS')}
+                disabled={!canEdit}
+              >
                 JavaScript Editor
               </Button>
             </Space>