Merge branch '15081-wrong-login-tab-ldap-frontend' into 'master'
Fixed Wrong Tab Selected When Loggin Fails And Multiple Login Tabs Exists ## What does this MR do? Fixes issue: 15081 Wrong Tab Selected When Loggin Fails And Multiple Login Tabs Exists This is done by saving into a cookie when the active tab changes and by always selecting that tab when the page is loaded. ## Are there points in the code the reviewer needs to double check? No ## Why was this MR needed? In order to fix the issue: 15081 ## Screenshots (if relevant) ## Does this MR meet the acceptance criteria? - [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added - [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md) - [ ] API support added - Tests - [x] Added for this feature/bug - [x] All builds are passing - [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html) - [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides) - [x] Branch has no merge conflicts with `master` (if it does - rebase it please) - [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits) ## What are the relevant issue numbers? Closes #15081 See merge request !7314
This commit is contained in:
commit
1413c94a8e
|
@ -8,7 +8,8 @@
|
|||
"globals": {
|
||||
"_": false,
|
||||
"gl": false,
|
||||
"gon": false
|
||||
"gon": false,
|
||||
"localStorage": false
|
||||
},
|
||||
"plugins": [
|
||||
"filenames"
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
switch (page) {
|
||||
case 'sessions:new':
|
||||
new UsernameValidator();
|
||||
new ActiveTabMemoizer();
|
||||
break;
|
||||
case 'projects:boards:show':
|
||||
case 'projects:boards:index':
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
/* eslint no-param-reassign: ["error", { "props": false }]*/
|
||||
/* eslint no-new: "off" */
|
||||
((global) => {
|
||||
/**
|
||||
* Memorize the last selected tab after reloading a page.
|
||||
* Does that setting the current selected tab in the localStorage
|
||||
*/
|
||||
class ActiveTabMemoizer {
|
||||
constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
|
||||
this.currentTabKey = currentTabKey;
|
||||
this.tabSelector = tabSelector;
|
||||
this.bootstrap();
|
||||
}
|
||||
|
||||
bootstrap() {
|
||||
const tabs = document.querySelectorAll(this.tabSelector);
|
||||
if (tabs.length > 0) {
|
||||
tabs[0].addEventListener('click', (e) => {
|
||||
if (e.target && e.target.nodeName === 'A') {
|
||||
const anchorName = e.target.getAttribute('href');
|
||||
this.saveData(anchorName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.showTab();
|
||||
}
|
||||
|
||||
showTab() {
|
||||
const anchorName = this.readData();
|
||||
if (anchorName) {
|
||||
const tab = document.querySelector(`${this.tabSelector} a[href="${anchorName}"]`);
|
||||
if (tab) {
|
||||
tab.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
saveData(val) {
|
||||
localStorage.setItem(this.currentTabKey, val);
|
||||
}
|
||||
|
||||
readData() {
|
||||
return localStorage.getItem(this.currentTabKey);
|
||||
}
|
||||
}
|
||||
|
||||
global.ActiveTabMemoizer = ActiveTabMemoizer;
|
||||
})(window);
|
|
@ -1,4 +1,5 @@
|
|||
- page_title "Sign in"
|
||||
|
||||
%div
|
||||
- if form_based_providers.any?
|
||||
= render 'devise/shared/tabs_ldap'
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Fix wrong tab selected when loggin fails and multiple login tabs exists
|
||||
merge_request: 7314
|
||||
author: Jacopo Beschi @jacopo-beschi
|
|
@ -0,0 +1,5 @@
|
|||
%ul.nav-tabs
|
||||
%li
|
||||
%a.active{ id: 'standard', href: '#standard'} Standard
|
||||
%li
|
||||
%a{ id: 'ldap', href: '#ldap'} Ldap
|
|
@ -0,0 +1,53 @@
|
|||
/*= require signin_tabs_memoizer */
|
||||
|
||||
((global) => {
|
||||
describe('SigninTabsMemoizer', () => {
|
||||
const fixtureTemplate = 'signin_tabs.html';
|
||||
const tabSelector = 'ul.nav-tabs';
|
||||
const currentTabKey = 'current_signin_tab';
|
||||
let memo;
|
||||
|
||||
function createMemoizer() {
|
||||
memo = new global.ActiveTabMemoizer({
|
||||
currentTabKey,
|
||||
tabSelector,
|
||||
});
|
||||
return memo;
|
||||
}
|
||||
|
||||
fixture.preload(fixtureTemplate);
|
||||
|
||||
beforeEach(() => {
|
||||
fixture.load(fixtureTemplate);
|
||||
});
|
||||
|
||||
it('does nothing if no tab was previously selected', () => {
|
||||
createMemoizer();
|
||||
|
||||
expect(document.querySelector('li a.active').getAttribute('id')).toEqual('standard');
|
||||
});
|
||||
|
||||
it('shows last selected tab on boot', () => {
|
||||
createMemoizer().saveData('#ldap');
|
||||
const fakeTab = {
|
||||
click: () => {},
|
||||
};
|
||||
spyOn(document, 'querySelector').and.returnValue(fakeTab);
|
||||
spyOn(fakeTab, 'click');
|
||||
|
||||
memo.bootstrap();
|
||||
|
||||
// verify that triggers click on the last selected tab
|
||||
expect(document.querySelector).toHaveBeenCalledWith(`${tabSelector} a[href="#ldap"]`);
|
||||
expect(fakeTab.click).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('saves last selected tab on change', () => {
|
||||
createMemoizer();
|
||||
|
||||
document.getElementById('standard').click();
|
||||
|
||||
expect(memo.readData()).toEqual('#standard');
|
||||
});
|
||||
});
|
||||
})(window);
|
Loading…
Reference in New Issue