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.

[nikku]

Let's restore the previous bottom panel state (if applicable), once I toggle it open (again). This is standard behavior, and ensures I can temporarily close things, re-open if needed, and end up in the previous setup.

Right now I always end up on the Output tab, which is not desirable.

[abdul99ahad]

Let's restore the previous bottom panel state (if applicable), once I toggle it open (again). This is standard behavior, and ensures I can temporarily close things, re-open if needed, and end up in the previous setup.

Right now I always end up on the Output tab, which is not desirable.

Done. Now, the bottom panel maintained state and re-open the same tab that was previously opened.

[nikku]

Ok, I think we're close to the finish line.

Generally, consider if your code is consistent with what we currently have. Let's follow existing patterns on a best effort basis.

[nikku]

I.e. also from the welcome page.

[abdul99ahad]

All changes are incorporated, and this PR is ready for review. Here’s a summary of the updates:

• Variables Tab: Now accessible via the bottom tab button.
• Toggle Bottom Panel:
  • Added to the application menu.
  • The panel now preserves context when opened/closed.
  • Accessible with the keyboard shortcut Command + B (MacOS) or Ctrl + B (Windows).
• Removed: The “Reset Properties” option from the application menu.

[nikku]

@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', ...);
  
});