From f068ac0b0cea82ea868c45abd256b85b76d3e1c6 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Mon, 4 Mar 2024 10:13:59 -0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20remove=20usage=20of?=
 =?UTF-8?q?=20route-action=20for=20app=20route=20(#2135)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12615
---
 ui/admin/app/controllers/application.js | 64 ++++++++++++++++++++++++-
 ui/admin/app/routes/application.js      | 52 +++++---------------
 ui/admin/app/templates/application.hbs  |  8 ++--
 3 files changed, 80 insertions(+), 44 deletions(-)

diff --git a/ui/admin/app/controllers/application.js b/ui/admin/app/controllers/application.js
index 98edaf4c3..0734495e3 100644
--- a/ui/admin/app/controllers/application.js
+++ b/ui/admin/app/controllers/application.js
@@ -5,11 +5,73 @@
 
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { getOwner } from '@ember/application';
+import { action } from '@ember/object';
 
 export default class ApplicationController extends Controller {
   // =services
 
   @service session;
-  @service flashMessages;
+  @service features;
   @service featureEdition;
+  @service flashMessages;
+
+  // =actions
+
+  /**
+   * Delegates invalidation to the session service.
+   */
+  @action
+  invalidateSession() {
+    this.session.invalidate();
+  }
+
+  /**
+   * Applies the specified color theme to the root ember element.
+   * @param {string} theme - "light", "dark", or nullish (system default)
+   */
+  @action
+  toggleTheme(theme) {
+    const rootElementSelector = getOwner(this).rootElement;
+    const rootEl = getOwner(this)
+      .lookup('service:-document')
+      .querySelector(rootElementSelector);
+    this.session.set('data.theme', theme);
+    switch (theme) {
+      case 'light':
+        rootEl.classList.add('rose-theme-light');
+        rootEl.classList.remove('rose-theme-dark');
+        break;
+      case 'dark':
+        rootEl.classList.add('rose-theme-dark');
+        rootEl.classList.remove('rose-theme-light');
+        break;
+      default:
+        rootEl.classList.remove('rose-theme-dark');
+        rootEl.classList.remove('rose-theme-light');
+    }
+  }
+
+  /**
+   * Switches to specified edition.
+   * Options are oss, enterprise, and hcp.
+   * @param {string} edition
+   */
+  @action
+  toggleEdition(edition) {
+    this.featureEdition.setEdition(edition);
+  }
+
+  /**
+   *
+   * @param {string} feature
+   */
+  @action
+  toggleFeature(feature) {
+    if (this.features.isEnabled(feature)) {
+      this.features.disable(feature);
+    } else {
+      this.features.enable(feature);
+    }
+  }
 }
diff --git a/ui/admin/app/routes/application.js b/ui/admin/app/routes/application.js
index d17504028..7177b17f9 100644
--- a/ui/admin/app/routes/application.js
+++ b/ui/admin/app/routes/application.js
@@ -19,8 +19,6 @@ export default class ApplicationRoute extends Route {
   @service confirm;
   @service router;
   @service intl;
-  @service features;
-  @service featureEdition;
 
   // =attributes
 
@@ -64,33 +62,6 @@ export default class ApplicationRoute extends Route {
     this.toggleTheme(theme);
   }
 
-  // =actions
-
-  /**
-   * Delegates invalidation to the session service.
-   */
-  @action
-  invalidateSession() {
-    this.session.invalidate();
-  }
-
-  /**
-   * Invalidates the session if a 401 error occurs and returns false to
-   * prevent further error handling.
-   * Returns true in all other cases, allowing error handling to occur (such
-   * as displaying the `error.hbs` template, if one exists).
-   * @param {Error} e
-   */
-  @action
-  error(e) {
-    const isUnauthenticated = A(e?.errors)?.[0]?.isUnauthenticated;
-    if (isUnauthenticated) {
-      this.session.invalidate();
-      return false;
-    }
-    return true;
-  }
-
   /**
    * Applies the specified color theme to the root ember element.
    * @param {string} theme - "light", "dark", or nullish (system default)
@@ -117,17 +88,20 @@ export default class ApplicationRoute extends Route {
     }
   }
 
+  /**
+   * Invalidates the session if a 401 error occurs and returns false to
+   * prevent further error handling.
+   * Returns true in all other cases, allowing error handling to occur (such
+   * as displaying the `error.hbs` template, if one exists).
+   * @param {Error} e
+   */
   @action
-  toggleEdition(edition) {
-    this.featureEdition.setEdition(edition);
-  }
-
-  @action
-  toggleFeature(feature) {
-    if (this.features.isEnabled(feature)) {
-      this.features.disable(feature);
-    } else {
-      this.features.enable(feature);
+  error(e) {
+    const isUnauthenticated = A(e?.errors)?.[0]?.isUnauthenticated;
+    if (isUnauthenticated) {
+      this.session.invalidate();
+      return false;
     }
+    return true;
   }
 }
diff --git a/ui/admin/app/templates/application.hbs b/ui/admin/app/templates/application.hbs
index 8bd7a7574..54074edab 100644
--- a/ui/admin/app/templates/application.hbs
+++ b/ui/admin/app/templates/application.hbs
@@ -27,7 +27,7 @@
             </dropdown.link>
             <dropdown.separator />
 
-            <dropdown.button {{on 'click' (route-action 'invalidateSession')}}>
+            <dropdown.button {{on 'click' this.invalidateSession}}>
               {{t 'actions.deauthenticate'}}
             </dropdown.button>
 
@@ -41,7 +41,7 @@
                     this.session.data.theme
                     'system-default-theme'
                   }}
-                  @changed={{route-action 'toggleTheme'}}
+                  @changed={{this.toggleTheme}}
                   as |radioGroup|
                 >
                   <dropdown.item>
@@ -83,7 +83,7 @@
                   <form.radioGroup
                     @name='edition'
                     @selectedValue={{this.featureEdition.edition}}
-                    @changed={{route-action 'toggleEdition'}}
+                    @changed={{this.toggleEdition}}
                     as |radioGroup|
                   >
                     {{#each this.featureEdition.editions as |edition|}}
@@ -105,7 +105,7 @@
                       <form.checkbox
                         @label={{feature}}
                         @checked={{feature-flag feature}}
-                        @onChange={{route-action 'toggleFeature' feature}}
+                        @onChange={{fn this.toggleFeature feature}}
                       />
                     </dropdown.item>
                   {{/each}}