Merge branch '340759-implementation-revisit-the-kubernetes-section-ux-3' into 'master'

Change the copy and empty state illustrations in the Kubernetes section

See merge request gitlab-org/gitlab!73586

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

 <script>
 import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui';
-import { INSTALL_AGENT_MODAL_ID } from '../constants';
+import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
 
 export default {
+  i18n: I18N_AGENTS_EMPTY_STATE,
   modalId: INSTALL_AGENT_MODAL_ID,
   components: {
     GlButton,
@@ -17,7 +18,7 @@ export default {
   inject: [
     'emptyStateImage',
     'projectPath',
-    'agentDocsUrl',
+    'multipleClustersDocsUrl',
     'installDocsUrl',
     'getStartedDocsUrl',
     'integrationDocsUrl',
@@ -37,22 +38,19 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state
-    :svg-path="emptyStateImage"
-    :title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')"
-    class="empty-state--agent"
-  >
+  <gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state">
     <template #description>
-      <p class="mw-460 gl-mx-auto">
-        <gl-sprintf
-          :message="
-            s__(
-              'ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}',
-            )
-          "
-        >
+      <p class="mw-460 gl-mx-auto gl-text-left">
+        {{ $options.i18n.introText }}
+      </p>
+      <p class="mw-460 gl-mx-auto gl-text-left">
+        <gl-sprintf :message="$options.i18n.multipleClustersText">
           <template #link="{ content }">
-            <gl-link :href="agentDocsUrl" target="_blank" data-testid="agent-docs-link">
+            <gl-link
+              :href="multipleClustersDocsUrl"
+              target="_blank"
+              data-testid="multiple-clusters-docs-link"
+            >
               {{ content }}
             </gl-link>
           </template>
@@ -60,19 +58,9 @@ export default {
       </p>
 
       <p class="mw-460 gl-mx-auto">
-        <gl-sprintf
-          :message="
-            s__(
-              'ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}',
-            )
-          "
-        >
-          <template #link="{ content }">
         <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link">
-              {{ content }}
+          {{ $options.i18n.learnMoreText }}
         </gl-link>
-          </template>
-        </gl-sprintf>
       </p>
 
       <gl-alert
@@ -81,11 +69,7 @@ export default {
         class="gl-mb-5 text-left"
         :dismissible="false"
       >
-        {{
-          s__(
-            'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
-          )
-        }}
+        {{ $options.i18n.warningText }}
 
         <template #actions>
           <gl-button
@@ -95,10 +79,10 @@ export default {
             target="_blank"
             class="gl-ml-0!"
           >
-            {{ s__('ClusterAgents|Read more about getting started') }}
+            {{ $options.i18n.readMoreText }}
           </gl-button>
           <gl-button category="secondary" variant="info" :href="repositoryPath">
-            {{ s__('ClusterAgents|Go to the repository') }}
+            {{ $options.i18n.repositoryButtonText }}
           </gl-button>
         </template>
       </gl-alert>
@@ -110,9 +94,9 @@ export default {
         :disabled="!hasConfigurations"
         data-testid="integration-primary-button"
         category="primary"
-        variant="success"
+        variant="confirm"
       >
-        {{ s__('ClusterAgents|Integrate with the GitLab Agent') }}
+        {{ $options.i18n.primaryButtonText }}
       </gl-button>
     </template>
   </gl-empty-state>

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

 <script>
-import { GlEmptyState, GlButton, GlLink } from '@gitlab/ui';
+import { GlEmptyState, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { I18N_CLUSTERS_EMPTY_STATE } from '../constants';
 
 export default {
-  i18n: {
-    title: s__('ClusterIntegration|Integrate Kubernetes with a cluster certificate'),
-    description: s__(
-      'ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way.',
-    ),
-    learnMoreLinkText: s__('ClusterIntegration|Learn more about Kubernetes'),
-    buttonText: s__('ClusterIntegration|Integrate with a cluster certificate'),
-  },
+  i18n: I18N_CLUSTERS_EMPTY_STATE,
   components: {
     GlEmptyState,
     GlButton,
     GlLink,
+    GlSprintf,
   },
   inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
   learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
@@ -27,11 +21,24 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state :svg-path="clustersEmptyStateImage" :title="$options.i18n.title">
+  <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
     <template #description>
-      <p>
+      <p class="gl-text-left">
         {{ $options.i18n.description }}
       </p>
+      <p class="gl-text-left">
+        <gl-sprintf :message="$options.i18n.multipleClustersText">
+          <template #link="{ content }">
+            <gl-link
+              :href="$options.multipleClustersHelpUrl"
+              target="_blank"
+              data-testid="multiple-clusters-docs-link"
+            >
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
 
       <p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text">
         {{ emptyStateHelpText }}

app/assets/javascripts/clusters_list/constants.js

@@ -141,3 +141,30 @@ export const AGENT_STATUSES = {
     },
   },
 };
+
+export const I18N_AGENTS_EMPTY_STATE = {
+  introText: s__(
+    'ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more.',
+  ),
+  multipleClustersText: s__(
+    'ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
+  ),
+  learnMoreText: s__('ClusterAgents|Learn more about the GitLab Kubernetes Agent.'),
+  warningText: s__(
+    'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
+  ),
+  readMoreText: s__('ClusterAgents|Read more about getting started'),
+  repositoryButtonText: s__('ClusterAgents|Go to the repository'),
+  primaryButtonText: s__('ClusterAgents|Connect with a GitLab Agent'),
+};
+
+export const I18N_CLUSTERS_EMPTY_STATE = {
+  description: s__(
+    'ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way.',
+  ),
+  multipleClustersText: s__(
+    'ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}',
+  ),
+  learnMoreLinkText: s__('ClusterIntegration|Learn more about the GitLab managed clusters'),
+  buttonText: s__('ClusterIntegration|Connect with a certificate'),
+};

app/assets/javascripts/clusters_list/load_agents.js

@@ -14,7 +14,7 @@ export default (Vue, VueApollo) => {
     emptyStateImage,
     defaultBranchName,
     projectPath,
-    agentDocsUrl,
+    multipleClustersDocsUrl,
     installDocsUrl,
     getStartedDocsUrl,
     integrationDocsUrl,
@@ -27,7 +27,7 @@ export default (Vue, VueApollo) => {
     provide: {
       emptyStateImage,
       projectPath,
-      agentDocsUrl,
+      multipleClustersDocsUrl,
       installDocsUrl,
       getStartedDocsUrl,
       integrationDocsUrl,

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

@@ -3,7 +3,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import { MAX_REQUESTS } from '../constants';
 import * as types from './mutation_types';
 
@@ -65,7 +65,7 @@ export const fetchClusters = ({ state, commit, dispatch }) => {
       commit(types.SET_LOADING_CLUSTERS, false);
       commit(types.SET_LOADING_NODES, false);
       createFlash({
-        message: __('Clusters|An error occurred while loading clusters'),
+        message: s__('Clusters|An error occurred while loading clusters'),
       });
 
       dispatch('reportSentryError', { error: response, tag: 'fetchClustersErrorCallback' });

app/assets/stylesheets/pages/clusters.scss

 .clusters-container {
-  .empty-state .svg-content img {
-    width: 145px;
+  .empty-state .svg-content {
+    @include gl-pb-0;
+
+    img {
+      width: 100px;
+    }
   }
 
-  .empty-state--agent {
+  .agents-empty-state {
     .text-content {
       @include gl-max-w-full;
       @include media-breakpoint-up(lg) {

app/helpers/clusters_helper.rb

@@ -19,9 +19,9 @@ module ClustersHelper
   def js_cluster_agents_list_data(clusterable_project)
     {
       default_branch_name: clusterable_project.default_branch,
-      empty_state_image: image_path('illustrations/clusters_empty.svg'),
+      empty_state_image: image_path('illustrations/empty-state/empty-state-agents.svg'),
       project_path: clusterable_project.full_path,
-      agent_docs_url: help_page_path('user/clusters/agent/index'),
+      multiple_clusters_docs_url: help_page_path('user/project/clusters/multiple_kubernetes_clusters'),
       install_docs_url: help_page_path('administration/clusters/kas'),
       get_started_docs_url: help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'),
       integration_docs_url: help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'),
@@ -38,7 +38,7 @@ module ClustersHelper
         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') }
       },
-      clusters_empty_state_image: image_path('illustrations/clusters_empty.svg'),
+      clusters_empty_state_image: image_path('illustrations/empty-state/empty-state-clusters.svg'),
       empty_state_help_text: clusterable.empty_state_help_text,
       new_cluster_path: clusterable.new_path(tab: 'create'),
       can_add_cluster: clusterable.can_add_cluster?.to_s

locale/gitlab.pot

@@ -7336,6 +7336,9 @@ msgstr ""
 msgid "ClusterAgents|Configuration"
 msgstr ""
 
+msgid "ClusterAgents|Connect with a GitLab Agent"
+msgstr ""
+
 msgid "ClusterAgents|Connected"
 msgstr ""
 
@@ -7366,16 +7369,13 @@ msgstr ""
 msgid "ClusterAgents|Go to the repository"
 msgstr ""
 
-msgid "ClusterAgents|Install a new GitLab Agent"
-msgstr ""
-
-msgid "ClusterAgents|Install new Agent"
+msgid "ClusterAgents|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}"
 msgstr ""
 
-msgid "ClusterAgents|Integrate Kubernetes with a GitLab Agent"
+msgid "ClusterAgents|Install a new GitLab Agent"
 msgstr ""
 
-msgid "ClusterAgents|Integrate with the GitLab Agent"
+msgid "ClusterAgents|Install new Agent"
 msgstr ""
 
 msgid "ClusterAgents|Last connected %{timeAgo}."
@@ -7387,6 +7387,9 @@ msgstr ""
 msgid "ClusterAgents|Learn how to create an agent access token"
 msgstr ""
 
+msgid "ClusterAgents|Learn more about the GitLab Kubernetes Agent."
+msgstr ""
+
 msgid "ClusterAgents|Make sure you are using a valid token."
 msgstr ""
 
@@ -7429,12 +7432,6 @@ msgstr ""
 msgid "ClusterAgents|The Agent has not been connected in a long time. There might be a connectivity issue. Last contact was %{timeAgo}."
 msgstr ""
 
-msgid "ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}"
-msgstr ""
-
-msgid "ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}"
-msgstr ""
-
 msgid "ClusterAgents|The recommended installation method provided below includes the token. If you want to follow the alternative installation method provided in the docs make sure you save the token value before you close the window."
 msgstr ""
 
@@ -7453,6 +7450,9 @@ msgstr ""
 msgid "ClusterAgents|Unknown user"
 msgstr ""
 
+msgid "ClusterAgents|Use GitLab Agents to more securely integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more."
+msgstr ""
+
 msgid "ClusterAgents|You will need to create a token to connect to your agent"
 msgstr ""
 
@@ -7606,6 +7606,9 @@ msgstr ""
 msgid "ClusterIntegration|Connect existing cluster"
 msgstr ""
 
+msgid "ClusterIntegration|Connect with a certificate"
+msgstr ""
+
 msgid "ClusterIntegration|Connection Error"
 msgstr ""
 
@@ -7768,6 +7771,9 @@ msgstr ""
 msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{help_link_start}read this first%{help_link_end}."
 msgstr ""
 
+msgid "ClusterIntegration|If you are setting up multiple clusters and are using Auto DevOps, %{linkStart}read about using multiple Kubernetes clusters first.%{linkEnd}"
+msgstr ""
+
 msgid "ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration."
 msgstr ""
 
@@ -7780,12 +7786,6 @@ msgstr ""
 msgid "ClusterIntegration|Instance type"
 msgstr ""
 
-msgid "ClusterIntegration|Integrate Kubernetes with a cluster certificate"
-msgstr ""
-
-msgid "ClusterIntegration|Integrate with a cluster certificate"
-msgstr ""
-
 msgid "ClusterIntegration|Integration disabled"
 msgstr ""
 
@@ -7807,9 +7807,6 @@ msgstr ""
 msgid "ClusterIntegration|Kubernetes cluster was successfully created."
 msgstr ""
 
-msgid "ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way."
-msgstr ""
-
 msgid "ClusterIntegration|Kubernetes version"
 msgstr ""
 
@@ -7831,6 +7828,9 @@ msgstr ""
 msgid "ClusterIntegration|Learn more about instance Kubernetes clusters"
 msgstr ""
 
+msgid "ClusterIntegration|Learn more about the GitLab managed clusters"
+msgstr ""
+
 msgid "ClusterIntegration|Loading IAM Roles"
 msgstr ""
 
@@ -8164,6 +8164,9 @@ msgstr ""
 msgid "ClusterIntegration|Unknown Error"
 msgstr ""
 
+msgid "ClusterIntegration|Use certificates to integrate with your clusters to deploy your applications, run your pipelines, use review apps and much more in an easy way."
+msgstr ""
+
 msgid "ClusterIntegration|Uses the Cloud Run, Istio, and HTTP Load Balancing addons for this cluster."
 msgstr ""
 

spec/features/admin/clusters/eks_spec.rb

@@ -14,7 +14,7 @@ RSpec.describe 'Instance-level AWS EKS Cluster', :js do
     before do
       visit admin_clusters_path
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/clusters/create_agent_spec.rb

@@ -26,7 +26,7 @@ RSpec.describe 'Cluster agent registration', :js do
   it 'allows the user to select an agent to install, and displays the resulting agent token' do
     click_link('GitLab Agent managed clusters')
 
-    click_button('Integrate with the GitLab Agent')
+    click_button('Connect with a GitLab Agent')
     expect(page).to have_content('Install new Agent')
 
     click_button('Select an Agent')

spec/features/groups/clusters/eks_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe 'Group AWS EKS Cluster', :js do
     before do
       visit group_clusters_path(group)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/groups/clusters/user_spec.rb

@@ -25,7 +25,7 @@ RSpec.describe 'User Cluster', :js do
     before do
       visit group_clusters_path(group)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
       click_link 'Connect existing cluster'
     end
 
@@ -129,7 +129,7 @@ RSpec.describe 'User Cluster', :js do
 
       it 'user sees creation form with the successful message' do
         expect(page).to have_content('Kubernetes cluster integration was successfully removed.')
-        expect(page).to have_link('Integrate with a cluster certificate')
+        expect(page).to have_link('Connect with a certificate')
       end
     end
   end

spec/features/projects/cluster_agents_spec.rb

@@ -24,7 +24,7 @@ RSpec.describe 'ClusterAgents', :js do
     it 'displays empty state', :aggregate_failures do
       click_link 'GitLab Agent managed clusters'
 
-      expect(page).to have_content('Integrate with the GitLab Agent')
+      expect(page).to have_content('Connect with a GitLab Agent')
       expect(page).to have_selector('.empty-state')
     end
   end

spec/features/projects/clusters/eks_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe 'AWS EKS Cluster', :js do
     before do
       visit project_clusters_path(project)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
     end
 
     context 'when user creates a cluster on AWS EKS' do

spec/features/projects/clusters/gcp_spec.rb

@@ -33,7 +33,7 @@ RSpec.describe 'Gcp Cluster', :js do
       before do
         visit project_clusters_path(project)
 
-        click_link 'Integrate with a cluster certificate'
+        click_link 'Connect with a certificate'
         click_link 'Create new cluster'
         click_link 'Google GKE'
       end
@@ -162,7 +162,7 @@ RSpec.describe 'Gcp Cluster', :js do
 
         it 'user sees creation form with the successful message' do
           expect(page).to have_content('Kubernetes cluster integration was successfully removed.')
-          expect(page).to have_link('Integrate with a cluster certificate')
+          expect(page).to have_link('Connect with a certificate')
         end
       end
     end
@@ -178,7 +178,7 @@ RSpec.describe 'Gcp Cluster', :js do
     end
 
     it 'user sees offer on cluster create page' do
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
 
       expect(page).to have_css('.gcp-signup-offer')
     end
@@ -195,7 +195,7 @@ RSpec.describe 'Gcp Cluster', :js do
       find('.gcp-signup-offer .js-close').click
       wait_for_requests
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
 
       expect(page).not_to have_css('.gcp-signup-offer')
     end

spec/features/projects/clusters/user_spec.rb

@@ -25,7 +25,7 @@ RSpec.describe 'User Cluster', :js do
     before do
       visit project_clusters_path(project)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
       click_link 'Connect existing cluster'
     end
 
@@ -116,7 +116,7 @@ RSpec.describe 'User Cluster', :js do
 
       it 'user sees creation form with the successful message' do
         expect(page).to have_content('Kubernetes cluster integration was successfully removed.')
-        expect(page).to have_link('Integrate with a cluster certificate')
+        expect(page).to have_link('Connect with a certificate')
       end
     end
   end

spec/features/projects/clusters_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe 'Clusters', :js do
     end
 
     it 'sees empty state' do
-      expect(page).to have_link('Integrate with a cluster certificate')
+      expect(page).to have_link('Connect with a certificate')
       expect(page).to have_selector('.empty-state')
     end
   end
@@ -214,7 +214,7 @@ RSpec.describe 'Clusters', :js do
     before do
       visit project_clusters_path(project)
 
-      click_link 'Integrate with a cluster certificate'
+      click_link 'Connect with a certificate'
       click_link 'Create new cluster'
     end
 

spec/frontend/clusters_list/components/agent_empty_state_spec.js

@@ -4,7 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 const emptyStateImage = '/path/to/image';
 const projectPath = 'path/to/project';
-const agentDocsUrl = 'path/to/agentDocs';
+const multipleClustersDocsUrl = 'path/to/multipleClustersDocs';
 const installDocsUrl = 'path/to/installDocs';
 const getStartedDocsUrl = 'path/to/getStartedDocs';
 const integrationDocsUrl = 'path/to/integrationDocs';
@@ -18,14 +18,14 @@ describe('AgentEmptyStateComponent', () => {
   const provideData = {
     emptyStateImage,
     projectPath,
-    agentDocsUrl,
+    multipleClustersDocsUrl,
     installDocsUrl,
     getStartedDocsUrl,
     integrationDocsUrl,
   };
 
   const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
-  const findAgentDocsLink = () => wrapper.findByTestId('agent-docs-link');
+  const findMultipleClustersDocsLink = () => wrapper.findByTestId('multiple-clusters-docs-link');
   const findInstallDocsLink = () => wrapper.findByTestId('install-docs-link');
   const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
@@ -46,7 +46,7 @@ describe('AgentEmptyStateComponent', () => {
   });
 
   it('renders correct href attributes for the links', () => {
-    expect(findAgentDocsLink().attributes('href')).toBe(agentDocsUrl);
+    expect(findMultipleClustersDocsLink().attributes('href')).toBe(multipleClustersDocsUrl);
     expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl);
   });
 

spec/frontend/clusters_list/components/clusters_empty_state_spec.js

@@ -11,10 +11,6 @@ const canAddCluster = true;
 describe('ClustersEmptyStateComponent', () => {
   let wrapper;
 
-  const propsData = {
-    childComponent: false,
-  };
-
   const provideData = {
     clustersEmptyStateImage,
     emptyStateHelpText: null,
@@ -31,7 +27,6 @@ describe('ClustersEmptyStateComponent', () => {
   beforeEach(() => {
     wrapper = shallowMountExtended(ClustersEmptyState, {
       store: ClusterStore(entryData),
-      propsData,
       provide: provideData,
       stubs: { GlEmptyState },
     });
@@ -56,7 +51,6 @@ describe('ClustersEmptyStateComponent', () => {
       provideData.emptyStateHelpText = emptyStateHelpText;
       wrapper = shallowMountExtended(ClustersEmptyState, {
         store: ClusterStore(entryData),
-        propsData,
         provide: provideData,
       });
     });

spec/helpers/clusters_helper_spec.rb

@@ -69,7 +69,7 @@ RSpec.describe ClustersHelper do
     end
 
     it 'displays image path' do
-      expect(subject[:empty_state_image]).to match(%r(/illustrations/logos/clusters_empty|svg))
+      expect(subject[:empty_state_image]).to match(%r(/illustrations/empty-state/empty-state-agents|svg))
     end
 
     it 'displays project path' do
@@ -77,7 +77,7 @@ RSpec.describe ClustersHelper do
     end
 
     it 'generates docs urls' do
-      expect(subject[:agent_docs_url]).to eq(help_page_path('user/clusters/agent/index'))
+      expect(subject[:multiple_clusters_docs_url]).to eq(help_page_path('user/project/clusters/multiple_kubernetes_clusters'))
       expect(subject[:install_docs_url]).to eq(help_page_path('administration/clusters/kas'))
       expect(subject[:get_started_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'define-a-configuration-repository'))
       expect(subject[:integration_docs_url]).to eq(help_page_path('user/clusters/agent/index', anchor: 'get-started-with-gitops-and-the-gitlab-agent'))
@@ -114,7 +114,7 @@ RSpec.describe ClustersHelper do
     end
 
     it 'displays empty image path' do
-      expect(subject[:clusters_empty_state_image]).to match(%r(/illustrations/logos/clusters_empty|svg))
+      expect(subject[:clusters_empty_state_image]).to match(%r(/illustrations/empty-state/empty-state-clusters|svg))
     end
 
     it 'displays create cluster using certificate path' do