1 files changed, 159 insertions, 140 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 a653e228e3f..d403f370f9d 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,7 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { createNamespacedHelpers, mapState, mapActions, mapGetters } from 'vuex';
-import { escape } from 'lodash';
-import { GlFormInput, GlFormCheckbox } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
+import { GlFormInput, GlFormCheckbox, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
 import { KUBERNETES_VERSIONS } from '../constants';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
@@ -28,8 +26,11 @@ const { mapState: mapInstanceTypesState } = createNamespacedHelpers('instanceTyp
 export default {
   components: {
     ClusterFormDropdown,
-    GlFormInput,
     GlFormCheckbox,
+    GlFormInput,
+    GlIcon,
+    GlLink,
+    GlSprintf,
     LoadingButton,
   },
   props: {
@@ -37,6 +38,10 @@ export default {
       type: String,
       required: true,
     },
+    namespacePerEnvironmentHelpPath: {
+      type: String,
+      required: true,
+    },
     kubernetesIntegrationHelpPath: {
       type: String,
       required: true,
@@ -46,6 +51,49 @@ export default {
       required: true,
     },
   },
+  i18n: {
+    kubernetesIntegrationHelpText: s__(
+      'ClusterIntegration|Read our %{linkStart}help page%{linkEnd} on Kubernetes cluster integration.',
+    ),
+    roleDropdownHelpText: s__(
+      'ClusterIntegration|Your service role is distinct from the provision role used when authenticating. It will allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role, first create one on %{linkStart}Amazon Web Services%{linkEnd}.',
+    ),
+    roleDropdownHelpPath:
+      'https://docs.aws.amazon.com/eks/latest/userguide/service_IAM_role.html#create-service-role',
+    regionsDropdownHelpText: s__(
+      'ClusterIntegration|Learn more about %{linkStart}Regions%{linkEnd}.',
+    ),
+    regionsDropdownHelpPath:
+      'https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/',
+    keyPairDropdownHelpText: s__(
+      'ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{linkStart}Amazon Web Services%{linkEnd}.',
+    ),
+    keyPairDropdownHelpPath:
+      'https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#having-ec2-create-your-key-pair',
+    vpcDropdownHelpText: s__(
+      'ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{linkStart}Amazon Web Services %{linkEnd}.',
+    ),
+    vpcDropdownHelpPath:
+      'https://docs.aws.amazon.com/eks/latest/userguide/getting-started-console.html#vpc-create',
+    subnetDropdownHelpText: s__(
+      'ClusterIntegration|Choose the %{linkStart}subnets %{linkEnd} in your VPC where your worker nodes will run.',
+    ),
+    subnetDropdownHelpPath: 'https://console.aws.amazon.com/vpc/home?#subnets',
+    securityGroupDropdownHelpText: s__(
+      'ClusterIntegration|Choose the %{linkStart}security group %{linkEnd} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets.',
+    ),
+    securityGroupDropdownHelpPath: 'https://console.aws.amazon.com/vpc/home?#securityGroups',
+    instanceTypesDropdownHelpText: s__(
+      'ClusterIntegration|Choose the worker node %{linkStart}instance type%{linkEnd}.',
+    ),
+    instanceTypesDropdownHelpPath: 'https://aws.amazon.com/ec2/instance-types',
+    gitlabManagedClusterHelpText: s__(
+      'ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{linkStart}More information%{linkEnd}',
+    ),
+    namespacePerEnvironmentHelpText: s__(
+      'ClusterIntegration|Deploy each environment to its own namespace. Otherwise, environments within a project share a project-wide namespace. Note that anyone who can trigger a deployment of a namespace can read its secrets. If modified, existing environments will use their current namespaces until the cluster cache is cleared. %{linkStart}More information%{linkEnd}',
+    ),
+  },
   computed: {
     ...mapState([
       'clusterName',
@@ -60,6 +108,7 @@ export default {
       'selectedInstanceType',
       'nodeCount',
       'gitlabManagedCluster',
+      'namespacePerEnvironment',
       'isCreatingCluster',
     ]),
     ...mapGetters(['subnetValid']),
@@ -137,90 +186,6 @@ export default {
         ? s__('ClusterIntegration|Creating Kubernetes cluster')
         : s__('ClusterIntegration|Create Kubernetes cluster');
     },
-    kubernetesIntegrationHelpText() {
-      const escapedUrl = escape(this.kubernetesIntegrationHelpPath);
-
-      return sprintf(
-        s__(
-          'ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration.',
-        ),
-        {
-          link_start: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
-          link_end: '</a>',
-        },
-        false,
-      );
-    },
-    roleDropdownHelpText() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Your service role is distinct from the provision role used when authenticating. It will allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}.',
-        ),
-        {
-          startLink:
-            '<a href="https://docs.aws.amazon.com/eks/latest/userguide/service_IAM_role.html#create-service-role" target="_blank" rel="noopener noreferrer">',
-          externalLinkIcon: this.externalLinkIcon,
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
-    regionsDropdownHelpText() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Learn more about %{startLink}Regions %{externalLinkIcon}%{endLink}.',
-        ),
-        {
-          startLink:
-            '<a href="https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/" target="_blank" rel="noopener noreferrer">',
-          externalLinkIcon: this.externalLinkIcon,
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
-    keyPairDropdownHelpText() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}.',
-        ),
-        {
-          startLink:
-            '<a href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#having-ec2-create-your-key-pair" target="_blank" rel="noopener noreferrer">',
-          externalLinkIcon: this.externalLinkIcon,
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
-    vpcDropdownHelpText() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}.',
-        ),
-        {
-          startLink:
-            '<a href="https://docs.aws.amazon.com/eks/latest/userguide/getting-started-console.html#vpc-create" target="_blank" rel="noopener noreferrer">',
-          externalLinkIcon: this.externalLinkIcon,
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
-    subnetDropdownHelpText() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Choose the %{startLink}subnets %{externalLinkIcon} %{endLink} in your VPC where your worker nodes will run.',
-        ),
-        {
-          startLink:
-            '<a href="https://console.aws.amazon.com/vpc/home?#subnets" target="_blank" rel="noopener noreferrer">',
-          externalLinkIcon: this.externalLinkIcon,
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
     subnetValidationErrorText() {
       if (this.loadingSubnetsError) {
         return s__('ClusterIntegration|Could not load subnets for the selected VPC');
@@ -228,48 +193,6 @@ export default {
 
       return s__('ClusterIntegration|You should select at least two subnets');
     },
-    securityGroupDropdownHelpText() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Choose the %{startLink}security group %{externalLinkIcon} %{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">',
-          externalLinkIcon: this.externalLinkIcon,
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
-    instanceTypesDropdownHelpText() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Choose the worker node %{startLink}instance type %{externalLinkIcon} %{endLink}.',
-        ),
-        {
-          startLink:
-            '<a href="https://aws.amazon.com/ec2/instance-types" target="_blank" rel="noopener noreferrer">',
-          externalLinkIcon: this.externalLinkIcon,
-          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();
@@ -290,6 +213,7 @@ export default {
       'setInstanceType',
       'setNodeCount',
       'setGitlabManagedCluster',
+      'setNamespacePerEnvironment',
     ]),
     ...mapRegionsActions({ fetchRegions: 'fetchItems' }),
     ...mapVpcActions({ fetchVpcs: 'fetchItems' }),
@@ -321,7 +245,15 @@ export default {
     <h4>
       {{ s__('ClusterIntegration|Enter the details for your Amazon EKS Kubernetes cluster') }}
     </h4>
-    <div class="mb-3" v-html="kubernetesIntegrationHelpText"></div>
+    <div class="mb-3">
+      <gl-sprintf :message="$options.i18n.kubernetesIntegrationHelpText">
+        <template #link="{ content }">
+          <gl-link :href="kubernetesIntegrationHelpPath">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </div>
     <div class="form-group">
       <label class="label-bold" for="eks-cluster-name">{{
         s__('ClusterIntegration|Kubernetes cluster name')
@@ -371,7 +303,16 @@ export default {
         :error-message="s__('ClusterIntegration|Could not load IAM roles')"
         @input="setRole({ role: $event })"
       />
-      <p class="form-text text-muted" v-html="roleDropdownHelpText"></p>
+      <p class="form-text text-muted">
+        <gl-sprintf :message="$options.i18n.roleDropdownHelpText">
+          <template #link="{ content }">
+            <gl-link :href="$options.i18n.roleDropdownHelpPath" target="_blank">
+              {{ content }}
+              <gl-icon name="external-link" class="gl-vertical-align-middle" />
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
     <div class="form-group">
       <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Region') }}</label>
@@ -389,7 +330,16 @@ export default {
         :error-message="s__('ClusterIntegration|Could not load regions from your AWS account')"
         @input="setRegionAndFetchVpcsAndKeyPairs($event)"
       />
-      <p class="form-text text-muted" v-html="regionsDropdownHelpText"></p>
+      <p class="form-text text-muted">
+        <gl-sprintf :message="$options.i18n.regionsDropdownHelpText">
+          <template #link="{ content }">
+            <gl-link :href="$options.i18n.regionsDropdownHelpPath" target="_blank">
+              {{ content }}
+              <gl-icon name="external-link" class="gl-vertical-align-middle" />
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
     <div class="form-group">
       <label class="label-bold" for="eks-key-pair">{{
@@ -411,7 +361,16 @@ export default {
         :error-message="s__('ClusterIntegration|Could not load Key Pairs')"
         @input="setKeyPair({ keyPair: $event })"
       />
-      <p class="form-text text-muted" v-html="keyPairDropdownHelpText"></p>
+      <p class="form-text text-muted">
+        <gl-sprintf :message="$options.i18n.keyPairDropdownHelpText">
+          <template #link="{ content }">
+            <gl-link :href="$options.i18n.keyPairDropdownHelpPath" target="_blank">
+              {{ content }}
+              <gl-icon name="external-link" class="gl-vertical-align-middle" />
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
     <div class="form-group">
       <label class="label-bold" for="eks-vpc">{{ s__('ClusterIntegration|VPC') }}</label>
@@ -431,7 +390,16 @@ export default {
         :error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')"
         @input="setVpcAndFetchSubnets($event)"
       />
-      <p class="form-text text-muted" v-html="vpcDropdownHelpText"></p>
+      <p class="form-text text-muted">
+        <gl-sprintf :message="$options.i18n.vpcDropdownHelpText">
+          <template #link="{ content }">
+            <gl-link :href="$options.i18n.vpcDropdownHelpPath" target="_blank">
+              {{ content }}
+              <gl-icon name="external-link" class="gl-vertical-align-middle" />
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
     <div class="form-group">
       <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Subnets') }}</label>
@@ -452,7 +420,16 @@ export default {
         :error-message="subnetValidationErrorText"
         @input="setSubnet({ subnet: $event })"
       />
-      <p class="form-text text-muted" v-html="subnetDropdownHelpText"></p>
+      <p class="form-text text-muted">
+        <gl-sprintf :message="$options.i18n.subnetDropdownHelpText">
+          <template #link="{ content }">
+            <gl-link :href="$options.i18n.subnetDropdownHelpPath" target="_blank">
+              {{ content }}
+              <gl-icon name="external-link" class="gl-vertical-align-middle" />
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
     <div class="form-group">
       <label class="label-bold" for="eks-security-group">{{
@@ -476,7 +453,16 @@ export default {
         "
         @input="setSecurityGroup({ securityGroup: $event })"
       />
-      <p class="form-text text-muted" v-html="securityGroupDropdownHelpText"></p>
+      <p class="form-text text-muted">
+        <gl-sprintf :message="$options.i18n.securityGroupDropdownHelpText">
+          <template #link="{ content }">
+            <gl-link :href="$options.i18n.securityGroupDropdownHelpPath" target="_blank">
+              {{ content }}
+              <gl-icon name="external-link" class="gl-vertical-align-middle" />
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
     <div class="form-group">
       <label class="label-bold" for="eks-instance-type">{{
@@ -496,7 +482,16 @@ export default {
         :error-message="s__('ClusterIntegration|Could not load instance types')"
         @input="setInstanceType({ instanceType: $event })"
       />
-      <p class="form-text text-muted" v-html="instanceTypesDropdownHelpText"></p>
+      <p class="form-text text-muted">
+        <gl-sprintf :message="$options.i18n.instanceTypesDropdownHelpText">
+          <template #link="{ content }">
+            <gl-link :href="$options.i18n.instanceTypesDropdownHelpPath" target="_blank">
+              {{ content }}
+              <gl-icon name="external-link" class="gl-vertical-align-middle" />
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
     <div class="form-group">
       <label class="label-bold" for="eks-node-count">{{
@@ -517,7 +512,31 @@ export default {
         @input="setGitlabManagedCluster({ gitlabManagedCluster: $event })"
         >{{ s__('ClusterIntegration|GitLab-managed cluster') }}</gl-form-checkbox
       >
-      <p class="form-text text-muted" v-html="gitlabManagedHelpText"></p>
+      <p class="form text text-muted">
+        <gl-sprintf :message="$options.i18n.gitlabManagedClusterHelpText">
+          <template #link="{ content }">
+            <gl-link :href="gitlabManagedClusterHelpPath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+    </div>
+    <div class="form-group">
+      <gl-form-checkbox
+        :checked="namespacePerEnvironment"
+        @input="setNamespacePerEnvironment({ namespacePerEnvironment: $event })"
+        >{{ s__('ClusterIntegration|Namespace per environment') }}</gl-form-checkbox
+      >
+      <p class="form text text-muted">
+        <gl-sprintf :message="$options.i18n.namespacePerEnvironmentHelpText">
+          <template #link="{ content }">
+            <gl-link :href="namespacePerEnvironmentHelpPath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
     </div>
     <div class="form-group">
       <loading-button