Move gke_cluster_dropdowns to create_cluster dir

This commit creates a create_cluster directory to collect
all Vue applications related to creating kubernetes applications
using gitlab.

It also moves the gke_cluster_dropdowns collection of apps to
the create_cluster directory. gke_cluster_dropdowns contains
dropdown components used to select configuration options to
create a Kubernetes cluster in Google Cloud.

6 files changed, 165 insertions, 0 deletions

diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js b/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js
new file mode 100644
index 00000000000..f05ad7773a2
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js
@@ -0,0 +1,95 @@
+/* global gapi */
+import * as types from './mutation_types';
+
+const gapiResourceListRequest = ({ resource, params, commit, mutation, payloadKey }) =>
+  new Promise((resolve, reject) => {
+    const request = resource.list(params);
+
+    return request.then(
+      resp => {
+        const { result } = resp;
+
+        commit(mutation, result[payloadKey]);
+
+        resolve();
+      },
+      resp => {
+        reject(resp);
+      },
+    );
+  });
+
+export const setProject = ({ commit }, selectedProject) => {
+  commit(types.SET_PROJECT, selectedProject);
+};
+
+export const setZone = ({ commit }, selectedZone) => {
+  commit(types.SET_ZONE, selectedZone);
+};
+
+export const setMachineType = ({ commit }, selectedMachineType) => {
+  commit(types.SET_MACHINE_TYPE, selectedMachineType);
+};
+
+export const setIsValidatingProjectBilling = ({ commit }, isValidatingProjectBilling) => {
+  commit(types.SET_IS_VALIDATING_PROJECT_BILLING, isValidatingProjectBilling);
+};
+
+export const fetchProjects = ({ commit }) =>
+  gapiResourceListRequest({
+    resource: gapi.client.cloudresourcemanager.projects,
+    params: {},
+    commit,
+    mutation: types.SET_PROJECTS,
+    payloadKey: 'projects',
+  });
+
+export const validateProjectBilling = ({ dispatch, commit, state }) =>
+  new Promise((resolve, reject) => {
+    const request = gapi.client.cloudbilling.projects.getBillingInfo({
+      name: `projects/${state.selectedProject.projectId}`,
+    });
+
+    commit(types.SET_ZONE, '');
+    commit(types.SET_MACHINE_TYPE, '');
+
+    return request.then(
+      resp => {
+        const { billingEnabled } = resp.result;
+
+        commit(types.SET_PROJECT_BILLING_STATUS, Boolean(billingEnabled));
+        dispatch('setIsValidatingProjectBilling', false);
+        resolve();
+      },
+      resp => {
+        dispatch('setIsValidatingProjectBilling', false);
+        reject(resp);
+      },
+    );
+  });
+
+export const fetchZones = ({ commit, state }) =>
+  gapiResourceListRequest({
+    resource: gapi.client.compute.zones,
+    params: {
+      project: state.selectedProject.projectId,
+    },
+    commit,
+    mutation: types.SET_ZONES,
+    payloadKey: 'items',
+  });
+
+export const fetchMachineTypes = ({ commit, state }) =>
+  gapiResourceListRequest({
+    resource: gapi.client.compute.machineTypes,
+    params: {
+      project: state.selectedProject.projectId,
+      zone: state.selectedZone,
+    },
+    commit,
+    mutation: types.SET_MACHINE_TYPES,
+    payloadKey: 'items',
+  });
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js
new file mode 100644
index 00000000000..f9e2e2f74fb
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js
@@ -0,0 +1,3 @@
+export const hasProject = state => Boolean(state.selectedProject.projectId);
+export const hasZone = state => Boolean(state.selectedZone);
+export const hasMachineType = state => Boolean(state.selectedMachineType);
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/index.js b/app/assets/javascripts/create_cluster/gke_cluster/store/index.js
new file mode 100644
index 00000000000..5f72060633e
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+import createState from './state';
+
+Vue.use(Vuex);
+
+export const createStore = () =>
+  new Vuex.Store({
+    actions,
+    getters,
+    mutations,
+    state: createState(),
+  });
+
+export default createStore();
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/mutation_types.js b/app/assets/javascripts/create_cluster/gke_cluster/store/mutation_types.js
new file mode 100644
index 00000000000..45a91efc2d9
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/mutation_types.js
@@ -0,0 +1,8 @@
+export const SET_PROJECT = 'SET_PROJECT';
+export const SET_PROJECT_BILLING_STATUS = 'SET_PROJECT_BILLING_STATUS';
+export const SET_IS_VALIDATING_PROJECT_BILLING = 'SET_IS_VALIDATING_PROJECT_BILLING';
+export const SET_ZONE = 'SET_ZONE';
+export const SET_MACHINE_TYPE = 'SET_MACHINE_TYPE';
+export const SET_PROJECTS = 'SET_PROJECTS';
+export const SET_ZONES = 'SET_ZONES';
+export const SET_MACHINE_TYPES = 'SET_MACHINE_TYPES';
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/mutations.js b/app/assets/javascripts/create_cluster/gke_cluster/store/mutations.js
new file mode 100644
index 00000000000..88a2c1b630d
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/mutations.js
@@ -0,0 +1,28 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_PROJECT](state, selectedProject) {
+    Object.assign(state, { selectedProject });
+  },
+  [types.SET_IS_VALIDATING_PROJECT_BILLING](state, isValidatingProjectBilling) {
+    Object.assign(state, { isValidatingProjectBilling });
+  },
+  [types.SET_PROJECT_BILLING_STATUS](state, projectHasBillingEnabled) {
+    Object.assign(state, { projectHasBillingEnabled });
+  },
+  [types.SET_ZONE](state, selectedZone) {
+    Object.assign(state, { selectedZone });
+  },
+  [types.SET_MACHINE_TYPE](state, selectedMachineType) {
+    Object.assign(state, { selectedMachineType });
+  },
+  [types.SET_PROJECTS](state, projects) {
+    Object.assign(state, { projects });
+  },
+  [types.SET_ZONES](state, zones) {
+    Object.assign(state, { zones });
+  },
+  [types.SET_MACHINE_TYPES](state, machineTypes) {
+    Object.assign(state, { machineTypes });
+  },
+};
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/state.js b/app/assets/javascripts/create_cluster/gke_cluster/store/state.js
new file mode 100644
index 00000000000..9f3c473d4bc
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/state.js
@@ -0,0 +1,13 @@
+export default () => ({
+  selectedProject: {
+    projectId: '',
+    name: '',
+  },
+  selectedZone: '',
+  selectedMachineType: '',
+  isValidatingProjectBilling: null,
+  projectHasBillingEnabled: null,
+  projects: [],
+  zones: [],
+  machineTypes: [],
+});