feat: removed the non official themes from the UI

Closes #1283

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

Author: Akos Kitta

Diff for: arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx

@@ -24,6 +24,11 @@ import {
 } from '@theia/core/lib/common/i18n/localization';
 import SettingsStepInput from './settings-step-input';
 import { InterfaceScale } from '../../contributions/interface-scale';
+import {
+  userConfigurableThemes,
+  contributedThemeLabel,
+  isBuiltInTheme,
+} from '../../theia/core/theming';
 
 const maxScale = InterfaceScale.ZoomLevel.toPercentage(
   InterfaceScale.ZoomLevel.MAX
@@ -218,11 +223,11 @@ export class SettingsComponent extends React.Component<
             <div className="flex-line">
               <select
                 className="theia-select"
-                value={this.props.themeService.getCurrentTheme().label}
+                value={this.currentThemeLabel}
                 onChange={this.themeDidChange}
               >
-                {this.props.themeService.getThemes().map(({ id, label }) => (
-                  <option key={id} value={label}>
+                {this.themeSelectOptions.map(({ key, label }) => (
+                  <option key={key} value={label}>
                     {label}
                   </option>
                 ))}
@@ -333,6 +338,30 @@ export class SettingsComponent extends React.Component<
     );
   }
 
+  /**
+   * The label of the currently selected theme if it's a built-in one. Otherwise, the value of the `#contributedThemeLabel`.
+   */
+  private get currentThemeLabel(): string {
+    const currentTheme = this.props.themeService.getCurrentTheme();
+    return isBuiltInTheme(currentTheme)
+      ? currentTheme.label
+      : contributedThemeLabel;
+  }
+
+  /**
+   * Returns with an array of built-in theme ID/label pairs.
+   * If the currently selected theme is a 3rd party theme,
+   * an additional element is added to the end of the result
+   * array with the ID of the current 3rd party theme as the
+   * key and the value of the `#contributedThemeLabel` as the label.
+   */
+  private get themeSelectOptions(): { key: string; label: string }[] {
+    return userConfigurableThemes(this.props.themeService).map((theme) => ({
+      key: theme.id,
+      label: isBuiltInTheme(theme) ? theme.label : contributedThemeLabel,
+    }));
+  }
+
   private toSelectOptions(language: string | LanguageInfo): JSX.Element {
     const plain = typeof language === 'string';
     const key = plain ? language : language.languageId;
@@ -610,7 +639,9 @@ export class SettingsComponent extends React.Component<
     event: React.ChangeEvent<HTMLSelectElement>
   ): void => {
     const { selectedIndex } = event.target.options;
-    const theme = this.props.themeService.getThemes()[selectedIndex];
+    const theme = userConfigurableThemes(this.props.themeService)[
+      selectedIndex
+    ];
     if (theme) {
       this.setState({ themeId: theme.id });
       if (this.props.themeService.getCurrentTheme().id !== theme.id) {

Diff for: arduino-ide-extension/src/browser/theia/core/theming.ts

@@ -1,3 +1,8 @@
+import {
+  BuiltinThemeProvider,
+  ThemeService,
+} from '@theia/core/lib/browser/theming';
+import { nls } from '@theia/core/lib/common/nls';
 import type { Theme } from '@theia/core/lib/common/theme';
 import { injectable } from '@theia/core/shared/inversify';
 import { ThemeServiceWithDB as TheiaThemeServiceWithDB } from '@theia/monaco/lib/browser/monaco-indexed-db';
@@ -17,10 +22,64 @@ export namespace ArduinoThemes {
   };
 }
 
+const builtInThemeIds = new Set(
+  [
+    ArduinoThemes.Light,
+    ArduinoThemes.Dark,
+    BuiltinThemeProvider.hcTheme,
+    // TODO: add the HC light theme after Theia 1.36
+  ].map(({ id }) => id)
+);
+export function isBuiltInTheme(theme: Theme | string): boolean {
+  const themeId = typeof theme === 'string' ? theme : theme.id;
+  return builtInThemeIds.has(themeId);
+}
+
+export const contributedThemeLabel = nls.localize(
+  'arduino/theme/contributedTheme',
+  'Contributed Theme'
+);
+
 @injectable()
 export class ThemeServiceWithDB extends TheiaThemeServiceWithDB {
   protected override init(): void {
     this.register(ArduinoThemes.Light, ArduinoThemes.Dark);
     super.init();
   }
 }
+
+interface ThemeProvider {
+  themes(): Theme[];
+  currentTheme(): Theme;
+}
+
+/**
+ * Returns with a list of built-in themes officially supported by IDE2 (https://github.com/arduino/arduino-ide/issues/1283).
+ * If the `currentTheme` is not a built-in one, it will be appended to the array. Built-in themes come first, followed by any contributed one.
+ */
+export function userConfigurableThemes(service: ThemeService): Theme[];
+export function userConfigurableThemes(provider: ThemeProvider): Theme[];
+export function userConfigurableThemes(
+  serviceOrProvider: ThemeService | ThemeProvider
+): Theme[] {
+  const provider =
+    serviceOrProvider instanceof ThemeService
+      ? {
+          currentTheme: () => serviceOrProvider.getCurrentTheme(),
+          themes: () => serviceOrProvider.getThemes(),
+        }
+      : serviceOrProvider;
+  const currentTheme = provider.currentTheme();
+  return provider
+    .themes()
+    .map((theme, index) => ({ ...theme, index }))
+    .filter((theme) => isBuiltInTheme(theme) || currentTheme.id === theme.id)
+    .sort((left, right) => {
+      const leftBuiltIn = isBuiltInTheme(left);
+      const rightBuiltIn = isBuiltInTheme(right);
+      if (leftBuiltIn === rightBuiltIn) {
+        return left.index - right.index;
+      }
+      return leftBuiltIn ? -1 : 1;
+    });
+}

Diff for: arduino-ide-extension/src/test/browser/theming.test.ts

@@ -0,0 +1,81 @@
+import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+const disableJSDOM = enableJSDOM();
+
+import { BuiltinThemeProvider } from '@theia/core/lib/browser/theming';
+import { Theme } from '@theia/core/lib/common/theme';
+import { expect } from 'chai';
+import {
+  ArduinoThemes,
+  isBuiltInTheme,
+  userConfigurableThemes,
+} from '../../browser/theia/core/theming';
+
+disableJSDOM();
+
+const testTheme: Theme = {
+  id: 'testTheme',
+  label: 'Test Theme',
+  type: 'light',
+};
+const anotherTestTheme: Theme = {
+  id: 'anotherTestTheme',
+  label: 'Another Test Theme',
+  type: 'dark',
+};
+
+describe('theming', () => {
+  describe('userConfigurableThemes', () => {
+    it('if the current theme is a built-in theme, the result does not contain any contributed theme', () => {
+      const actual = userConfigurableThemes({
+        themes: () => [
+          ArduinoThemes.Light,
+          ArduinoThemes.Dark,
+          testTheme,
+          BuiltinThemeProvider.hcTheme,
+          anotherTestTheme,
+        ],
+        currentTheme: () => BuiltinThemeProvider.hcTheme,
+      });
+      expect(actual.length).to.be.equal(3);
+      expect(actual[0].id).to.be.equal(ArduinoThemes.Light.id);
+      expect(actual[1].id).to.be.equal(ArduinoThemes.Dark.id);
+      expect(actual[2].id).to.be.equal(BuiltinThemeProvider.hcTheme.id);
+    });
+
+    it('if the currently selected theme is a contributed one, it is the last element in the array', () => {
+      const actual = userConfigurableThemes({
+        themes: () => [
+          BuiltinThemeProvider.hcTheme,
+          ArduinoThemes.Dark,
+          ArduinoThemes.Light,
+          testTheme,
+          anotherTestTheme,
+        ],
+        currentTheme: () => testTheme,
+      });
+      expect(actual.length).to.be.equal(4);
+      expect(actual[0].id).to.be.equal(BuiltinThemeProvider.hcTheme.id);
+      expect(actual[1].id).to.be.equal(ArduinoThemes.Dark.id);
+      expect(actual[2].id).to.be.equal(ArduinoThemes.Light.id);
+      expect(actual[3].id).to.be.equal(testTheme.id);
+    });
+  });
+
+  describe('isBuiltInTheme', () => {
+    (
+      [
+        [BuiltinThemeProvider.lightTheme, false],
+        [BuiltinThemeProvider.darkTheme, false],
+        [BuiltinThemeProvider.hcTheme, true],
+        [ArduinoThemes.Light, true],
+        [ArduinoThemes.Dark, true],
+        [testTheme, false],
+      ] as [Theme, boolean][]
+    ).map(([theme, expected]) =>
+      it(`should${expected ? '' : ' not'} treat '${
+        theme.id
+      }' theme as built-in`, () =>
+        expect(isBuiltInTheme(theme)).to.be.equal(expected))
+    );
+  });
+});