diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue | 58 |
1 files changed, 43 insertions, 15 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> |