Removes disabled state from projects dropdown in dashboard page

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

changelogs/unreleased/37179-dashboard-project-dropdown.yml

+---
+title: Removes disabled state from dashboard project button
+merge_request:
+author:
+type: fixed

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';