💡 make variables editable as standalone items

jxnkwlp · Jun 14, 2023 · d977ff6 · d977ff6
1 parent 6c7fa70
commit d977ff6
Show file tree

Hide file tree

Showing 22 changed files with 566 additions and 312 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -9,4 +9,8 @@ indent_size = 2
 end_of_line = crlf
 charset = utf-8
 trim_trailing_whitespace = false
-insert_final_newline = false
+insert_final_newline = false
+
+[*.cs]
+indent_style = space
+indent_size = 4
diff --git a/...Abp.ElsaModule.Application.Contracts/WorkflowDefinitions/IWorkflowDefinitionAppService.cs b/...Abp.ElsaModule.Application.Contracts/WorkflowDefinitions/IWorkflowDefinitionAppService.cs
@@ -14,6 +14,9 @@ public interface IWorkflowDefinitionAppService : ICrudAppService<WorkflowDefinit
     Task<WorkflowDefinitionDto> GetDefinitionAsync(Guid id);
     Task<WorkflowDefinitionDto> UpdateDefinitionAsync(Guid id, WorkflowDefinitionCreateOrUpdateDto input);
 
+    Task<WorkflowVariablesDto> GetVariablesAsync(Guid id);
+    Task<WorkflowVariablesDto> UpdateVariablesAsync(Guid id, WorkflowVariableUpdateDto input);
+
     Task UnPublishAsync(Guid id);
     Task PublishAsync(Guid id);
 

diff --git a/...ind.Abp.ElsaModule.Application.Contracts/WorkflowDefinitions/WorkflowVariableUpdateDto.cs b/...ind.Abp.ElsaModule.Application.Contracts/WorkflowDefinitions/WorkflowVariableUpdateDto.cs
@@ -0,0 +1,8 @@
+using System.Collections.Generic;
+
+namespace Passingwind.Abp.ElsaModule.WorkflowDefinitions;
+
+public class WorkflowVariableUpdateDto
+{
+    public Dictionary<string, object> Variables { get; set; }
+}
diff --git a/...singwind.Abp.ElsaModule.Application.Contracts/WorkflowDefinitions/WorkflowVariablesDto.cs b/...singwind.Abp.ElsaModule.Application.Contracts/WorkflowDefinitions/WorkflowVariablesDto.cs
@@ -0,0 +1,8 @@
+using System.Collections.Generic;
+
+namespace Passingwind.Abp.ElsaModule.WorkflowDefinitions;
+
+public class WorkflowVariablesDto
+{
+    public Dictionary<string, object> Variables { get; set; }
+}
diff --git a/...assingwind.Abp.ElsaModule.Application/WorkflowDefinitions/WorkflowDefinitionAppService.cs b/...assingwind.Abp.ElsaModule.Application/WorkflowDefinitions/WorkflowDefinitionAppService.cs
@@ -456,4 +456,32 @@ public async Task DeleteOwnerAsync(Guid id, Guid userId)
 
         await _workflowPermissionService.RemoveWorkflowOwnerAsync(entity, user);
     }
+
+    public async Task<WorkflowVariablesDto> GetVariablesAsync(Guid id)
+    {
+        var entity = await _workflowDefinitionRepository.GetAsync(id);
+
+        await CheckWorkflowPermissionAsync(entity, ElsaModulePermissions.Definitions.Default);
+
+        return new WorkflowVariablesDto
+        {
+            Variables = entity.Variables,
+        };
+    }
+
+    public async Task<WorkflowVariablesDto> UpdateVariablesAsync(Guid id, WorkflowVariableUpdateDto input)
+    {
+        var entity = await _workflowDefinitionRepository.GetAsync(id);
+
+        await CheckWorkflowPermissionAsync(entity, ElsaModulePermissions.Definitions.CreateOrUpdateOrPublish);
+
+        entity.Variables = input.Variables;
+
+        await _workflowDefinitionRepository.UpdateAsync(entity);
+
+        return new WorkflowVariablesDto
+        {
+            Variables = entity.Variables,
+        };
+    }
 }
diff --git a/src/Passingwind.Abp.ElsaModule.HttpApi/WorkflowDefinitions/WorkflowDefinitionController.cs b/src/Passingwind.Abp.ElsaModule.HttpApi/WorkflowDefinitions/WorkflowDefinitionController.cs
@@ -136,4 +136,16 @@ public Task DeleteOwnerAsync(Guid id, Guid userId)
     {
         return _service.DeleteOwnerAsync(id, userId);
     }
+
+    [HttpGet("{id}/variables")]
+    public Task<WorkflowVariablesDto> GetVariablesAsync(Guid id)
+    {
+        return _service.GetVariablesAsync(id);
+    }
+
+    [HttpPut("{id}/variables")]
+    public Task<WorkflowVariablesDto> UpdateVariablesAsync(Guid id, WorkflowVariableUpdateDto input)
+    {
+        return _service.UpdateVariablesAsync(id, input);
+    }
 }
diff --git a/src/Passingwind.ElsaDesigner/config/config.ts b/src/Passingwind.ElsaDesigner/config/config.ts
@@ -82,14 +82,25 @@ export default defineConfig({
         memo.plugin('monaco-editor-webpack-plugin').use(MonacoWebpackPlugin, [
             {
                 languages: [
-                    'javascript',
                     'json',
+                    'yaml',
+                    'javascript',
                     'typescript',
                     'liquid',
                     'handlebars',
                     'csharp',
                     'sql',
                 ],
+                // customLanguages: [
+                //     {
+                //         label: 'yaml',
+                //         entry: 'monaco-yaml',
+                //         worker: {
+                //             id: 'monaco-yaml/yamlWorker',
+                //             entry: 'monaco-yaml/yaml.worker',
+                //         },
+                //     },
+                // ],
             },
         ]);
         return memo;

diff --git a/src/Passingwind.ElsaDesigner/config/routes.ts b/src/Passingwind.ElsaDesigner/config/routes.ts
@@ -153,6 +153,7 @@
     //     name: 'test',
     //     icon: 'smile',
     //     component: './test',
+    //     access: 'public',
     // },
 
     //

diff --git a/src/Passingwind.ElsaDesigner/package.json b/src/Passingwind.ElsaDesigner/package.json
@@ -59,6 +59,7 @@
         "moment": "^2.29.4",
         "monaco-editor": "^0.34.1",
         "monaco-editor-webpack-plugin": "^7.0.1",
+        "monaco-yaml": "^4.0.4",
         "omit.js": "^2.0.2",
         "rc-menu": "^9.7.2",
         "rc-util": "^5.24.5",

diff --git a/src/Passingwind.ElsaDesigner/src/app.tsx b/src/Passingwind.ElsaDesigner/src/app.tsx
@@ -10,7 +10,7 @@ import Cookies from 'js-cookie';
 import moment from 'moment';
 import * as monaco from 'monaco-editor';
 import type { RequestConfig, RunTimeLayoutConfig } from 'umi';
-import { formatMessage, history, Link } from 'umi';
+import { Link, formatMessage, history } from 'umi';
 import defaultSettings from '../config/defaultSettings';
 import { getAbpApplicationConfiguration } from './services/AbpApplicationConfiguration';
 import type { API } from './services/typings';

diff --git a/src/Passingwind.ElsaDesigner/src/components/MonacoEditor/index.tsx b/src/Passingwind.ElsaDesigner/src/components/MonacoEditor/index.tsx
@@ -13,8 +13,10 @@ type MonacoEditorProps = {
     minimap?: boolean;
     width?: number;
     height?: number;
+    border?: boolean;
     options?: monaco.editor.IStandaloneEditorConstructionOptions;
     onMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+    onValidate?: (markers: monaco.editor.IMarker[]) => void;
 };
 
 const MonacoEditor: React.FC<MonacoEditorProps> = (props) => {
@@ -27,40 +29,49 @@ const MonacoEditor: React.FC<MonacoEditorProps> = (props) => {
         minimap,
         onChange: onValueChange,
         options,
+        border,
         onMount,
+        onValidate,
     } = props;
 
     const handleValueChanged = (value: string) => {
         onValueChange?.(value);
     };
 
+    const handleOnValidate = (markers: monaco.editor.IMarker[]) => {
+        onValidate?.(markers);
+    };
+
     return (
-        <Editor
-            width={width}
-            height={height}
-            path={path}
-            defaultLanguage={language}
-            value={value}
-            options={{
-                minimap: { enabled: minimap ?? true, autohide: true },
-                wordWrap: 'bounded',
-                wordWrapColumn: 1024,
-                automaticLayout: true,
-                autoIndent: 'full',
-                autoClosingBrackets: 'languageDefined',
-                foldingStrategy: 'auto',
-                formatOnPaste: true,
-                foldingImportsByDefault: true,
-                ...options,
-            }}
-            onChange={(v) => {
-                handleValueChanged(v as string);
-            }}
-            onMount={(e, m) => {
-                console.debug('editor mount: ', e.getModel()?.id);
-                onMount?.(e, m);
-            }}
-        />
+        <div className={border ? 'monaco-editor-container' : ''}>
+            <Editor
+                width={width}
+                height={height}
+                path={path}
+                defaultLanguage={language}
+                value={value}
+                options={{
+                    minimap: { enabled: minimap ?? true, autohide: true },
+                    wordWrap: 'bounded',
+                    wordWrapColumn: 1024,
+                    automaticLayout: true,
+                    autoIndent: 'full',
+                    autoClosingBrackets: 'languageDefined',
+                    foldingStrategy: 'auto',
+                    formatOnPaste: true,
+                    foldingImportsByDefault: true,
+                    ...options,
+                }}
+                onChange={(v) => {
+                    handleValueChanged(v as string);
+                }}
+                onMount={(e, m) => {
+                    console.debug('editor mount: ', e.getModel()?.id);
+                    onMount?.(e, m);
+                }}
+                onValidate={handleOnValidate}
+            />
+        </div>
     );
 };
 

diff --git a/src/Passingwind.ElsaDesigner/src/global.less b/src/Passingwind.ElsaDesigner/src/global.less
@@ -59,3 +59,10 @@ ol {
 .ant-pro-card-statistic-status {
     margin-right: 10px;
 }
+
+.monaco-editor-container {
+    position: relative;
+    margin: 0 1px;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+}
diff --git a/src/Passingwind.ElsaDesigner/src/pages/definition/detail.tsx b/src/Passingwind.ElsaDesigner/src/pages/definition/detail.tsx
@@ -2,19 +2,22 @@ import type { API } from '@/services/typings';
 import {
     getWorkflowDefinition,
     getWorkflowDefinitionDefinition,
+    getWorkflowDefinitionVariables,
     getWorkflowDefinitionVersion,
     getWorkflowDefinitionVersions,
+    updateWorkflowDefinitionVariables,
 } from '@/services/WorkflowDefinition';
 import { DownOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Button, Card, Dropdown, Modal, Space, Tag } from 'antd';
+import { Button, Card, Dropdown, Modal, Space, Tag, message } from 'antd';
 import React, { useEffect, useRef } from 'react';
 import { useAccess, useHistory, useIntl, useParams } from 'umi';
 import type { FlowActionType } from '../designer/flow';
 import Flow from '../designer/flow';
 import { conventToGraphData } from '../designer/service';
 import type { IGraphData } from '../designer/type';
 import './detail.less';
+import VariableForm from './variableForm';
 
 const Index: React.FC = () => {
     const history = useHistory();
@@ -35,6 +38,9 @@ const Index: React.FC = () => {
         [],
     );
 
+    const [variableEditModalVisible, setVariableEditModalVisible] = React.useState<boolean>();
+    const [variableData, setVariableData] = React.useState<any>();
+
     const loadVersion = async (id: string, version?: number) => {
         let _data: API.WorkflowDefinitionVersion;
         if (version) _data = await getWorkflowDefinitionVersion(id, version);
@@ -94,6 +100,22 @@ const Index: React.FC = () => {
         setLoading(false);
     };
 
+    const loadVariable = async () => {
+        const loading = message.loading(intl.formatMessage({ id: 'common.dict.loading' }));
+        const result = await getWorkflowDefinitionVariables(id!);
+        loading();
+        setVariableData(result.variables);
+        setVariableEditModalVisible(true);
+    };
+
+    const handleUpdateVariable = async (values: any) => {
+        const loading = message.loading(intl.formatMessage({ id: 'common.dict.loading' }));
+        const result = await updateWorkflowDefinitionVariables(id!, { variables: values });
+        loading();
+        message.success(intl.formatMessage({ id: 'common.dict.save.success' }));
+        return result != null;
+    };
+
     useEffect(() => {
         const sid = params.id ?? '';
         if (!sid) {
@@ -111,13 +133,26 @@ const Index: React.FC = () => {
             extra={
                 <Space>
                     {access['ElsaWorkflow.Definitions.CreateOrUpdateOrPublish'] ? (
-                        <Button
-                            type="primary"
-                            disabled={!data}
-                            onClick={() => history.push(`/designer?id=${data!.id}`)}
-                        >
-                            {intl.formatMessage({ id: 'page.definition.designer' })}
-                        </Button>
+                        <>
+                            <Button
+                                key="designer"
+                                type="primary"
+                                disabled={!data}
+                                onClick={() => history.push(`/designer?id=${data!.id}`)}
+                            >
+                                {intl.formatMessage({ id: 'page.definition.designer' })}
+                            </Button>
+                            <Button
+                                key="variables"
+                                type="default"
+                                disabled={!data}
+                                onClick={() => {
+                                    loadVariable();
+                                }}
+                            >
+                                {intl.formatMessage({ id: 'page.definition.edit.variables' })}
+                            </Button>
+                        </>
                     ) : (
                         <></>
                     )}
@@ -156,6 +191,17 @@ const Index: React.FC = () => {
                     graphData={graphData}
                 />
             </Card>
+
+            {/* variable */}
+            <VariableForm
+                data={variableData}
+                visible={variableEditModalVisible}
+                onVisibleChange={setVariableEditModalVisible}
+                onSubmit={async (value: any) => {
+                    console.debug('update variables', value);
+                    return await handleUpdateVariable(value);
+                }}
+            />
         </PageContainer>
     );
 };

diff --git a/src/Passingwind.ElsaDesigner/src/pages/definition/edit-form-items.tsx b/src/Passingwind.ElsaDesigner/src/pages/definition/edit-form-items.tsx
@@ -1,13 +1,7 @@
 import { WorkflowContextFidelity, WorkflowPersistenceBehavior } from '@/services/enums';
-import ProForm, {
-    ProFormSelect,
-    ProFormSwitch,
-    ProFormText,
-    ProFormTextArea,
-} from '@ant-design/pro-form';
+import { ProFormSelect, ProFormSwitch, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
 import { Tabs } from 'antd';
 import { useIntl } from 'umi';
-import MonacorEditorInput from '../designer/form-input/monacor-editor-input';
 
 const EditFormItems: React.FC = () => {
     const intl = useIntl();
@@ -59,15 +53,6 @@ const EditFormItems: React.FC = () => {
                             </>
                         ),
                     },
-                    {
-                        key: 'variables',
-                        label: intl.formatMessage({ id: 'page.definition.edit.variables' }),
-                        children: (
-                            <ProForm.Item name="variablesString">
-                                <MonacorEditorInput language="json" height={300} />
-                            </ProForm.Item>
-                        ),
-                    },
                     {
                         key: 'Workflow Context',
                         label: intl.formatMessage({ id: 'page.definition.edit.workflowContext' }),

diff --git a/src/Passingwind.ElsaDesigner/src/pages/definition/index.tsx b/src/Passingwind.ElsaDesigner/src/pages/definition/index.tsx
@@ -184,7 +184,7 @@ const Index: React.FC = () => {
         {
             title: intl.formatMessage({ id: 'common.dict.table-action' }),
             valueType: 'option',
-            width: 120,
+            width: 150,
             align: 'center',
             fixed: 'right',
             render: (text, record, _, action) => [