revisions

app/assets/javascripts/pages/projects/clusters/gcp/new/index.js

@@ -1,117 +1,5 @@
-/* global gapi */
+import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
-import Vue from 'vue';
-import Flash from '~/flash';
-import { s__ } from '~/locale';
-import GkeProjectIdDropdown from '~/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue';
-import GkeZoneDropdown from '~/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue';
-import GkeMachineTypeDropdown from '~/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue';
-
-const GCP_API_ERROR =
-  'ClusterIntegration|An error occurred when trying to contact the Google Cloud API. Please try again later.';
-
-function mountGkeProjectIdDropdown() {
-  const el = document.getElementById('js-gcp-project-id-dropdown-entry-point');
-  const hiddenInput = el.querySelector('input');
-
-  if (!el) return;
-  // debugger;
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      GkeProjectIdDropdown,
-    },
-    render: createElement =>
-      createElement('gke-project-id-dropdown', {
-        props: {
-          docsUrl: el.dataset.docsurl,
-          service: gapi.client.cloudresourcemanager,
-          fieldName: hiddenInput.getAttribute('name'),
-          fieldId: hiddenInput.getAttribute('id'),
-        },
-      }),
-  });
-}
-
-function mountGkeZoneDropdown() {
-  const el = document.getElementById('js-gcp-zone-dropdown-entry-point');
-  const hiddenInput = el.querySelector('input');
-
-  if (!el) return;
-  // debugger;
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      GkeZoneDropdown,
-    },
-    render: createElement =>
-      createElement('gke-zone-dropdown', {
-        props: {
-          service: gapi.client.compute,
-          fieldName: hiddenInput.getAttribute('name'),
-          fieldId: hiddenInput.getAttribute('id'),
-        },
-      }),
-  });
-}
-
-function mountGkeMachineTypeDropdown() {
-  const el = document.getElementById('js-gcp-machine-type-dropdown-entry-point');
-  const hiddenInput = el.querySelector('input');
-
-  if (!el) return;
-  // debugger;
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      GkeMachineTypeDropdown,
-    },
-    render: createElement =>
-      createElement('gke-machine-type-dropdown', {
-        props: {
-          service: gapi.client.compute,
-          fieldName: hiddenInput.getAttribute('name'),
-          fieldId: hiddenInput.getAttribute('id'),
-        },
-      }),
-  });
-}
-
-function initializeGapiClient() {
-  const el = document.getElementById('new_cluster');
-
-  gapi.client.setToken({ access_token: el.dataset.token });
-
-  gapi.client
-    .load('https://www.googleapis.com/discovery/v1/apis/cloudresourcemanager/v1/rest')
-    .then(() => {
-      mountGkeProjectIdDropdown();
-    })
-    .catch(() => {
-      Flash(s__(GCP_API_ERROR));
-    });
-
-  gapi.client
-    .load('https://www.googleapis.com/discovery/v1/apis/compute/v1/rest')
-    .then(() => {
-      mountGkeZoneDropdown();
-      mountGkeMachineTypeDropdown();
-    })
-    .catch(() => {
-      Flash(s__(GCP_API_ERROR));
-    });
-}
 
 document.addEventListener('DOMContentLoaded', () => {
-  if (typeof gapi === 'undefined') {
+  initGkeDropdowns();
-    Flash(s__(GCP_API_ERROR));
-    return false;
-  }
-
-  gapi.load('client', initializeGapiClient);
 });

app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue

@@ -23,7 +23,6 @@ export default {
       default: __('Select'),
     },
   },
-  computed: {},
 };
 </script>
 

app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js

@@ -0,0 +1,9 @@
+import { s__ } from '~/locale';
+
+export const GCP_API_ERROR = s__(
+  'ClusterIntegration|An error occurred when trying to contact the Google Cloud API. Please try again later.',
+);
+export const GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT =
+  'https://www.googleapis.com/discovery/v1/apis/cloudresourcemanager/v1/rest';
+export const GCP_API_COMPUTE_ENDPOINT =
+  'https://www.googleapis.com/discovery/v1/apis/compute/v1/rest';

app/assets/javascripts/projects/gke_cluster_dropdowns/index.js

@@ -0,0 +1,110 @@
+/* global gapi */
+import Vue from 'vue';
+import Flash from '~/flash';
+import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue';
+import GkeZoneDropdown from './components/gke_zone_dropdown.vue';
+import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue';
+import * as CONSTANTS from './constants';
+
+const mountGkeProjectIdDropdown = () => {
+  const el = document.querySelector('.js-gcp-project-id-dropdown-entry-point');
+  const hiddenInput = el.querySelector('input');
+
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    components: {
+      GkeProjectIdDropdown,
+    },
+    render: createElement =>
+      createElement('gke-project-id-dropdown', {
+        props: {
+          docsUrl: el.dataset.docsurl,
+          service: gapi.client.cloudresourcemanager,
+          fieldName: hiddenInput.getAttribute('name'),
+          fieldId: hiddenInput.getAttribute('id'),
+        },
+      }),
+  });
+};
+
+const mountGkeZoneDropdown = () => {
+  const el = document.querySelector('.js-gcp-zone-dropdown-entry-point');
+  const hiddenInput = el.querySelector('input');
+
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    components: {
+      GkeZoneDropdown,
+    },
+    render: createElement =>
+      createElement('gke-zone-dropdown', {
+        props: {
+          service: gapi.client.compute,
+          fieldName: hiddenInput.getAttribute('name'),
+          fieldId: hiddenInput.getAttribute('id'),
+        },
+      }),
+  });
+};
+
+const mountGkeMachineTypeDropdown = () => {
+  const el = document.querySelector('.js-gcp-machine-type-dropdown-entry-point');
+  const hiddenInput = el.querySelector('input');
+
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    components: {
+      GkeMachineTypeDropdown,
+    },
+    render: createElement =>
+      createElement('gke-machine-type-dropdown', {
+        props: {
+          service: gapi.client.compute,
+          fieldName: hiddenInput.getAttribute('name'),
+          fieldId: hiddenInput.getAttribute('id'),
+        },
+      }),
+  });
+};
+
+const gkeDropdownErrorHandler = () => {
+  Flash(CONSTANTS.GCP_API_ERROR);
+};
+
+const initializeGapiClient = () => {
+  const el = document.getElementById('new_cluster');
+
+  gapi.client.setToken({ access_token: el.dataset.token });
+
+  gapi.client
+    .load(CONSTANTS.GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT)
+    .then(() => {
+      mountGkeProjectIdDropdown();
+    })
+    .catch(gkeDropdownErrorHandler);
+
+  gapi.client
+    .load(CONSTANTS.GCP_API_COMPUTE_ENDPOINT)
+    .then(() => {
+      mountGkeZoneDropdown();
+      mountGkeMachineTypeDropdown();
+    })
+    .catch(gkeDropdownErrorHandler);
+};
+
+const initGkeDropdowns = () => {
+  if (typeof gapi === 'undefined') {
+    gkeDropdownErrorHandler();
+    return false;
+  }
+
+  return gapi.load('client', initializeGapiClient);
+};
+
+export default initGkeDropdowns;