Add ImportDetailsTable with empty state
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 |
---|---|
How to set up and validate locally
- Go to
http://127.0.0.1:3000/import/github/details
. The page should render 404 Not Found. - Enable the feature flag and refresh the page:
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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #386748 (closed)