Create Web IDE MR and branch picker

3 files changed, 106 insertions, 147 deletions

diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
deleted file mode 100644
index 4b9824bf04b..00000000000
--- a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import Tabs from '../../../vue_shared/components/tabs/tabs';
-import Tab from '../../../vue_shared/components/tabs/tab.vue';
-import List from './list.vue';
-
-export default {
-  components: {
-    Tabs,
-    Tab,
-    List,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapGetters('mergeRequests', ['assignedData', 'createdData']),
-    createdMergeRequestLength() {
-      return this.createdData.mergeRequests.length;
-    },
-    assignedMergeRequestLength() {
-      return this.assignedData.mergeRequests.length;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="dropdown-menu ide-merge-requests-dropdown p-0">
-    <tabs
-      v-if="show"
-      stop-propagation
-    >
-      <tab active>
-        <template slot="title">
-          {{ __('Created by me') }}
-          <span class="badge badge-pill">
-            {{ createdMergeRequestLength }}
-          </span>
-        </template>
-        <list
-          :empty-text="__('You have not created any merge requests')"
-          type="created"
-        />
-      </tab>
-      <tab>
-        <template slot="title">
-          {{ __('Assigned to me') }}
-          <span class="badge badge-pill">
-            {{ assignedMergeRequestLength }}
-          </span>
-        </template>
-        <list
-          :empty-text="__('You do not have any assigned merge requests')"
-          type="assigned"
-        />
-      </tab>
-    </tabs>
-  </div>
-</template>
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
index 4e18376bd48..0c4ea80ba08 100644
--- a/app/assets/javascripts/ide/components/merge_requests/item.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -1,5 +1,6 @@
 <script>
 import Icon from '../../../vue_shared/components/icon.vue';
+import router from '../../ide_router';
 
 export default {
   components: {
@@ -29,22 +30,21 @@ export default {
     pathWithID() {
       return `${this.item.projectPathWithNamespace}!${this.item.iid}`;
     },
-  },
-  methods: {
-    clickItem() {
-      this.$emit('click', this.item);
+    mergeRequestHref() {
+      const path = `/project/${this.item.projectPathWithNamespace}/merge_requests/${this.item.iid}`;
+
+      return router.resolve(path).href;
     },
   },
 };
 </script>
 
 <template>
-  <button
-    type="button"
+  <a
+    :href="mergeRequestHref"
     class="btn-link d-flex align-items-center"
-    @click="clickItem"
   >
-    <span class="d-flex append-right-default ide-merge-request-current-icon">
+    <span class="d-flex append-right-default ide-search-list-current-icon">
       <icon
         v-if="isActive"
         :size="18"
@@ -59,5 +59,5 @@ export default {
         {{ pathWithID }}
       </span>
     </span>
-  </button>
+  </a>
 </template>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 19d3e48ee10..fc612956688 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -1,96 +1,101 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
-import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Item from './item.vue';
+import TokenedInput from '../shared/tokened_input.vue';
+
+const SEARCH_TYPES = [
+  { type: 'created', label: __('Created by me') },
+  { type: 'assigned', label: __('Assigned to me') },
+];
 
 export default {
   components: {
     LoadingIcon,
+    TokenedInput,
     Item,
-  },
-  props: {
-    type: {
-      type: String,
-      required: true,
-    },
-    emptyText: {
-      type: String,
-      required: true,
-    },
+    Icon,
   },
   data() {
     return {
       search: '',
+      currentSearchType: null,
+      hasSearchFocus: false,
     };
   },
   computed: {
-    ...mapGetters('mergeRequests', ['getData']),
+    ...mapState('mergeRequests', ['mergeRequests', 'isLoading']),
     ...mapState(['currentMergeRequestId', 'currentProjectId']),
-    data() {
-      return this.getData(this.type);
-    },
-    isLoading() {
-      return this.data.isLoading;
-    },
-    mergeRequests() {
-      return this.data.mergeRequests;
-    },
     hasMergeRequests() {
       return this.mergeRequests.length !== 0;
     },
     hasNoSearchResults() {
       return this.search !== '' && !this.hasMergeRequests;
     },
+    showSearchTypes() {
+      return this.hasSearchFocus && !this.search && !this.currentSearchType;
+    },
+    type() {
+      return this.currentSearchType
+        ? this.currentSearchType.type
+        : '';
+    },
+    searchTokens() {
+      return this.currentSearchType
+        ? [this.currentSearchType]
+        : [];
+    },
   },
   watch: {
-    isLoading: {
-      handler: 'focusSearch',
+    search() {
+      // When the search is updated, let's turn off this flag to hide the search types
+      this.hasSearchFocus = false;
     },
   },
   mounted() {
     this.loadMergeRequests();
   },
   methods: {
-    ...mapActions('mergeRequests', ['fetchMergeRequests', 'openMergeRequest']),
+    ...mapActions('mergeRequests', ['fetchMergeRequests']),
     loadMergeRequests() {
       this.fetchMergeRequests({ type: this.type, search: this.search });
     },
-    viewMergeRequest(item) {
-      this.openMergeRequest({
-        projectPath: item.projectPathWithNamespace,
-        id: item.iid,
-      });
-    },
     searchMergeRequests: _.debounce(function debounceSearch() {
       this.loadMergeRequests();
     }, 250),
-    focusSearch() {
-      if (!this.isLoading) {
-        this.$nextTick(() => {
-          this.$refs.searchInput.focus();
-        });
-      }
+    onSearchFocus() {
+      this.hasSearchFocus = true;
+    },
+    setSearchType(searchType) {
+      this.currentSearchType = searchType;
+      this.loadMergeRequests();
     },
   },
+  searchTypes: SEARCH_TYPES,
 };
 </script>
 
 <template>
   <div>
     <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
-      <input
-        ref="searchInput"
-        :placeholder="__('Search merge requests')"
-        v-model="search"
-        type="search"
-        class="dropdown-input-field"
-        @input="searchMergeRequests"
-      />
-      <i
-        aria-hidden="true"
-        class="fa fa-search dropdown-input-search"
-      ></i>
+      <div class="position-relative">
+        <tokened-input
+          v-model="search"
+          :tokens="searchTokens"
+          :placeholder="__('Search merge requests')"
+          @focus="onSearchFocus"
+          @input="searchMergeRequests"
+          @removeToken="setSearchType(null)"
+        />
+        <icon
+          :size="18"
+          name="search"
+          class="input-icon"
+        />
+      </div>
     </div>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <loading-icon
@@ -98,35 +103,52 @@ export default {
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
         size="2"
       />
-      <ul
-        v-else
-        class="mb-3 w-100"
-      >
-        <template v-if="hasMergeRequests">
-          <li
-            v-for="item in mergeRequests"
-            :key="item.id"
-          >
-            <item
-              :item="item"
-              :current-id="currentMergeRequestId"
-              :current-project-id="currentProjectId"
-              @click="viewMergeRequest"
-            />
-          </li>
-        </template>
-        <li
-          v-else
-          class="ide-merge-requests-empty d-flex align-items-center justify-content-center"
+      <template v-else>
+        <ul
+          class="mb-3 w-100"
         >
-          <template v-if="hasNoSearchResults">
-            {{ __('No merge requests found') }}
+          <template v-if="showSearchTypes">
+            <li
+              v-for="searchType in $options.searchTypes"
+              :key="searchType.type"
+            >
+              <button
+                type="button"
+                class="btn-link d-flex align-items-center"
+                @click.stop="setSearchType(searchType)"
+              >
+                <span class="d-flex append-right-default ide-search-list-current-icon">
+                  <icon
+                    :size="18"
+                    name="search"
+                  />
+                </span>
+                <span>
+                  {{ searchType.label }}
+                </span>
+              </button>
+            </li>
           </template>
-          <template v-else>
-            {{ emptyText }}
+          <template v-else-if="hasMergeRequests">
+            <li
+              v-for="item in mergeRequests"
+              :key="item.id"
+            >
+              <item
+                :item="item"
+                :current-id="currentMergeRequestId"
+                :current-project-id="currentProjectId"
+              />
+            </li>
           </template>
-        </li>
-      </ul>
+          <li
+            v-else
+            class="ide-search-list-empty d-flex align-items-center justify-content-center"
+          >
+            {{ __('No merge requests found') }}
+          </li>
+        </ul>
+      </template>
     </div>
   </div>
 </template>