From ca986649138437d15b79ca4f804adf60c5756886 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 1 Mar 2024 16:32:00 +0100
Subject: [PATCH] Update kubernetes cluster empty state

- Hide tabs and controls when no agents are visible
- Update illustration

Changelog: changed
---
 .../components/agent_empty_state.vue          |  4 ++--
 .../components/install_agent_modal.vue        | 20 +++++++------------
 .../javascripts/clusters_list/constants.js    |  1 +
 app/helpers/clusters_helper.rb                |  2 +-
 app/helpers/projects/cluster_agents_helper.rb |  2 +-
 .../_gcp_signup_offer_banner.html.haml        |  2 +-
 app/views/clusters/clusters/index.html.haml   |  3 +--
 locale/gitlab.pot                             |  3 +++
 .../components/install_agent_modal_spec.js    |  5 -----
 spec/helpers/clusters_helper_spec.rb          |  2 +-
 10 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index 4a20f9ec10d751..dbe7c4efdcee77 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -17,11 +17,11 @@ export default {
 
 <template>
   <gl-empty-state
+    :title="$options.i18n.title"
     :svg-path="emptyStateImage"
-    :svg-height="100"
     data-testid="cluster-agent-empty-state"
   >
-    <template #title>
+    <template #description>
       <gl-sprintf :message="$options.i18n.introText">
         <template #link="{ content }">
           <gl-link :href="$options.agentDocsUrl">
diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
index e98e2b373624b9..bcc3d49cd983d0 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -295,19 +295,13 @@ export default {
       />
     </template>
 
-    <template v-else>
-      <div class="gl-text-center gl-mb-5">
-        <img :alt="$options.i18n.altText" :src="emptyStateImage" height="100" />
-      </div>
-
-      <p v-if="kasDisabled">
-        <gl-sprintf :message="$options.i18n.enableKasText">
-          <template #link="{ content }">
-            <gl-link :href="$options.enableKasPath">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </template>
+    <gl-alert v-else :dismissible="false" variant="warning">
+      <gl-sprintf :message="$options.i18n.enableKasText">
+        <template #link="{ content }">
+          <gl-link :href="$options.enableKasPath">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
 
     <template #modal-footer>
       <gl-button
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index fcf317f10cdbae..29c661955f67d7 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -180,6 +180,7 @@ export const AGENT_STATUSES = {
 };
 
 export const I18N_AGENTS_EMPTY_STATE = {
+  title: s__("ClusterIntegration|Your project doesn't have any GitLab agents"),
   introText: s__(
     'ClusterIntegration|Use the %{linkStart}GitLab agent%{linkEnd} to safely connect your Kubernetes clusters to GitLab. You can deploy your applications, run your pipelines, use Review Apps, and much more.',
   ),
diff --git a/app/helpers/clusters_helper.rb b/app/helpers/clusters_helper.rb
index 8a0086f880b7aa..d58b8da25ea8ef 100644
--- a/app/helpers/clusters_helper.rb
+++ b/app/helpers/clusters_helper.rb
@@ -15,7 +15,7 @@ def js_clusters_list_data(clusterable)
         gcp: { path: image_path('illustrations/logos/google_gke.svg'), text: s_('ClusterIntegration|Google GKE') }
       },
       clusters_empty_state_image: image_path('illustrations/empty-state/empty-state-clusters.svg'),
-      empty_state_image: image_path('illustrations/empty-state/empty-state-agents.svg'),
+      empty_state_image: image_path('illustrations/empty-state/empty-environment-md.svg'),
       empty_state_help_text: clusterable.empty_state_help_text,
       add_cluster_path: clusterable.connect_path,
       new_cluster_docs_path: clusterable.new_cluster_docs_path,
diff --git a/app/helpers/projects/cluster_agents_helper.rb b/app/helpers/projects/cluster_agents_helper.rb
index d285cfa03c2bc8..7eaf3d4bbd0f29 100644
--- a/app/helpers/projects/cluster_agents_helper.rb
+++ b/app/helpers/projects/cluster_agents_helper.rb
@@ -3,7 +3,7 @@
 module Projects::ClusterAgentsHelper
   def js_cluster_agent_details_data(agent_name, project)
     {
-      activity_empty_state_image: image_path('illustrations/empty-state/empty-state-agents.svg'),
+      activity_empty_state_image: image_path('illustrations/empty-state/empty-environment-md.svg'),
       agent_name: agent_name,
       can_admin_vulnerability: can?(current_user, :admin_vulnerability, project).to_s,
       empty_state_svg_path: image_path('illustrations/empty-state/empty-radar-md.svg'),
diff --git a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
index 972468e536fc2e..affa49f69dac44 100644
--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
@@ -1,7 +1,7 @@
 - link = link_to(s_('ClusterIntegration|sign up'), 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
 
 = render Pajamas::AlertComponent.new(title: s_('ClusterIntegration|Did you know?'),
-  alert_options: { class: 'gcp-signup-offer',
+  alert_options: { class: 'gl-mb-6 gcp-signup-offer',
                    data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path }},
                    close_button_options: { data: { track_action: 'click_dismiss', track_label: 'gcp_signup_offer_banner' }}) do |c|
   - c.with_body do
diff --git a/app/views/clusters/clusters/index.html.haml b/app/views/clusters/clusters/index.html.haml
index 7bc782df119d25..f713e6f03a2115 100644
--- a/app/views/clusters/clusters/index.html.haml
+++ b/app/views/clusters/clusters/index.html.haml
@@ -5,5 +5,4 @@
 = render_gcp_signup_offer
 
 .clusters-container
-  .gl-my-6
-    .js-clusters-main-view{ data: js_clusters_list_data(clusterable) }
+  .js-clusters-main-view{ data: js_clusters_list_data(clusterable) }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3465a4507ce2e6..566e3597d535a7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12075,6 +12075,9 @@ msgstr ""
 msgid "ClusterIntegration|Your cluster API is unreachable. Please ensure your API URL is correct."
 msgstr ""
 
+msgid "ClusterIntegration|Your project doesn't have any GitLab agents"
+msgstr ""
+
 msgid "ClusterIntegration|sign up"
 msgstr ""
 
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 0cf6b8fbff9ae4..686104df89fcf1 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -81,7 +81,6 @@ describe('InstallAgentModal', () => {
   const findActionButton = () => findButtonByVariant('confirm');
   const findCancelButton = () => findButtonByVariant('default');
   const findPrimaryButton = () => wrapper.findByTestId('agent-primary-button');
-  const findImage = () => wrapper.findByRole('img', { alt: i18n.altText });
 
   const expectDisabledAttribute = (element, disabled) => {
     if (disabled) {
@@ -313,10 +312,6 @@ describe('InstallAgentModal', () => {
       await waitForPromises();
     });
 
-    it('renders empty state image', () => {
-      expect(findImage().attributes('src')).toBe(emptyStateImage);
-    });
-
     it('renders an instruction to enable the KAS', () => {
       expect(findModal().text()).toContain(
         sprintf(i18n.enableKasText, { linkStart: '', linkEnd: '' }),
diff --git a/spec/helpers/clusters_helper_spec.rb b/spec/helpers/clusters_helper_spec.rb
index 2f53ff63998c4e..5b5b3a31fd726c 100644
--- a/spec/helpers/clusters_helper_spec.rb
+++ b/spec/helpers/clusters_helper_spec.rb
@@ -63,7 +63,7 @@
 
     it 'displays empty image path' do
       expect(subject[:clusters_empty_state_image]).to match(%r{/illustrations/empty-state/empty-state-clusters|svg})
-      expect(subject[:empty_state_image]).to match(%r{/illustrations/empty-state/empty-state-agents|svg})
+      expect(subject[:empty_state_image]).to match(%r{/illustrations/empty-state/empty-environment-md|svg})
     end
 
     it 'displays add cluster using certificate path' do
-- 
GitLab