diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 21:09:04 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 21:09:04 +0300 |
commit | abe6e7a2e7a456fa05f4ebeb28f8747a92cf59b1 (patch) | |
tree | d028bb982b43b4079e4b47477b3fe51d4b913ba5 /app/assets/javascripts/pipelines | |
parent | d0bb0e04f40b962576353ce56e270aa7bd25a5c0 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipelines')
-rw-r--r-- | app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue | 58 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/pipeline_test_details.js | 11 |
2 files changed, 52 insertions, 17 deletions
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue index 9b0e6560c53..1e481d37017 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue @@ -7,11 +7,21 @@ import { GlLink, GlButton, GlPagination, + GlEmptyState, + GlSprintf, } from '@gitlab/ui'; import { mapState, mapGetters, mapActions } from 'vuex'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; +import { helpPagePath } from '~/helpers/help_page_helper'; import TestCaseDetails from './test_case_details.vue'; +export const i18n = { + expiredArtifactsTitle: s__('TestReports|Job artifacts are expired'), + expiredArtifactsDescription: s__( + 'TestReports|Test reports require job artifacts but all artifacts are expired. %{linkStart}Learn more%{linkEnd}', + ), +}; + export default { name: 'TestsSuiteTable', components: { @@ -20,12 +30,19 @@ export default { GlLink, GlButton, GlPagination, + GlEmptyState, + GlSprintf, TestCaseDetails, }, directives: { GlTooltip: GlTooltipDirective, GlModalDirective, }, + inject: { + artifactsExpiredImagePath: { + default: '', + }, + }, props: { heading: { type: String, @@ -44,18 +61,21 @@ export default { ...mapActions(['setPage']), }, wrapSymbols: ['::', '#', '.', '_', '-', '/', '\\'], + i18n, + learnMorePath: helpPagePath('ci/unit_test_reports', { + anchor: 'viewing-unit-test-reports-on-gitlab', + }), }; </script> <template> <div> - <div class="row gl-mt-3"> - <div class="col-12"> - <h4>{{ heading }}</h4> - </div> - </div> - <div v-if="hasSuites" class="test-reports-table gl-mb-3 js-test-cases-table"> + <div class="row gl-mt-3"> + <div class="col-12"> + <h4>{{ heading }}</h4> + </div> + </div> <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold fgray"> <div role="rowheader" class="table-section section-20"> {{ __('Suite') }} @@ -158,16 +178,24 @@ export default { </div> <div v-else> - <p data-testid="no-test-cases"> + <gl-empty-state + v-if="getSuiteArtifactsExpired" + :title="$options.i18n.expiredArtifactsTitle" + :svg-path="artifactsExpiredImagePath" + :svg-height="100" + data-testid="artifacts-expired" + > + <template #description> + <gl-sprintf :message="$options.i18n.expiredArtifactsDescription"> + <template #link="{ content }"> + <gl-link :href="$options.learnMorePath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </template> + </gl-empty-state> + <p v-else data-testid="no-test-cases"> {{ s__('TestReports|There are no test cases to display.') }} </p> - <p v-if="getSuiteArtifactsExpired" data-testid="artifacts-expired"> - {{ - s__( - 'TestReports|Test details are populated by job artifacts. The job artifacts from this pipeline are expired.', - ) - }} - </p> </div> </div> </template> diff --git a/app/assets/javascripts/pipelines/pipeline_test_details.js b/app/assets/javascripts/pipelines/pipeline_test_details.js index 46c7ec07d03..27ab2418440 100644 --- a/app/assets/javascripts/pipelines/pipeline_test_details.js +++ b/app/assets/javascripts/pipelines/pipeline_test_details.js @@ -8,8 +8,14 @@ Vue.use(Translate); export const createTestDetails = (selector) => { const el = document.querySelector(selector); - const { blobPath, emptyStateImagePath, hasTestReport, summaryEndpoint, suiteEndpoint } = - el?.dataset || {}; + const { + blobPath, + emptyStateImagePath, + hasTestReport, + summaryEndpoint, + suiteEndpoint, + artifactsExpiredImagePath, + } = el?.dataset || {}; const testReportsStore = createTestReportsStore({ blobPath, summaryEndpoint, @@ -24,6 +30,7 @@ export const createTestDetails = (selector) => { }, provide: { emptyStateImagePath, + artifactsExpiredImagePath, hasTestReport: parseBoolean(hasTestReport), }, store: testReportsStore, |