feat: save config an re-import on config changed

client/package.json

@@ -19,6 +19,8 @@
     "@camunda/form-playground": "^0.18.0",
     "@camunda/improved-canvas": "^1.7.5",
     "@camunda/linting": "^3.29.1",
+    "@camunda/rpa-integration": "0.0.1-alpha.0",
+    "@carbon/icons-react": "^11.53.0",
     "@codemirror/commands": "^6.6.2",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-xml": "^6.1.0",
@@ -55,11 +57,13 @@
     "formik": "2.0.4",
     "ids": "^1.0.0",
     "inherits-browser": "^0.1.0",
+    "install": "^0.13.0",
     "min-dash": "^4.1.1",
     "min-dom": "^4.2.1",
     "mitt": "^3.0.0",
     "mixpanel-browser": "^2.55.1",
     "modeler-moddle": "^0.2.0",
+    "npm": "^10.9.2",
     "p-defer": "^4.0.1",
     "p-series": "^3.0.0",
     "react": "^16.14.0",

client/src/app/TabsProvider.js

@@ -18,6 +18,8 @@ import {
 
 import replaceIds from '@bpmn-io/replace-ids';
 
+import { Bot } from '@carbon/icons-react';
+
 import { Linter as BpmnLinter } from '@camunda/linting';
 import { FormLinter } from '@camunda/form-linting/lib/FormLinter';
 
@@ -147,43 +149,6 @@ export default class TabsProvider {
           return null;
         }
       },
-      'rpa': {
-        name: 'RPA',
-        encoding: 'utf8',
-        exports: {},
-        extensions: [ 'rpa' ],
-        canOpen(file) {
-          return file.name.endsWith('.rpa');
-        },
-        getComponent(options) {
-          return import('./tabs/rpa');
-        },
-        getIcon() {
-          return null;
-        },
-        getInitialContents() {
-          return rpaScript;
-        },
-        getInitialFilename(suffix) {
-          return `script_${suffix}.rpa`;
-        },
-        getHelpMenu() {
-          return [];
-        },
-        getNewFileMenu() {
-          return [ {
-            label: 'RPA script',
-            group: 'Camunda 8',
-            action: 'create-diagram',
-            options: {
-              type: 'rpa'
-            }
-          } ];
-        },
-        getLinter() {
-          return null;
-        }
-      },
       'cloud-bpmn': {
         name: 'BPMN',
         encoding: ENCODING_UTF8,
@@ -521,6 +486,43 @@ export default class TabsProvider {
         getLinter() {
           return formLinter;
         }
+      },
+      'rpa': {
+        name: 'RPA',
+        encoding: 'utf8',
+        exports: {},
+        extensions: [ 'rpa' ],
+        canOpen(file) {
+          return file.name.endsWith('.rpa');
+        },
+        getComponent(options) {
+          return import('./tabs/rpa');
+        },
+        getIcon() {
+          return Bot;
+        },
+        getInitialContents() {
+          return rpaScript;
+        },
+        getInitialFilename(suffix) {
+          return `script_${suffix}.rpa`;
+        },
+        getHelpMenu() {
+          return [];
+        },
+        getNewFileMenu() {
+          return [ {
+            label: 'RPA script',
+            group: 'Camunda 8',
+            action: 'create-diagram',
+            options: {
+              type: 'rpa'
+            }
+          } ];
+        },
+        getLinter() {
+          return null;
+        }
       }
     };
 

client/src/app/tabs/rpa/DeployButton.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import DeployIcon from 'icons/Deploy.svg';
+
+
+import { Overlay } from '../../../shared/ui';
+import { Fill } from '../../slot-fill';
+import classNames from 'classnames';
+
+export default function DeployButton(props) {
+  const editor = props.editor || {};
+
+  const eventBus = editor.eventBus;
+
+  const [ isOpen, setIsOpen ] = useState(false);
+  const buttonRef = useRef();
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const cb = () => {
+      setIsOpen(true);
+    };
+
+    eventBus?.on('dialog.run.open', cb);
+
+    return () => {
+      eventBus?.off('dialog.run.open', cb);
+    };
+  }, [ eventBus ]);
+
+  return <>
+    {
+      <Fill slot="status-bar__file" group="8_deploy" priority={ 10 }>
+        <button
+          ref={ buttonRef }
+          onClick={ () => setIsOpen(!isOpen) }
+          title="Deploy RPA"
+          className={ classNames('btn', { 'btn--active': isOpen }) }
+        >
+          <DeployIcon
+            style={ {
+              width: '24px',
+              height: '24px',
+              fill: 'var(--status-bar-icon-font-color)'
+            } }
+            className="icon"
+          />
+        </button>
+      </Fill>
+    }
+    { isOpen &&
+      <Overlay
+        anchor={ buttonRef.current }
+        onClose={ onClose }
+      >
+        <div style={ { padding: '12px' } }>
+          {/* TODO: Add deploy dialog */}
+          <h1>Coming Soon</h1>
+        </div>
+      </Overlay>
+    }
+  </>;
+}