Added provider icon to vue cluster list

Pass Img tags through rails and add icon to javascripts/clusters_list
Updated serializers to include provider type
Update associated tests

app/assets/javascripts/clusters_list/components/clusters.vue

@@ -28,7 +28,7 @@ export default {
     tooltip,
   },
   computed: {
-    ...mapState(['clusters', 'clustersPerPage', 'loading', 'page', 'totalCulsters']),
+    ...mapState(['clusters', 'clustersPerPage', 'loading', 'page', 'providers', 'totalCulsters']),
     currentPage: {
       get() {
         return this.page;
@@ -102,6 +102,9 @@ export default {
       // Sentry will notify us if we are missing types.
       throw new Error(`UnknownK8sCpuQuantity:${quantity}`);
     },
+    selectedProvider(provider) {
+      return this.providers[provider] || this.providers.default;
+    },
     statusTitle(status) {
       const iconTitle = STATUSES[status] || STATUSES.default;
       return sprintf(__('Status: %{title}'), { title: iconTitle.title }, false);
@@ -182,8 +185,21 @@ export default {
   <section v-else>
     <gl-table :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
       <template #cell(name)="{ item }">
-        <div class="d-flex flex-row-reverse flex-md-row js-status">
-          <gl-link data-qa-selector="cluster" :data-qa-cluster-name="item.name" :href="item.path">
+        <div
+          class="gl-display-flex gl-align-items-center gl-justify-content-end gl-justify-content-md-start js-status"
+        >
+          <img
+            :src="selectedProvider(item.provider_type).path"
+            :alt="selectedProvider(item.provider_type).text"
+            class="gl-w-6 gl-h-6 gl-display-flex gl-align-items-center"
+          />
+
+          <gl-link
+            data-qa-selector="cluster"
+            :data-qa-cluster-name="item.name"
+            :href="item.path"
+            class="gl-px-3"
+          >
             {{ item.name }}
           </gl-link>
 
@@ -192,7 +208,6 @@ export default {
             v-tooltip
             :title="statusTitle(item.status)"
             size="sm"
-            class="mr-2 ml-md-2"
           />
         </div>
       </template>

app/assets/javascripts/clusters_list/index.js

@@ -9,12 +9,10 @@ export default () => {
     return;
   }
 
-  const { endpoint } = entryPoint.dataset;
-
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-clusters-list-app',
-    store: createStore({ endpoint }),
+    store: createStore(entryPoint.dataset),
     render(createElement) {
       return createElement(Clusters);
     },

app/assets/javascripts/clusters_list/store/state.js

@@ -5,5 +5,10 @@ export default (initialState = {}) => ({
   clusters: [],
   clustersPerPage: 0,
   page: 1,
+  providers: {
+    aws: { path: initialState.imgTagsAwsPath, text: initialState.imgTagsAwsText },
+    default: { path: initialState.imgTagsDefaultPath, text: initialState.imgTagsDefaultText },
+    gcp: { path: initialState.imgTagsGcpPath, text: initialState.imgTagsGcpText },
+  },
   totalCulsters: 0,
 });

app/helpers/clusters_helper.rb

@@ -17,15 +17,23 @@ module ClustersHelper
     end
   end
 
+  def js_clusters_list_data(path = nil)
+    {
+      endpoint: path,
+      img_tags: {
+        aws: { path: image_path('illustrations/logos/amazon_eks.svg'), text: s_('ClusterIntegration|Amazon EKS') },
+        default: { path: image_path('illustrations/logos/kubernetes.svg'), text: _('Kubernetes Cluster') },
+        gcp: { path: image_path('illustrations/logos/google_gke.svg'), text: s_('ClusterIntegration|Google GKE') }
+      }
+    }
+  end
+
+  # This method is depreciated and will be removed when associated HAML files are moved to JavaScript
   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
+    img_data = js_clusters_list_data.dig(:img_tags, provider&.to_sym) ||
+               js_clusters_list_data.dig(:img_tags, :default)
+
+    image_tag img_data[:path], alt: img_data[:text], class: 'gl-h-full'
   end
 
   def render_gcp_signup_offer

app/serializers/cluster_entity.rb

@@ -8,6 +8,7 @@ class ClusterEntity < Grape::Entity
   expose :environment_scope
   expose :name
   expose :nodes
+  expose :provider_type
   expose :status_name, as: :status
   expose :status_reason
   expose :applications, using: ClusterApplicationEntity

app/serializers/cluster_serializer.rb

@@ -13,6 +13,7 @@ class ClusterSerializer < BaseSerializer
         :name,
         :nodes,
         :path,
+        :provider_type,
         :status
       ]
     })

app/views/clusters/clusters/index.html.haml

@@ -19,7 +19,7 @@
           = link_to _('More information'), help_page_path('user/group/clusters/index', anchor: 'cluster-precedence')
 
     - if Feature.enabled?(:clusters_list_redesign)
-      #js-clusters-list-app{ data: { endpoint: clusterable.index_path(format: :json) } }
+      #js-clusters-list-app{ data: js_clusters_list_data(clusterable.index_path(format: :json)) }
     - else
       .clusters-table.js-clusters-list
         .gl-responsive-table-row.table-row-header{ role: "row" }

changelogs/unreleased/emilyring-cluster-list-refactor-provider-icon.yml

+---
+title: Added provider type icon to cluster list
+merge_request: 33196
+author:
+type: changed

spec/frontend/clusters_list/components/clusters_spec.js

@@ -14,6 +14,13 @@ describe('Clusters', () => {
 
   const endpoint = 'some/endpoint';
 
+  const entryData = {
+    endpoint,
+    imgTagsAwsText: 'AWS Icon',
+    imgTagsDefaultText: 'Default Icon',
+    imgTagsGcpText: 'GCP Icon',
+  };
+
   const findLoader = () => wrapper.find(GlLoadingIcon);
   const findPaginatedButtons = () => wrapper.find(GlPagination);
   const findTable = () => wrapper.find(GlTable);
@@ -24,7 +31,7 @@ describe('Clusters', () => {
   };
 
   const mountWrapper = () => {
-    store = ClusterStore({ endpoint });
+    store = ClusterStore(entryData);
     wrapper = mount(Clusters, { store });
     return axios.waitForAll();
   };
@@ -87,6 +94,23 @@ describe('Clusters', () => {
     });
   });
 
+  describe('cluster icon', () => {
+    it.each`
+      providerText      | lineNumber
+      ${'GCP Icon'}     | ${0}
+      ${'AWS Icon'}     | ${1}
+      ${'Default Icon'} | ${2}
+      ${'Default Icon'} | ${3}
+      ${'Default Icon'} | ${4}
+      ${'Default Icon'} | ${5}
+    `('renders provider image and alt text for each cluster', ({ providerText, lineNumber }) => {
+      const images = findTable().findAll('.js-status img');
+      const image = images.at(lineNumber);
+
+      expect(image.attributes('alt')).toBe(providerText);
+    });
+  });
+
   describe('cluster status', () => {
     it.each`
       statusName    | lineNumber | result

spec/frontend/clusters_list/mock_data.js

@@ -3,6 +3,7 @@ export const clusterList = [
     name: 'My Cluster 1',
     environment_scope: '*',
     cluster_type: 'group_type',
+    provider_type: 'gcp',
     status: 'creating',
     nodes: null,
   },
@@ -10,6 +11,7 @@ export const clusterList = [
     name: 'My Cluster 2',
     environment_scope: 'development',
     cluster_type: 'project_type',
+    provider_type: 'aws',
     status: 'unreachable',
     nodes: [
       {
@@ -22,6 +24,7 @@ export const clusterList = [
     name: 'My Cluster 3',
     environment_scope: 'development',
     cluster_type: 'project_type',
+    provider_type: 'none',
     status: 'authentication_failure',
     nodes: [
       {

spec/helpers/clusters_helper_spec.rb

@@ -59,6 +59,22 @@ describe ClustersHelper do
     end
   end
 
+  describe '#js_clusters_list_data' do
+    it 'displays endpoint path and images' do
+      js_data = helper.js_clusters_list_data('/path')
+
+      expect(js_data[:endpoint]).to eq('/path')
+
+      expect(js_data.dig(:img_tags, :aws, :path)).to match(%r(/illustrations/logos/amazon_eks|svg))
+      expect(js_data.dig(:img_tags, :default, :path)).to match(%r(/illustrations/logos/kubernetes|svg))
+      expect(js_data.dig(:img_tags, :gcp, :path)).to match(%r(/illustrations/logos/google_gke|svg))
+
+      expect(js_data.dig(:img_tags, :aws, :text)).to eq('Amazon EKS')
+      expect(js_data.dig(:img_tags, :default, :text)).to eq('Kubernetes Cluster')
+      expect(js_data.dig(:img_tags, :gcp, :text)).to eq('Google GKE')
+    end
+  end
+
   describe '#provider_icon' do
     it 'will return GCP logo with gcp argument' do
       logo = helper.provider_icon('gcp')

spec/serializers/cluster_serializer_spec.rb

@@ -16,6 +16,7 @@ describe ClusterSerializer do
         :name,
         :nodes,
         :path,
+        :provider_type,
         :status)
     end
   end