From dc0e85b6255a3a9868ce3de3d9f6afda3f89a0be Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Mon, 2 Jun 2025 10:29:48 -0700
Subject: [PATCH] UI: Fixes issue where backup tab was selected if they
 included default type (#30805)

* Fixes issue where backup tab was selected if backups include default type

* fix enterprise empty state assertion
---
 ui/app/components/auth/page.ts                | 12 ++++++-----
 .../config-ui/login-settings-test.js          |  2 +-
 .../integration/components/auth/page-test.js  | 20 +++++++++++++++++++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/ui/app/components/auth/page.ts b/ui/app/components/auth/page.ts
index bba5f225cf..d804c6355f 100644
--- a/ui/app/components/auth/page.ts
+++ b/ui/app/components/auth/page.ts
@@ -218,15 +218,17 @@ export default class AuthPage extends Component<Args> {
 
   get initialFormState() {
     const { defaultView, alternateView } = this.formViews;
-    const hasTab = (tabData: object) => Object.keys(tabData).includes(this.initialAuthType);
+    // Helper to check if passed tabs include initialAuthType to render
+    const hasTab = (tabs: object) => Object.keys(tabs).includes(this.initialAuthType);
     const authIsNotDefaultTab = !hasTab(defaultView?.tabData || {});
     const hasAlternateView = !!alternateView;
     const authIsAlternateTab = hasTab(alternateView?.tabData || {});
 
-    // In rare cases, pre-toggle the form to the fallback dropdown if the selected method is not in the alternate view.
-    // This could happen if tabs render for visible mounts and the "with" query param references a type that isn't a tab.
-    // Or auth type is preset from canceled MFA or local storage and is not in the default view.
-    const showAlternate = (authIsNotDefaultTab && hasAlternateView) || authIsAlternateTab;
+    // In rare cases, pre-toggle the form to the fallback dropdown or backup tabs, if an alternate view exists.
+    // This is only possible in a couple scenarios:
+    // - The default view renders tabs for visible mounts and the "with" query param references a type that is not a tab.
+    // - Auth type is preset from canceled MFA verification or local storage and it is not in the default (initial) view
+    const showAlternate = authIsNotDefaultTab && (hasAlternateView || authIsAlternateTab);
 
     return { initialAuthType: this.initialAuthType, showAlternate };
   }
diff --git a/ui/tests/acceptance/config-ui/login-settings-test.js b/ui/tests/acceptance/config-ui/login-settings-test.js
index c0ad493b1a..fcd2731f49 100644
--- a/ui/tests/acceptance/config-ui/login-settings-test.js
+++ b/ui/tests/acceptance/config-ui/login-settings-test.js
@@ -32,7 +32,7 @@ module('Acceptance | Enterprise | config-ui/login-settings', function (hooks) {
     assert
       .dom(GENERAL.emptyStateMessage)
       .hasText(
-        'Login rules can be used to select default and back up login methods and customize which methods display in the web UI login form. Available to be created via the CLI or HTTP API.'
+        'Login settings can be used to customize which methods display in the web UI login form by setting a default and back up login methods. Available to be created via the CLI or HTTP API.'
       );
   });
 
diff --git a/ui/tests/integration/components/auth/page-test.js b/ui/tests/integration/components/auth/page-test.js
index 4f4b307611..ad56351f6e 100644
--- a/ui/tests/integration/components/auth/page-test.js
+++ b/ui/tests/integration/components/auth/page-test.js
@@ -392,6 +392,26 @@ module('Integration | Component | auth | page', function (hooks) {
       await this.assertPathInput(assert);
     });
 
+    test('(default+backups): it initially renders default type if backup types include the default method', async function (assert) {
+      this.loginSettings = {
+        defaultType: 'userpass',
+        backupTypes: ['ldap', 'userpass', 'oidc'],
+      };
+      await this.renderComponent();
+      assert.dom(GENERAL.backButton).doesNotExist('it renders default view');
+      assert.dom(AUTH_FORM.tabBtn('userpass')).hasText('Userpass', 'it renders default method');
+      assert
+        .dom(AUTH_FORM.tabs)
+        .exists({ count: 1 }, 'it is rendering the default view because only one tab renders');
+
+      await click(AUTH_FORM.otherMethodsBtn);
+      assert.dom(GENERAL.backButton).exists('it toggles to backup method view');
+      assert.dom(AUTH_FORM.tabs).exists({ count: 3 }, 'it renders 3 backup type tabs');
+      assert
+        .dom(AUTH_FORM.tabBtn('ldap'))
+        .hasAttribute('aria-selected', 'true', 'it selects the first backup type');
+    });
+
     test('(default only): it renders default type without backup methods', async function (assert) {
       this.loginSettings.backupTypes = null;
       await this.renderComponent();