Address UX Code review feedback

- Make cloud provider illustrations 64px
- Set svg-content padding to 8px
- Use btn-light styles for buttons
- Include external link icon

app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue

@@ -25,6 +25,10 @@ export default {
       type: String,
       required: true,
     },
+    externalLinkIcon: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState(['hasCredentials']),
@@ -42,6 +46,7 @@ export default {
       v-else
       :create-role-arn-help-path="createRoleArnHelpPath"
       :account-and-external-ids-help-path="accountAndExternalIdsHelpPath"
+      :external-link-icon="externalLinkIcon"
     />
   </div>
 </template>

app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue

@@ -21,6 +21,10 @@ export default {
       type: String,
       required: true,
     },
+    externalLinkIcon: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -42,12 +46,13 @@ export default {
 
       return sprintf(
         s__(
-          'ClusterIntegration|Create a provision role on %{startAwsLink}Amazon Web Services%{endLink} using the account and external ID above. %{startMoreInfoLink}More information%{endLink}',
+          '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,
@@ -58,12 +63,13 @@ export default {
 
       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%{endLink} using the above account and external IDs. %{startMoreInfoLink}More information%{endLink}',
+          '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,

app/assets/javascripts/create_cluster/eks_cluster/index.js

@@ -15,6 +15,7 @@ export default el => {
     accountId,
     hasCredentials,
     createRolePath,
+    externalLinkIcon,
   } = el.dataset;
 
   return new Vue({
@@ -39,6 +40,7 @@ export default el => {
           kubernetesIntegrationHelpPath,
           accountAndExternalIdsHelpPath,
           createRoleArnHelpPath,
+          externalLinkIcon,
         },
       });
     },

app/assets/stylesheets/framework.scss

@@ -69,3 +69,4 @@
 @import 'framework/system_messages';
 @import "framework/spinner";
 @import 'framework/card';
+@import '@gitlab/ui/scss/utilities';

app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml

 - provider = local_assigns.fetch(:provider)
 - logo_path = local_assigns.fetch(:logo_path)
 - label = local_assigns.fetch(:label)
+- last = local_assigns.fetch(:last, false)
+- classes = ['btn btn-light btn-outline flex-fill d-inline-flex flex-column justify-content-center align-items-center', ('mr-3' unless last)]
 
-= link_to clusterable.new_path(provider: provider), class: 'btn gl-button btn-outline flex-fill d-inline-flex flex-column mr-3 justify-content-center align-items-center' do
-  .svg-content= image_tag logo_path, alt: label, class: 'gl-w-13 gl-h-13'
+= link_to clusterable.new_path(provider: provider), class: classes do
+  .p-2= image_tag logo_path, alt: label, class: 'gl-w-64 gl-h-64'
   %span
     = label

app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml

@@ -2,10 +2,10 @@
 - eks_label = s_('ClusterIntegration|Amazon EKS')
 - create_cluster_label = s_('ClusterIntegration|Create cluster on')
 .d-flex.flex-column
-  %h5
+  %h5.gl-my-5
     = create_cluster_label
   .d-flex
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
       locals: { provider: 'eks', label: eks_label, logo_path: 'illustrations/logos/amazon_eks.svg' }
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'gke', label: gke_label, logo_path: 'illustrations/logos/google_gke.svg' }
+      locals: { provider: 'gke', label: gke_label, logo_path: 'illustrations/logos/google_gke.svg', last: true }

app/views/clusters/clusters/eks/_index.html.haml

@@ -7,4 +7,5 @@
     'account-id' => Gitlab::CurrentSettings.eks_account_id,
     'external-id' => @aws_role.role_external_id,
     'kubernetes-integration-help-path' => help_page_path('user/project/clusters/index'),
+    'external-link-icon' => icon('external-link'),
     'has-credentials' => @aws_role.role_arn.present? } }

spec/frontend/create_cluster/eks_cluster/components/create_eks_cluster_spec.js

@@ -14,6 +14,8 @@ describe('CreateEksCluster', () => {
   const gitlabManagedClusterHelpPath = 'gitlab-managed-cluster-help-path';
   const accountAndExternalIdsHelpPath = 'account-and-external-id-help-path';
   const createRoleArnHelpPath = 'role-arn-help-path';
+  const kubernetesIntegrationHelpPath = 'kubernetes-integration';
+  const externalLinkIcon = 'external-link';
 
   beforeEach(() => {
     state = { hasCredentials: false };
@@ -26,6 +28,8 @@ describe('CreateEksCluster', () => {
         gitlabManagedClusterHelpPath,
         accountAndExternalIdsHelpPath,
         createRoleArnHelpPath,
+        externalLinkIcon,
+        kubernetesIntegrationHelpPath,
       },
       localVue,
       store,
@@ -41,6 +45,20 @@ describe('CreateEksCluster', () => {
     it('displays eks cluster configuration form when credentials are valid', () => {
       expect(vm.find(EksClusterConfigurationForm).exists()).toBe(true);
     });
+
+    describe('passes to the cluster configuration form', () => {
+      it('help url for kubernetes integration documentation', () => {
+        expect(vm.find(EksClusterConfigurationForm).props('gitlabManagedClusterHelpPath')).toBe(
+          gitlabManagedClusterHelpPath,
+        );
+      });
+
+      it('help url for gitlab managed cluster documentation', () => {
+        expect(vm.find(EksClusterConfigurationForm).props('kubernetesIntegrationHelpPath')).toBe(
+          kubernetesIntegrationHelpPath,
+        );
+      });
+    });
   });
 
   describe('when credentials are invalid', () => {
@@ -59,6 +77,10 @@ describe('CreateEksCluster', () => {
         );
       });
 
+      it('external link icon', () => {
+        expect(vm.find(ServiceCredentialsForm).props('externalLinkIcon')).toBe(externalLinkIcon);
+      });
+
       it('help url to create a role ARN', () => {
         expect(vm.find(ServiceCredentialsForm).props('createRoleArnHelpPath')).toBe(
           createRoleArnHelpPath,

spec/frontend/create_cluster/eks_cluster/components/service_credentials_form_spec.js

@@ -33,6 +33,7 @@ describe('ServiceCredentialsForm', () => {
       propsData: {
         accountAndExternalIdsHelpPath: '',
         createRoleArnHelpPath: '',
+        externalLinkIcon: '',
       },
       localVue,
       store,