Add latest changes from gitlab-org/gitlab@master

7 files changed, 84 insertions, 42 deletions

diff --git a/app/assets/javascripts/clusters/components/new_cluster.vue b/app/assets/javascripts/clusters/components/new_cluster.vue
index 2e74ad073c5..8f3e2916270 100644
--- a/app/assets/javascripts/clusters/components/new_cluster.vue
+++ b/app/assets/javascripts/clusters/components/new_cluster.vue
@@ -5,9 +5,9 @@ import { s__ } from '~/locale';
 
 export default {
   i18n: {
-    title: s__('ClusterIntegration|Enter the details for your Kubernetes cluster'),
+    title: s__('ClusterIntegration|Enter your Kubernetes cluster certificate details'),
     information: s__(
-      'ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{linkStart}documentation%{linkEnd} on Kubernetes',
+      'ClusterIntegration|Enter details about your cluster. %{linkStart}How do I use a certificate to connect to my cluster?%{linkEnd}',
     ),
   },
   components: {
@@ -21,7 +21,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-pt-4">
     <h4>{{ $options.i18n.title }}</h4>
     <p>
       <gl-sprintf :message="$options.i18n.information">
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
index ce601de57bd..76bec05cfc7 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -13,7 +13,7 @@ export default {
     GlSprintf,
     GlAlert,
   },
-  inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
+  inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'addClusterPath'],
   props: {
     isChildComponent: {
       default: false,
@@ -57,7 +57,7 @@ export default {
           category="primary"
           variant="confirm"
           :disabled="!canAddCluster"
-          :href="newClusterPath"
+          :href="addClusterPath"
         >
           {{ $options.i18n.buttonText }}
         </gl-button>
diff --git a/app/assets/javascripts/pages/admin/clusters/new/index.js b/app/assets/javascripts/pages/admin/clusters/connect/index.js
index de9ded87ef3..de9ded87ef3 100644
--- a/app/assets/javascripts/pages/admin/clusters/new/index.js
+++ b/app/assets/javascripts/pages/admin/clusters/connect/index.js
diff --git a/app/assets/javascripts/pages/groups/clusters/new/index.js b/app/assets/javascripts/pages/groups/clusters/connect/index.js
index de9ded87ef3..de9ded87ef3 100644
--- a/app/assets/javascripts/pages/groups/clusters/new/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/connect/index.js
diff --git a/app/assets/javascripts/pages/projects/clusters/new/index.js b/app/assets/javascripts/pages/projects/clusters/connect/index.js
index de9ded87ef3..de9ded87ef3 100644
--- a/app/assets/javascripts/pages/projects/clusters/new/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/connect/index.js
diff --git a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/constants.js b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/constants.js
index e10ad8bafaa..88c975b97b9 100644
--- a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/constants.js
+++ b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/constants.js
@@ -14,7 +14,11 @@ export const EASY_BUTTONS = [
     templateName:
       'easybutton-amazon-linux-2-docker-manual-scaling-with-schedule-ondemandonly.cf.yml',
     description: s__(
-      'Runners|Amazon Linux 2 Docker HA with manual scaling and optional scheduling. Non-spot. Default choice for Linux Docker executor.',
+      'Runners|Amazon Linux 2 Docker HA with manual scaling and optional scheduling. Non-spot.',
+    ),
+    moreDetails1: s__('Runners|No spot. This is the default choice for Linux Docker executor.'),
+    moreDetails2: s__(
+      'Runners|A capacity of 1 enables warm HA through Auto Scaling group re-spawn. A capacity of 2 enables hot HA because the service is available even when a node is lost. A capacity of 3 or more enables hot HA and manual scaling of runner fleet.',
     ),
   },
   {
@@ -26,12 +30,20 @@ export const EASY_BUTTONS = [
       ),
       { percentage: '100%' },
     ),
+    moreDetails1: sprintf(s__('Runners|%{percentage} spot.'), { percentage: '100%' }),
+    moreDetails2: s__(
+      'Runners|Capacity of 1 enables warm HA through Auto Scaling group re-spawn. Capacity of 2 enables hot HA because the service is available even when a node is lost. Capacity of 3 or more enables hot HA and manual scaling of runner fleet.',
+    ),
   },
   {
     stackName: 'win2019-shell-non-spot',
     templateName: 'easybutton-windows2019-shell-manual-scaling-with-scheduling-ondemandonly.cf.yml',
     description: s__(
-      'Runners|Windows 2019 Shell with manual scaling and optional scheduling. Non-spot. Default choice for Windows Shell executor.',
+      'Runners|Windows 2019 Shell with manual scaling and optional scheduling. Non-spot.',
+    ),
+    moreDetails1: s__('Runners|No spot. Default choice for Windows Shell executor.'),
+    moreDetails2: s__(
+      'Runners|Capacity of 1 enables warm HA through Auto Scaling group re-spawn. Capacity of 2 enables hot HA because the service is available even when a node is lost. Capacity of 3 or more enables hot HA and manual scaling of runner fleet.',
     ),
   },
   {
@@ -43,5 +55,9 @@ export const EASY_BUTTONS = [
       ),
       { percentage: '100%' },
     ),
+    moreDetails1: sprintf(s__('Runners|%{percentage} spot.'), { percentage: '100%' }),
+    moreDetails2: s__(
+      'Runners|Capacity of 1 enables warm HA through Auto Scaling group re-spawn. Capacity of 2 enables hot HA because the service is available even when a node is lost. Capacity of 3 or more enables hot HA and manual scaling of runner fleet.',
+    ),
   },
 ];
diff --git a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue
index 811176821e2..eee65d90285 100644
--- a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue
@@ -1,8 +1,15 @@
 <script>
-import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
-import awsCloudFormationImageUrl from 'images/aws-cloud-formation.png';
+import {
+  GlModal,
+  GlSprintf,
+  GlLink,
+  GlFormRadioGroup,
+  GlFormRadio,
+  GlAccordion,
+  GlAccordionItem,
+} from '@gitlab/ui';
 import Tracking from '~/tracking';
-import { getBaseURL, objectToQuery } from '~/lib/utils/url_utility';
+import { getBaseURL, objectToQuery, visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import { README_URL, CF_BASE_URL, TEMPLATES_BASE_URL, EASY_BUTTONS } from './constants';
 
@@ -11,6 +18,10 @@ export default {
     GlModal,
     GlSprintf,
     GlLink,
+    GlFormRadioGroup,
+    GlFormRadio,
+    GlAccordion,
+    GlAccordionItem,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -18,13 +29,16 @@ export default {
       type: String,
       required: true,
     },
-    imgSrc: {
-      type: String,
-      required: false,
-      default: awsCloudFormationImageUrl,
-    },
+  },
+  data() {
+    return {
+      selected: this.$options.easyButtons[0],
+    };
   },
   methods: {
+    borderBottom(idx) {
+      return idx < this.$options.easyButtons.length - 1;
+    },
     easyButtonUrl(easyButton) {
       const params = {
         templateURL: TEMPLATES_BASE_URL + easyButton.templateName,
@@ -38,18 +52,26 @@ export default {
         label: stackName,
       });
     },
+    handleModalPrimary() {
+      this.trackCiRunnerTemplatesClick(this.selected.stackName);
+      visitUrl(this.easyButtonUrl(this.selected), true);
+    },
   },
   i18n: {
     title: s__('Runners|Deploy GitLab Runner in AWS'),
     instructions: s__(
-      'Runners|For each solution, you will choose a capacity. 1 enables warm HA through Auto Scaling group re-spawn. 2 enables hot HA because the service is available even when a node is lost. 3 or more enables hot HA and manual scaling of runner fleet.',
-    ),
-    dont_see_what_you_are_looking_for: s__(
-      "Rnners|Don't see what you are looking for? See the full list of options, including a fully customizable option, %{linkStart}here%{linkEnd}.",
+      'Runners|Select your preferred option here. In the next step, you can choose the capacity for your runner in the AWS CloudFormation console.',
     ),
-    note: s__(
-      'Runners|If you do not select an AWS VPC, the runner will deploy to the Default VPC in the AWS Region you select. Please consult with your AWS administrator to understand if there are any security risks to deploying into the Default VPC in any given region in your AWS account.',
+    chooseRunner: s__('Runners|Choose your preferred GitLab Runner'),
+    dontSeeWhatYouAreLookingFor: s__(
+      "Runners|Don't see what you are looking for? See the full list of options, including a fully customizable option %{linkStart}here%{linkEnd}.",
     ),
+    moreDetails: __('More Details'),
+    lessDetails: __('Less Details'),
+  },
+  deployButton: {
+    text: s__('Runners|Deploy GitLab Runner in AWS'),
+    attributes: [{ variant: 'confirm' }],
   },
   closeButton: {
     text: __('Cancel'),
@@ -63,37 +85,41 @@ export default {
   <gl-modal
     :modal-id="modalId"
     :title="$options.i18n.title"
+    :action-primary="$options.deployButton"
     :action-secondary="$options.closeButton"
     size="sm"
+    @primary="handleModalPrimary"
   >
     <p>{{ $options.i18n.instructions }}</p>
-    <ul class="gl-list-style-none gl-p-0 gl-mb-0">
-      <li v-for="easyButton in $options.easyButtons" :key="easyButton.templateName">
-        <gl-link
-          :href="easyButtonUrl(easyButton)"
-          target="_blank"
-          class="gl-display-flex gl-font-weight-bold"
-          @click="trackCiRunnerTemplatesClick(easyButton.stackName)"
-        >
-          <img
-            :title="easyButton.stackName"
-            :alt="easyButton.stackName"
-            :src="imgSrc"
-            width="46"
-            height="46"
-            class="gl-mt-2 gl-mr-5 gl-mb-6"
-          />
+    <gl-form-radio-group v-model="selected" :label="$options.i18n.chooseRunner" label-sr-only>
+      <gl-form-radio
+        v-for="(easyButton, idx) in $options.easyButtons"
+        :key="easyButton.templateName"
+        :value="easyButton"
+        class="gl-py-5 gl-pl-8"
+        :class="{ 'gl-border-b': borderBottom(idx) }"
+      >
+        <div class="gl-mt-n1 gl-pl-4 gl-pb-2 gl-font-weight-bold">
           {{ easyButton.description }}
-        </gl-link>
-      </li>
-    </ul>
+          <gl-accordion :header-level="3" class="gl-pt-3">
+            <gl-accordion-item
+              :title="$options.i18n.moreDetails"
+              :title-visible="$options.i18n.lessDetails"
+              class="gl-font-weight-normal"
+            >
+              <p class="gl-pt-2">{{ easyButton.moreDetails1 }}</p>
+              <p class="gl-m-0">{{ easyButton.moreDetails2 }}</p>
+            </gl-accordion-item>
+          </gl-accordion>
+        </div>
+      </gl-form-radio>
+    </gl-form-radio-group>
     <p>
-      <gl-sprintf :message="$options.i18n.dont_see_what_you_are_looking_for">
+      <gl-sprintf :message="$options.i18n.dontSeeWhatYouAreLookingFor">
         <template #link="{ content }">
           <gl-link :href="$options.readmeUrl" target="_blank">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </p>
-    <p class="gl-font-sm gl-mb-0">{{ $options.i18n.note }}</p>
   </gl-modal>
 </template>