Add latest changes from gitlab-org/gitlab@master

9 files changed, 104 insertions, 28 deletions

diff --git a/app/assets/javascripts/diffs/i18n.js b/app/assets/javascripts/diffs/i18n.js
index 95155181c78..e233a0cef0a 100644
--- a/app/assets/javascripts/diffs/i18n.js
+++ b/app/assets/javascripts/diffs/i18n.js
@@ -2,7 +2,7 @@ import { __, s__ } from '~/locale';
 
 export const GENERIC_ERROR = __('Something went wrong on our end. Please try again!');
 export const LOAD_SINGLE_DIFF_FAILED = s__(
-  'MergeRequest|Encountered an issue while trying to fetch the single file diff.',
+  "MergeRequest|Can't fetch the diff needed to update this view. Please reload this page.",
 );
 export const DISCUSSION_SINGLE_DIFF_FAILED = s__(
   "MergeRequest|Can't fetch the single file diff for the discussion. Please reload this page.",
diff --git a/app/assets/javascripts/import/details/components/import_details_app.vue b/app/assets/javascripts/import/details/components/import_details_app.vue
new file mode 100644
index 00000000000..ab9242b9081
--- /dev/null
+++ b/app/assets/javascripts/import/details/components/import_details_app.vue
@@ -0,0 +1,22 @@
+<script>
+import { s__ } from '~/locale';
+
+export default {
+  props: {
+    project: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  i18n: {
+    pageTitle: s__('Import|GitHub import details'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h1>{{ $options.i18n.pageTitle }}</h1>
+  </div>
+</template>
diff --git a/app/assets/javascripts/import/details/index.js b/app/assets/javascripts/import/details/index.js
new file mode 100644
index 00000000000..70850d947e2
--- /dev/null
+++ b/app/assets/javascripts/import/details/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import ImportDetailsApp from './components/import_details_app.vue';
+
+export default () => {
+  const el = document.querySelector('.js-import-details');
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    name: 'ImportDetailsRoot',
+    render(createElement) {
+      return createElement(ImportDetailsApp);
+    },
+  });
+};
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index 150a1b16e58..dee8d11c065 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -170,6 +170,7 @@ function createApolloClient(resolvers = {}, config = {}) {
           config: {
             url: httpResponse.url,
             operationName: operation.operationName,
+            method: operation.getContext()?.fetchOptions?.method || 'POST', // If method is not explicitly set, we default to POST request
           },
           headers: {
             'x-request-id': httpResponse.headers.get('x-request-id'),
diff --git a/app/assets/javascripts/pages/import/github/details/index.js b/app/assets/javascripts/pages/import/github/details/index.js
new file mode 100644
index 00000000000..44a85589c9d
--- /dev/null
+++ b/app/assets/javascripts/pages/import/github/details/index.js
@@ -0,0 +1,3 @@
+import initImportDetails from '~/import/details';
+
+initImportDetails();
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 59a532461ab..2c5f4354d38 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlLink } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { glEmojiTag } from '~/emoji';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -12,6 +13,7 @@ export default {
   components: {
     AddRequest,
     DetailedMetric,
+    GlLink,
     RequestSelector,
   },
   directives: {
@@ -30,6 +32,10 @@ export default {
       type: String,
       required: true,
     },
+    requestMethod: {
+      type: String,
+      required: true,
+    },
     peekUrl: {
       type: String,
       required: true,
@@ -108,9 +114,6 @@ export default {
         this.currentRequestId = requestId;
       },
     },
-    initialRequest() {
-      return this.currentRequestId === this.requestId;
-    },
     hasHost() {
       return this.currentRequest && this.currentRequest.details && this.currentRequest.details.host;
     },
@@ -135,6 +138,9 @@ export default {
     showZoekt() {
       return document.body.dataset.page === 'search:show';
     },
+    showFlamegraphButtons() {
+      return this.currentRequest.details && this.isGetRequest(this.currentRequestId);
+    },
   },
   created() {
     if (!this.showZoekt) {
@@ -151,12 +157,15 @@ export default {
       this.currentRequest = newRequestId;
       this.$emit('change-request', newRequestId);
     },
-    flamegraphPath(mode) {
+    flamegraphPath(mode, requestId) {
       return mergeUrlParams(
         { performance_bar: 'flamegraph', stackprof_mode: mode },
-        window.location.href,
+        this.store.findRequest(requestId).fullUrl,
       );
     },
+    isGetRequest(requestId) {
+      return this.store.findRequest(requestId)?.method?.toUpperCase() === 'GET';
+    },
   },
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
@@ -192,41 +201,41 @@ export default {
         id="peek-view-trace"
         class="view"
       >
-        <a class="gl-text-blue-200" :href="currentRequest.details.tracing.tracing_url">{{
+        <gl-link class="gl-text-blue-200" :href="currentRequest.details.tracing.tracing_url">{{
           s__('PerformanceBar|Trace')
-        }}</a>
+        }}</gl-link>
       </div>
       <div v-if="currentRequest.details" id="peek-download" class="view">
-        <a class="gl-text-blue-200" :download="downloadName" :href="downloadPath">{{
+        <gl-link class="gl-text-blue-200" :download="downloadName" :href="downloadPath">{{
           s__('PerformanceBar|Download')
-        }}</a>
+        }}</gl-link>
       </div>
       <div
         v-if="currentRequest.details && env === 'development'"
         id="peek-memory-report"
         class="view"
       >
-        <a class="gl-text-blue-200" :href="memoryReportPath">{{
+        <gl-link class="gl-text-blue-200" :href="memoryReportPath">{{
           s__('PerformanceBar|Memory report')
-        }}</a>
+        }}</gl-link>
       </div>
-      <div v-if="currentRequest.details" id="peek-flamegraph" class="view">
+      <div v-if="showFlamegraphButtons" id="peek-flamegraph" class="view">
         <span class="gl-text-white-200">{{ s__('PerformanceBar|Flamegraph with mode:') }}</span>
-        <a class="gl-text-blue-200" :href="flamegraphPath('wall')">{{
+        <gl-link class="gl-text-blue-200" :href="flamegraphPath('wall', currentRequestId)">{{
           s__('PerformanceBar|wall')
-        }}</a>
+        }}</gl-link>
         /
-        <a class="gl-text-blue-200" :href="flamegraphPath('cpu')">{{
+        <gl-link class="gl-text-blue-200" :href="flamegraphPath('cpu', currentRequestId)">{{
           s__('PerformanceBar|cpu')
-        }}</a>
+        }}</gl-link>
         /
-        <a class="gl-text-blue-200" :href="flamegraphPath('object')">{{
+        <gl-link class="gl-text-blue-200" :href="flamegraphPath('object', currentRequestId)">{{
           s__('PerformanceBar|object')
-        }}</a>
+        }}</gl-link>
       </div>
-      <a v-if="statsUrl" class="gl-text-blue-200 view" :href="statsUrl">{{
+      <gl-link v-if="statsUrl" class="gl-text-blue-200 view" :href="statsUrl">{{
         s__('PerformanceBar|Stats')
-      }}</a>
+      }}</gl-link>
       <request-selector
         v-if="currentRequest"
         :current-request="currentRequest"
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 84fe14fe056..7d4b582f681 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -32,6 +32,7 @@ const initPerformanceBar = (el) => {
         store,
         env: performanceBarData.env,
         requestId: performanceBarData.requestId,
+        requestMethod: performanceBarData.requestMethod,
         peekUrl: performanceBarData.peekUrl,
         profileUrl: performanceBarData.profileUrl,
         statsUrl: performanceBarData.statsUrl,
@@ -40,7 +41,13 @@ const initPerformanceBar = (el) => {
     mounted() {
       PerformanceBarService.registerInterceptor(this.peekUrl, this.addRequest);
 
-      this.addRequest(this.requestId, window.location.href);
+      this.addRequest(
+        this.requestId,
+        window.location.href,
+        undefined,
+        undefined,
+        this.requestMethod,
+      );
       this.loadRequestDetails(this.requestId);
     },
     beforeDestroy() {
@@ -56,12 +63,12 @@ const initPerformanceBar = (el) => {
           this.addRequest(urlOrRequestId, urlOrRequestId);
         }
       },
-      addRequest(requestId, requestUrl, operationName) {
+      addRequest(requestId, requestUrl, operationName, requestParams, methodVerb) {
         if (!this.store.canTrackRequest(requestUrl)) {
           return;
         }
 
-        this.store.addRequest(requestId, requestUrl, operationName);
+        this.store.addRequest(requestId, requestUrl, operationName, requestParams, methodVerb);
       },
       loadRequestDetails(requestId) {
         const request = this.store.findRequest(requestId);
@@ -145,6 +152,7 @@ const initPerformanceBar = (el) => {
           store: this.store,
           env: this.env,
           requestId: this.requestId,
+          requestMethod: this.requestMethod,
           peekUrl: this.peekUrl,
           profileUrl: this.profileUrl,
           statsUrl: this.statsUrl,
diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index e67143f3ede..3a9788d8ab6 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -14,11 +14,13 @@ export default class PerformanceBarService {
         fireCallback,
         requestId,
         requestUrl,
+        requestParams,
         operationName,
+        methodVerb,
       ] = PerformanceBarService.callbackParams(response, peekUrl);
 
       if (fireCallback) {
-        callback(requestId, requestUrl, operationName);
+        callback(requestId, requestUrl, operationName, requestParams, methodVerb);
       }
 
       return response;
@@ -35,11 +37,14 @@ export default class PerformanceBarService {
   static callbackParams(response, peekUrl) {
     const requestId = response.headers && response.headers['x-request-id'];
     const requestUrl = response.config?.url;
+    const requestParams = response.config?.params;
+    const methodVerb = response.config?.method;
+
     const cachedResponse =
       response.headers && parseBoolean(response.headers['x-gitlab-from-cache']);
     const fireCallback = requestUrl !== peekUrl && Boolean(requestId) && !cachedResponse;
     const operationName = response.config?.operationName;
 
-    return [fireCallback, requestId, requestUrl, operationName];
+    return [fireCallback, requestId, requestUrl, requestParams, operationName, methodVerb];
   }
 }
diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
index 2011604534c..71f7e5b42f4 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -1,11 +1,19 @@
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+
 export default class PerformanceBarStore {
   constructor() {
     this.requests = [];
   }
 
-  addRequest(requestId, requestUrl, operationName) {
+  addRequest(requestId, requestUrl, operationName, requestParams, methodVerb) {
     if (!this.findRequest(requestId)) {
-      let displayName = PerformanceBarStore.truncateUrl(requestUrl);
+      let displayName = '';
+
+      if (methodVerb) {
+        displayName += `${methodVerb.toUpperCase()} `;
+      }
+
+      displayName += PerformanceBarStore.truncateUrl(requestUrl);
 
       if (operationName) {
         displayName += ` (${operationName})`;
@@ -14,6 +22,8 @@ export default class PerformanceBarStore {
       this.requests.push({
         id: requestId,
         url: requestUrl,
+        fullUrl: mergeUrlParams(requestParams, requestUrl),
+        method: methodVerb,
         details: {},
         displayName,
       });