Add latest changes from gitlab-org/gitlab@master

7 files changed, 153 insertions, 37 deletions

diff --git a/app/assets/javascripts/import/constants.js b/app/assets/javascripts/import/constants.js
new file mode 100644
index 00000000000..b9814b5ca60
--- /dev/null
+++ b/app/assets/javascripts/import/constants.js
@@ -0,0 +1,28 @@
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { __, s__ } from '~/locale';
+
+const STATISTIC_ITEMS = {
+  diff_note: __('Diff notes'),
+  issue: __('Issues'),
+  issue_attachment: s__('GithubImporter|Issue links'),
+  issue_event: __('Issue events'),
+  label: __('Labels'),
+  lfs_object: __('LFS objects'),
+  merge_request_attachment: s__('GithubImporter|Merge request links'),
+  milestone: __('Milestones'),
+  note: __('Notes'),
+  note_attachment: s__('GithubImporter|Note links'),
+  protected_branch: __('Protected branches'),
+  collaborator: s__('GithubImporter|Collaborators'),
+  pull_request: s__('GithubImporter|Pull requests'),
+  pull_request_merged_by: s__('GithubImporter|PR mergers'),
+  pull_request_review: s__('GithubImporter|PR reviews'),
+  pull_request_review_request: s__('GithubImporter|PR reviews'),
+  release: __('Releases'),
+  release_attachment: s__('GithubImporter|Release links'),
+};
+
+// support both camel case and snake case versions
+Object.assign(STATISTIC_ITEMS, convertObjectPropsToCamelCase(STATISTIC_ITEMS));
+
+export { STATISTIC_ITEMS };
diff --git a/app/assets/javascripts/import/details/components/import_details_app.vue b/app/assets/javascripts/import/details/components/import_details_app.vue
index ab9242b9081..86820663025 100644
--- a/app/assets/javascripts/import/details/components/import_details_app.vue
+++ b/app/assets/javascripts/import/details/components/import_details_app.vue
@@ -1,7 +1,9 @@
 <script>
 import { s__ } from '~/locale';
+import ImportDetailsTable from './import_details_table.vue';
 
 export default {
+  components: { ImportDetailsTable },
   props: {
     project: {
       type: Object,
@@ -18,5 +20,6 @@ export default {
 <template>
   <div>
     <h1>{{ $options.i18n.pageTitle }}</h1>
+    <import-details-table />
   </div>
 </template>
diff --git a/app/assets/javascripts/import/details/components/import_details_table.vue b/app/assets/javascripts/import/details/components/import_details_table.vue
new file mode 100644
index 00000000000..9ce58e8a9bc
--- /dev/null
+++ b/app/assets/javascripts/import/details/components/import_details_table.vue
@@ -0,0 +1,106 @@
+<script>
+import { GlEmptyState, GlIcon, GlLink, GlTable } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
+import { STATISTIC_ITEMS } from '../../constants';
+
+const DEFAULT_PAGE_SIZE = 20;
+
+export default {
+  components: {
+    GlEmptyState,
+    GlIcon,
+    GlLink,
+    GlTable,
+    PaginationBar,
+  },
+  STATISTIC_ITEMS,
+  LOCAL_STORAGE_KEY: 'gl-import-details-page-size',
+  fields: [
+    {
+      key: 'type',
+      label: __('Type'),
+      tdClass: 'gl-white-space-nowrap',
+    },
+    {
+      key: 'title',
+      label: __('Title'),
+      tdClass: 'gl-md-w-30 gl-word-break-word',
+    },
+    {
+      key: 'url',
+      label: __('URL'),
+      tdClass: 'gl-white-space-nowrap',
+    },
+    {
+      key: 'details',
+      label: __('Details'),
+    },
+  ],
+  data() {
+    return {
+      page: 1,
+      perPage: DEFAULT_PAGE_SIZE,
+    };
+  },
+  computed: {
+    items() {
+      return [];
+    },
+
+    hasItems() {
+      return this.items.length > 0;
+    },
+
+    pageInfo() {
+      const mockPageInfo = {
+        page: this.page,
+        perPage: this.perPage,
+        totalPages: this.page,
+        total: this.items.length,
+      };
+      return mockPageInfo;
+    },
+  },
+
+  methods: {
+    setPage(page) {
+      this.page = page;
+    },
+
+    setPageSize(size) {
+      this.perPage = size;
+      this.page = 1;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-table :fields="$options.fields" :items="items" class="gl-mt-5" show-empty>
+      <template #empty>
+        <gl-empty-state :title="s__('Import|No import details')" />
+      </template>
+
+      <template #cell(type)="{ item: { type } }">
+        {{ $options.STATISTIC_ITEMS[type] }}
+      </template>
+      <template #cell(url)="{ item: { url } }">
+        <gl-link v-if="url" :href="url" target="_blank">
+          {{ url }}
+          <gl-icon name="external-link" />
+        </gl-link>
+      </template>
+    </gl-table>
+    <pagination-bar
+      v-if="hasItems"
+      :page-info="pageInfo"
+      class="gl-mt-5"
+      :storage-key="$options.LOCAL_STORAGE_KEY"
+      @set-page="setPage"
+      @set-page-size="setPageSize"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/import_entities/components/import_status.vue b/app/assets/javascripts/import_entities/components/import_status.vue
index f4facbba273..c06258de50c 100644
--- a/app/assets/javascripts/import_entities/components/import_status.vue
+++ b/app/assets/javascripts/import_entities/components/import_status.vue
@@ -1,32 +1,9 @@
 <script>
 import { GlAccordion, GlAccordionItem, GlBadge, GlIcon } from '@gitlab/ui';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __, s__ } from '~/locale';
-import { STATUSES } from '../constants';
-
-const STATISTIC_ITEMS = {
-  diff_note: __('Diff notes'),
-  issue: __('Issues'),
-  issue_attachment: s__('GithubImporter|Issue links'),
-  issue_event: __('Issue events'),
-  label: __('Labels'),
-  lfs_object: __('LFS objects'),
-  merge_request_attachment: s__('GithubImporter|Merge request links'),
-  milestone: __('Milestones'),
-  note: __('Notes'),
-  note_attachment: s__('GithubImporter|Note links'),
-  protected_branch: __('Protected branches'),
-  collaborator: s__('GithubImporter|Collaborators'),
-  pull_request: s__('GithubImporter|Pull requests'),
-  pull_request_merged_by: s__('GithubImporter|PR mergers'),
-  pull_request_review: s__('GithubImporter|PR reviews'),
-  pull_request_review_request: s__('GithubImporter|PR reviews'),
-  release: __('Releases'),
-  release_attachment: s__('GithubImporter|Release links'),
-};
 
-// support both camel case and snake case versions
-Object.assign(STATISTIC_ITEMS, convertObjectPropsToCamelCase(STATISTIC_ITEMS));
+import { STATISTIC_ITEMS } from '~/import/constants';
+import { STATUSES } from '../constants';
 
 const SCHEDULED_STATUS = {
   icon: 'status-scheduled',
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 2c30467a026..fac070d6e47 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -133,14 +133,20 @@ export default {
       const fileName = this.requests[0].displayName;
       return `${fileName}_perf_bar_${Date.now()}.json`;
     },
-    memoryReportPath() {
-      return mergeUrlParams({ performance_bar: 'memory' }, window.location.href);
-    },
     showZoekt() {
       return document.body.dataset.page === 'search:show';
     },
     showFlamegraphButtons() {
-      return this.currentRequest.details && this.isGetRequest(this.currentRequestId);
+      return this.isGetRequest(this.currentRequestId);
+    },
+    showMemoryReportButton() {
+      return this.isGetRequest(this.currentRequestId) && this.env === 'development';
+    },
+    memoryReportPath() {
+      return mergeUrlParams(
+        { performance_bar: 'memory' },
+        this.store.findRequest(this.currentRequestId).fullUrl,
+      );
     },
   },
   created() {
@@ -225,11 +231,7 @@ export default {
           >{{ s__('PerformanceBar|Download') }}</gl-link
         >
       </div>
-      <div
-        v-if="currentRequest.details && env === 'development'"
-        id="peek-memory-report"
-        class="view"
-      >
+      <div v-if="showMemoryReportButton" id="peek-memory-report" class="view">
         <gl-link class="gl-text-blue-200" :href="memoryReportPath">{{
           s__('PerformanceBar|Memory report')
         }}</gl-link>
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 df6e0ba6b34..b90ba0142c6 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
@@ -421,8 +421,8 @@ export default {
         );
     },
     setFaviconHelper() {
-      if (this.mr.ciStatusFaviconPath) {
-        return setFaviconOverlay(this.mr.ciStatusFaviconPath);
+      if (this.mr.faviconOverlayPath) {
+        return setFaviconOverlay(this.mr.faviconOverlayPath);
       }
       return Promise.resolve();
     },
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index c00841f1692..a7758191315 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -140,7 +140,7 @@ export default class MergeRequestStore {
     this.isPipelineActive = data.pipeline ? data.pipeline.active : false;
     this.isPipelineBlocked =
       data.only_allow_merge_if_pipeline_succeeds && pipelineStatus?.group === 'manual';
-    this.ciStatusFaviconPath = pipelineStatus ? pipelineStatus.favicon : null;
+    this.faviconOverlayPath = data.favicon_overlay_path;
     this.terraformReportsPath = data.terraform_reports_path;
     this.testResultsPath = data.test_reports_path;
     this.accessibilityReportPath = data.accessibility_report_path;