Add latest changes from gitlab-org/gitlab@master

8 files changed, 155 insertions, 40 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 5c643a864d6..c76c039fb3b 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -402,7 +402,9 @@ export default {
             :text="currentEnvironmentName"
           >
             <div class="d-flex flex-column overflow-hidden">
-              <gl-dropdown-header class="text-center">{{ __('Environment') }}</gl-dropdown-header>
+              <gl-dropdown-header class="monitor-environment-dropdown-header text-center">{{
+                __('Environment')
+              }}</gl-dropdown-header>
               <gl-dropdown-divider />
               <gl-search-box-by-type
                 v-if="shouldRenderSearchableEnvironmentsDropdown"
diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
index 6d93eee0b4f..8f3e0a6ec75 100644
--- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
+++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
@@ -4,11 +4,14 @@ import {
   GlAlert,
   GlDropdown,
   GlDropdownItem,
+  GlDropdownHeader,
   GlDropdownDivider,
+  GlSearchBoxByType,
   GlModal,
   GlLoadingIcon,
   GlModalDirective,
 } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import DuplicateDashboardForm from './duplicate_dashboard_form.vue';
 
 const events = {
@@ -20,7 +23,9 @@ export default {
     GlAlert,
     GlDropdown,
     GlDropdownItem,
+    GlDropdownHeader,
     GlDropdownDivider,
+    GlSearchBoxByType,
     GlModal,
     GlLoadingIcon,
     DuplicateDashboardForm,
@@ -44,6 +49,7 @@ export default {
       alert: null,
       loading: false,
       form: {},
+      searchTerm: '',
     };
   },
   computed: {
@@ -54,6 +60,17 @@ export default {
     selectedDashboardText() {
       return this.selectedDashboard.display_name;
     },
+    filteredDashboards() {
+      return this.allDashboards.filter(({ display_name }) =>
+        display_name.toLowerCase().includes(this.searchTerm.toLowerCase()),
+      );
+    },
+    shouldShowNoMsgContainer() {
+      return this.filteredDashboards.length === 0;
+    },
+    okButtonText() {
+      return this.loading ? s__('Metrics|Duplicating...') : s__('Metrics|Duplicate');
+    },
   },
   methods: {
     ...mapActions('monitoringDashboard', ['duplicateSystemDashboard']),
@@ -95,45 +112,70 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown toggle-class="dropdown-menu-toggle" :text="selectedDashboardText">
-    <gl-dropdown-item
-      v-for="dashboard in allDashboards"
-      :key="dashboard.path"
-      :active="dashboard.path === selectedDashboard.path"
-      active-class="is-active"
-      @click="selectDashboard(dashboard)"
-    >
-      {{ dashboard.display_name || dashboard.path }}
-    </gl-dropdown-item>
-
-    <template v-if="isSystemDashboard">
+  <gl-dropdown
+    toggle-class="dropdown-menu-toggle"
+    menu-class="monitor-dashboard-dropdown-menu"
+    :text="selectedDashboardText"
+  >
+    <div class="d-flex flex-column overflow-hidden">
+      <gl-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{
+        __('Dashboard')
+      }}</gl-dropdown-header>
       <gl-dropdown-divider />
+      <gl-search-box-by-type
+        ref="monitorDashboardsDropdownSearch"
+        v-model="searchTerm"
+        class="m-2"
+      />
+      <div class="flex-fill overflow-auto">
+        <gl-dropdown-item
+          v-for="dashboard in filteredDashboards"
+          :key="dashboard.path"
+          :active="dashboard.path === selectedDashboard.path"
+          active-class="is-active"
+          @click="selectDashboard(dashboard)"
+        >
+          {{ dashboard.display_name || dashboard.path }}
+        </gl-dropdown-item>
+      </div>
 
-      <gl-modal
-        ref="duplicateDashboardModal"
-        modal-id="duplicateDashboardModal"
-        :title="s__('Metrics|Duplicate dashboard')"
-        ok-variant="success"
-        @ok="ok"
-        @hide="hide"
+      <div
+        v-show="shouldShowNoMsgContainer"
+        ref="monitorDashboardsDropdownMsg"
+        class="text-secondary no-matches-message"
       >
-        <gl-alert v-if="alert" class="mb-3" variant="danger" @dismiss="alert = null">
-          {{ alert }}
-        </gl-alert>
-        <duplicate-dashboard-form
-          :dashboard="selectedDashboard"
-          :default-branch="defaultBranch"
-          @change="formChange"
-        />
-        <template #modal-ok>
-          <gl-loading-icon v-if="loading" inline color="light" />
-          {{ loading ? s__('Metrics|Duplicating...') : s__('Metrics|Duplicate') }}
-        </template>
-      </gl-modal>
+        {{ __('No matching results') }}
+      </div>
+
+      <template v-if="isSystemDashboard">
+        <gl-dropdown-divider />
+
+        <gl-modal
+          ref="duplicateDashboardModal"
+          modal-id="duplicateDashboardModal"
+          :title="s__('Metrics|Duplicate dashboard')"
+          ok-variant="success"
+          @ok="ok"
+          @hide="hide"
+        >
+          <gl-alert v-if="alert" class="mb-3" variant="danger" @dismiss="alert = null">
+            {{ alert }}
+          </gl-alert>
+          <duplicate-dashboard-form
+            :dashboard="selectedDashboard"
+            :default-branch="defaultBranch"
+            @change="formChange"
+          />
+          <template #modal-ok>
+            <gl-loading-icon v-if="loading" inline color="light" />
+            {{ okButtonText }}
+          </template>
+        </gl-modal>
 
-      <gl-dropdown-item ref="duplicateDashboardItem" v-gl-modal="'duplicateDashboardModal'">
-        {{ s__('Metrics|Duplicate dashboard') }}
-      </gl-dropdown-item>
-    </template>
+        <gl-dropdown-item ref="duplicateDashboardItem" v-gl-modal="'duplicateDashboardModal'">
+          {{ s__('Metrics|Duplicate dashboard') }}
+        </gl-dropdown-item>
+      </template>
+    </div>
   </gl-dropdown>
 </template>
diff --git a/app/assets/javascripts/mr_popover/constants.js b/app/assets/javascripts/mr_popover/constants.js
index c13c417cc18..352bc635293 100644
--- a/app/assets/javascripts/mr_popover/constants.js
+++ b/app/assets/javascripts/mr_popover/constants.js
@@ -3,6 +3,7 @@ import { __ } from '~/locale';
 export const mrStates = {
   merged: 'merged',
   closed: 'closed',
+  open: 'open',
 };
 
 export const humanMRStates = {
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index 5456a36aefc..6a617f97271 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import {
   GlFormGroup,
   GlToggle,
@@ -42,6 +42,7 @@ export default {
   },
   computed: {
     ...mapState(['formOptions', 'isLoading']),
+    ...mapGetters({ isEdited: 'getIsEdited' }),
     ...mapComputed(
       [
         'enabled',
@@ -92,6 +93,9 @@ export default {
     isSubmitButtonDisabled() {
       return this.formIsInvalid || this.isLoading;
     },
+    isCancelButtonDisabled() {
+      return !this.isEdited || this.isLoading;
+    },
   },
   methods: {
     ...mapActions(['resetSettings', 'saveSettings']),
@@ -211,7 +215,12 @@ export default {
       </template>
       <template #footer>
         <div class="d-flex justify-content-end">
-          <gl-button ref="cancel-button" type="reset" class="mr-2 d-block" :disabled="isLoading">
+          <gl-button
+            ref="cancel-button"
+            type="reset"
+            :disabled="isCancelButtonDisabled"
+            class="mr-2 d-block"
+          >
             {{ __('Cancel') }}
           </gl-button>
           <gl-button
diff --git a/app/assets/javascripts/registry/settings/store/getters.js b/app/assets/javascripts/registry/settings/store/getters.js
index fc32a9f08e4..cd6392bd0cc 100644
--- a/app/assets/javascripts/registry/settings/store/getters.js
+++ b/app/assets/javascripts/registry/settings/store/getters.js
@@ -1,3 +1,4 @@
+import { isEqual } from 'lodash';
 import { findDefaultOption } from '../utils';
 
 export const getCadence = state =>
@@ -6,3 +7,4 @@ export const getKeepN = state =>
   state.settings.keep_n || findDefaultOption(state.formOptions.keepN);
 export const getOlderThan = state =>
   state.settings.older_than || findDefaultOption(state.formOptions.olderThan);
+export const getIsEdited = state => !isEqual(state.original, state.settings);
diff --git a/app/assets/javascripts/vue_alerts.js b/app/assets/javascripts/vue_alerts.js
new file mode 100644
index 00000000000..6550eb31491
--- /dev/null
+++ b/app/assets/javascripts/vue_alerts.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import DismissibleAlert from '~/vue_shared/components/dismissible_alert.vue';
+
+const mountVueAlert = el => {
+  const props = {
+    html: el.innerHTML,
+  };
+  const attrs = {
+    ...el.dataset,
+    dismissible: parseBoolean(el.dataset.dismissible),
+  };
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(DismissibleAlert, { props, attrs });
+    },
+  });
+};
+
+export default () => [...document.querySelectorAll('.js-vue-alert')].map(mountVueAlert);
diff --git a/app/assets/javascripts/vue_shared/components/dismissible_alert.vue b/app/assets/javascripts/vue_shared/components/dismissible_alert.vue
new file mode 100644
index 00000000000..986fa14349e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dismissible_alert.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlAlert } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAlert,
+  },
+  props: {
+    html: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isDismissed: false,
+    };
+  },
+  methods: {
+    dismiss() {
+      this.isDismissed = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert v-if="!isDismissed" v-bind="$attrs" @dismiss="dismiss" v-on="$listeners">
+    <div v-html="html"></div>
+  </gl-alert>
+</template>
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index 7269effd38d..2138231aaed 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -47,7 +47,12 @@
 }
 
 .prometheus-graphs-header {
-  .monitor-environment-dropdown-menu {
+  .monitor-dashboard-dropdown-header header {
+    font-size: $gl-font-size;
+  }
+
+  .monitor-environment-dropdown-menu,
+  .monitor-dashboard-dropdown-menu {
     &.show {
       display: flex;
       flex-direction: column;