Apply `gl-break-words` to test file name in Pipeline test suite detail
What does this MR do and why?
Apply gl-break-word
to test file name in Pipeline test suite detail
This prevents the filename from breaking out of the modal.
Screenshots or screen recordings
Before | After |
---|---|
How to set up and validate locally
- check out this branch locally
- Visit a pipeline page that has tests
- Alternatively, apply this patch to fake it:
diff --git a/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue index ced2843095c5..a8d6273d64ec 100644 --- a/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue +++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_reports.vue @@ -27,11 +27,10 @@ export default { ...mapState('testReports', ['isLoading', 'selectedSuiteIndex', 'testReports']), ...mapGetters('testReports', ['getSelectedSuite', 'getTestSuites']), showSuite() { - return this.selectedSuiteIndex !== null; + return true; }, showTests() { - const { test_suites: testSuites = [] } = this.testReports; - return testSuites.length > 0; + return true; }, }, async created() { diff --git a/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue b/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue index cb2e52941db5..7f2b61f15dbc 100644 --- a/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue +++ b/app/assets/javascripts/ci/pipeline_details/test_reports/test_suite_table.vue @@ -59,7 +59,7 @@ export default { 'getSuiteArtifactsExpired', ]), hasSuites() { - return this.getSuiteTests.length > 0; + return true; }, }, methods: { @@ -106,7 +106,22 @@ export default { </div> <div - v-for="(testCase, index) in getSuiteTests" + v-for="(testCase, index) in [ + { + id: 1, + classname: + 'Container protection rules project settings table container protection rules renders table with container protection rules', + name: + 'Container protection rules project settings table container protection rules renders table with container protection rules', + status: 'success', + icon: 'status_success', + file: + 'spec/frontend/packages_and_registries/settings/project/settings/components/container_protection_rules_spec.js', + filePath: + 'spec/frontend/packages_and_registries/settings/project/settings/components/container_protection_rules_spec.js', + formattedTime: '3.58s', + }, + ]" :key="index" class="gl-responsive-table-row gl-rounded-base gl-align-items-flex-start" data-testid="test-case-row"
- Alternatively, apply this patch to fake it:
- Click the "View details" on a test that has a long filename (or on the faked test added with the patch above)
- You will see that the filename wraps in the link inside the modal.
Edited by Chad Lavimoniere