Add latest changes from gitlab-org/gitlab@master

1 files changed, 138 insertions, 3 deletions

diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
index 94a446f1721..d451516dd35 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
@@ -1,9 +1,11 @@
 <script>
 import { createNamespacedHelpers, mapState, mapActions } from 'vuex';
 import { sprintf, s__ } from '~/locale';
+import _ from 'underscore';
+import { GlFormInput, GlFormCheckbox } from '@gitlab/ui';
 import ClusterFormDropdown from './cluster_form_dropdown.vue';
 import RegionDropdown from './region_dropdown.vue';
-import SecurityGroupDropdown from './security_group_dropdown.vue';
+import { KUBERNETES_VERSIONS } from '../constants';
 
 const { mapState: mapRolesState, mapActions: mapRolesActions } = createNamespacedHelpers('roles');
 const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers(
@@ -16,20 +18,36 @@ const { mapState: mapVpcsState, mapActions: mapVpcActions } = createNamespacedHe
 const { mapState: mapSubnetsState, mapActions: mapSubnetActions } = createNamespacedHelpers(
   'subnets',
 );
+const {
+  mapState: mapSecurityGroupsState,
+  mapActions: mapSecurityGroupsActions,
+} = createNamespacedHelpers('securityGroups');
 
 export default {
   components: {
     ClusterFormDropdown,
     RegionDropdown,
-    SecurityGroupDropdown,
+    GlFormInput,
+    GlFormCheckbox,
+  },
+  props: {
+    gitlabManagedClusterHelpPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState([
+      'clusterName',
+      'environmentScope',
+      'kubernetesVersion',
       'selectedRegion',
       'selectedKeyPair',
       'selectedVpc',
       'selectedSubnet',
       'selectedRole',
+      'selectedSecurityGroup',
+      'gitlabManagedCluster',
     ]),
     ...mapRolesState({
       roles: 'items',
@@ -56,6 +74,14 @@ export default {
       isLoadingSubnets: 'isLoadingItems',
       loadingSubnetsError: 'loadingItemsError',
     }),
+    ...mapSecurityGroupsState({
+      securityGroups: 'items',
+      isLoadingSecurityGroups: 'isLoadingItems',
+      loadingSecurityGroupsError: 'loadingItemsError',
+    }),
+    kubernetesVersions() {
+      return KUBERNETES_VERSIONS;
+    },
     vpcDropdownDisabled() {
       return !this.selectedRegion;
     },
@@ -65,6 +91,9 @@ export default {
     subnetDropdownDisabled() {
       return !this.selectedVpc;
     },
+    securityGroupDropdownDisabled() {
+      return !this.selectedVpc;
+    },
     roleDropdownHelpText() {
       return sprintf(
         s__(
@@ -117,18 +146,57 @@ export default {
         false,
       );
     },
+    securityGroupDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Choose the %{startLink}security groups%{endLink} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets.',
+        ),
+        {
+          startLink:
+            '<a href="https://console.aws.amazon.com/vpc/home?#securityGroups" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    gitlabManagedHelpText() {
+      const escapedUrl = _.escape(this.gitlabManagedClusterHelpPath);
+
+      return sprintf(
+        s__(
+          'ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{startLink}More information%{endLink}',
+        ),
+        {
+          startLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
   },
   mounted() {
     this.fetchRegions();
     this.fetchRoles();
   },
   methods: {
-    ...mapActions(['setRegion', 'setVpc', 'setSubnet', 'setRole', 'setKeyPair']),
+    ...mapActions([
+      'setClusterName',
+      'setEnvironmentScope',
+      'setKubernetesVersion',
+      'setRegion',
+      'setVpc',
+      'setSubnet',
+      'setRole',
+      'setKeyPair',
+      'setSecurityGroup',
+      'setGitlabManagedCluster',
+    ]),
     ...mapRegionsActions({ fetchRegions: 'fetchItems' }),
     ...mapVpcActions({ fetchVpcs: 'fetchItems' }),
     ...mapSubnetActions({ fetchSubnets: 'fetchItems' }),
     ...mapRolesActions({ fetchRoles: 'fetchItems' }),
     ...mapKeyPairsActions({ fetchKeyPairs: 'fetchItems' }),
+    ...mapSecurityGroupsActions({ fetchSecurityGroups: 'fetchItems' }),
     setRegionAndFetchVpcsAndKeyPairs(region) {
       this.setRegion({ region });
       this.fetchVpcs({ region });
@@ -137,6 +205,7 @@ export default {
     setVpcAndFetchSubnets(vpc) {
       this.setVpc({ vpc });
       this.fetchSubnets({ vpc });
+      this.fetchSecurityGroups({ vpc });
     },
   },
 };
@@ -144,6 +213,40 @@ export default {
 <template>
   <form name="eks-cluster-configuration-form">
     <div class="form-group">
+      <label class="label-bold" for="eks-cluster-name">{{
+        s__('ClusterIntegration|Kubernetes cluster name')
+      }}</label>
+      <gl-form-input
+        id="eks-cluster-name"
+        :value="clusterName"
+        @input="setClusterName({ clusterName: $event })"
+      />
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-environment-scope">{{
+        s__('ClusterIntegration|Environment scope')
+      }}</label>
+      <gl-form-input
+        id="eks-environment-scope"
+        :value="environmentScope"
+        @input="setEnvironmentScope({ environmentScope: $event })"
+      />
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-kubernetes-version">{{
+        s__('ClusterIntegration|Kubernetes version')
+      }}</label>
+      <cluster-form-dropdown
+        field-id="eks-kubernetes-version"
+        field-name="eks-kubernetes-version"
+        :value="kubernetesVersion"
+        :items="kubernetesVersions"
+        :empty-text="s__('ClusterIntegration|Kubernetes version not found')"
+        @input="setKubernetesVersion({ kubernetesVersion: $event })"
+      />
+      <p class="form-text text-muted" v-html="roleDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
       <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Role name') }}</label>
       <cluster-form-dropdown
         field-id="eks-role"
@@ -233,5 +336,37 @@ export default {
       />
       <p class="form-text text-muted" v-html="subnetDropdownHelpText"></p>
     </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-security-group">{{
+        s__('ClusterIntegration|Security groups')
+      }}</label>
+      <cluster-form-dropdown
+        field-id="eks-security-group"
+        field-name="eks-security-group"
+        :input="selectedSecurityGroup"
+        :items="securityGroups"
+        :loading="isLoadingSecurityGroups"
+        :disabled="securityGroupDropdownDisabled"
+        :disabled-text="s__('ClusterIntegration|Select a VPC to choose a security group')"
+        :loading-text="s__('ClusterIntegration|Loading security groups')"
+        :placeholder="s__('ClusterIntergation|Select a security group')"
+        :search-field-placeholder="s__('ClusterIntegration|Search security groups')"
+        :empty-text="s__('ClusterIntegration|No security group found')"
+        :has-errors="Boolean(loadingSecurityGroupsError)"
+        :error-message="
+          s__('ClusterIntegration|Could not load security groups for the selected VPC')
+        "
+        @input="setSecurityGroup({ securityGroup: $event })"
+      />
+      <p class="form-text text-muted" v-html="securityGroupDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <gl-form-checkbox
+        :checked="gitlabManagedCluster"
+        @input="setGitlabManagedCluster({ gitlabManagedCluster: $event })"
+        >{{ s__('ClusterIntegration|GitLab-managed cluster') }}</gl-form-checkbox
+      >
+      <p class="form-text text-muted" v-html="gitlabManagedHelpText"></p>
+    </div>
   </form>
 </template>