Add latest changes from gitlab-org/gitlab@master

13 files changed, 185 insertions, 148 deletions

diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
index 3b8febfbb29..a5e17d80f86 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -10,6 +10,7 @@ import {
   GlTooltipDirective,
   GlSprintf,
 } from '@gitlab/ui';
+import { capitalize } from 'lodash';
 import { s__, __ } from '~/locale';
 import Tracking from '~/tracking';
 import {
@@ -77,6 +78,7 @@ export default {
     {
       key: 'type',
       label: __('Type'),
+      formatter: (value) => (value === typeSet.prometheus ? capitalize(value) : value),
     },
     {
       key: 'actions',
@@ -172,7 +174,7 @@ export default {
 
       <template #cell(actions)="{ item }">
         <gl-button-group class="gl-ml-3">
-          <gl-button icon="pencil" @click="editIntegration(item)" />
+          <gl-button icon="settings" @click="editIntegration(item)" />
           <gl-button
             v-gl-modal.deleteIntegration
             :disabled="item.type === $options.typeSet.prometheus"
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
index 8e7a1b07bb6..16f3749ecab 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
@@ -19,9 +19,13 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
   integrationTypes,
+  integrationSteps,
+  createStepNumbers,
+  editStepNumbers,
   JSON_VALIDATE_DELAY,
   targetPrometheusUrlPlaceholder,
   typeSet,
+  viewCredentialsTabIndex,
   i18n,
 } from '../constants';
 import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
@@ -35,6 +39,7 @@ export default {
   },
   JSON_VALIDATE_DELAY,
   typeSet,
+  integrationSteps,
   i18n,
   components: {
     ClipboardButton,
@@ -108,6 +113,7 @@ export default {
       parsingPayload: false,
       currentIntegration: null,
       parsedPayload: [],
+      activeTabIndex: 0,
     };
   },
   computed: {
@@ -170,20 +176,23 @@ export default {
     canEditPayload() {
       return this.hasSamplePayload && !this.resetPayloadAndMappingConfirmed;
     },
+    canParseSamplePayload() {
+      return !this.active || !this.isSampePayloadValid || !this.samplePayload.json;
+    },
     isResetAuthKeyDisabled() {
       return !this.active && !this.integrationForm.token !== '';
     },
     isPayloadEditDisabled() {
-      return this.glFeatures.multipleHttpIntegrationsCustomMapping
-        ? !this.active || this.canEditPayload
-        : !this.active;
-    },
-    isSubmitTestPayloadDisabled() {
-      return !this.active || Boolean(this.samplePayload.error) || this.samplePayload.json === '';
+      return !this.active || this.canEditPayload;
     },
     isSelectDisabled() {
       return this.currentIntegration !== null || !this.canAddIntegration;
     },
+    viewCredentialsHelpMsg() {
+      return this.isPrometheus
+        ? i18n.integrationFormSteps.setupCredentials.prometheusHelp
+        : i18n.integrationFormSteps.setupCredentials.help;
+    },
   },
   watch: {
     currentIntegration(val) {
@@ -203,6 +212,8 @@ export default {
         );
         this.updateMapping(mapping);
       }
+      this.activeTabIndex = viewCredentialsTabIndex;
+      this.$el.scrollIntoView({ block: 'center' });
     },
   },
   methods: {
@@ -320,18 +331,32 @@ export default {
       this.parsedPayload = [];
       this.updateMapping([]);
     },
+    getLabelWithStepNumber(step, label) {
+      let stepNumber = editStepNumbers[step];
+
+      if (this.isCreating) {
+        stepNumber = createStepNumbers[step];
+      }
+
+      return stepNumber ? `${stepNumber}.${label}` : label;
+    },
   },
 };
 </script>
 
 <template>
   <gl-form class="gl-mt-6" @submit.prevent="submit" @reset.prevent="reset">
-    <gl-tabs>
+    <gl-tabs v-model="activeTabIndex">
       <gl-tab :title="$options.i18n.integrationTabs.configureDetails">
         <gl-form-group
           v-if="isCreating"
           id="integration-type"
-          :label="$options.i18n.integrationFormSteps.selectType.label"
+          :label="
+            getLabelWithStepNumber(
+              $options.integrationSteps.selectType,
+              $options.i18n.integrationFormSteps.selectType.label,
+            )
+          "
           label-for="integration-type"
         >
           <gl-form-select
@@ -354,7 +379,12 @@ export default {
           <gl-form-group
             v-if="isHttp"
             id="name-integration"
-            :label="$options.i18n.integrationFormSteps.nameIntegration.label"
+            :label="
+              getLabelWithStepNumber(
+                $options.integrationSteps.nameIntegration,
+                $options.i18n.integrationFormSteps.nameIntegration.label,
+              )
+            "
             label-for="name-integration"
           >
             <gl-form-input
@@ -364,15 +394,6 @@ export default {
             />
           </gl-form-group>
 
-          <alert-settings-form-help-block
-            :message="
-              isPrometheus
-                ? $options.i18n.integrationFormSteps.setupCredentials.prometheusHelp
-                : $options.i18n.integrationFormSteps.setupCredentials.help
-            "
-            link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html"
-          />
-
           <gl-toggle
             v-model="active"
             :is-loading="loading"
@@ -382,7 +403,12 @@ export default {
 
           <div v-if="isPrometheus" class="gl-my-4">
             <span class="gl-font-weight-bold">
-              {{ $options.i18n.integrationFormSteps.prometheusFormUrl.label }}
+              {{
+                getLabelWithStepNumber(
+                  $options.integrationSteps.setPrometheusApiUrl,
+                  $options.i18n.integrationFormSteps.prometheusFormUrl.label,
+                )
+              }}
             </span>
 
             <gl-form-input
@@ -397,34 +423,38 @@ export default {
             </span>
           </div>
 
-          <gl-form-group
-            v-if="isHttp"
-            data-testid="sample-payload-section"
-            :label="$options.i18n.integrationFormSteps.setSamplePayload.label"
-            label-for="sample-payload"
-            :class="{ 'gl-mb-0!': showMappingBuilder }"
-            :invalid-feedback="samplePayload.error"
-          >
-            <alert-settings-form-help-block
-              :message="$options.i18n.integrationFormSteps.setSamplePayload.testPayloadHelpHttp"
-              :link="generic.alertsUsageUrl"
-            />
-
-            <gl-form-textarea
-              id="sample-payload"
-              v-model.trim="samplePayload.json"
-              :disabled="isPayloadEditDisabled"
-              :state="isSampePayloadValid"
-              :placeholder="$options.i18n.integrationFormSteps.setSamplePayload.placeholder"
-              class="gl-my-3"
-              :debounce="$options.JSON_VALIDATE_DELAY"
-              rows="6"
-              max-rows="10"
-              @input="validateJson"
-            />
-          </gl-form-group>
-
           <template v-if="showMappingBuilder">
+            <gl-form-group
+              data-testid="sample-payload-section"
+              :label="
+                getLabelWithStepNumber(
+                  $options.integrationSteps.setSamplePayload,
+                  $options.i18n.integrationFormSteps.setSamplePayload.label,
+                )
+              "
+              label-for="sample-payload"
+              class="gl-mb-0!"
+              :invalid-feedback="samplePayload.error"
+            >
+              <alert-settings-form-help-block
+                :message="$options.i18n.integrationFormSteps.setSamplePayload.testPayloadHelpHttp"
+                :link="generic.alertsUsageUrl"
+              />
+
+              <gl-form-textarea
+                id="sample-payload"
+                v-model.trim="samplePayload.json"
+                :disabled="isPayloadEditDisabled"
+                :state="isSampePayloadValid"
+                :placeholder="$options.i18n.integrationFormSteps.setSamplePayload.placeholder"
+                class="gl-my-3"
+                :debounce="$options.JSON_VALIDATE_DELAY"
+                rows="6"
+                max-rows="10"
+                @input="validateJson"
+              />
+            </gl-form-group>
+
             <gl-button
               v-if="canEditPayload"
               v-gl-modal.resetPayloadModal
@@ -439,7 +469,7 @@ export default {
               v-else
               data-testid="payload-action-btn"
               :class="{ 'gl-mt-3': samplePayload.error }"
-              :disabled="!active || !isSampePayloadValid"
+              :disabled="canParseSamplePayload"
               :loading="parsingPayload"
               @click="parseMapping"
             >
@@ -454,23 +484,27 @@ export default {
             >
               {{ $options.i18n.integrationFormSteps.setSamplePayload.resetBody }}
             </gl-modal>
-          </template>
 
-          <gl-form-group
-            v-if="showMappingBuilder"
-            id="mapping-builder"
-            class="gl-mt-5"
-            :label="$options.i18n.integrationFormSteps.mapFields.label"
-            label-for="mapping-builder"
-          >
-            <span>{{ $options.i18n.integrationFormSteps.mapFields.intro }}</span>
-            <mapping-builder
-              :parsed-payload="parsedPayload"
-              :saved-mapping="mapping"
-              :alert-fields="alertFields"
-              @onMappingUpdate="updateMapping"
-            />
-          </gl-form-group>
+            <gl-form-group
+              id="mapping-builder"
+              class="gl-mt-5"
+              :label="
+                getLabelWithStepNumber(
+                  $options.integrationSteps.customizeMapping,
+                  $options.i18n.integrationFormSteps.mapFields.label,
+                )
+              "
+              label-for="mapping-builder"
+            >
+              <span>{{ $options.i18n.integrationFormSteps.mapFields.intro }}</span>
+              <mapping-builder
+                :parsed-payload="parsedPayload"
+                :saved-mapping="mapping"
+                :alert-fields="alertFields"
+                @onMappingUpdate="updateMapping"
+              />
+            </gl-form-group>
+          </template>
         </div>
 
         <div class="gl-display-flex gl-justify-content-start gl-py-3">
@@ -490,6 +524,11 @@ export default {
       </gl-tab>
 
       <gl-tab :title="$options.i18n.integrationTabs.viewCredentials" :disabled="isCreating">
+        <alert-settings-form-help-block
+          :message="viewCredentialsHelpMsg"
+          link="https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html"
+        />
+
         <gl-form-group id="integration-webhook">
           <div class="gl-my-4">
             <span class="gl-font-weight-bold">
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
index 062d354330c..3ffb652e61b 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -165,6 +165,9 @@ export default {
           if (error) {
             return createFlash({ message: error });
           }
+          const { integration } = httpIntegrationCreate || prometheusIntegrationCreate;
+
+          this.editIntegration(integration);
 
           return createFlash({
             message: this.$options.i18n.changesSaved,
diff --git a/app/assets/javascripts/alerts_settings/constants.js b/app/assets/javascripts/alerts_settings/constants.js
index 6ba9e83f96e..ce6cf61b5dd 100644
--- a/app/assets/javascripts/alerts_settings/constants.js
+++ b/app/assets/javascripts/alerts_settings/constants.js
@@ -1,43 +1,6 @@
 import { s__, __ } from '~/locale';
 
-// TODO: Remove this as part of the form old removal
 export const i18n = {
-  usageSection: s__(
-    'AlertSettings|You must provide this URL and authorization key to authorize an external service to send alerts to GitLab. You can provide this URL and key to multiple services. After configuring an external service, alerts from your service will display on the GitLab %{linkStart}Alerts%{linkEnd} page.',
-  ),
-  setupSection: s__(
-    "AlertSettings|Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.",
-  ),
-  errorMsg: s__('AlertSettings|There was an error updating the alert settings.'),
-  errorKeyMsg: s__(
-    'AlertSettings|There was an error while trying to reset the key. Please refresh the page to try again.',
-  ),
-  restKeyInfo: s__(
-    'AlertSettings|Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.',
-  ),
-  changesSaved: s__('AlertSettings|Your integration was successfully updated.'),
-  prometheusInfo: s__('AlertSettings|Add URL and auth key to your Prometheus config file'),
-  integrationsInfo: s__(
-    'AlertSettings|Learn more about our our upcoming %{linkStart}integrations%{linkEnd}',
-  ),
-  resetKey: s__('AlertSettings|Reset key'),
-  copyToClipboard: s__('AlertSettings|Copy'),
-  apiBaseUrlLabel: s__('AlertSettings|API URL'),
-  authKeyLabel: s__('AlertSettings|Authorization key'),
-  urlLabel: s__('AlertSettings|Webhook URL'),
-  activeLabel: s__('AlertSettings|Active'),
-  apiBaseUrlHelpText: s__('AlertSettings|URL cannot be blank and must start with http or https'),
-  testAlertInfo: s__('AlertSettings|Test alert payload'),
-  alertJson: s__('AlertSettings|Alert test payload'),
-  alertJsonPlaceholder: s__('AlertSettings|Enter test alert JSON....'),
-  testAlertFailed: s__('AlertSettings|Test failed. Do you still want to save your changes anyway?'),
-  testAlertSuccess: s__(
-    'AlertSettings|Test alert sent successfully. If you have made other changes, please save them now.',
-  ),
-  authKeyRest: s__(
-    'AlertSettings|Authorization key has been successfully reset. Please save your changes now.',
-  ),
-  integration: s__('AlertSettings|Integration'),
   integrationTabs: {
     configureDetails: s__('AlertSettings|Configure details'),
     viewCredentials: s__('AlertSettings|View credentials'),
@@ -87,9 +50,9 @@ export const i18n = {
       ),
     },
     mapFields: {
-      label: s__('AlertSettings|Map fields (optional)'),
+      label: s__('AlertSettings|Customize alert payload mapping (optional)'),
       intro: s__(
-        "AlertSettings|If you've provided a sample alert payload, you can create a custom mapping for your endpoint. The default GitLab alert keys are listed below. Please define which payload key should map to the specified GitLab key.",
+        'AlertSettings|If you intend to create a custom mapping, provide an example payload from your monitoring tool and click "parse payload fields" button to continue. The sample payload is required for completing the custom mapping;  if you want to skip the mapping step, progress straight to saving your integration.',
       ),
     },
     prometheusFormUrl: {
@@ -103,11 +66,36 @@ export const i18n = {
     },
   },
   saveIntegration: s__('AlertSettings|Save integration'),
+  changesSaved: s__('AlertSettings|Your integration was successfully updated.'),
   cancelAndClose: __('Cancel and close'),
   send: s__('AlertSettings|Send'),
   copy: __('Copy'),
 };
 
+export const integrationSteps = {
+  selectType: 'SELECT_TYPE',
+  nameIntegration: 'NAME_INTEGRATION',
+  setPrometheusApiUrl: 'SET_PROMETHEUS_API_URL',
+  setSamplePayload: 'SET_SAMPLE_PAYLOAD',
+  customizeMapping: 'CUSTOMIZE_MAPPING',
+};
+
+export const createStepNumbers = {
+  [integrationSteps.selectType]: 1,
+  [integrationSteps.nameIntegration]: 2,
+  [integrationSteps.setPrometheusApiUrl]: 2,
+  [integrationSteps.setSamplePayload]: 3,
+  [integrationSteps.customizeMapping]: 4,
+};
+
+export const editStepNumbers = {
+  [integrationSteps.selectType]: 1,
+  [integrationSteps.nameIntegration]: 1,
+  [integrationSteps.setPrometheusApiUrl]: null,
+  [integrationSteps.setSamplePayload]: 2,
+  [integrationSteps.customizeMapping]: 3,
+};
+
 export const integrationTypes = {
   none: { value: '', text: s__('AlertSettings|Select integration type') },
   http: { value: 'HTTP', text: s__('AlertSettings|HTTP Endpoint') },
@@ -125,14 +113,11 @@ export const JSON_VALIDATE_DELAY = 250;
 
 export const targetPrometheusUrlPlaceholder = 'http://prometheus.example.com/';
 
-export const sectionHash = 'js-alert-management-settings';
-
-/* eslint-disable @gitlab/require-i18n-strings */
-
 /**
  * Tracks snowplow event when user views alerts integration list
  */
 export const trackAlertIntegrationsViewsOptions = {
+  /* eslint-disable-next-line @gitlab/require-i18n-strings */
   category: 'Alert Integrations',
   action: 'view_alert_integrations_list',
 };
@@ -141,3 +126,5 @@ export const mappingFields = {
   mapping: 'mapping',
   fallback: 'fallback',
 };
+
+export const viewCredentialsTabIndex = 1;
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index f249fef5ea4..280613bda49 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -2,7 +2,6 @@ import $ from 'jquery';
 import { deprecatedCreateFlash as flash } from './flash';
 import axios from './lib/utils/axios_utils';
 import { __ } from './locale';
-import { mouseenter, debouncedMouseleave, togglePopover } from './shared/popover';
 
 export default class Milestone {
   constructor() {
@@ -43,30 +42,4 @@ export default class Milestone {
         .catch(() => flash(__('Error loading milestone tab')));
     }
   }
-
-  static initDeprecationMessage() {
-    const deprecationMesssageContainer = document.querySelector(
-      '.js-milestone-deprecation-message',
-    );
-
-    if (!deprecationMesssageContainer) return;
-
-    const deprecationMessage = deprecationMesssageContainer.querySelector(
-      '.js-milestone-deprecation-message-template',
-    ).innerHTML;
-    const $popover = $('.js-popover-link', deprecationMesssageContainer);
-    const hideOnScroll = togglePopover.bind($popover, false);
-
-    $popover
-      .popover({
-        content: deprecationMessage,
-        html: true,
-        placement: 'bottom',
-      })
-      .on('mouseenter', mouseenter)
-      .on('mouseleave', debouncedMouseleave())
-      .on('show.bs.popover', () => {
-        window.addEventListener('scroll', hideOnScroll, { once: true });
-      });
-  }
 }
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
index 933cbeaedce..4f5c53ed4a3 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
@@ -111,7 +111,10 @@ export default {
       {{ alertMessage }}
     </gl-alert>
 
-    <settings-block :default-expanded="defaultExpanded">
+    <settings-block
+      :default-expanded="defaultExpanded"
+      data-qa-selector="package_registry_settings_content"
+    >
       <template #title> {{ $options.i18n.PACKAGE_SETTINGS_HEADER }}</template>
       <template #description>
         <span data-testid="description">
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue
index aa7c6e9d8d6..e43bded408b 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue
@@ -79,6 +79,7 @@ export default {
     <form>
       <div class="gl-display-flex">
         <gl-toggle
+          data-qa-selector="allow_duplicates_checkbox"
           :value="mavenDuplicatesAllowed"
           @change="update($options.modelNames.MAVEN_DUPLICATES_ALLOWED, $event)"
         />
diff --git a/app/assets/javascripts/pages/dashboard/milestones/show/index.js b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
index 8b529585898..397149aaa9e 100644
--- a/app/assets/javascripts/pages/dashboard/milestones/show/index.js
+++ b/app/assets/javascripts/pages/dashboard/milestones/show/index.js
@@ -6,6 +6,4 @@ document.addEventListener('DOMContentLoaded', () => {
   new Milestone(); // eslint-disable-line no-new
   new Sidebar(); // eslint-disable-line no-new
   new MountMilestoneSidebar(); // eslint-disable-line no-new
-
-  Milestone.initDeprecationMessage();
 });
diff --git a/app/assets/javascripts/pages/groups/milestones/show/index.js b/app/assets/javascripts/pages/groups/milestones/show/index.js
index 3094fe5cd21..2a2cc5faebe 100644
--- a/app/assets/javascripts/pages/groups/milestones/show/index.js
+++ b/app/assets/javascripts/pages/groups/milestones/show/index.js
@@ -1,9 +1,7 @@
-import Milestone from '~/milestone';
 import initDeleteMilestoneModal from '~/pages/milestones/shared/delete_milestone_modal_init';
 import initMilestonesShow from '~/pages/milestones/shared/init_milestones_show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initMilestonesShow();
   initDeleteMilestoneModal();
-  Milestone.initDeprecationMessage();
 });
diff --git a/app/assets/javascripts/pages/projects/blob/new/index.js b/app/assets/javascripts/pages/projects/blob/new/index.js
index 189053f3ed7..ed416610173 100644
--- a/app/assets/javascripts/pages/projects/blob/new/index.js
+++ b/app/assets/javascripts/pages/projects/blob/new/index.js
@@ -1,3 +1,3 @@
 import initBlobBundle from '~/blob_edit/blob_bundle';
 
-document.addEventListener('DOMContentLoaded', initBlobBundle);
+initBlobBundle();
diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue
index 6234ac28a93..7f30e7c57d7 100644
--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/app/assets/javascripts/ref/components/ref_selector.vue
@@ -22,7 +22,6 @@ import RefResultsSection from './ref_results_section.vue';
 
 export default {
   name: 'RefSelector',
-  store: createStore(),
   components: {
     GlDropdown,
     GlDropdownDivider,
@@ -61,6 +60,13 @@ export default {
       required: false,
       default: () => ({}),
     },
+
+    /** The validation state of this component. */
+    state: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -104,6 +110,16 @@ export default {
     showSectionHeaders() {
       return this.enabledRefTypes.length > 1;
     },
+    toggleButtonClass() {
+      return { 'gl-inset-border-1-red-500!': !this.state };
+    },
+    footerSlotProps() {
+      return {
+        isLoading: this.isLoading,
+        matches: this.matches,
+        query: this.lastQuery,
+      };
+    },
   },
   watch: {
     // Keep the Vuex store synchronized if the parent
@@ -117,6 +133,14 @@ export default {
       },
     },
   },
+  beforeCreate() {
+    // Setting the store here instead of using
+    // the built in `store` component option because
+    // we need each new `RefSelector` instance to
+    // create a new Vuex store instance.
+    // See https://github.com/vuejs/vuex/issues/414#issue-184491718.
+    this.$store = createStore();
+  },
   created() {
     // This method is defined here instead of in `methods`
     // because we need to access the .cancel() method
@@ -124,7 +148,7 @@ export default {
     // made inaccessible by Vue. More info:
     // https://stackoverflow.com/a/52988020/1063392
     this.debouncedSearch = debounce(function search() {
-      this.search(this.query);
+      this.search();
     }, SEARCH_DEBOUNCE_MS);
 
     this.setProjectId(this.projectId);
@@ -133,19 +157,20 @@ export default {
       'enabledRefTypes',
       () => {
         this.setEnabledRefTypes(this.enabledRefTypes);
-        this.search(this.query);
+        this.search();
       },
       { immediate: true },
     );
   },
   methods: {
-    ...mapActions(['setEnabledRefTypes', 'setProjectId', 'setSelectedRef', 'search']),
+    ...mapActions(['setEnabledRefTypes', 'setProjectId', 'setSelectedRef']),
+    ...mapActions({ storeSearch: 'search' }),
     focusSearchBox() {
       this.$refs.searchBox.$el.querySelector('input').focus();
     },
     onSearchBoxEnter() {
       this.debouncedSearch.cancel();
-      this.search(this.query);
+      this.search();
     },
     onSearchBoxInput() {
       this.debouncedSearch();
@@ -154,15 +179,20 @@ export default {
       this.setSelectedRef(ref);
       this.$emit('input', this.selectedRef);
     },
+    search() {
+      this.storeSearch(this.query);
+    },
   },
 };
 </script>
 
 <template>
   <gl-dropdown
-    v-bind="$attrs"
     :header-text="i18n.dropdownHeader"
+    :toggle-class="toggleButtonClass"
     class="ref-selector"
+    v-bind="$attrs"
+    v-on="$listeners"
     @shown="focusSearchBox"
   >
     <template #button-content>
@@ -242,5 +272,9 @@ export default {
         />
       </template>
     </template>
+
+    <template #footer>
+      <slot name="footer" v-bind="footerSlotProps"></slot>
+    </template>
   </gl-dropdown>
 </template>
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 687289b6675..2c4928fc338 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -73,7 +73,7 @@ export default class SingleFileDiff {
     this.collapsedContent.hide();
     this.loadingContent.show();
 
-    axios
+    return axios
       .get(this.diffForPath)
       .then(({ data }) => {
         this.loadingContent.hide();
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 7344f930f2f..e51cc0b4479 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -261,7 +261,6 @@
 }
 
 .fork-thumbnail {
-  height: 200px;
   width: calc((100% / 2) - #{$gl-padding * 2});
 
   @include media-breakpoint-up(md) {