fix: improved file dialog consistency across OSes

[Skaiir]

Closes #2970

Artefacts

• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dialog-consistency/camunda-modeler-file-dialog-consistency-linux-x64.tar.gz
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dialog-consistency/camunda-modeler-file-dialog-consistency-mac.dmg
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dialog-consistency/camunda-modeler-file-dialog-consistency-mac.zip
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dialog-consistency/camunda-modeler-file-dialog-consistency-win-ia32.zip
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dialog-consistency/camunda-modeler-file-dialog-consistency-win-x64.zip

Could you have a look if the appropriate action button is focused and potentially colored in for both the empty file dialog (open an empty file) as well as the saveFileDialog (edit a saved bpmn diagram and close without saving).

@barmac for mac
@MaxTru for linux

Please do not merge until we see it's good for both :D. Windows works as expected.

[github-actions]

This Pull Request targets develop branch, but contains fix commits.

Consider targeting master instead.

[barmac]

I like the new primary button look but the buttons have wrong order on Mac (tested on the linked artifact):

[Skaiir]

@barmac Every time I start thinking I understand how mac does this, I get fooled. What does the dialog look like when you close a modified diagram (changes not saved)

[barmac]

[barmac]

I'll check on my machine how the dialog template looks like in the debugger.

[barmac]

Incredible. It looks OK in the debugger :D

[barmac]

As I found out, the way MacOS handles this is expected. It's part of the Human Interface Guidelines from Apple.

Cf. electron/electron#23276 (comment) and https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/alerts/

Place buttons where people expect them. In general, the button people are most likely to choose should be on the right. The default button should always be on the right. Cancel buttons are typically on the left.

So ✅ from me, nothing to change for Mac specifically.

[MaxTru]

Arch Linux with KDE:
Open Empty

• Please note that even though not visually indicated, the Create is the default option (e.g., just pressing Enter will create the file)
• This is unchanged from the existing implementation if I am not mistaken

Save edited

• Please note that here Cancel (the middle one) is the default option. <=== this appears to be strange to me. Why is cancel in the middle?
• The order is changed from the existing implementation. See how we do it currently:
  

[Skaiir]

@MaxTru This order thing is confusing but this is actually how it should be, see the screenshot of vscode you sent me last month.

However save should be focused, that's a mistake on my part. 😄

The ordering already exists in the codebase, it was done in this ticket: #2300

[Skaiir]

New artifacts (give it 10 minutes I just started the build)

• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dia-consistency/camunda-modeler-file-dia-consistency-linux-x64.tar.gz
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dia-consistency/camunda-modeler-file-dia-consistency-mac.dmg
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dia-consistency/camunda-modeler-file-dia-consistency-mac.zip
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dia-consistency/camunda-modeler-file-dia-consistency-win-ia32.zip
• https://camunda-modeler-on-demand.s3.eu-central-1.amazonaws.com/file-dia-consistency/camunda-modeler-file-dia-consistency-win-x64.zip

[MaxTru]

Works on Linux now (ordering as in my previous comment, but now save is focussed) .

LGTM ✔️

[barmac]

LGTM as well. As a follow-up, we could also improve the activiti conversion dialog:

so that it looks like DMN 1.1 dialog:

[Skaiir]

@barmac Unfortunately that's not exactly possible. If there's only two buttons it'll be horizontally stacked, the only reason the DMN one is vertical is the checkbox 😆

Unless you mean we should also include the checkbox.

[barmac]

This, and also use the defaultId property.