Skip to content

Add ImportDetailsTable with empty state

Justin Ho Tuan Duong requested to merge 386748-import-details-page-table into master

What does this MR do and why?

  • Add ImportDetailsTable component with empty state. Note: items is still using mock data at the moment.
  • Add PaginationBar for pagination of items in table.
  • Extract STATISTIC_ITEMS to constants to be reused by multiple components.

Screenshots or screen recordings

Import details with empty state Import details with mock data

Import_details_table_empty_state

Import_details_table_mock_data

How to set up and validate locally

Feature.enable :import_details_page
  • To show some elements in the table apply this diff for mock data:
diff --git a/app/assets/javascripts/import/details/components/import_details_table.vue b/app/assets/javascripts/import/details/components/import_details_table.vue
index 9ce58e8a9bcc..2e0f7c3cde8a 100644
--- a/app/assets/javascripts/import/details/components/import_details_table.vue
+++ b/app/assets/javascripts/import/details/components/import_details_table.vue
@@ -46,7 +46,53 @@ export default {
   },
   computed: {
     items() {
-      return [];
+      const mockItems = [
+        {
+          type: 'pull_request',
+          title: __('Add one cool feature'),
+          url: 'https://github.com/USER/REPO/pull/2',
+          details: {
+            exception_class: 'ActiveRecord::RecordInvalid',
+            exception_message: __('Record invalid'),
+            source: 'Gitlab::GithubImport::Importer::PullRequestImporter',
+            github_identifiers: {
+              iid: 2,
+              issuable_type: 'MergeRequest',
+              object_type: 'pull_request',
+            },
+          },
+        },
+        {
+          type: 'pull_request',
+          title: __('Add another awesome feature'),
+          url: 'https://github.com/USER/REPO/pull/3',
+          details: {
+            exception_class: 'ActiveRecord::RecordInvalid',
+            exception_message: __('Record invalid'),
+            source: 'Gitlab::GithubImport::Importer::PullRequestImporter',
+            github_identifiers: {
+              iid: 3,
+              issuable_type: 'MergeRequest',
+              object_type: 'pull_request',
+            },
+          },
+        },
+        {
+          type: 'lfs_object',
+          title: '3a9257fae9e86faee27d7208cb55e086f18e6f29f48c430bfbc26d42eb',
+          url: null,
+          details: {
+            exception_class: 'NameError',
+            exception_message: __('some message'),
+            source: 'Gitlab::GithubImport::Importer::LfsObjectImporter',
+            github_identifiers: {
+              oid: '3a9257fae9e86faee27d7208cb55e086f18e6f29f48c430bfbc26d42eb',
+              size: 2473979,
+            },
+          },
+        },
+      ];
+      return mockItems;
     },
 
     hasItems() {

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #386748 (closed)

Merge request reports