Site overview: Adjust additional code editors

[gavande1]

Related issues

• Fixes STU-387.

Proposed Changes

• Add config for handling additional editors on sites overview section.

Testing Instructions

• Check out this branch
• Select PhpStorm or Cursor editor from preferences
• Make sure Open In... "YOUR SELECTED EDITOR" buttons appear
  
• Click on the button and make sure the editor opens with the site folder selected.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[gavande1]

We have decided to continue with the five listed editors only. Read more: STU-354.

[gavande1]

We don't want to translate the label. So it's fine to keep here as config.

[wojtekn]

Can we make those translatable, but do not translate them by default? See #48 for context.

Also, should we keep the names in sync so we have VS Code in both places instead of Visual Studio Code in one place and VS Code in another?

[gcsecsey]

It seems to me that supportedEditorConfig has the same mappings as supportedEditorNames but it contains more details.

supportedEditorNames has only been used here previously:

studio/src/modules/user-settings/components/editor-picker.tsx

Lines 36 to 42 in 93adc78

	const installedEditors = Object.entries( supportedEditorNames ).filter(
	( [ editor ] ) => installedApps[ editor as keyof typeof installedApps ]
	);
	const uninstalledEditors = Object.entries( supportedEditorNames ).filter(
	( [ editor ] ) => ! installedApps[ editor as keyof typeof installedApps ]
	);

I'd suggest we refactor the usages of supportedEditorNames to use supportedEditorConfig instead, and we can remove supportedEditorNames altogether.

[gavande1]

Thanks for sharing the context. I have added it in 856c0f9

[gcsecsey]

Changes overall look good to me, I have a suggestion to refactor some things.

Functionally it works great, the button label is updated and I can open the project in the selected IDE:

[gcsecsey]

It seems to me that supportedEditorConfig has the same mappings as supportedEditorNames but it contains more details.

supportedEditorNames has only been used here previously:

studio/src/modules/user-settings/components/editor-picker.tsx

Lines 36 to 42 in 93adc78

	const installedEditors = Object.entries( supportedEditorNames ).filter(
	( [ editor ] ) => installedApps[ editor as keyof typeof installedApps ]
	);
	const uninstalledEditors = Object.entries( supportedEditorNames ).filter(
	( [ editor ] ) => ! installedApps[ editor as keyof typeof installedApps ]
	);

I'd suggest we refactor the usages of supportedEditorNames to use supportedEditorConfig instead, and we can remove supportedEditorNames altogether.

[gcsecsey]

Thanks for carrying out the refactoring and adding translations. Changes LGTM and still work great. 🚢