[!信息] 此存储库仍在进行中

@camunda/ rpa- 整合

在Camunda内部编辑和测试RPA文件的UI组件.

安装

npm install @camunda/rpa-integration

使用量

RPA 编辑器

林瑞的出口 RPAEditor。这是主要入口,并创建了摩纳科 编辑 RPA 文件以及给定容器中元数据的属性面板.

编辑器还处理额外的UI组件的状态. 您可以添加一个 workerConfig 确定应使用哪个RPA工人实例进行测试.

import { RPAEditor } from '@camunda/rpa-integration';


const editor = RPACodeEditor({
  container: editorContainer,
  propertiesPanel: {
    container: propertiesContainer
  },
  workerConfig: {
    host: 'localhost',
    port: 36227
  },
  value: `{}`
});

编辑会揭露一个事件Bus. 您可以监听编辑或配置更改. 以下事件被曝光

• model.changed: 文件已更改
• config.changed: 运行时配置已更改
• dialog.run.open: 打开运行的对话框( 参见测试和配置 UI)
• dialog.config.open: 打开配置对话框(参见测试和配置 UI)

测试和运行器配置

此外,编辑器会曝光可以用来渲染调试UI的React组件. 他们 预期 editor 作为道具.

这些组件是建立在 @camunda/design-system, (中文(简体) ), 同伴依赖。 在应用程序中装入其样式一次 :

import '@camunda/design-system/styles.css';

对话框预计将在容器中提供,并增加一个 onSubmit 调用。 这个 在提交表单时使用。 您可以使用这个回调关闭模式或类似元素 .

示例

import React, { useEffect, useRef, useState } from 'react';

import { RunDialog } from '@camunda/rpa-integration';

function TestButton(props) {
  const editor = props.editor;
  const eventBus = editor.eventBus;

  const [ isOpen, setIsOpen ] = useState(false);
  const buttonRef = useRef();

  useEffect(() => {
    const cb = () => {
      setIsOpen(true);
    };

    eventBus.on('dialog.run.open', cb);

    return () => {
      eventBus.off('dialog.run.open', cb);
    };
  }, [ eventBus ]);

  const onClose = () => {
    setIsOpen(false);
  };

  return <>
    <button
      ref={ buttonRef }
      onClick={ () => setIsOpen(!isOpen) }
    >
      Test RPA Script
    </button>

    { isOpen &&
        <div style={ { padding: '12px' } }>
          <RunDialog
            editor={ editor }
            onSubmit={ onClose }
          />
        </div>
    }
  </>;
}