Display expired artifacts message in test suite table

What does this MR do and why?

Related to #296963 (closed)

This MR builds on this backend MR to show a specific message on the suite-level view of the pipeline page's Tests tab when there are no test cases to display due to expired artifacts. The summary-level view still shows statistics for these tests in this case because we store them separately; when the artifacts have expired we can no longer show the details of each test.

This feature is behind the ci_test_report_artifacts_expired feature flag. The backend only returns the specific 404/Test report artifacts have expired response that the frontend is working off of if the feature flag is enabled, so there's no need to add another feature flag check on the frontend.

Screenshots or screen recordings

without this MR	with this MR
Screen_Recording_2022-04-25_at_17.18.18	Screen_Recording_2022-04-25_at_16.40.21

How to set up and validate locally

1. git checkout 296963-show-expired-test-report-artifacts-message-frontend
2. echo "Feature.enable(:ci_test_report_artifacts_expired)" | rails c
3. set up test reports for a project OR clone this test project
4. configure test report artifacts to expire quickly OR stub this method to return true:

diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index 0420bb13b81..1d6dd645c03 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -1297,9 +1297,7 @@ def authorized_cluster_agents
     end
 
     def has_expired_test_reports?
+      true
-      strong_memoize(:artifacts_expired) do
-        !has_reports?(::Ci::JobArtifact.test_reports.not_expired)
-      end
     end
 
     private

5. run a pipeline that generates a test report
6. wait for the artifact to expire (if you didn't stub has_expired_test_reports)
7. navigate to the Tests tab on the pipeline page
8. click on a test suite
9. observe the specific Test details are populated by job artifacts. The job artifacts from this pipeline are expired. message displayed in addition to the generic There are no test cases to display. message

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.

app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue

@@ -35,7 +35,7 @@ export default {
   },
   computed: {
     ...mapState(['pageInfo']),
-    ...mapGetters(['getSuiteTests', 'getSuiteTestCount']),
+    ...mapGetters(['getSuiteTests', 'getSuiteTestCount', 'getSuiteArtifactsExpired']),
     hasSuites() {
       return this.getSuiteTests.length > 0;
     },
@@ -80,7 +80,8 @@ export default {
       <div
         v-for="(testCase, index) in getSuiteTests"
         :key="index"
-        class="gl-responsive-table-row rounded align-items-md-start mt-xs-3 js-case-row"
+        class="gl-responsive-table-row rounded align-items-md-start mt-xs-3"
+        data-testid="test-case-row"
       >
         <div class="table-section section-20 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div>
@@ -157,7 +158,16 @@ export default {
     </div>
 
     <div v-else>
-      <p class="js-no-test-cases">{{ s__('TestReports|There are no test cases to display.') }}</p>
+      <p 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>