Merge branch '355940-sec-training-url-loading' into 'master'

Display completed training urls

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/122366



Merged-by: David Pisek <dpisek@gitlab.com>
Approved-by: David Pisek <dpisek@gitlab.com>
Approved-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Co-authored-by: Samantha Ming <sming@gitlab.com>

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue

@@ -25,6 +25,7 @@ export const TRAINING_URL_POLLING_INTERVAL = 5000;
 export default {
   i18n,
   TEMP_PROVIDER_LOGOS,
+  SECURITY_TRAINING_URL_STATUS_COMPLETED,
   components: {
     GlLink,
     GlIcon,
@@ -172,12 +173,12 @@ export default {
     <div v-else-if="isUrlsLoading">
       <gl-skeleton-loader :width="200" :lines="3" />
     </div>
-    <div v-else>
-      <div
-        v-for="({ name, url, identifier }, index) in securityTrainingUrls"
-        :key="index"
-        class="gl-mt-6"
-      >
+    <div
+      v-for="({ name, url, identifier, status }, index) in securityTrainingUrls"
+      :key="index"
+      class="gl-mt-6"
+    >
+      <div v-if="status === $options.SECURITY_TRAINING_URL_STATUS_COMPLETED">
         <div>
           <span v-if="$options.TEMP_PROVIDER_LOGOS[name]" class="gl-mr-1 gl-display-inline-flex">
             <div

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

@@ -277,6 +277,23 @@ describe('VulnerabilityTraining component', () => {
         expect(findTrainingItemLinks().exists()).toBe(false);
         expect(findTrainingItemLinkIcons().exists()).toBe(false);
       });
+
+      it('does not display the training item if the status is not completed', async () => {
+        createApolloProvider({
+          projectQueryHandler: jest.fn().mockResolvedValue(
+            getSecurityTrainingProjectData({
+              urlOverrides: {
+                first: {
+                  status: SECURITY_TRAINING_URL_STATUS_PENDING,
+                },
+              },
+            }).response,
+          ),
+        });
+        createComponent();
+        await waitForQueryToBeLoaded();
+        expect(findTrainingItemLinks()).toHaveLength(testTrainingUrls.length - 1);
+      });
     });
 
     describe('security training query', () => {