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.

12 files changed, 0 insertions, 755 deletions

diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
deleted file mode 100644
index 5a3407693e5..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import _ from 'underscore';
-import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
-import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
-import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
-
-import store from '../store';
-
-export default {
-  store,
-  components: {
-    DropdownButton,
-    DropdownSearchInput,
-    DropdownHiddenInput,
-    GlLoadingIcon,
-  },
-  props: {
-    fieldId: {
-      type: String,
-      required: true,
-    },
-    fieldName: {
-      type: String,
-      required: true,
-    },
-    defaultValue: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isLoading: false,
-      hasErrors: false,
-      searchQuery: '',
-      gapiError: '',
-    };
-  },
-  computed: {
-    results() {
-      if (!this.items) {
-        return [];
-      }
-
-      return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
-    },
-  },
-  methods: {
-    fetchSuccessHandler() {
-      if (this.defaultValue) {
-        const itemToSelect = _.find(this.items, item => item.name === this.defaultValue);
-
-        if (itemToSelect) {
-          this.setItem(itemToSelect.name);
-        }
-      }
-
-      this.isLoading = false;
-      this.hasErrors = false;
-    },
-    fetchFailureHandler(resp) {
-      this.isLoading = false;
-      this.hasErrors = true;
-
-      if (resp.result && resp.result.error) {
-        this.gapiError = resp.result.error.message;
-      }
-    },
-  },
-};
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
deleted file mode 100644
index 83811ab489a..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script>
-import { sprintf, s__ } from '~/locale';
-import { mapState, mapGetters, mapActions } from 'vuex';
-
-import gkeDropdownMixin from './gke_dropdown_mixin';
-
-export default {
-  name: 'GkeMachineTypeDropdown',
-  mixins: [gkeDropdownMixin],
-  computed: {
-    ...mapState([
-      'isValidatingProjectBilling',
-      'projectHasBillingEnabled',
-      'selectedZone',
-      'selectedMachineType',
-    ]),
-    ...mapState({ items: 'machineTypes' }),
-    ...mapGetters(['hasZone', 'hasMachineType']),
-    allDropdownsSelected() {
-      return this.projectHasBillingEnabled && this.hasZone && this.hasMachineType;
-    },
-    isDisabled() {
-      return (
-        this.isLoading ||
-        this.isValidatingProjectBilling ||
-        !this.projectHasBillingEnabled ||
-        !this.hasZone
-      );
-    },
-    toggleText() {
-      if (this.isLoading) {
-        return s__('ClusterIntegration|Fetching machine types');
-      }
-
-      if (this.selectedMachineType) {
-        return this.selectedMachineType;
-      }
-
-      if (!this.projectHasBillingEnabled && !this.hasZone) {
-        return s__('ClusterIntegration|Select project and zone to choose machine type');
-      }
-
-      return !this.hasZone
-        ? s__('ClusterIntegration|Select zone to choose machine type')
-        : s__('ClusterIntegration|Select machine type');
-    },
-    errorMessage() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|An error occurred while trying to fetch zone machine types: %{error}',
-        ),
-        { error: this.gapiError },
-      );
-    },
-  },
-  watch: {
-    selectedZone() {
-      this.hasErrors = false;
-
-      if (this.hasZone) {
-        this.isLoading = true;
-
-        this.fetchMachineTypes()
-          .then(this.fetchSuccessHandler)
-          .catch(this.fetchFailureHandler);
-      }
-    },
-    selectedMachineType() {
-      this.enableSubmit();
-    },
-  },
-  methods: {
-    ...mapActions(['fetchMachineTypes']),
-    ...mapActions({ setItem: 'setMachineType' }),
-    enableSubmit() {
-      if (this.allDropdownsSelected) {
-        const submitButtonEl = document.querySelector('.js-gke-cluster-creation-submit');
-
-        if (submitButtonEl) {
-          submitButtonEl.removeAttribute('disabled');
-        }
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="js-gcp-machine-type-dropdown dropdown">
-      <dropdown-hidden-input :name="fieldName" :value="selectedMachineType" />
-      <dropdown-button
-        :class="{ 'border-danger': hasErrors }"
-        :is-disabled="isDisabled"
-        :is-loading="isLoading"
-        :toggle-text="toggleText"
-      />
-      <div class="dropdown-menu dropdown-select">
-        <dropdown-search-input
-          v-model="searchQuery"
-          :placeholder-text="s__('ClusterIntegration|Search machine types')"
-        />
-        <div class="dropdown-content">
-          <ul>
-            <li v-show="!results.length">
-              <span class="menu-item">
-                {{ s__('ClusterIntegration|No machine types matched your search') }}
-              </span>
-            </li>
-            <li v-for="result in results" :key="result.id">
-              <button type="button" @click.prevent="setItem(result.name)">{{ result.name }}</button>
-            </li>
-          </ul>
-        </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
-      </div>
-    </div>
-    <span
-      v-if="hasErrors"
-      :class="{
-        'text-danger': hasErrors,
-        'text-muted': !hasErrors,
-      }"
-      class="form-text"
-    >
-      {{ errorMessage }}
-    </span>
-  </div>
-</template>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
deleted file mode 100644
index a2eb79af4f9..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<script>
-import _ from 'underscore';
-import { s__, sprintf } from '~/locale';
-import { mapState, mapGetters, mapActions } from 'vuex';
-
-import gkeDropdownMixin from './gke_dropdown_mixin';
-
-export default {
-  name: 'GkeProjectIdDropdown',
-  mixins: [gkeDropdownMixin],
-  props: {
-    docsUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['selectedProject', 'isValidatingProjectBilling', 'projectHasBillingEnabled']),
-    ...mapState({ items: 'projects' }),
-    ...mapGetters(['hasProject']),
-    hasOneProject() {
-      return this.items && this.items.length === 1;
-    },
-    isDisabled() {
-      return (
-        this.isLoading || this.isValidatingProjectBilling || (this.items && this.items.length < 2)
-      );
-    },
-    toggleText() {
-      if (this.isValidatingProjectBilling) {
-        return s__('ClusterIntegration|Validating project billing status');
-      }
-
-      if (this.isLoading) {
-        return s__('ClusterIntegration|Fetching projects');
-      }
-
-      if (this.hasProject) {
-        return this.selectedProject.name;
-      }
-
-      if (!this.items) {
-        return s__('ClusterIntegration|No projects found');
-      }
-
-      return s__('ClusterIntegration|Select project');
-    },
-    helpText() {
-      let message;
-      if (this.hasErrors) {
-        return this.errorMessage;
-      }
-
-      if (!this.items) {
-        message =
-          'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';
-      }
-
-      message =
-        this.items && this.items.length
-          ? 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'
-          : 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';
-
-      return sprintf(
-        s__(message),
-        {
-          docsLinkEnd: '&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>',
-          docsLinkStart: `<a href="${_.escape(
-            this.docsUrl,
-          )}" target="_blank" rel="noopener noreferrer">`,
-        },
-        false,
-      );
-    },
-    errorMessage() {
-      if (!this.projectHasBillingEnabled) {
-        if (this.gapiError) {
-          return s__(
-            'ClusterIntegration|We could not verify that one of your projects on GCP has billing enabled. Please try again.',
-          );
-        }
-
-        return sprintf(
-          s__(
-            'This project does not have billing enabled. To create a cluster, <a href=%{linkToBilling} target="_blank" rel="noopener noreferrer">enable billing <i class="fa fa-external-link" aria-hidden="true"></i></a> and try again.',
-          ),
-          {
-            linkToBilling:
-              'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral',
-          },
-          false,
-        );
-      }
-
-      return sprintf(
-        s__('ClusterIntegration|An error occurred while trying to fetch your projects: %{error}'),
-        { error: this.gapiError },
-      );
-    },
-  },
-  watch: {
-    selectedProject() {
-      this.setIsValidatingProjectBilling(true);
-
-      this.validateProjectBilling()
-        .then(this.validateProjectBillingSuccessHandler)
-        .catch(this.validateProjectBillingFailureHandler);
-    },
-  },
-  created() {
-    this.isLoading = true;
-
-    this.fetchProjects()
-      .then(this.fetchSuccessHandler)
-      .catch(this.fetchFailureHandler);
-  },
-  methods: {
-    ...mapActions(['fetchProjects', 'setIsValidatingProjectBilling', 'validateProjectBilling']),
-    ...mapActions({ setItem: 'setProject' }),
-    fetchSuccessHandler() {
-      if (this.defaultValue) {
-        const projectToSelect = _.find(this.items, item => item.projectId === this.defaultValue);
-
-        if (projectToSelect) {
-          this.setItem(projectToSelect);
-        }
-      } else if (this.items.length === 1) {
-        this.setItem(this.items[0]);
-      }
-
-      this.isLoading = false;
-      this.hasErrors = false;
-    },
-    validateProjectBillingSuccessHandler() {
-      this.hasErrors = !this.projectHasBillingEnabled;
-    },
-    validateProjectBillingFailureHandler(resp) {
-      this.hasErrors = true;
-
-      this.gapiError = resp.result ? resp.result.error.message : resp;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="js-gcp-project-id-dropdown dropdown">
-      <dropdown-hidden-input :name="fieldName" :value="selectedProject.projectId" />
-      <dropdown-button
-        :class="{
-          'border-danger': hasErrors,
-          'read-only': hasOneProject,
-        }"
-        :is-disabled="isDisabled"
-        :is-loading="isLoading"
-        :toggle-text="toggleText"
-      />
-      <div class="dropdown-menu dropdown-select">
-        <dropdown-search-input
-          v-model="searchQuery"
-          :placeholder-text="s__('ClusterIntegration|Search projects')"
-        />
-        <div class="dropdown-content">
-          <ul>
-            <li v-show="!results.length">
-              <span class="menu-item">
-                {{ s__('ClusterIntegration|No projects matched your search') }}
-              </span>
-            </li>
-            <li v-for="result in results" :key="result.project_number">
-              <button type="button" @click.prevent="setItem(result)">{{ result.name }}</button>
-            </li>
-          </ul>
-        </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
-      </div>
-    </div>
-    <span
-      :class="{
-        'text-danger': hasErrors,
-        'text-muted': !hasErrors,
-      }"
-      class="form-text"
-      v-html="helpText"
-    ></span>
-  </div>
-</template>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
deleted file mode 100644
index fd5d5f86401..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-import { sprintf, s__ } from '~/locale';
-import { mapState, mapActions } from 'vuex';
-
-import gkeDropdownMixin from './gke_dropdown_mixin';
-
-export default {
-  name: 'GkeZoneDropdown',
-  mixins: [gkeDropdownMixin],
-  computed: {
-    ...mapState([
-      'selectedProject',
-      'selectedZone',
-      'projects',
-      'isValidatingProjectBilling',
-      'projectHasBillingEnabled',
-    ]),
-    ...mapState({ items: 'zones' }),
-    isDisabled() {
-      return this.isLoading || this.isValidatingProjectBilling || !this.projectHasBillingEnabled;
-    },
-    toggleText() {
-      if (this.isLoading) {
-        return s__('ClusterIntegration|Fetching zones');
-      }
-
-      if (this.selectedZone) {
-        return this.selectedZone;
-      }
-
-      return !this.projectHasBillingEnabled
-        ? s__('ClusterIntegration|Select project to choose zone')
-        : s__('ClusterIntegration|Select zone');
-    },
-    errorMessage() {
-      return sprintf(
-        s__('ClusterIntegration|An error occurred while trying to fetch project zones: %{error}'),
-        { error: this.gapiError },
-      );
-    },
-  },
-  watch: {
-    isValidatingProjectBilling(isValidating) {
-      this.hasErrors = false;
-
-      if (!isValidating && this.projectHasBillingEnabled) {
-        this.isLoading = true;
-
-        this.fetchZones()
-          .then(this.fetchSuccessHandler)
-          .catch(this.fetchFailureHandler);
-      }
-    },
-  },
-  methods: {
-    ...mapActions(['fetchZones']),
-    ...mapActions({ setItem: 'setZone' }),
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="js-gcp-zone-dropdown dropdown">
-      <dropdown-hidden-input :name="fieldName" :value="selectedZone" />
-      <dropdown-button
-        :class="{ 'border-danger': hasErrors }"
-        :is-disabled="isDisabled"
-        :is-loading="isLoading"
-        :toggle-text="toggleText"
-      />
-      <div class="dropdown-menu dropdown-select">
-        <dropdown-search-input
-          v-model="searchQuery"
-          :placeholder-text="s__('ClusterIntegration|Search zones')"
-        />
-        <div class="dropdown-content">
-          <ul>
-            <li v-show="!results.length">
-              <span class="menu-item">
-                {{ s__('ClusterIntegration|No zones matched your search') }}
-              </span>
-            </li>
-            <li v-for="result in results" :key="result.id">
-              <button type="button" @click.prevent="setItem(result.name)">{{ result.name }}</button>
-            </li>
-          </ul>
-        </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
-      </div>
-    </div>
-    <span
-      v-if="hasErrors"
-      :class="{
-        'text-danger': hasErrors,
-        'text-muted': !hasErrors,
-      }"
-      class="form-text"
-    >
-      {{ errorMessage }}
-    </span>
-  </div>
-</template>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js
deleted file mode 100644
index 2a1c0819916..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js
+++ /dev/null
@@ -1,11 +0,0 @@
-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_BILLING_ENDPOINT =
-  'https://www.googleapis.com/discovery/v1/apis/cloudbilling/v1/rest';
-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';
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js
deleted file mode 100644
index 729b9404b64..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/* 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 mountComponent = (entryPoint, component, componentName, extraProps = {}) => {
-  const el = document.querySelector(entryPoint);
-  if (!el) return false;
-
-  const hiddenInput = el.querySelector('input');
-
-  return new Vue({
-    el,
-    components: {
-      [componentName]: component,
-    },
-    render: createElement =>
-      createElement(componentName, {
-        props: {
-          fieldName: hiddenInput.getAttribute('name'),
-          fieldId: hiddenInput.getAttribute('id'),
-          defaultValue: hiddenInput.value,
-          ...extraProps,
-        },
-      }),
-  });
-};
-
-const mountGkeProjectIdDropdown = () => {
-  const entryPoint = '.js-gcp-project-id-dropdown-entry-point';
-  const el = document.querySelector(entryPoint);
-
-  mountComponent(entryPoint, GkeProjectIdDropdown, 'gke-project-id-dropdown', {
-    docsUrl: el.dataset.docsurl,
-  });
-};
-
-const mountGkeZoneDropdown = () => {
-  mountComponent('.js-gcp-zone-dropdown-entry-point', GkeZoneDropdown, 'gke-zone-dropdown');
-};
-
-const mountGkeMachineTypeDropdown = () => {
-  mountComponent(
-    '.js-gcp-machine-type-dropdown-entry-point',
-    GkeMachineTypeDropdown,
-    'gke-machine-type-dropdown',
-  );
-};
-
-const gkeDropdownErrorHandler = () => {
-  Flash(CONSTANTS.GCP_API_ERROR);
-};
-
-const initializeGapiClient = () => {
-  const el = document.querySelector('.js-gke-cluster-creation');
-  if (!el) return false;
-
-  return gapi.client
-    .init({
-      discoveryDocs: [
-        CONSTANTS.GCP_API_CLOUD_BILLING_ENDPOINT,
-        CONSTANTS.GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT,
-        CONSTANTS.GCP_API_COMPUTE_ENDPOINT,
-      ],
-    })
-    .then(() => {
-      gapi.client.setToken({ access_token: el.dataset.token });
-
-      mountGkeProjectIdDropdown();
-      mountGkeZoneDropdown();
-      mountGkeMachineTypeDropdown();
-    })
-    .catch(gkeDropdownErrorHandler);
-};
-
-const initGkeDropdowns = () => {
-  if (!gapi) {
-    gkeDropdownErrorHandler();
-    return false;
-  }
-
-  return gapi.load('client', initializeGapiClient);
-};
-
-export default initGkeDropdowns;
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js
deleted file mode 100644
index f05ad7773a2..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/* 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/projects/gke_cluster_dropdowns/store/getters.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/getters.js
deleted file mode 100644
index f9e2e2f74fb..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/getters.js
+++ /dev/null
@@ -1,3 +0,0 @@
-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/projects/gke_cluster_dropdowns/store/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js
deleted file mode 100644
index 5f72060633e..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-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/projects/gke_cluster_dropdowns/store/mutation_types.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js
deleted file mode 100644
index 45a91efc2d9..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js
+++ /dev/null
@@ -1,8 +0,0 @@
-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/projects/gke_cluster_dropdowns/store/mutations.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js
deleted file mode 100644
index 88a2c1b630d..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js
+++ /dev/null
@@ -1,28 +0,0 @@
-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/projects/gke_cluster_dropdowns/store/state.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js
deleted file mode 100644
index 9f3c473d4bc..00000000000
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default () => ({
-  selectedProject: {
-    projectId: '',
-    name: '',
-  },
-  selectedZone: '',
-  selectedMachineType: '',
-  isValidatingProjectBilling: null,
-  projectHasBillingEnabled: null,
-  projects: [],
-  zones: [],
-  machineTypes: [],
-});