Add latest changes from gitlab-org/gitlab@master

11 files changed, 74 insertions, 104 deletions

diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js b/app/assets/javascripts/blob/blob_file_dropzone.js
index 445602a8765..470c679b8ba 100644
--- a/app/assets/javascripts/blob/blob_file_dropzone.js
+++ b/app/assets/javascripts/blob/blob_file_dropzone.js
@@ -3,7 +3,6 @@
 import Dropzone from 'dropzone';
 import $ from 'jquery';
 import { sprintf, __ } from '~/locale';
-import { trackUploadFileFormSubmitted } from '~/projects/upload_file_experiment';
 import { HIDDEN_CLASS } from '../lib/utils/constants';
 import csrf from '../lib/utils/csrf';
 import { visitUrl } from '../lib/utils/url_utility';
@@ -85,8 +84,6 @@ export default class BlobFileDropzone {
       e.preventDefault();
       e.stopPropagation();
 
-      trackUploadFileFormSubmitted();
-
       if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
         // eslint-disable-next-line no-alert
         alert(__('Please select a file'));
diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 6d9b56b4bb8..173c82ef9b0 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -4,7 +4,6 @@ import $ from 'jquery';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { disableButtonIfEmptyField, setCookie } from '~/lib/utils/common_utils';
-import { initUploadFileTrigger } from '~/projects/upload_file_experiment';
 import Tracking from '~/tracking';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
 import NewCommitForm from '../new_commit_form';
@@ -48,7 +47,6 @@ export const initUploadForm = () => {
     new NewCommitForm(uploadBlobForm);
 
     disableButtonIfEmptyField(uploadBlobForm.find('.js-commit-message'), '.btn-upload-file');
-    initUploadFileTrigger();
   }
 };
 
diff --git a/app/assets/javascripts/pages/admin/abuse_reports/index.js b/app/assets/javascripts/pages/admin/abuse_reports/index.js
index 5649c47d7e8..0a4311ec73a 100644
--- a/app/assets/javascripts/pages/admin/abuse_reports/index.js
+++ b/app/assets/javascripts/pages/admin/abuse_reports/index.js
@@ -1,8 +1,5 @@
-/* eslint-disable no-new */
 import UsersSelect from '~/users_select';
 import AbuseReports from './abuse_reports';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new AbuseReports();
-  new UsersSelect();
-});
+new AbuseReports(); /* eslint-disable-line no-new */
+new UsersSelect(); /* eslint-disable-line no-new */
diff --git a/app/assets/javascripts/pages/admin/application_settings/general/index.js b/app/assets/javascripts/pages/admin/application_settings/general/index.js
index e2a6f4208b9..eda1a9d3599 100644
--- a/app/assets/javascripts/pages/admin/application_settings/general/index.js
+++ b/app/assets/javascripts/pages/admin/application_settings/general/index.js
@@ -1,7 +1,3 @@
-// This is a true violation of @gitlab/no-runtime-template-compiler, as it
-// relies on app/views/admin/application_settings/_gitpod.html.haml for its
-// template.
-/* eslint-disable @gitlab/no-runtime-template-compiler */
 import Vue from 'vue';
 import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';
 import initUserInternalRegexPlaceholder from '../account_and_limits';
@@ -9,17 +5,23 @@ import initUserInternalRegexPlaceholder from '../account_and_limits';
 (() => {
   initUserInternalRegexPlaceholder();
 
-  const gitpodSettingEl = document.querySelector('#js-gitpod-settings-help-text');
-  if (!gitpodSettingEl) {
+  const el = document.querySelector('#js-gitpod-settings-help-text');
+  if (!el) {
     return;
   }
 
+  const { message, messageUrl } = el.dataset;
+
   // eslint-disable-next-line no-new
   new Vue({
-    el: gitpodSettingEl,
-    name: 'GitpodSettings',
-    components: {
-      IntegrationHelpText,
+    el,
+    render(createElement) {
+      return createElement(IntegrationHelpText, {
+        props: {
+          message,
+          messageUrl,
+        },
+      });
     },
   });
 })();
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index a0831c7df41..83e43d7ac48 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -5,6 +5,7 @@ import BlobViewer from '~/blob/viewer/index';
 import { initUploadForm } from '~/blob_edit/blob_bundle';
 import leaveByUrl from '~/namespaces/leave_by_url';
 import initVueNotificationsDropdown from '~/notifications';
+import { initUploadFileTrigger } from '~/projects/upload_file_experiment';
 import initReadMore from '~/read_more';
 import UserCallout from '~/user_callout';
 import Star from '../../../star';
@@ -41,3 +42,5 @@ leaveByUrl('project');
 initVueNotificationsDropdown();
 
 new ShortcutsNavigation(); // eslint-disable-line no-new
+
+initUploadFileTrigger();
diff --git a/app/assets/javascripts/projects/details/upload_button.vue b/app/assets/javascripts/projects/details/upload_button.vue
index a89ea34c438..5b19f15c233 100644
--- a/app/assets/javascripts/projects/details/upload_button.vue
+++ b/app/assets/javascripts/projects/details/upload_button.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlModalDirective } from '@gitlab/ui';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
+import { trackFileUploadEvent } from '../upload_file_experiment_tracking';
 
 const UPLOAD_BLOB_MODAL_ID = 'details-modal-upload-blob';
 
@@ -16,7 +17,7 @@ export default {
     targetBranch: {
       default: '',
     },
-    origionalBranch: {
+    originalBranch: {
       default: '',
     },
     canPushCode: {
@@ -29,19 +30,28 @@ export default {
       default: '',
     },
   },
+  methods: {
+    trackOpenModal() {
+      trackFileUploadEvent('click_upload_modal_trigger');
+    },
+  },
   uploadBlobModalId: UPLOAD_BLOB_MODAL_ID,
 };
 </script>
 <template>
   <span>
-    <gl-button v-gl-modal="$options.uploadBlobModalId" icon="upload">{{
-      __('Upload File')
-    }}</gl-button>
+    <gl-button
+      v-gl-modal="$options.uploadBlobModalId"
+      icon="upload"
+      data-testid="upload-file-button"
+      @click="trackOpenModal"
+      >{{ __('Upload File') }}</gl-button
+    >
     <upload-blob-modal
       :modal-id="$options.uploadBlobModalId"
       :commit-message="__('Upload New File')"
       :target-branch="targetBranch"
-      :origional-branch="origionalBranch"
+      :original-branch="originalBranch"
       :can-push-code="canPushCode"
       :path="path"
     />
diff --git a/app/assets/javascripts/projects/upload_file_experiment.js b/app/assets/javascripts/projects/upload_file_experiment.js
index 7d61df36a75..a7519f2bce8 100644
--- a/app/assets/javascripts/projects/upload_file_experiment.js
+++ b/app/assets/javascripts/projects/upload_file_experiment.js
@@ -1,24 +1,33 @@
-import ExperimentTracking from '~/experimentation/experiment_tracking';
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import createRouter from '~/repository/router';
+import UploadButton from './details/upload_button.vue';
 
-function trackEvent(eventName) {
-  const isEmpty = Boolean(document.querySelector('.project-home-panel.empty-project'));
-  const property = isEmpty ? 'empty' : 'nonempty';
-  const label = 'blob-upload-modal';
-  const Tracking = new ExperimentTracking('empty_repo_upload', { label, property });
-
-  Tracking.event(eventName);
-}
-
-export function initUploadFileTrigger() {
+export const initUploadFileTrigger = () => {
   const uploadFileTriggerEl = document.querySelector('.js-upload-file-experiment-trigger');
 
-  if (uploadFileTriggerEl) {
-    uploadFileTriggerEl.addEventListener('click', () => {
-      trackEvent('click_upload_modal_trigger');
-    });
-  }
-}
+  if (!uploadFileTriggerEl) return false;
+
+  const {
+    targetBranch,
+    originalBranch,
+    canPushCode,
+    path,
+    projectPath,
+  } = uploadFileTriggerEl.dataset;
 
-export function trackUploadFileFormSubmitted() {
-  trackEvent('click_upload_modal_form_submit');
-}
+  return new Vue({
+    el: uploadFileTriggerEl,
+    router: createRouter(projectPath, originalBranch),
+    provide: {
+      targetBranch,
+      originalBranch,
+      canPushCode: parseBoolean(canPushCode),
+      path,
+      projectPath,
+    },
+    render(h) {
+      return h(UploadButton);
+    },
+  });
+};
diff --git a/app/assets/javascripts/projects/upload_file_experiment_tracking.js b/app/assets/javascripts/projects/upload_file_experiment_tracking.js
new file mode 100644
index 00000000000..c5e93f19b32
--- /dev/null
+++ b/app/assets/javascripts/projects/upload_file_experiment_tracking.js
@@ -0,0 +1,9 @@
+import ExperimentTracking from '~/experimentation/experiment_tracking';
+
+export const trackFileUploadEvent = (eventName) => {
+  const isEmpty = Boolean(document.querySelector('.project-home-panel.empty-project'));
+  const property = isEmpty ? 'empty' : 'nonempty';
+  const label = 'blob-upload-modal';
+  const FileUploadTracking = new ExperimentTracking('empty_repo_upload', { label, property });
+  FileUploadTracking.event(eventName);
+};
diff --git a/app/assets/javascripts/repository/components/upload_blob_modal.vue b/app/assets/javascripts/repository/components/upload_blob_modal.vue
index 4cdfc5e947a..ec7ba469ca0 100644
--- a/app/assets/javascripts/repository/components/upload_blob_modal.vue
+++ b/app/assets/javascripts/repository/components/upload_blob_modal.vue
@@ -15,6 +15,7 @@ import { ContentTypeMultipartFormData } from '~/lib/utils/headers';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
+import { trackFileUploadEvent } from '~/projects/upload_file_experiment_tracking';
 import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 
 const PRIMARY_OPTIONS_TEXT = __('Upload file');
@@ -62,7 +63,7 @@ export default {
       type: String,
       required: true,
     },
-    origionalBranch: {
+    originalBranch: {
       type: String,
       required: true,
     },
@@ -113,7 +114,7 @@ export default {
       return numberToHumanSize(this.file.size);
     },
     showCreateNewMrToggle() {
-      return this.canPushCode && this.target !== this.origionalBranch;
+      return this.canPushCode && this.target !== this.originalBranch;
     },
     formCompleted() {
       return this.file && this.commit && this.target;
@@ -158,6 +159,7 @@ export default {
           },
         })
         .then((response) => {
+          trackFileUploadEvent('click_upload_modal_form_submit');
           visitUrl(response.data.filePath);
         })
         .catch(() => {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
deleted file mode 100644
index 3cd003461b3..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-import { GlButton, GlModalDirective } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
-
-export default {
-  name: 'MRWidgetMergeHelp',
-  components: {
-    GlButton,
-  },
-  directives: {
-    GlModalDirective,
-  },
-  props: {
-    missingBranch: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    missingBranchInfo() {
-      return sprintf(
-        s__(
-          'mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the',
-        ),
-        { branch: this.missingBranch },
-      );
-    },
-  },
-};
-</script>
-<template>
-  <section class="gl-py-3 gl-pr-3 gl-pl-5 gl-ml-7 mr-widget-help gl-font-style-italic">
-    <template v-if="missingBranch">
-      {{ missingBranchInfo }}
-    </template>
-    <template v-else>
-      {{ s__('mrWidget|You can merge this merge request manually using the') }}
-    </template>
-
-    <gl-button
-      v-gl-modal-directive="'modal-merge-info'"
-      variant="link"
-      class="gl-mt-n2 js-open-modal-help"
-    >
-      {{ s__('mrWidget|command line') }}
-    </gl-button>
-  </section>
-</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index e2a0689dffc..89b095fbfc1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -18,7 +18,6 @@ import GroupedTestReportsApp from '../reports/grouped_test_report/grouped_test_r
 import Loading from './components/loading.vue';
 import MrWidgetAlertMessage from './components/mr_widget_alert_message.vue';
 import WidgetHeader from './components/mr_widget_header.vue';
-import WidgetMergeHelp from './components/mr_widget_merge_help.vue';
 import MrWidgetPipelineContainer from './components/mr_widget_pipeline_container.vue';
 import WidgetRelatedLinks from './components/mr_widget_related_links.vue';
 import WidgetSuggestPipeline from './components/mr_widget_suggest_pipeline.vue';
@@ -59,7 +58,6 @@ export default {
     // ExtensionsContainer,
     'mr-widget-header': WidgetHeader,
     'mr-widget-suggest-pipeline': WidgetSuggestPipeline,
-    'mr-widget-merge-help': WidgetMergeHelp,
     MrWidgetPipelineContainer,
     'mr-widget-related-links': WidgetRelatedLinks,
     MrWidgetAlertMessage,
@@ -140,9 +138,6 @@ export default {
     componentName() {
       return stateMaps.stateToComponentMap[this.mr.state];
     },
-    shouldRenderMergeHelp() {
-      return stateMaps.statesToShowHelpWidget.indexOf(this.mr.state) > -1;
-    },
     hasPipelineMustSucceedConflict() {
       return !this.mr.hasCI && this.mr.onlyAllowMergeIfPipelineSucceeds;
     },
@@ -530,9 +525,6 @@ export default {
           <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />
         </div>
       </div>
-      <div v-if="shouldRenderMergeHelp" class="mr-widget-footer">
-        <mr-widget-merge-help />
-      </div>
     </div>
     <mr-widget-pipeline-container
       v-if="shouldRenderMergedPipeline"