Improve Variables Tab Access and Bottom Panel Controls

CHANGELOG.md

@@ -8,7 +8,10 @@ ___Note:__ Yet to be released changes appear here._
 
 ### General
 
-* `FEAT`: show update button if update available ([#4606](https://github.com/camunda/camunda-modeler/pull/4606)) 
+* `FEAT`: show update button if update available ([#4606](https://github.com/camunda/camunda-modeler/pull/4606))
+* `FEAT`: make variables tab accessible via the application footer ([#4516](https://github.com/camunda/camunda-modeler/issues/4516))
+* `FEAT`: make bottom panel toggleable via keyboard ([#4516](https://github.com/camunda/camunda-modeler/issues/4516))
+* `CHORE`: remove reset properties panel menu item ([#4516](https://github.com/camunda/camunda-modeler/issues/4516))
 * `FIX`: correct default extension used when saving Camunda 8 BPMN diagrams ([#4661](https://github.com/camunda/camunda-modeler/issues/4661))
 * `DEPS`: update to Electron 33 ([#4609](https://github.com/camunda/camunda-modeler/pull/4609))
 

app/lib/menu/menu-builder.js

@@ -462,6 +462,10 @@ class MenuBuilder {
     });
 
     submenuTemplate.push({
+      label: 'Toggle Bottom Panel',
+      accelerator: 'CommandOrControl+B',
+      click: () => app.emit('menu:action', 'toggle-panel')
+    }, {
       label: 'Toggle DevTools',
       accelerator: 'F12',
       click: (_, browserWindow) => {

client/src/app/App.js

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

client/src/app/__tests__/AppSpec.js

@@ -2114,6 +2114,92 @@ 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('toggle-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('toggle-panel');
+
+          // then
+          expect(app.state.layout).to.eql({
+            panel: {
+              open: false
+            }
+          });
+        });
+
+
+        it('should preserve state when reopened after being closed', function() {
+
+          // given
+          const { app } = createApp();
+
+          app.setLayout({
+            panel: {
+              open: true,
+              tab: 'variable-outline'
+            }
+          });
+
+          // when
+
+          // close
+          app.triggerAction('toggle-panel');
+
+          // open
+          app.triggerAction('toggle-panel');
+
+
+          // then
+          expect(app.state.layout).to.eql({
+            panel: {
+              open: true,
+              tab: 'variable-outline'
+            }
+          });
+        });
+
+      });
+
+    });
+
   });
 
 

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/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

@@ -691,17 +691,6 @@ export class BpmnEditor extends CachedComponent {
       return this.handleLayoutChange(newLayout);
     }
 
-    if (action === 'resetProperties') {
-      const newLayout = {
-        propertiesPanel: {
-          ...PROPERTIES_PANEL_DEFAULT_LAYOUT,
-          open: true
-        }
-      };
-
-      return this.handleLayoutChange(newLayout);
-    }
-
     if (action === 'zoomIn') {
       action = 'stepZoom';
 

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

@@ -1865,29 +1865,6 @@ describe('<BpmnEditor>', function() {
       });
     });
 
-
-    it('should reset properties panel', async function() {
-
-      // given
-      const onLayoutChangedSpy = sinon.spy();
-      const {
-        instance
-      } = await renderEditor(diagramXML, {
-        onLayoutChanged: onLayoutChangedSpy
-      });
-
-      // when
-      instance.triggerAction('resetProperties');
-
-      // then
-      expect(onLayoutChangedSpy).to.be.calledOnceWith({
-        propertiesPanel: {
-          open: true,
-          width: 280
-        }
-      });
-    });
-
   });
 
 

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

@@ -45,9 +45,5 @@ function getPropertiesPanelEntries({ propertiesPanel }) {
     label: 'Toggle Properties Panel',
     accelerator: 'CommandOrControl+P',
     action: 'toggleProperties'
-  }, {
-    label: 'Reset Properties Panel',
-    accelerator: 'CommandOrControl+Shift+P',
-    action: 'resetProperties'
   } ] : [];
 }