Migrate clusters_list ancestor_notice to vue

Added components/ancestor_notice.vue to display notice
Updated haml file and asccoiated tests

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

+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { mapState } from 'vuex';
+
+export default {
+  components: {
+    GlLink,
+    GlSprintf,
+  },
+  computed: {
+    ...mapState(['ancestorHelperPath', 'hasAncestorClusters']),
+  },
+};
+</script>
+
+<template>
+  <div v-if="hasAncestorClusters" class="bs-callout bs-callout-info">
+    <p>
+      <gl-sprintf
+        :message="
+          s__(
+            'ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters. %{linkStart}More information%{linkEnd}',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link :href="ancestorHelperPath">
+            <strong>{{ content }}</strong>
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+  </div>
+</template>

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

@@ -9,6 +9,7 @@ import {
   GlSprintf,
   GlTable,
 } from '@gitlab/ui';
+import AncestorNotice from './ancestor_notice.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import { __, sprintf } from '~/locale';
@@ -17,6 +18,7 @@ export default {
   nodeMemoryText: __('%{totalMemory} (%{freeSpacePercentage}%{percentSymbol} free)'),
   nodeCpuText: __('%{totalCpu} (%{freeSpacePercentage}%{percentSymbol} free)'),
   components: {
+    AncestorNotice,
     GlBadge,
     GlLink,
     GlLoadingIcon,
@@ -195,6 +197,8 @@ export default {
   <gl-loading-icon v-if="loadingClusters" size="md" class="gl-mt-3" />
 
   <section v-else>
+    <ancestor-notice />
+
     <gl-table :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
       <template #cell(name)="{ item }">
         <div :class="[contentAlignClasses, 'js-status']">

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

 export default (initialState = {}) => ({
+  ancestorHelperPath: initialState.ancestorHelpPath,
   endpoint: initialState.endpoint,
   hasAncestorClusters: false,
   clusters: [],

app/helpers/clusters_helper.rb

@@ -18,6 +18,7 @@ module ClustersHelper
 
   def js_clusters_list_data(path = nil)
     {
+      ancestor_help_path: help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'),
       endpoint: path,
       img_tags: {
         aws: { path: image_path('illustrations/logos/amazon_eks.svg'), text: s_('ClusterIntegration|Amazon EKS') },

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

@@ -12,15 +12,14 @@
         = s_('ClusterIntegration|Kubernetes clusters can be used to deploy applications and to provide Review Apps for this project')
       = render 'clusters/clusters/buttons'
 
+    - if Feature.enabled?(:clusters_list_redesign)
+      #js-clusters-list-app{ data: js_clusters_list_data(clusterable.index_path(format: :json)) }
+    - else
       - if @has_ancestor_clusters
         .bs-callout.bs-callout-info
           = s_('ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters.')
           %strong
             = 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: js_clusters_list_data(clusterable.index_path(format: :json)) }
-    - else
       .clusters-table.js-clusters-list
         .gl-responsive-table-row.table-row-header{ role: "row" }
           .table-section.section-60{ role: "rowheader" }

locale/gitlab.pot

@@ -5054,6 +5054,9 @@ msgstr ""
 msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters."
 msgstr ""
 
+msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters. %{linkStart}More information%{linkEnd}"
+msgstr ""
+
 msgid "ClusterIntegration|Copy API URL"
 msgstr ""
 

spec/frontend/clusters_list/components/ancestor_notice_spec.js

+import AncestorNotice from '~/clusters_list/components/ancestor_notice.vue';
+import ClusterStore from '~/clusters_list/store';
+import { shallowMount } from '@vue/test-utils';
+import { GlLink, GlSprintf } from '@gitlab/ui';
+
+describe('ClustersAncestorNotice', () => {
+  let store;
+  let wrapper;
+
+  const createWrapper = () => {
+    store = ClusterStore({ ancestorHelperPath: '/some/ancestor/path' });
+    wrapper = shallowMount(AncestorNotice, { store, stubs: { GlSprintf } });
+    return wrapper.vm.$nextTick();
+  };
+
+  beforeEach(() => {
+    return createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when cluster does not have ancestors', () => {
+    beforeEach(() => {
+      store.state.hasAncestorClusters = false;
+      return wrapper.vm.$nextTick();
+    });
+
+    it('displays no notice', () => {
+      expect(wrapper.isEmpty()).toBe(true);
+    });
+  });
+
+  describe('when cluster has ancestors', () => {
+    beforeEach(() => {
+      store.state.hasAncestorClusters = true;
+      return wrapper.vm.$nextTick();
+    });
+
+    it('displays notice text', () => {
+      expect(wrapper.text()).toContain(
+        'Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters.',
+      );
+    });
+
+    it('displays link', () => {
+      expect(wrapper.contains(GlLink)).toBe(true);
+    });
+  });
+});

spec/helpers/clusters_helper_spec.rb

@@ -60,18 +60,24 @@ RSpec.describe ClustersHelper do
   end
 
   describe '#js_clusters_list_data' do
-    it 'displays endpoint path and images' do
-      js_data = helper.js_clusters_list_data('/path')
+    subject { helper.js_clusters_list_data('/path') }
 
-      expect(js_data[:endpoint]).to eq('/path')
+    it 'displays endpoint path' do
+      expect(subject[:endpoint]).to eq('/path')
+    end
+
+    it 'generates svg image data', :aggregate_failures do
+      expect(subject.dig(:img_tags, :aws, :path)).to match(%r(/illustrations/logos/amazon_eks|svg))
+      expect(subject.dig(:img_tags, :default, :path)).to match(%r(/illustrations/logos/kubernetes|svg))
+      expect(subject.dig(:img_tags, :gcp, :path)).to match(%r(/illustrations/logos/google_gke|svg))
 
-      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(subject.dig(:img_tags, :aws, :text)).to eq('Amazon EKS')
+      expect(subject.dig(:img_tags, :default, :text)).to eq('Kubernetes Cluster')
+      expect(subject.dig(:img_tags, :gcp, :text)).to eq('Google GKE')
+    end
 
-      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')
+    it 'displays and ancestor_help_path' do
+      expect(subject[:ancestor_help_path]).to eq('/help/user/group/clusters/index#cluster-precedence')
     end
   end