Automatic merge of gitlab-org/gitlab-ce master

app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue

 <script>
 import $ from 'jquery';
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 /**
  * Renders a split dropdown with
  * an input that allows to search through the given
  * array of options.
+ *
+ * When there are no results and `showCreateMode` is true
+ * it renders a create button with the value typed.
  */
 export default {
   name: 'FilteredSearchDropdown',
   components: {
     Icon,
+    GlButton,
   },
   props: {
     title: {
@@ -43,6 +49,16 @@ export default {
       type: String,
       required: true,
     },
+    showCreateMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    createButtonText: {
+      type: String,
+      required: false,
+      default: __('Create'),
+    },
   },
   data() {
     return {
@@ -64,6 +80,12 @@ export default {
 
       return this.items.slice(0, this.visibleItems);
     },
+    computedCreateButtonText() {
+      return `${this.createButtonText} ${this.filter}`;
+    },
+    shouldRenderCreateButton() {
+      return this.showCreateMode && this.filteredResults.length === 0 && this.filter !== '';
+    },
   },
   mounted() {
     /**
@@ -112,10 +134,20 @@ export default {
         <div class="dropdown-content">
           <ul>
             <li v-for="(result, i) in filteredResults" :key="i" class="js-filtered-dropdown-result">
-              <slot name="result" :result="result"> {{ result[filterKey] }} </slot>
+              <slot name="result" :result="result">{{ result[filterKey] }}</slot>
             </li>
           </ul>
         </div>
+
+        <div v-if="shouldRenderCreateButton" class="dropdown-footer">
+          <slot name="footer" :filter="filter">
+            <gl-button
+              class="js-dropdown-create-button btn-transparent"
+              @click="$emit('createItem', filter)"
+              >{{ computedCreateButtonText }}</gl-button
+            >
+          </slot>
+        </div>
       </div>
     </div>
   </div>

scripts/review_apps/review-apps.sh

@@ -2,6 +2,7 @@
 export TILLER_NAMESPACE="$KUBE_NAMESPACE"
 
 function echoerr() { printf "\033[0;31m%s\n\033[0m" "$*" >&2; }
+function echoinfo() { printf "\033[0;33m%s\n\033[0m" "$*" >&2; }
 
 function check_kube_domain() {
   if [ -z ${REVIEW_APPS_DOMAIN+x} ]; then
@@ -238,17 +239,17 @@ function get_pod() {
   local app_name="${1}"
   local status="${2-Running}"
   get_pod_cmd="kubectl get pods -n ${KUBE_NAMESPACE} --field-selector=status.phase=${status} -lapp=${app_name},release=${CI_ENVIRONMENT_SLUG} --no-headers -o=custom-columns=NAME:.metadata.name"
-  echoerr "Running '${get_pod_cmd}'"
+  echoinfo "Running '${get_pod_cmd}'"
 
   while true; do
     local pod_name="$(eval $get_pod_cmd)"
     [[ "${pod_name}" == "" ]] || break
 
-    echoerr "Waiting till '${app_name}' pod is ready";
+    echoinfo "Waiting till '${app_name}' pod is ready";
     sleep 5;
   done
 
-  echoerr "The pod name is '${pod_name}'."
+  echoinfo "The pod name is '${pod_name}'."
   echo "${pod_name}"
 }
 
@@ -290,7 +291,7 @@ function get_job_id() {
 
   while true; do
     local url="https://gitlab.com/api/v4/projects/${CI_PROJECT_ID}/pipelines/${CI_PIPELINE_ID}/jobs?per_page=100&page=${page}${query_string}"
-    echoerr "GET ${url}"
+    echoinfo "GET ${url}"
 
     local job_id=$(curl --silent --show-error --header "PRIVATE-TOKEN: ${API_TOKEN}" "${url}" | jq "map(select(.name == \"${job_name}\")) | map(.id) | last")
     [[ "${job_id}" == "null" && "${page}" -lt "$max_page" ]] || break
@@ -301,7 +302,7 @@ function get_job_id() {
   if [[ "${job_id}" == "" ]]; then
     echoerr "The '${job_name}' job ID couldn't be retrieved!"
   else
-    echoerr "The '${job_name}' job ID is ${job_id}"
+    echoinfo "The '${job_name}' job ID is ${job_id}"
     echo "${job_id}"
   fi
 }
@@ -312,10 +313,10 @@ function play_job() {
   if [ -z "${job_id}" ]; then return; fi
 
   local url="https://gitlab.com/api/v4/projects/${CI_PROJECT_ID}/jobs/${job_id}/play"
-  echoerr "POST ${url}"
+  echoinfo "POST ${url}"
 
   local job_url=$(curl --silent --show-error --request POST --header "PRIVATE-TOKEN: ${API_TOKEN}" "${url}" | jq ".web_url")
-  echo "Manual job '${job_name}' started at: ${job_url}"
+  echoinfo "Manual job '${job_name}' started at: ${job_url}"
 }
 
 function wait_for_job_to_be_done() {
@@ -324,10 +325,10 @@ function wait_for_job_to_be_done() {
   local job_id=$(get_job_id "${job_name}" "${query_string}");
   if [ -z "${job_id}" ]; then return; fi
 
-  echoerr "Waiting for the '${job_name}' job to finish..."
+  echoinfo "Waiting for the '${job_name}' job to finish..."
 
   local url="https://gitlab.com/api/v4/projects/${CI_PROJECT_ID}/jobs/${job_id}"
-  echo "GET ${url}"
+  echoinfo "GET ${url}"
 
   # In case the job hasn't finished yet. Keep trying until the job times out.
   local interval=30
@@ -342,13 +343,13 @@ function wait_for_job_to_be_done() {
   done
 
   local elapsed_minutes=$((elapsed_seconds / 60))
-  echoerr "Waited '${job_name}' for ${elapsed_minutes} minutes."
+  echoinfo "Waited '${job_name}' for ${elapsed_minutes} minutes."
 
   if [[ "${job_status}" == "failed" ]]; then
-    echo "The '${job_name}' failed."
+    echoerr "The '${job_name}' failed."
   elif [[ "${job_status}" == "manual" ]]; then
-    echo "The '${job_name}' is manual."
+    echoinfo "The '${job_name}' is manual."
   else
-    echo "The '${job_name}' passed."
+    echoinfo "The '${job_name}' passed."
   fi
 }

spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js

@@ -88,4 +88,103 @@ describe('Filtered search dropdown', () => {
       });
     });
   });
+
+  describe('with create mode enabled', () => {
+    describe('when there are no matches', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, {
+          items: [
+            { title: 'One' },
+            { title: 'Two/three' },
+            { title: 'Three four' },
+            { title: 'Five' },
+          ],
+          filterKey: 'title',
+          showCreateMode: true,
+        });
+
+        vm.$el.querySelector('.js-filtered-dropdown-input').value = 'eleven';
+        vm.$el.querySelector('.js-filtered-dropdown-input').dispatchEvent(new Event('input'));
+      });
+
+      it('renders a create button', done => {
+        vm.$nextTick(() => {
+          expect(vm.$el.querySelector('.js-dropdown-create-button')).not.toBeNull();
+          done();
+        });
+      });
+
+      it('renders computed button text', done => {
+        vm.$nextTick(() => {
+          expect(vm.$el.querySelector('.js-dropdown-create-button').textContent.trim()).toEqual(
+            'Create eleven',
+          );
+          done();
+        });
+      });
+
+      describe('on click create button', () => {
+        it('emits createItem event with the filter', done => {
+          spyOn(vm, '$emit');
+          vm.$nextTick(() => {
+            vm.$el.querySelector('.js-dropdown-create-button').click();
+
+            expect(vm.$emit).toHaveBeenCalledWith('createItem', 'eleven');
+            done();
+          });
+        });
+      });
+    });
+
+    describe('when there are matches', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, {
+          items: [
+            { title: 'One' },
+            { title: 'Two/three' },
+            { title: 'Three four' },
+            { title: 'Five' },
+          ],
+          filterKey: 'title',
+          showCreateMode: true,
+        });
+
+        vm.$el.querySelector('.js-filtered-dropdown-input').value = 'one';
+        vm.$el.querySelector('.js-filtered-dropdown-input').dispatchEvent(new Event('input'));
+      });
+
+      it('does not render a create button', done => {
+        vm.$nextTick(() => {
+          expect(vm.$el.querySelector('.js-dropdown-create-button')).toBeNull();
+          done();
+        });
+      });
+    });
+  });
+
+  describe('with create mode disabled', () => {
+    describe('when there are no matches', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, {
+          items: [
+            { title: 'One' },
+            { title: 'Two/three' },
+            { title: 'Three four' },
+            { title: 'Five' },
+          ],
+          filterKey: 'title',
+        });
+
+        vm.$el.querySelector('.js-filtered-dropdown-input').value = 'eleven';
+        vm.$el.querySelector('.js-filtered-dropdown-input').dispatchEvent(new Event('input'));
+      });
+
+      it('does not render a create button', done => {
+        vm.$nextTick(() => {
+          expect(vm.$el.querySelector('.js-dropdown-create-button')).toBeNull();
+          done();
+        });
+      });
+    });
+  });
 });