Group-level new issue & MR using previously selected project

2 files changed, 93 insertions, 9 deletions

diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index ebcefc819f5..1b4ed6be90a 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-var, comma-dangle, object-shorthand, one-var, one-var-declaration-per-line, no-else-return, quotes, max-len */
 import Api from './api';
+import ProjectSelectComboButton from './project_select_combo_button';
 
 (function() {
   this.ProjectSelect = (function() {
@@ -58,7 +59,8 @@ import Api from './api';
         if (this.includeGroups) {
           placeholder += " or group";
         }
-        return $(select).select2({
+
+        $(select).select2({
           placeholder: placeholder,
           minimumInputLength: 0,
           query: (function(_this) {
@@ -96,21 +98,18 @@ import Api from './api';
             };
           })(this),
           id: function(project) {
-            return project.web_url;
+            return JSON.stringify({
+              name: project.name,
+              url: project.web_url,
+            });
           },
           text: function(project) {
             return project.name_with_namespace || project.name;
           },
           dropdownCssClass: "ajax-project-dropdown"
         });
-      });
-
-      $('.new-project-item-select-button').on('click', function() {
-        $('.project-item-select', this.parentNode).select2('open');
-      });
 
-      $('.project-item-select').on('click', function() {
-        window.location = `${$(this).val()}/${this.dataset.relativePath}`;
+        return new ProjectSelectComboButton(select);
       });
     }
 
diff --git a/app/assets/javascripts/project_select_combo_button.js b/app/assets/javascripts/project_select_combo_button.js
new file mode 100644
index 00000000000..f799d9d619a
--- /dev/null
+++ b/app/assets/javascripts/project_select_combo_button.js
@@ -0,0 +1,85 @@
+import AccessorUtilities from './lib/utils/accessor';
+
+export default class ProjectSelectComboButton {
+  constructor(select) {
+    this.projectSelectInput = $(select);
+    this.newItemBtn = $('.new-project-item-link');
+    this.newItemBtnBaseText = this.newItemBtn.data('label');
+    this.itemType = this.deriveItemTypeFromLabel();
+    this.groupId = this.projectSelectInput.data('groupId');
+
+    this.bindEvents();
+    this.initLocalStorage();
+  }
+
+  bindEvents() {
+    this.projectSelectInput.siblings('.new-project-item-select-button')
+      .on('click', this.openDropdown);
+
+    this.projectSelectInput.on('change', () => this.selectProject());
+  }
+
+  initLocalStorage() {
+    const localStorageIsSafe = AccessorUtilities.isLocalStorageAccessSafe();
+
+    if (localStorageIsSafe) {
+      const itemTypeKebabed = this.newItemBtnBaseText.toLowerCase().split(' ').join('-');
+
+      this.localStorageKey = ['group', this.groupId, itemTypeKebabed, 'recent-project'].join('-');
+      this.setBtnTextFromLocalStorage();
+    }
+  }
+
+  openDropdown() {
+    $(this).siblings('.project-item-select').select2('open');
+  }
+
+  selectProject() {
+    const selectedProjectData = JSON.parse(this.projectSelectInput.val());
+    const projectUrl = `${selectedProjectData.url}/${this.projectSelectInput.data('relativePath')}`;
+    const projectName = selectedProjectData.name;
+
+    const projectMeta = {
+      url: projectUrl,
+      name: projectName,
+    };
+
+    this.setNewItemBtnAttributes(projectMeta);
+    this.setProjectInLocalStorage(projectMeta);
+  }
+
+  setBtnTextFromLocalStorage() {
+    const cachedProjectData = this.getProjectFromLocalStorage();
+
+    this.setNewItemBtnAttributes(cachedProjectData);
+  }
+
+  setNewItemBtnAttributes(project) {
+    if (project) {
+      this.newItemBtn.attr('href', project.url);
+      this.newItemBtn.text(`${this.newItemBtnBaseText} in ${project.name}`);
+      this.newItemBtn.enable();
+    } else {
+      this.newItemBtn.text(`Select project to create ${this.itemType}`);
+      this.newItemBtn.disable();
+    }
+  }
+
+  deriveItemTypeFromLabel() {
+    // label is either 'New issue' or 'New merge request'
+    return this.newItemBtnBaseText.split(' ').slice(1).join(' ');
+  }
+
+  getProjectFromLocalStorage() {
+    const projectString = localStorage.getItem(this.localStorageKey);
+
+    return JSON.parse(projectString);
+  }
+
+  setProjectInLocalStorage(projectMeta) {
+    const projectString = JSON.stringify(projectMeta);
+
+    localStorage.setItem(this.localStorageKey, projectString);
+  }
+}
+