From 4342f81af28cf4abdeefe9e0b7f5281ff644c43d Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 30 Aug 2017 15:16:37 +0100 Subject: [PATCH] Removes disabled state from projects dropdown in dashboard page --- .../project_select_combo_button.js | 14 +++-- .../37179-dashboard-project-dropdown.yml | 5 ++ .../project_select_combo_button_spec.js | 55 +++++++------------ 3 files changed, 35 insertions(+), 39 deletions(-) create mode 100644 changelogs/unreleased/37179-dashboard-project-dropdown.yml diff --git a/app/assets/javascripts/project_select_combo_button.js b/app/assets/javascripts/project_select_combo_button.js index 46a26fb91f4..55e7b830716 100644 --- a/app/assets/javascripts/project_select_combo_button.js +++ b/app/assets/javascripts/project_select_combo_button.js @@ -13,8 +13,16 @@ export default class ProjectSelectComboButton { } bindEvents() { - this.projectSelectInput.siblings('.new-project-item-select-button') - .on('click', this.openDropdown); + const dropdownButton = this.projectSelectInput.siblings('.new-project-item-select-button'); + + dropdownButton.on('click', this.openDropdown); + + this.newItemBtn.on('click', (e) => { + if (!this.getProjectFromLocalStorage()) { + e.preventDefault(); + dropdownButton.trigger('click'); + } + }); this.projectSelectInput.on('change', () => this.selectProject()); } @@ -56,10 +64,8 @@ export default class ProjectSelectComboButton { if (project) { this.newItemBtn.attr('href', project.url); this.newItemBtn.text(`${this.formattedText.defaultTextPrefix} in ${project.name}`); - this.newItemBtn.enable(); } else { this.newItemBtn.text(`Select project to create ${this.formattedText.presetTextSuffix}`); - this.newItemBtn.disable(); } } diff --git a/changelogs/unreleased/37179-dashboard-project-dropdown.yml b/changelogs/unreleased/37179-dashboard-project-dropdown.yml new file mode 100644 index 00000000000..3ef080b8eae --- /dev/null +++ b/changelogs/unreleased/37179-dashboard-project-dropdown.yml @@ -0,0 +1,5 @@ +--- +title: Removes disabled state from dashboard project button +merge_request: +author: +type: fixed diff --git a/spec/javascripts/project_select_combo_button_spec.js b/spec/javascripts/project_select_combo_button_spec.js index 021804e0769..eb724e1b93e 100644 --- a/spec/javascripts/project_select_combo_button_spec.js +++ b/spec/javascripts/project_select_combo_button_spec.js @@ -2,10 +2,10 @@ import ProjectSelectComboButton from '~/project_select_combo_button'; const fixturePath = 'static/project_select_combo_button.html.raw'; -describe('Project Select Combo Button', function () { +describe('Project Select Combo Button', () => { preloadFixtures(fixturePath); - beforeEach(function () { + beforeEach(() => { this.defaults = { label: 'Select project to create issue', groupId: 12345, @@ -27,53 +27,43 @@ describe('Project Select Combo Button', function () { this.projectSelectInput = document.querySelector('.project-item-select'); }); - describe('on page load when localStorage is empty', function () { - beforeEach(function () { + describe('on page load when localStorage is empty', () => { + beforeEach(() => { this.comboButton = new ProjectSelectComboButton(this.projectSelectInput); }); - it('newItemBtn is disabled', function () { - expect(this.newItemBtn.hasAttribute('disabled')).toBe(true); - expect(this.newItemBtn.classList.contains('disabled')).toBe(true); - }); - - it('newItemBtn href is null', function () { + it('newItemBtn href is null', () => { expect(this.newItemBtn.getAttribute('href')).toBe(''); }); - it('newItemBtn text is the plain default label', function () { + it('newItemBtn text is the plain default label', () => { expect(this.newItemBtn.textContent).toBe(this.defaults.label); }); }); - describe('on page load when localStorage is filled', function () { - beforeEach(function () { + describe('on page load when localStorage is filled', () => { + beforeEach(() => { window.localStorage .setItem(this.defaults.localStorageKey, JSON.stringify(this.defaults.projectMeta)); this.comboButton = new ProjectSelectComboButton(this.projectSelectInput); }); - it('newItemBtn is not disabled', function () { - expect(this.newItemBtn.hasAttribute('disabled')).toBe(false); - expect(this.newItemBtn.classList.contains('disabled')).toBe(false); - }); - - it('newItemBtn href is correctly set', function () { + it('newItemBtn href is correctly set', () => { expect(this.newItemBtn.getAttribute('href')).toBe(this.defaults.projectMeta.url); }); - it('newItemBtn text is the cached label', function () { + it('newItemBtn text is the cached label', () => { expect(this.newItemBtn.textContent) .toBe(`New issue in ${this.defaults.projectMeta.name}`); }); - afterEach(function () { + afterEach(() => { window.localStorage.clear(); }); }); - describe('after selecting a new project', function () { - beforeEach(function () { + describe('after selecting a new project', () => { + beforeEach(() => { this.comboButton = new ProjectSelectComboButton(this.projectSelectInput); // mock the effect of selecting an item from the projects dropdown (select2) @@ -82,28 +72,23 @@ describe('Project Select Combo Button', function () { .trigger('change'); }); - it('newItemBtn is not disabled', function () { - expect(this.newItemBtn.hasAttribute('disabled')).toBe(false); - expect(this.newItemBtn.classList.contains('disabled')).toBe(false); - }); - - it('newItemBtn href is correctly set', function () { + it('newItemBtn href is correctly set', () => { expect(this.newItemBtn.getAttribute('href')) .toBe('http://myothercoolproject.com/issues/new'); }); - it('newItemBtn text is the selected project label', function () { + it('newItemBtn text is the selected project label', () => { expect(this.newItemBtn.textContent) .toBe(`New issue in ${this.defaults.newProjectMeta.name}`); }); - afterEach(function () { + afterEach(() => { window.localStorage.clear(); }); }); - describe('deriveTextVariants', function () { - beforeEach(function () { + describe('deriveTextVariants', () => { + beforeEach(() => { this.mockExecutionContext = { resourceType: '', resourceLabel: '', @@ -114,7 +99,7 @@ describe('Project Select Combo Button', function () { this.method = this.comboButton.deriveTextVariants.bind(this.mockExecutionContext); }); - it('correctly derives test variants for merge requests', function () { + it('correctly derives test variants for merge requests', () => { this.mockExecutionContext.resourceType = 'merge_requests'; this.mockExecutionContext.resourceLabel = 'New merge request'; @@ -125,7 +110,7 @@ describe('Project Select Combo Button', function () { expect(returnedVariants.presetTextSuffix).toBe('merge request'); }); - it('correctly derives text variants for issues', function () { + it('correctly derives text variants for issues', () => { this.mockExecutionContext.resourceType = 'issues'; this.mockExecutionContext.resourceLabel = 'New issue';