gitlab-org--gitlab-foss/app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue

<script>
import { GlFormInput, GlButton } from '@gitlab/ui';
import { escape } from 'lodash';
import { mapState, mapActions } from 'vuex';
import { sprintf, s__, __ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';

export default {
  components: {
    GlFormInput,
    GlButton,
    ClipboardButton,
  },
  props: {
    accountAndExternalIdsHelpPath: {
      type: String,
      required: true,
    },
    createRoleArnHelpPath: {
      type: String,
      required: true,
    },
    externalLinkIcon: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      roleArn: this.$store.state.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">
    <h4>{{ s__('ClusterIntegration|Authenticate with Amazon Web Services') }}</h4>
    <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>
    <gl-button
      variant="success"
      category="primary"
      type="submit"
      :disabled="submitButtonDisabled"
      :loading="isCreatingRole"
      @click.prevent="createRole({ roleArn, externalId })"
    >
      {{ submitButtonLabel }}
    </gl-button>
  </form>
</template>