Add error handling for sec config license fetch

This commit adds an error handler to the query, which is responsible
for fetching the license tier of the current user. Currently if
the query fails, the whole security training feature is not show.

Changelog: fixed
EE: true

app/assets/javascripts/security_configuration/components/app.vue

@@ -57,6 +57,9 @@ export default {
       update({ currentLicense }) {
         return currentLicense?.plan;
       },
+      error() {
+        this.hasCurrentLicenseFetchError = true;
+      },
     },
   },
   props: {
@@ -99,6 +102,7 @@ export default {
       autoDevopsEnabledAlertDismissedProjects: [],
       errorMessage: '',
       currentLicensePlan: '',
+      hasCurrentLicenseFetchError: false,
     };
   },
   computed: {
@@ -120,7 +124,10 @@ export default {
       );
     },
     shouldShowVulnerabilityManagementTab() {
-      return this.currentLicensePlan === LICENSE_ULTIMATE;
+      // if the query fails (if the plan is `null` also means an error has occurred) we still want to show the feature
+      const hasQueryError = this.hasCurrentLicenseFetchError || this.currentLicensePlan === null;
+
+      return hasQueryError || this.currentLicensePlan === LICENSE_ULTIMATE;
     },
   },
   methods: {

spec/frontend/security_configuration/components/app_spec.js

@@ -54,13 +54,22 @@ describe('App component', () => {
 
   const createComponent = ({
     shouldShowCallout = true,
-    license = LICENSE_ULTIMATE,
+    licenseQueryResponse = LICENSE_ULTIMATE,
     ...propsData
   }) => {
     userCalloutDismissSpy = jest.fn();
 
     mockApollo = createMockApollo([
-      [currentLicenseQuery, jest.fn().mockResolvedValue(getCurrentLicensePlanResponse(license))],
+      [
+        currentLicenseQuery,
+        jest
+          .fn()
+          .mockResolvedValue(
+            licenseQueryResponse instanceof Error
+              ? licenseQueryResponse
+              : getCurrentLicensePlanResponse(licenseQueryResponse),
+          ),
+      ],
     ]);
 
     wrapper = extendedWrapper(
@@ -484,19 +493,23 @@ describe('App component', () => {
     });
 
     it.each`
-      license             | display
-      ${LICENSE_ULTIMATE} | ${true}
-      ${LICENSE_PREMIUM}  | ${false}
-      ${LICENSE_FREE}     | ${false}
-      ${null}             | ${false}
-    `('displays $display for license $license', async ({ license, display }) => {
-      createComponent({
-        license,
-        augmentedSecurityFeatures: securityFeaturesMock,
-        augmentedComplianceFeatures: complianceFeaturesMock,
-      });
-      await waitForPromises();
-      expect(findVulnerabilityManagementTab().exists()).toBe(display);
-    });
+      licenseQueryResponse | display
+      ${LICENSE_ULTIMATE}  | ${true}
+      ${LICENSE_PREMIUM}   | ${false}
+      ${LICENSE_FREE}      | ${false}
+      ${null}              | ${true}
+      ${new Error()}       | ${true}
+    `(
+      'displays $display for license $licenseQueryResponse',
+      async ({ licenseQueryResponse, display }) => {
+        createComponent({
+          licenseQueryResponse,
+          augmentedSecurityFeatures: securityFeaturesMock,
+          augmentedComplianceFeatures: complianceFeaturesMock,
+        });
+        await waitForPromises();
+        expect(findVulnerabilityManagementTab().exists()).toBe(display);
+      },
+    );
   });
 });