Tie url params to filter bar

Take the url params and set
the value of those to the filter
bar and it's tokens.

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -226,8 +226,18 @@ export default {
     },
   },
   created() {
+    const { username, ref } = this.params;
+
     this.service = new PipelinesService(this.endpoint);
     this.requestData = { page: this.page, scope: this.scope };
+
+    if (username) {
+      this.requestData.username = username;
+    }
+
+    if (ref) {
+      this.requestData.ref = ref;
+    }
   },
   methods: {
     successCallback(resp) {
@@ -310,6 +320,7 @@ export default {
       v-if="canFilterPipelines"
       :pipelines="state.pipelines"
       :project-id="projectId"
+      :params="params"
       @filterPipelines="filterPipelines"
     />
 

app/assets/javascripts/pipelines/components/pipelines_filtered_search.vue

@@ -20,6 +20,10 @@ export default {
       type: String,
       required: true,
     },
+    params: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
@@ -52,6 +56,32 @@ export default {
         },
       ];
     },
+    paramsValue() {
+      const valueArray = [];
+      const { username, ref } = this.params;
+
+      if (username) {
+        valueArray.push({
+          type: 'username',
+          value: {
+            data: username,
+            operator: '=',
+          },
+        });
+      }
+
+      if (ref) {
+        valueArray.push({
+          type: 'ref',
+          value: {
+            data: ref,
+            operator: '=',
+          },
+        });
+      }
+
+      return valueArray;
+    },
   },
   created() {
     Api.projectUsers(this.projectId)
@@ -85,6 +115,7 @@ export default {
     <gl-filtered-search
       :placeholder="__('Filter pipelines')"
       :available-tokens="tokens"
+      :value="paramsValue"
       @submit="onSubmit"
     />
   </div>

app/assets/javascripts/pipelines/components/tokens/pipeline_branch_name_token.vue

@@ -55,7 +55,7 @@ export default {
     @input="searchBranches"
   >
     <template #suggestions>
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading && !value" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="(branch, index) in branches"

app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue

@@ -45,7 +45,7 @@ export default {
       return this.value.data.toLowerCase();
     },
     activeUser() {
-      return this.users.find(user => {
+      return this.config.triggerAuthors.find(user => {
         return user.username.toLowerCase() === this.currentValue;
       });
     },
@@ -72,6 +72,7 @@ export default {
 
 <template>
   <gl-filtered-search-token
+    v-if="config.triggerAuthors"
     :config="config"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
@@ -93,7 +94,7 @@ export default {
       }}</gl-filtered-search-suggestion>
       <gl-dropdown-divider />
 
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading && !value" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="user in users"