Added provider icon to cluster index display

Added provider icon to cluster loading index
Added missing GitLab UI utilities classes
Added extra tests

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/31134

app/helpers/clusters_helper.rb

@@ -17,6 +17,17 @@ module ClustersHelper
     end
   end
 
+  def provider_icon(provider = nil)
+    case provider
+    when 'aws'
+      image_tag 'illustrations/logos/amazon_eks.svg', alt: s_('ClusterIntegration|Amazon EKS'), class: 'gl-h-full'
+    when 'gcp'
+      image_tag 'illustrations/logos/google_gke.svg', alt: s_('ClusterIntegration|Google GKE'), class: 'gl-h-full'
+    else
+      image_tag 'illustrations/logos/kubernetes.svg', alt: _('Kubernetes Cluster'), class: 'gl-h-full'
+    end
+  end
+
   def render_gcp_signup_offer
     return if Gitlab::CurrentSettings.current_application_settings.hide_third_party_offers?
     return unless show_gcp_signup_offer?

app/views/clusters/clusters/_cluster.html.haml

@@ -2,7 +2,8 @@
   .card-body.gl-responsive-table-row
     .table-section.section-60
       .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Kubernetes cluster")
-      .table-mobile-content
+      .table-mobile-content.gl-display-flex.gl-align-items-center.gl-justify-content-end.gl-justify-content-md-start
+        .gl-w-6.gl-h-6.gl-mr-3.gl-display-flex.gl-align-items-center= provider_icon(cluster.provider_type)
         = cluster.item_link(clusterable, html_options: { data: { qa_selector: 'cluster', qa_cluster_name: cluster.name } })
         - if cluster.status_name == :creating
           .spinner.ml-2.align-middle.has-tooltip{ title: s_("ClusterIntegration|Cluster being created") }

changelogs/unreleased/208223-provider-icon-haml.yml

+---
+title: Added provider icon to cluster index display
+merge_request: 31134
+author:
+type: added

spec/helpers/clusters_helper_spec.rb

@@ -59,6 +59,32 @@ describe ClustersHelper do
     end
   end
 
+  describe '#provider_icon' do
+    it 'will return GCP logo with gcp argument' do
+      logo = helper.provider_icon('gcp')
+
+      expect(logo).to match(%r(img alt="Google GKE" data-src="|/illustrations/logos/google_gke|svg))
+    end
+
+    it 'will return AWS logo with aws argument' do
+      logo = helper.provider_icon('aws')
+
+      expect(logo).to match(%r(img alt="Amazon EKS" data-src="|/illustrations/logos/amazon_eks|svg))
+    end
+
+    it 'will return default logo with unknown provider' do
+      logo = helper.provider_icon('unknown')
+
+      expect(logo).to match(%r(img alt="Kubernetes Cluster" data-src="|/illustrations/logos/kubernetes|svg))
+    end
+
+    it 'will return default logo when provider is empty' do
+      logo = helper.provider_icon
+
+      expect(logo).to match(%r(img alt="Kubernetes Cluster" data-src="|/illustrations/logos/kubernetes|svg))
+    end
+  end
+
   describe '#cluster_type_label' do
     subject { helper.cluster_type_label(cluster_type) }