summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue
blob: 70230b294ac1f77122d35b1f42cae747355f13e3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script>
import { sprintf, s__ } from '~/locale';

import ClusterFormDropdown from './cluster_form_dropdown.vue';

export default {
  components: {
    ClusterFormDropdown,
  },
  props: {
    roles: {
      type: Array,
      required: false,
      default: () => [],
    },
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    helpText() {
      return sprintf(
        s__(
          'ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}.',
        ),
        {
          startLink:
            '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
          endLink: '</a>',
        },
        false,
      );
    },
  },
};
</script>
<template>
  <div>
    <cluster-form-dropdown
      field-id="eks-role-name"
      field-name="eks-role-name"
      :items="roles"
      :loading="loading"
      :loading-text="s__('ClusterIntegration|Loading IAM Roles')"
      :placeholder="s__('ClusterIntergation|Select role name')"
      :search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')"
      :empty-text="s__('ClusterIntegration|No IAM Roles found')"
    />
    <p class="form-text text-muted" v-html="helpText"></p>
  </div>
</template>