feat(cloud-bpmn): add variable outline tab

related to #4267

client/package.json

@@ -13,6 +13,7 @@
     "@bpmn-io/form-js": "^1.9.0",
     "@bpmn-io/properties-panel": "^3.23.0",
     "@bpmn-io/replace-ids": "^0.2.0",
+    "@bpmn-io/variable-outline": "1.0.0",
     "@camunda/execution-platform": "^0.3.2",
     "@camunda/form-linting": "^0.16.0",
     "@camunda/form-playground": "^0.15.0",

client/src/app/panel/tabs/linting/LintingTab.js

@@ -54,7 +54,7 @@ export default function LintingTab(props) {
       id="linting"
       label="Problems"
       layout={ layout }
-      priority={ 1 }>
+      priority={ 10 }>
       { reports.length
         ? null
         : (

client/src/app/panel/tabs/log/LogTab.js

@@ -119,7 +119,7 @@ export default class LogTab extends PureComponent {
         <Fill slot="bottom-panel"
           id="log"
           label="Output"
-          priority={ 2 }
+          priority={ 20 }
           actions={
             [
               {

client/src/app/panel/tabs/variable-outline/VariableOutlineTab.js

@@ -0,0 +1,37 @@
+/**
+ * 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 from 'react';
+
+import VariableOutline from '@bpmn-io/variable-outline';
+import '@bpmn-io/variable-outline/dist/style.css';
+
+import { Fill } from '../../../slot-fill';
+
+
+export default function VariableTab(props) {
+  const {
+    layout = {},
+    injector,
+    id
+  } = props;
+
+  return <>
+    <Fill slot="bottom-panel"
+      id="variable-outline"
+      label="Variables"
+      layout={ layout }
+      priority={ 5 }>
+      <div className="cds--g10" style={ { height: '100%' } }>
+        <VariableOutline injector={ injector } key={ id } />
+      </div>
+    </Fill>
+  </>;
+}

client/src/app/tabs/cloud-bpmn/BpmnEditor.js

@@ -28,6 +28,8 @@ import {
 
 import PropertiesPanelContainer, { DEFAULT_LAYOUT as PROPERTIES_PANEL_DEFAULT_LAYOUT } from '../../resizable-container/PropertiesPanelContainer';
 
+import VariableTab from '../../panel/tabs/variable-outline/VariableOutlineTab';
+
 import BpmnModeler from './modeler';
 
 import { active as isInputActive } from '../../../util/dom/isInput';
@@ -788,6 +790,11 @@ export class BpmnEditor extends CachedComponent {
           engineProfile={ engineProfile }
           onChange={ (engineProfile) => this.engineProfile.set(engineProfile) } />
         }
+
+        <VariableTab
+          id={ this.props.id }
+          layout={ layout }
+          injector={ this.getModeler().get('injector') } />
       </div>
     );
   }

client/src/app/tabs/cloud-bpmn/__tests__/BpmnEditorSpec.js

@@ -51,6 +51,7 @@ import {
 } from '../../getEditMenu';
 
 import { SlotFillRoot } from '../../../slot-fill';
+import Panel from '../../../panel/Panel';
 
 import Flags, { ENABLE_NEW_CONTEXT_PAD } from '../../../../util/Flags';
 
@@ -2052,6 +2053,18 @@ describe('cloud-bpmn - <BpmnEditor>', function() {
 
   });
 
+
+  describe('Bottom Panel', function() {
+
+    it('should show variable tab', async function() {
+      const { wrapper } = await renderEditor(diagramXML);
+
+      // then
+      expect(wrapper.find('.panel__link').at(0).find('.panel__link-label').text()).to.equal('Variables');
+    });
+
+  });
+
 });
 
 
@@ -2147,6 +2160,7 @@ function WrappedEditor(props) {
   return (
     <SlotFillRoot>
       <TestEditor { ...props } />
+      <Panel layout={ props.layout } />
     </SlotFillRoot>
   );
 }

client/test/mocks/bpmn-js/Modeler.js

@@ -114,6 +114,9 @@ export default class Modeler {
 
   _getDefaultModules(options = {}) {
     return {
+      injector: {
+        get() {}
+      },
       eventBus: {
         fire() {}
       },