UX: Hide sidebar on 2FA route (#18464)

Internal Ref: /t/75929

app/assets/javascripts/discourse/app/controllers/application.js

@@ -7,13 +7,15 @@ import { action } from "@ember/object";
 const HIDE_SIDEBAR_KEY = "sidebar-hidden";
 
 export default Controller.extend({
-  queryParams: ["enable_sidebar"],
+  queryParams: [{ sidebarQueryParamOverride: "enable_sidebar" }],
 
   showTop: true,
   showFooter: false,
   router: service(),
   showSidebar: false,
-  enable_sidebar: null,
+  sidebarQueryParamOverride: null,
+  sidebarDisabledRouteOverride: false,
+  showSiteHeader: true,
 
   init() {
     this._super(...arguments);
@@ -62,20 +64,25 @@ export default Controller.extend({
   },
 
   @discourseComputed(
-    "enable_sidebar",
+    "sidebarQueryParamOverride",
     "siteSettings.enable_sidebar",
-    "router.currentRouteName",
+    "canDisplaySidebar",
-    "canDisplaySidebar"
+    "sidebarDisabledRouteOverride"
   )
   sidebarEnabled(
     sidebarQueryParamOverride,
     enableSidebar,
-    currentRouteName,
+    canDisplaySidebar,
-    canDisplaySidebar
+    sidebarDisabledRouteOverride
   ) {
     if (!canDisplaySidebar) {
       return false;
     }
+
+    if (sidebarDisabledRouteOverride) {
+      return false;
+    }
+
     if (sidebarQueryParamOverride === "1") {
       return true;
     }
@@ -84,10 +91,6 @@ export default Controller.extend({
       return false;
     }
 
-    if (currentRouteName.startsWith("wizard")) {
-      return false;
-    }
-
     // Always return dropdown on mobile
     if (this.site.mobileView) {
       return false;
@@ -96,11 +99,6 @@ export default Controller.extend({
     return enableSidebar;
   },
 
-  @discourseComputed("router.currentRouteName")
-  showSiteHeader(currentRouteName) {
-    return !currentRouteName.startsWith("wizard");
-  },
-
   @action
   toggleSidebar() {
     // enables CSS transitions, but not on did-insert

app/assets/javascripts/discourse/app/routes/second-factor-auth.js

@@ -26,9 +26,22 @@ export default DiscourseRoute.extend({
     }
   },
 
+  activate() {
+    this.controllerFor("application").setProperties({
+      sidebarDisabledRouteOverride: true,
+    });
+  },
+
+  deactivate() {
+    this.controllerFor("application").setProperties({
+      sidebarDisabledRouteOverride: false,
+    });
+  },
+
   setupController(controller, model) {
     this._super(...arguments);
     controller.resetState();
+
     if (model.error) {
       controller.displayError(model.error);
       controller.set("loadError", true);

app/assets/javascripts/discourse/tests/acceptance/second-factor-auth-test.js

@@ -283,4 +283,13 @@ acceptance("Second Factor Auth Page", function (needs) {
     );
     assert.equal(callbackCount, 1, "callback request has been performed");
   });
+
+  test("sidebar is disabled on 2FA route", async function (assert) {
+    this.siteSettings.enable_experimental_sidebar_hamburger = true;
+    this.siteSettings.enable_sidebar = true;
+
+    await visit("/session/2fa?nonce=ok110111");
+
+    assert.notOk(exists(".sidebar-container"), "does not display the sidebar");
+  });
 });

app/assets/javascripts/wizard/addon/routes/wizard.js

@@ -8,14 +8,22 @@ export default Route.extend({
 
   activate() {
     document.body.classList.add("wizard");
+
     this.controllerFor("application").setProperties({
       showTop: false,
       showFooter: false,
+      sidebarDisabledRouteOverride: true,
+      showSiteHeader: false,
     });
   },
 
   deactivate() {
     document.body.classList.remove("wizard");
-    this.controllerFor("application").set("showTop", true);
+
+    this.controllerFor("application").setProperties({
+      showTop: true,
+      sidebarDisabledRouteOverride: false,
+      showSiteHeader: true,
+    });
   },
 });