Add latest changes from gitlab-org/gitlab@master

8 files changed, 238 insertions, 9 deletions

diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue
index 22ee368b8e0..6bcae6ab536 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapState } from 'vuex';
 import ServiceCredentialsForm from './service_credentials_form.vue';
 import EksClusterConfigurationForm from './eks_cluster_configuration_form.vue';
 
@@ -16,14 +17,36 @@ export default {
       type: String,
       required: true,
     },
+    accountAndExternalIdsHelpPath: {
+      type: String,
+      required: true,
+    },
+    createRoleArnHelpPath: {
+      type: String,
+      required: true,
+    },
+    externalLinkIcon: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['hasCredentials']),
   },
 };
 </script>
 <template>
   <div class="js-create-eks-cluster">
     <eks-cluster-configuration-form
+      v-if="hasCredentials"
       :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
       :kubernetes-integration-help-path="kubernetesIntegrationHelpPath"
     />
+    <service-credentials-form
+      v-else
+      :create-role-arn-help-path="createRoleArnHelpPath"
+      :account-and-external-ids-help-path="accountAndExternalIdsHelpPath"
+      :external-link-icon="externalLinkIcon"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
index 79029b8cfa8..185fecba2d8 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue
@@ -1,3 +1,141 @@
+<script>
+import { GlFormInput } from '@gitlab/ui';
+import { sprintf, s__, __ } from '~/locale';
+import _ from 'underscore';
+import { mapState, mapActions } from 'vuex';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+
+export default {
+  components: {
+    GlFormInput,
+    LoadingButton,
+    ClipboardButton,
+  },
+  props: {
+    accountAndExternalIdsHelpPath: {
+      type: String,
+      required: true,
+    },
+    createRoleArnHelpPath: {
+      type: String,
+      required: true,
+    },
+    externalLinkIcon: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      roleArn: '',
+    };
+  },
+  computed: {
+    ...mapState(['accountId', 'externalId', 'isCreatingRole', 'createRoleError']),
+    submitButtonDisabled() {
+      return this.isCreatingRole || !this.roleArn;
+    },
+    submitButtonLabel() {
+      return this.isCreatingRole
+        ? __('Authenticating')
+        : s__('ClusterIntegration|Authenticate with AWS');
+    },
+    accountAndExternalIdsHelpText() {
+      const escapedUrl = _.escape(this.accountAndExternalIdsHelpPath);
+
+      return sprintf(
+        s__(
+          'ClusterIntegration|Create a provision role on %{startAwsLink}Amazon Web Services %{externalLinkIcon}%{endLink} using the account and external ID above. %{startMoreInfoLink}More information%{endLink}',
+        ),
+        {
+          startAwsLink:
+            '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
+          startMoreInfoLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          externalLinkIcon: this.externalLinkIcon,
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    provisionRoleArnHelpText() {
+      const escapedUrl = _.escape(this.createRoleArnHelpPath);
+
+      return sprintf(
+        s__(
+          'ClusterIntegration|The Amazon Resource Name (ARN) associated with your role. If you do not have a provision role, first create one on  %{startAwsLink}Amazon Web Services %{externalLinkIcon}%{endLink} using the above account and external IDs. %{startMoreInfoLink}More information%{endLink}',
+        ),
+        {
+          startAwsLink:
+            '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
+          startMoreInfoLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          externalLinkIcon: this.externalLinkIcon,
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    ...mapActions(['createRole']),
+  },
+};
+</script>
 <template>
-  <form name="service-credentials-form"></form>
+  <form name="service-credentials-form" @submit.prevent="createRole({ roleArn, externalId })">
+    <h2>{{ s__('ClusterIntegration|Authenticate with Amazon Web Services') }}</h2>
+    <p>
+      {{
+        s__(
+          'ClusterIntegration|You must grant access to your organization’s AWS resources in order to create a new EKS cluster. To grant access, create a provision role using the account and external ID below and provide us the ARN.',
+        )
+      }}
+    </p>
+    <div v-if="createRoleError" class="js-invalid-credentials bs-callout bs-callout-danger">
+      {{ createRoleError }}
+    </div>
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <label for="gitlab-account-id">{{ __('Account ID') }}</label>
+        <div class="input-group">
+          <gl-form-input id="gitlab-account-id" type="text" readonly :value="accountId" />
+          <div class="input-group-append">
+            <clipboard-button
+              :text="accountId"
+              :title="__('Copy Account ID to clipboard')"
+              class="input-group-text js-copy-account-id-button"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="form-group col-md-6">
+        <label for="eks-external-id">{{ __('External ID') }}</label>
+        <div class="input-group">
+          <gl-form-input id="eks-external-id" type="text" readonly :value="externalId" />
+          <div class="input-group-append">
+            <clipboard-button
+              :text="externalId"
+              :title="__('Copy External ID to clipboard')"
+              class="input-group-text js-copy-external-id-button"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="col-12 mb-3 mt-n3">
+        <p class="form-text text-muted" v-html="accountAndExternalIdsHelpText"></p>
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="eks-provision-role-arn">{{ s__('ClusterIntegration|Provision Role ARN') }}</label>
+      <gl-form-input id="eks-provision-role-arn" v-model="roleArn" />
+      <p class="form-text text-muted" v-html="provisionRoleArnHelpText"></p>
+    </div>
+    <loading-button
+      class="js-submit-service-credentials"
+      type="submit"
+      :disabled="submitButtonDisabled"
+      :loading="isCreatingRole"
+      :label="submitButtonLabel"
+    />
+  </form>
 </template>
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/index.js b/app/assets/javascripts/create_cluster/eks_cluster/index.js
index 1f595e9b2df..e634a743d1d 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/index.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/index.js
@@ -1,16 +1,34 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import CreateEksCluster from './components/create_eks_cluster.vue';
 import createStore from './store';
 
 Vue.use(Vuex);
 
 export default el => {
-  const { gitlabManagedClusterHelpPath, kubernetesIntegrationHelpPath } = el.dataset;
+  const {
+    gitlabManagedClusterHelpPath,
+    kubernetesIntegrationHelpPath,
+    accountAndExternalIdsHelpPath,
+    createRoleArnHelpPath,
+    externalId,
+    accountId,
+    hasCredentials,
+    createRolePath,
+    externalLinkIcon,
+  } = el.dataset;
 
   return new Vue({
     el,
-    store: createStore(),
+    store: createStore({
+      initialState: {
+        hasCredentials: parseBoolean(hasCredentials),
+        externalId,
+        accountId,
+        createRolePath,
+      },
+    }),
     components: {
       CreateEksCluster,
     },
@@ -19,6 +37,9 @@ export default el => {
         props: {
           gitlabManagedClusterHelpPath,
           kubernetesIntegrationHelpPath,
+          accountAndExternalIdsHelpPath,
+          createRoleArnHelpPath,
+          externalLinkIcon,
         },
       });
     },
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js
index 917c8da6c3e..16a7547957e 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js
@@ -1,4 +1,5 @@
 import * as types from './mutation_types';
+import axios from '~/lib/utils/axios_utils';
 
 export const setClusterName = ({ commit }, payload) => {
   commit(types.SET_CLUSTER_NAME, payload);
@@ -12,6 +13,30 @@ export const setKubernetesVersion = ({ commit }, payload) => {
   commit(types.SET_KUBERNETES_VERSION, payload);
 };
 
+export const createRole = ({ dispatch, state: { createRolePath } }, payload) => {
+  dispatch('requestCreateRole');
+
+  return axios
+    .post(createRolePath, {
+      role_arn: payload.roleArn,
+      role_external_id: payload.externalId,
+    })
+    .then(() => dispatch('createRoleSuccess'))
+    .catch(error => dispatch('createRoleError', { error }));
+};
+
+export const requestCreateRole = ({ commit }) => {
+  commit(types.REQUEST_CREATE_ROLE);
+};
+
+export const createRoleSuccess = ({ commit }) => {
+  commit(types.CREATE_ROLE_SUCCESS);
+};
+
+export const createRoleError = ({ commit }, payload) => {
+  commit(types.CREATE_ROLE_ERROR, payload);
+};
+
 export const setRegion = ({ commit }, payload) => {
   commit(types.SET_REGION, payload);
 };
@@ -39,5 +64,3 @@ export const setSecurityGroup = ({ commit }, payload) => {
 export const setGitlabManagedCluster = ({ commit }, payload) => {
   commit(types.SET_GITLAB_MANAGED_CLUSTER, payload);
 };
-
-export default () => {};
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/index.js b/app/assets/javascripts/create_cluster/eks_cluster/store/index.js
index d575deafd19..22cca5b816e 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/store/index.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/store/index.js
@@ -8,12 +8,12 @@ import clusterDropdownStore from './cluster_dropdown';
 
 import * as awsServices from '../services/aws_services_facade';
 
-const createStore = () =>
+const createStore = ({ initialState }) =>
   new Vuex.Store({
     actions,
     getters,
     mutations,
-    state: state(),
+    state: Object.assign(state(), initialState),
     modules: {
       roles: {
         namespaced: true,
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js b/app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js
index 82eb512ac07..398b48d725f 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js
@@ -8,3 +8,6 @@ export const SET_SUBNET = 'SET_SUBNET';
 export const SET_ROLE = 'SET_ROLE';
 export const SET_SECURITY_GROUP = 'SET_SECURITY_GROUP';
 export const SET_GITLAB_MANAGED_CLUSTER = 'SET_GITLAB_MANAGED_CLUSTER';
+export const REQUEST_CREATE_ROLE = 'REQUEST_CREATE_ROLE';
+export const CREATE_ROLE_SUCCESS = 'CREATE_ROLE_SUCCESS';
+export const CREATE_ROLE_ERROR = 'CREATE_ROLE_ERROR';
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js b/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js
index 79950ac7dce..f7752a23574 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js
@@ -31,4 +31,19 @@ export default {
   [types.SET_GITLAB_MANAGED_CLUSTER](state, { gitlabManagedCluster }) {
     state.gitlabManagedCluster = gitlabManagedCluster;
   },
+  [types.REQUEST_CREATE_ROLE](state) {
+    state.isCreatingRole = true;
+    state.createRoleError = null;
+    state.hasCredentials = false;
+  },
+  [types.CREATE_ROLE_SUCCESS](state) {
+    state.isCreatingRole = false;
+    state.createRoleError = null;
+    state.hasCredentials = true;
+  },
+  [types.CREATE_ROLE_ERROR](state, { error }) {
+    state.isCreatingRole = false;
+    state.createRoleError = error;
+    state.hasCredentials = false;
+  },
 };
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js
index bf74213bdce..b69ae5b51e5 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js
@@ -1,8 +1,14 @@
 import { KUBERNETES_VERSIONS } from '../constants';
 
 export default () => ({
-  isValidatingCredentials: false,
-  validCredentials: false,
+  createRolePath: null,
+
+  isCreatingRole: false,
+  roleCreated: false,
+  createRoleError: false,
+
+  accountId: '',
+  externalId: '',
 
   clusterName: '',
   environmentScope: '*',