Improve Variables Tab Access and Bottom Panel Controls

[abdul99ahad]

Closes #4516

Proposed Changes

Variables Application Menu

Variables Tab Keyboard shortcut

(For Mac OS): Press Command + Shift + V

Variables Bottom Tab

Checklist

To ensure you provided everything we need to look at your PR:

• Brief textual description of the changes present
• Visual demo attached
• Steps to try out present, i.e. using the @bpmn-io/sr tool
• Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

[philippfromme]

We should call this Toggle variables tab

I'd also add Toggle problems tab now that we have the other entry.

[barmac]

I'd suggest that we decide on another key for the shortcut. Ctrl/Cmd+V is the traditional paste shortcut, and in some editors a combination of Cmd+Shift+(Option)+V triggers "paste and match formatting". Why don't we use a letter without strong OS link, e.g. U or M.

Screen.Recording.2024-10-30.at.17.26.31.mov

[nikku]

I'd suggest that we decide on another key for the shortcut. Ctrl/Cmd+V is the traditional paste shortcut, and in some editors a combination of Cmd+Shift+(Option)+V triggers "past and match formatting".

I subscribe to this. CC @lmbateman.

[lmbateman]

I agree that we should stay away from Cmd-V variations. Looks like for many MacOS apps (but not the Desktop Modeler), Cmd-M minimizes the window. Cmd-U is a common shortcut for underline, but since that's a fairly specialized feature, I think Cmd-U will work, and Ctrl-U should be fine for Windows. (Should we add a Cmd-M shortcut?)

[barmac]

BTW the recording I shared displays the vscode shortcuts. I think the Shift usage in that tool is wise as it allows to avoid conflicts. Learning from Cmd+P (print or toggle properties panel 🤡 ).

[philippfromme]

MacOS tests are passing now. Will review.

[philippfromme]

I'd imagine a toggle entry for the bottom panel (we could use Ctrl+B) and (optional) entries for the individual tabs.

[philippfromme]

@abdul99ahad Could you adjust the PR according to my suggestion?

• add Toggle bottom panel entry with Ctrl+B shortcut
• remove Reset properties panel entry (was a workaround created at the time where we had issues with its size, no longer needed)
• decide whether to add individual entries for each tab

[abdul99ahad]

@abdul99ahad Could you adjust the PR according to my suggestion?

• add Toggle bottom panel entry with Ctrl+B shortcut
• remove Reset properties panel entry (was a workaround created at the time where we had issues with its size, no longer needed)
• decide whether to add individual entries for each tab

Okay. Regarding point 3, I think for now, we can add variables tab as individual entry and see in future if users also want Output and Problems tab in application menu.

[nikku]

Regarding point 3, I think for now, we can add variables tab as individual entry and see in future if users also want Output and Problems tab in application menu.

I'd say: Don't add a toggle shortcut for variables panel for now, but in the future automatically open variables tab from various places. Much more important that this is properly wired, i.e. with the FEEL editors.

[philippfromme]

Additionally, adding the individual entries including disabled states is a bit more work since opening a tab doesn't trigger a menu update at the moment. So I'd say let's keep it for later or just don't add them if no one ever asks.

[abdul99ahad]

@abdul99ahad Regarding aa5d66d: The usual pattern is two empty lines separating two specs, separating specs and setup, separating two describes.

We don't add two empty lines between describe and child spec or describe, so this is the standard way of formatting you'll find across 99% of our tests:

describe('foo', function() {

  beforeEach(...);
  
  beforeEach(...);
  
  
  it('first test');
  

  it('second test');
  
  
  describe('nested describe', function() {
    
    describe('deeply nested describe', function() {
      
      it('nested it');
      
    });
    
  });
  
  
  describe('another nested describe', ...);
  
});

Understood. If that's the convention, then I think the test cases are perfectly aligned with the convention.

[abdul99ahad]

Beyond a minor style comment (#4638 (comment)) this still seems to not work as expected:

• What I'd expect is that in any view I'm able to toggle the bottom tabs open and close.
• What I see is that this PR manually registers the action for a subset of our views, so it is not available in forms, welcome page, etc.

Agreed. I assumed it should function like the properties panel, but since the bottom panel is more global, it makes sense to make it universally available. I've implemented the necessary changes, and the bottom panel is now accessible throughout the modeler.

[nikku]

Ok, this works properly now, across all file types. One issue that remains is that we don't properly fall back to another "known tab" when we switch to a view where a particular tab is not present:

This issue, however, can already be reproduced in released versions of the modeler, so not a regression.

[nikku]

I think it is a good solution we ended up building here 👏

[nikku]

Please add an entry to the CHANGELOG, linking to the issue this closes.

[nikku]

Merging with some minor squashes.

[philippfromme]

Question: Did we agree to move the menu entry? I would expect it to be grouped with the Toggle properties panel entry.

[abdul99ahad]

Question: Did we agree to move the menu entry? I would expect it to be grouped with the Toggle properties panel entry.

Initially, it was grouped with Toggle properties panel but that group is mainly for subset of views (BPMN, DMN diagram etc,.). However, since the Bottom Panel is universally available across the entire application, its corresponding menu button needs to be accessible everywhere. Therefore, we’ve decided to place it alongside other universally applicable options in the application menu.

[philippfromme]

Okay, understood. 😃