Improve variables tab integration

client/src/app/App.js

@@ -1945,6 +1945,11 @@ export class App extends PureComponent {
       return this.emitWithTab(type, activeTab, payload);
     }
 
+    if (action === 'open-bottom-panel') {
+      const { panel } = this.state.layout;
+      return panel.open ? this.closePanel() : this.openPanel();
+    }
+
     const tab = this.tabRef.current;
 
     return tab.triggerAction(action, options);

client/src/app/__tests__/AppSpec.js

@@ -2085,6 +2085,60 @@ describe('<App>', function() {
 
     });
 
+    describe('bottom-panel', function() {
+
+      describe('#triggerAction', function() {
+
+        it('should open', function() {
+
+          // given
+          const { app } = createApp();
+
+          app.setLayout({
+            panel: {
+              open: false,
+            }
+          });
+
+          // when
+          app.triggerAction('open-bottom-panel');
+
+          // then
+          expect(app.state.layout).to.eql({
+            panel: {
+              open: true,
+              tab: 'log'
+            }
+          });
+        });
+
+
+        it('should close', function() {
+
+          // given
+          const { app } = createApp();
+
+          app.setLayout({
+            panel: {
+              open: true,
+            }
+          });
+
+          // when
+          app.triggerAction('open-bottom-panel');
+
+          // then
+          expect(app.state.layout).to.eql({
+            panel: {
+              open: false
+            }
+          });
+        });
+
+      });
+
+    });
+
   });
 
 

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 { 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 @@
         <VariableOutline injector={ injector } key={ id } />
       </div>
     </Fill>
+
+    <VariableOutlineStatusBarItem
+      layout={ layout }
+      onToggle={ onToggle } />
   </>;
 }

client/src/app/panel/tabs/variable-outline/__tests__/VariableOutlineStatusBarItemSpec.js

@@ -0,0 +1,113 @@
+/**
+ * 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.
+ */
+
+/* global sinon */
+
+import React from 'react';
+
+import { mount } from 'enzyme';
+
+import {
+  SlotFillRoot,
+  Slot
+} from '../../../../slot-fill';
+
+import VariableOutlineStatusBarItem from '../VariableOutlineStatusBarItem';
+
+const spy = sinon.spy;
+
+
+describe('VariableOutlineStatusBarItem', function() {
+
+  it('should render', function() {
+
+    // when
+    const wrapper = renderVariableOutlineStatusBarItem();
+
+    // then
+    expect(wrapper.find(VariableOutlineStatusBarItem).exists()).to.be.true;
+  });
+
+
+  describe('toggle', function() {
+
+    it('should be active (open)', function() {
+
+      // when
+      const wrapper = renderVariableOutlineStatusBarItem({
+        layout: {
+          panel: {
+            open: true,
+            tab: 'variable-outline'
+          }
+        }
+      });
+
+      // then
+      expect(wrapper.find('.btn').hasClass('btn--active')).to.be.true;
+    });
+
+
+    it('should not be active (closed)', function() {
+
+      // when
+      const wrapper = renderVariableOutlineStatusBarItem();
+
+      // then
+      expect(wrapper.find('.btn').hasClass('btn--active')).to.be.false;
+    });
+
+
+    it('should call callback on toggle', function() {
+
+      // given
+      const onToggleSpy = spy();
+
+      const wrapper = renderVariableOutlineStatusBarItem({
+        onToggle: onToggleSpy
+      });
+
+      // when
+      wrapper.find('.btn').simulate('click');
+
+      // then
+      expect(onToggleSpy).to.have.been.calledOnce;
+    });
+
+  });
+
+});
+
+
+// helpers //////////
+
+const defaultLayout = {
+  panel: {
+    open: false,
+    tab: 'variable-outline'
+  }
+};
+
+
+function renderVariableOutlineStatusBarItem(options = {}) {
+  const {
+    layout = defaultLayout,
+    onToggle
+  } = options;
+
+  return mount(
+    <SlotFillRoot>
+      <Slot name="status-bar__file" />
+      <VariableOutlineStatusBarItem
+        layout={ layout }
+        onToggle={ onToggle } />
+    </SlotFillRoot>
+  );
+}

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

@@ -466,7 +466,8 @@ export class BpmnEditor extends CachedComponent {
       setColor: !!selectionLength,
       spaceTool: !inputActive,
       undo: commandStack.canUndo(),
-      zoom: true
+      zoom: true,
+      bottomPanel: true
     };
 
     // ensure backwards compatibility

client/src/app/tabs/bpmn/getBpmnWindowMenu.js

@@ -11,7 +11,8 @@
 export default function getBpmnWindowMenu(state) {
   return [
     ...getZoomEntries(state),
-    ...getPropertiesPanelEntries(state)
+    ...getPropertiesPanelEntries(state),
+    ...getBottomPanelEntries(state)
   ];
 }
 
@@ -51,3 +52,12 @@ function getPropertiesPanelEntries({ propertiesPanel }) {
     action: 'resetProperties'
   } ] : [];
 }
+
+function getBottomPanelEntries({ bottomPanel }) {
+  return bottomPanel ? [ {
+    label: 'Toggle Bottom Panel',
+    accelerator: 'CommandOrControl+B',
+    action: 'open-bottom-panel'
+  }
+  ] : [];
+}

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

@@ -432,7 +432,8 @@ export class BpmnEditor extends CachedComponent {
       setColor: !!selectionLength,
       spaceTool: !inputActive,
       undo: commandStack.canUndo(),
-      zoom: true
+      zoom: true,
+      bottomPanel: true
     };
 
     // ensure backwards compatibility
@@ -758,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();
@@ -796,7 +797,8 @@ export class BpmnEditor extends CachedComponent {
         <VariableTab
           id={ this.props.id }
           layout={ layout }
-          injector={ injector } />
+          injector={ injector }
+          onAction={ onAction } />
       </div>
     );
   }