refactored theme switching logic to connect the HDS switcher with the Boundary switcher

Author: didoo

ui/admin/app/controllers/application.js

@@ -14,7 +14,7 @@ import { paramValueFinder } from 'admin/utils/param-value-finder';
 const THEMES = [
   {
     label: 'system',
-    value: 'system-default-theme',
+    value: 'system',
   },
   {
     label: 'light',
@@ -91,6 +91,20 @@ export default class ApplicationController extends Controller {
         rootEl.classList.remove('rose-theme-dark');
         rootEl.classList.remove('rose-theme-light');
     }
+
+    // set the HDS theme too
+    this.hdsTheming.setTheme({
+      theme,
+      onSetTheme: ({ currentTheme, currentMode }) => {
+        // eslint-disable-next-line no-console
+        console.log(
+          `BOUNDARY SWITCHER - onSetTheme invoked`,
+          theme,
+          currentTheme,
+          currentMode,
+        );
+      },
+    });
   }
 
   /**
@@ -131,12 +145,8 @@ export default class ApplicationController extends Controller {
   @action
   onSetTheme({ currentTheme, currentMode }) {
     // eslint-disable-next-line no-console
-    console.log(`onSetTheme invoked`, currentTheme, currentMode);
-  }
-
-  @action
-  removeTheming() {
-    this.hdsTheming.setTheme({ theme: undefined });
+    console.log(`HDS SWITCHER - onSetTheme invoked`, currentTheme, currentMode);
+    this.toggleTheme(currentTheme);
   }
 
   /**

ui/admin/app/templates/application.hbs

@@ -161,22 +161,11 @@
       <AF.Link @href={{(doc-url)}}>{{t 'titles.documentation'}}</AF.Link>
       <AF.LegalLinks />
       <AF.ExtraAfter>
-        {{! template-lint-disable no-inline-styles }}
-        <Hds::ButtonSet style='gap: 4px; align-items: center'>
-          <Hds::ThemeSwitcher
-            @toggleSize='small'
-            @hasDefaultOption={{true}}
-            @onSetTheme={{this.onSetTheme}}
-          />
-          <Hds::Button
-            @color='secondary'
-            @size='small'
-            @icon='trash'
-            @isIconOnly={{true}}
-            @text='Remove theme'
-            {{on 'click' this.removeTheming}}
-          />
-        </Hds::ButtonSet>
+        <Hds::ThemeSwitcher
+          @toggleSize='small'
+          @hasDefaultOption={{true}}
+          @onSetTheme={{this.onSetTheme}}
+        />
       </AF.ExtraAfter>
     </Hds::AppFooter>
   </Frame.Footer>

ui/admin/tests/acceptance/authentication-test.js

@@ -384,10 +384,7 @@ module('Acceptance | authentication', function (hooks) {
     // toggle system default
     await click(commonSelectors.TOGGLE_THEME_DEFAULT);
 
-    assert.strictEqual(
-      currentSession().get('data.theme'),
-      'system-default-theme',
-    );
+    assert.strictEqual(currentSession().get('data.theme'), 'system');
     assert.notOk(getRootElement().classList.contains('rose-theme-light'));
     assert.notOk(getRootElement().classList.contains('rose-theme-dark'));
 
@@ -401,10 +398,7 @@ module('Acceptance | authentication', function (hooks) {
     // toggle system default
     await click(commonSelectors.TOGGLE_THEME_DEFAULT);
 
-    assert.strictEqual(
-      currentSession().get('data.theme'),
-      'system-default-theme',
-    );
+    assert.strictEqual(currentSession().get('data.theme'), 'system');
     assert.notOk(getRootElement().classList.contains('rose-theme-light'));
     assert.notOk(getRootElement().classList.contains('rose-theme-dark'));
   });

ui/admin/tests/helpers/selectors.js

@@ -53,7 +53,7 @@ export const SIDEBAR_SCOPE_DROPDOWN =
 export const SIDEBAR_SCOPE_LINK = (url) =>
   `[data-test-side-nav-scope-dropdown] a[href="${url}"]`;
 export const TOGGLE_THEME_DEFAULT =
-  '[data-test-side-nav-user-dropdown] [value=system-default-theme]';
+  '[data-test-side-nav-user-dropdown] [value=system]';
 export const TOGGLE_THEME_LIGHT =
   '[data-test-side-nav-user-dropdown] [value=light]';
 export const TOGGLE_THEME_DARK =