Add latest changes from gitlab-org/gitlab@master

8 files changed, 117 insertions, 22 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 2c51252be39..f6f119d4463 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -8,6 +8,7 @@ import {
   GlDropdownItem,
   GlFormGroup,
   GlModal,
+  GlSearchBoxByType,
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -15,6 +16,7 @@ import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import Icon from '~/vue_shared/components/icon.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { getParameterValues, mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 
@@ -38,6 +40,7 @@ export default {
     GlButton,
     GlDropdown,
     GlDropdownItem,
+    GlSearchBoxByType,
     GlFormGroup,
     GlModal,
 
@@ -52,6 +55,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     TrackEvent: TrackEventDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     externalDashboardUrl: {
       type: String,
@@ -198,13 +202,12 @@ export default {
       'dashboard',
       'emptyState',
       'showEmptyState',
-      'environments',
       'deploymentData',
       'useDashboardEndpoint',
       'allDashboards',
       'additionalPanelTypesEnabled',
     ]),
-    ...mapGetters('monitoringDashboard', ['getMetricStates']),
+    ...mapGetters('monitoringDashboard', ['getMetricStates', 'filteredEnvironments']),
     firstDashboard() {
       return this.environmentsEndpoint.length > 0 && this.allDashboards.length > 0
         ? this.allDashboards[0]
@@ -227,6 +230,9 @@ export default {
         this.externalDashboardUrl.length
       );
     },
+    shouldRenderSearchableEnvironmentsDropdown() {
+      return this.glFeatures.searchableEnvironmentsDropdown;
+    },
   },
   created() {
     this.setEndpoints({
@@ -255,6 +261,7 @@ export default {
       'setGettingStartedEmptyState',
       'setEndpoints',
       'setPanelGroupMetrics',
+      'setEnvironmentsSearchTerm',
     ]),
     updatePanels(key, panels) {
       this.setPanelGroupMetrics({
@@ -296,6 +303,9 @@ export default {
     setFormValidity(isValid) {
       this.formIsValid = isValid;
     },
+    debouncedEnvironmentsSearch: _.debounce(function environmentsSearchOnInput(searchTerm) {
+      this.setEnvironmentsSearchTerm(searchTerm);
+    }, 500),
     submitCustomMetricsForm() {
       this.$refs.customMetricsForm.submit();
     },
@@ -374,17 +384,36 @@ export default {
               data-qa-selector="environments_dropdown"
               class="mb-0 d-flex"
               toggle-class="dropdown-menu-toggle"
+              menu-class="monitor-environment-dropdown-menu"
               :text="currentEnvironmentName"
-              :disabled="environments.length === 0"
+              :disabled="filteredEnvironments.length === 0"
             >
-              <gl-dropdown-item
-                v-for="environment in environments"
-                :key="environment.id"
-                :active="environment.name === currentEnvironmentName"
-                active-class="is-active"
-                :href="environment.metrics_path"
-                >{{ environment.name }}</gl-dropdown-item
-              >
+              <div class="d-flex flex-column overflow-hidden">
+                <gl-search-box-by-type
+                  v-if="shouldRenderSearchableEnvironmentsDropdown"
+                  ref="monitorEnvironmentsDropdownSearch"
+                  class="m-2"
+                  @input="debouncedEnvironmentsSearch"
+                />
+                <div class="flex-fill overflow-auto">
+                  <gl-dropdown-item
+                    v-for="environment in filteredEnvironments"
+                    :key="environment.id"
+                    :active="environment.name === currentEnvironmentName"
+                    active-class="is-active"
+                    :href="environment.metrics_path"
+                    >{{ environment.name }}</gl-dropdown-item
+                  >
+                </div>
+                <div
+                  v-if="shouldRenderSearchableEnvironmentsDropdown"
+                  v-show="filteredEnvironments.length === 0"
+                  ref="monitorEnvironmentsDropdownMsg"
+                  class="text-secondary no-matches-message"
+                >
+                  {{ s__('No matching results') }}
+                </div>
+              </div>
             </gl-dropdown>
           </gl-form-group>
 
@@ -415,18 +444,16 @@ export default {
               variant="default"
               class="mr-2 mt-1 js-rearrange-button"
               @click="toggleRearrangingPanels"
+              >{{ __('Arrange charts') }}</gl-button
             >
-              {{ __('Arrange charts') }}
-            </gl-button>
             <gl-button
               v-if="addingMetricsAvailable"
               ref="addMetricBtn"
               v-gl-modal="$options.addMetric.modalId"
               variant="outline-success"
               class="mr-2 mt-1"
+              >{{ $options.addMetric.title }}</gl-button
             >
-              {{ $options.addMetric.title }}
-            </gl-button>
             <gl-modal
               v-if="addingMetricsAvailable"
               ref="addMetricModal"
@@ -448,9 +475,8 @@ export default {
                   :disabled="!formIsValid"
                   variant="success"
                   @click="submitCustomMetricsForm"
+                  >{{ __('Save changes') }}</gl-button
                 >
-                  {{ __('Save changes') }}
-                </gl-button>
               </div>
             </gl-modal>
 
@@ -458,9 +484,8 @@ export default {
               v-if="selectedDashboard.can_edit"
               class="mt-1 js-edit-link"
               :href="selectedDashboard.project_blob_path"
+              >{{ __('Edit dashboard') }}</gl-button
             >
-              {{ __('Edit dashboard') }}
-            </gl-button>
 
             <gl-button
               v-if="externalDashboardUrl.length"
@@ -506,9 +531,9 @@ export default {
                   class="draggable-remove js-draggable-remove p-2 w-100 position-absolute d-flex justify-content-end"
                   @click="removePanel(groupData.key, groupData.panels, graphIndex)"
                 >
-                  <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')"
-                    ><icon name="close"
-                  /></a>
+                  <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')">
+                    <icon name="close" />
+                  </a>
                 </div>
 
                 <panel-type
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 61cd8621902..6303ed2b82f 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -30,6 +30,10 @@ export const setEndpoints = ({ commit }, endpoints) => {
   commit(types.SET_ENDPOINTS, endpoints);
 };
 
+export const setEnvironmentsSearchTerm = ({ commit }, searchTerm) => {
+  commit(types.SET_ENVIRONMENTS_SEARCH_TERM, searchTerm);
+};
+
 export const setShowErrorBanner = ({ commit }, enabled) => {
   commit(types.SET_SHOW_ERROR_BANNER, enabled);
 };
diff --git a/app/assets/javascripts/monitoring/stores/getters.js b/app/assets/javascripts/monitoring/stores/getters.js
index a13157c6f87..ed1e3e3ffec 100644
--- a/app/assets/javascripts/monitoring/stores/getters.js
+++ b/app/assets/javascripts/monitoring/stores/getters.js
@@ -58,5 +58,20 @@ export const metricsWithData = state => groupKey => {
   return res;
 };
 
+/**
+ * Filter environments by names.
+ *
+ * This is used in the environments dropdown with searchable input.
+ * Also, this searchable dropdown is behind `searchable_environments_dropdown`
+ * feature flag
+ *
+ * @param {Object} state
+ * @returns {Array} List of environments
+ */
+export const filteredEnvironments = state =>
+  state.environments.filter(env =>
+    env.name.toLowerCase().includes((state.environmentsSearchTerm || '').trim().toLowerCase()),
+  );
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/monitoring/stores/mutation_types.js b/app/assets/javascripts/monitoring/stores/mutation_types.js
index 74068e1d846..73d402ac6df 100644
--- a/app/assets/javascripts/monitoring/stores/mutation_types.js
+++ b/app/assets/javascripts/monitoring/stores/mutation_types.js
@@ -21,3 +21,5 @@ export const SET_GETTING_STARTED_EMPTY_STATE = 'SET_GETTING_STARTED_EMPTY_STATE'
 export const SET_NO_DATA_EMPTY_STATE = 'SET_NO_DATA_EMPTY_STATE';
 export const SET_SHOW_ERROR_BANNER = 'SET_SHOW_ERROR_BANNER';
 export const SET_PANEL_GROUP_METRICS = 'SET_PANEL_GROUP_METRICS';
+
+export const SET_ENVIRONMENTS_SEARCH_TERM = 'SET_ENVIRONMENTS_SEARCH_TERM';
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index 506a30ae619..e14425d7c6c 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -196,4 +196,7 @@ export default {
     const panelGroup = state.dashboard.panel_groups.find(pg => payload.key === pg.key);
     panelGroup.panels = payload.panels;
   },
+  [types.SET_ENVIRONMENTS_SEARCH_TERM](state, searchTerm) {
+    state.environmentsSearchTerm = searchTerm;
+  },
 };
diff --git a/app/assets/javascripts/monitoring/stores/state.js b/app/assets/javascripts/monitoring/stores/state.js
index ee8a85ea222..2c6758dfce2 100644
--- a/app/assets/javascripts/monitoring/stores/state.js
+++ b/app/assets/javascripts/monitoring/stores/state.js
@@ -15,6 +15,7 @@ export default () => ({
 
   deploymentData: [],
   environments: [],
+  environmentsSearchTerm: '',
   allDashboards: [],
   currentDashboard: null,
   projectPath: null,
diff --git a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss
index 5a80ea79600..aeeb8b7384d 100644
--- a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss
+++ b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss
@@ -12,6 +12,7 @@
     max-width: 900px;
 
     &.navless-container {
+      padding: 35px $gl-padding;
       // overriding .devise-layout-html.navless-container to support the sticky footer
       // without having a header on size xs
       @include media-breakpoint-down(xs) {
@@ -24,6 +25,7 @@
   .signup-heading h2 {
     font-weight: $gl-font-weight-bold;
     padding: 0 $gl-padding;
+    font-size: $gl-font-size-28;
 
     @include media-breakpoint-down(md) {
       font-size: $gl-font-size-large;
@@ -49,4 +51,35 @@
       color: $red-700;
     }
   }
+
+  .omniauth-divider {
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      border-bottom: 1px solid $gray-dark;
+      margin: $gl-padding-24 0;
+    }
+
+    &::before {
+      margin-right: $gl-padding;
+    }
+
+    &::after {
+      margin-left: $gl-padding;
+    }
+  }
+
+  .omniauth-btn {
+    width: 48%;
+
+    @include media-breakpoint-down(md) {
+      width: 100%;
+    }
+
+    img {
+      width: $default-icon-size;
+      height: $default-icon-size;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index e20e58e21cf..e759423f6e5 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -58,6 +58,18 @@
   .custom-time-range-form-group > label {
     padding-bottom: $gl-padding;
   }
+
+  .monitor-environment-dropdown-menu {
+    &.show {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .no-matches-message {
+      padding: $gl-padding-8 $gl-padding-12;
+    }
+  }
 }
 
 .prometheus-panel {