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
This commit is contained in:
claire bontempo 2025-06-02 10:29:48 -07:00 committed by GitHub
parent 04819cf795
commit dc0e85b625
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 6 deletions

View File

@ -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 };
}

View File

@ -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.'
);
});

View File

@ -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();