feat: variable tab at bottom

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

@@ -0,0 +1,34 @@
+/**
+ * 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 classnames from 'classnames';
+
+import { Fill } from '../../../slot-fill';
+
+export default function VariableOutlineStatusBarItem(props) {
+  const {
+    onToggle,
+    layout
+  } = props;
+
+  const { panel = {} } = layout;
+
+  return <Fill slot="status-bar__file" group="9_variables">
+    <button
+      className={ classnames(
+        'btn',
+        { 'btn--active': panel.open && panel.tab === 'variable-outline' }
+      ) }
+      onClick={ onToggle }
+    > Variables </button>
+  </Fill>;
+}

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

@@ -16,14 +16,26 @@ import './VariableOutlineTab.less';
 
 import { Fill } from '../../../slot-fill';
 
+import VariableOutlineStatusBarItem from './VariableOutlineStatusBarItem';
 
 export default function VariableTab(props) {
   const {
     layout = {},
     injector,
-    id
+    id,
+    onAction
   } = props;
 
+  const onToggle = () => {
+    const { panel = {} } = layout;
+
+    if (!panel.open || panel.tab !== 'variable-outline') {
+      onAction('open-panel', { tab: 'variable-outline' });
+    } else if (panel.tab === 'variable-outline') {
+      onAction('close-panel');
+    }
+  };
+
   return <>
     <Fill slot="bottom-panel"
       id="variable-outline"
@@ -34,5 +46,9 @@ export default function VariableTab(props) {
         <VariableOutline injector={ injector } key={ id } />
       </div>
     </Fill>
+
+    <VariableOutlineStatusBarItem
+      layout={ layout }
+      onToggle={ onToggle } />
   </>;
 }

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

@@ -759,7 +759,7 @@ export class BpmnEditor extends CachedComponent {
   render() {
     const engineProfile = this.engineProfile.getCached();
 
-    const { layout } = this.props;
+    const { layout, onAction } = this.props;
 
     const modeler = this.getModeler();
     const imported = modeler.getDefinitions();
@@ -797,7 +797,8 @@ export class BpmnEditor extends CachedComponent {
         <VariableTab
           id={ this.props.id }
           layout={ layout }
-          injector={ injector } />
+          injector={ injector }
+          onAction={ onAction } />
       </div>
     );
   }