Code Improvements for Projects :: Infra :: Google Cloud

Purpose

This MR introduces code fixups from !73896 (merged) and !74880 (merged) which were considered "out-of-scope" of those MRs.

Things were considered out-of-scope because:

1. They either didn't serve the purpose of the MRs i.e. they had nothing to do with the creation of service accounts frontend or backend, or
2. It was considered worth merging and creating a future issue / MR as everything is disabled behind a feature flag i.e. merge small MRs rather than a single giant MR.

Changes introduced

• Feature flag incubation_5mp_google_cloud bound to Project. This allows for easier testing on gitlab.com where the feature flag may be enabled for select projects.

• service_accounts is an active route for google_cloud menu item. This expands the appropriate project sidemenu item when creating a service account

• Introduce a top level app.vue component. Achieves consistency with a majority of frontend code in the repo where a single route with a single entry point serves multiple templates. Instead of routing the frontend in index.js use a top level component to render the appropriate screen.

app/assets/javascripts/google_cloud/components/app.vue

 <script>
-import { GlTab, GlTabs } from '@gitlab/ui';
-import IncubationBanner from '../incubation_banner.vue';
-import ServiceAccountsList from '../service_accounts_list.vue';
+import { __ } from '~/locale';
+
+import Home from './home.vue';
+import IncubationBanner from './incubation_banner.vue';
+import ServiceAccountsForm from './service_accounts_form.vue';
+import NoGcpProjects from './errors/no_gcp_projects.vue';
+import GcpError from './errors/gcp_error.vue';
+
+const SCREEN_GCP_ERROR = 'gcp_error';
+const SCREEN_HOME = 'home';
+const SCREEN_NO_GCP_PROJECTS = 'no_gcp_projects';
+const SCREEN_SERVICE_ACCOUNTS_FORM = 'service_accounts_form';
 
 export default {
-  components: { GlTab, GlTabs, IncubationBanner, ServiceAccountsList },
+  components: {
+    IncubationBanner,
+  },
+  inheritAttrs: false,
   props: {
-    serviceAccounts: {
-      type: Array,
+    screen: {
       required: true,
-    },
-    createServiceAccountUrl: {
       type: String,
-      required: true,
     },
-    emptyIllustrationUrl: {
-      type: String,
-      required: true,
+  },
+  computed: {
+    mainComponent() {
+      switch (this.screen) {
+        case SCREEN_HOME:
+          return Home;
+        case SCREEN_GCP_ERROR:
+          return GcpError;
+        case SCREEN_NO_GCP_PROJECTS:
+          return NoGcpProjects;
+        case SCREEN_SERVICE_ACCOUNTS_FORM:
+          return ServiceAccountsForm;
+        default:
+          throw new Error(__('Unknown screen'));
+      }
     },
   },
   methods: {
@@ -29,5+49,5 @@
 
 <template>
   <div>
     <incubation-banner
       :share-feedback-url="feedbackUrl('general_feedback')"
       :report-bug-url="feedbackUrl('report_bug')"
       :feature-request-url="feedbackUrl('feature_request')"
     />
-    <gl-tabs>
-      <gl-tab :title="__('Configuration')">
-        <service-accounts-list
-          class="gl-mx-3"
-          :list="serviceAccounts"
-          :create-url="createServiceAccountUrl"
-          :empty-illustration-url="emptyIllustrationUrl"
-        />
-      </gl-tab>
-      <gl-tab :title="__('Deployments')" disabled />
-      <gl-tab :title="__('Services')" disabled />
-    </gl-tabs>
+    <component :is="mainComponent" v-bind="$attrs" />
   </div>
 </template>