Implemented the suggestions after UX review

- changed alert to banner
- made the banner dismissable using LocalStorageSync
- changed copy

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

 <script>
-import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlBanner } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME, AGENT_FEEDBACK_ISSUE } from '../constants';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import {
+  MAX_LIST_COUNT,
+  ACTIVE_CONNECTION_TIME,
+  AGENT_FEEDBACK_ISSUE,
+  AGENT_FEEDBACK_KEY,
+} from '../constants';
 import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import AgentEmptyState from './agent_empty_state.vue';
 import AgentTable from './agent_table.vue';
 
 export default {
   i18n: {
-    feedbackAlert: s__(
-      'ClusterAgents|Tell us your experience with the GitLab Agent %{linkStart}in this feedback issue%{linkEnd}.',
+    feedbackBannerTitle: s__('ClusterAgents|Tell us what you think'),
+    feedbackBannerText: s__(
+      'ClusterAgents|We would love to learn more about your experience with the GitLab Agent.',
     ),
-    error: s__('ClusterAgents|An error occurred while loading your GitLab Agents'),
+    feedbackBannerButton: s__('ClusterAgents|Give feedback'),
+    error: s__('ClusterAgents|An error occurred while loading your Agents'),
   },
   AGENT_FEEDBACK_ISSUE,
+  AGENT_FEEDBACK_KEY,
   apollo: {
     agents: {
       query: getAgentsQuery,
@@ -40,8 +49,8 @@ export default {
     GlAlert,
     GlKeysetPagination,
     GlLoadingIcon,
-    GlSprintf,
-    GlLink,
+    GlBanner,
+    LocalStorageSync,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['projectPath'],
@@ -69,6 +78,7 @@ export default {
         last: null,
       },
       folderList: {},
+      feedbackBannerDismissed: false,
     };
   },
   computed: {
@@ -98,10 +108,10 @@ export default {
     treePageInfo() {
       return this.agents?.project?.repository?.tree?.trees?.pageInfo || {};
     },
-    showFeedbackAlert() {
+    feedbackBannerEnabled() {
       return this.glFeatures.showGitlabAgentFeedback;
     },
-    feedbackAlertClasses() {
+    feedbackBannerClasses() {
       return this.isChildComponent ? 'gl-my-2' : 'gl-mb-4';
     },
   },
@@ -160,6 +170,9 @@ export default {
       const count = this.agents?.project?.clusterAgents?.count;
       this.$emit('onAgentsLoad', count);
     },
+    handleBannerClose() {
+      this.feedbackBannerDismissed = true;
+    },
   },
 };
 </script>
@@ -169,18 +182,23 @@ export default {
 
   <section v-else-if="agentList">
     <div v-if="agentList.length">
-      <gl-alert
-        v-if="showFeedbackAlert"
-        variant="tip"
-        :class="feedbackAlertClasses"
-        :dismissible="false"
+      <local-storage-sync
+        v-if="feedbackBannerEnabled"
+        v-model="feedbackBannerDismissed"
+        :storage-key="$options.AGENT_FEEDBACK_KEY"
       >
-        <gl-sprintf :message="$options.i18n.feedbackAlert"
-          ><template #link="{ content }">
-            <gl-link :href="$options.AGENT_FEEDBACK_ISSUE">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </gl-alert>
+        <gl-banner
+          v-if="!feedbackBannerDismissed"
+          variant="introduction"
+          :class="feedbackBannerClasses"
+          :title="$options.i18n.feedbackBannerTitle"
+          :button-text="$options.i18n.feedbackBannerButton"
+          :button-link="$options.AGENT_FEEDBACK_ISSUE"
+          @close="handleBannerClose"
+        >
+          <p>{{ $options.i18n.feedbackBannerText }}</p>
+        </gl-banner>
+      </local-storage-sync>
 
       <agent-table
         :agents="agentList"

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

@@ -123,7 +123,7 @@ export default {
     <div v-show="!isLoading" data-testid="clusters-cards-container">
       <gl-card
         header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between gl-py-4"
-        body-class="gl-pb-0"
+        body-class="gl-pb-0 cluster-card-item"
         footer-class="gl-text-right"
       >
         <template #header>
@@ -198,7 +198,7 @@ export default {
       <gl-card
         class="gl-mt-6"
         header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between"
-        body-class="gl-pb-0"
+        body-class="gl-pb-0 cluster-card-item"
         footer-class="gl-text-right"
       >
         <template #header>

app/assets/javascripts/clusters_list/constants.js

@@ -267,3 +267,4 @@ export const MODAL_TYPE_REGISTER = 'agent_registration';
 export const DELETE_AGENT_MODAL_ID = 'delete-agent-modal-%{agentName}';
 
 export const AGENT_FEEDBACK_ISSUE = 'https://gitlab.com/gitlab-org/gitlab/-/issues/342696';
+export const AGENT_FEEDBACK_KEY = 'agent_feedback_banner';

app/assets/stylesheets/pages/clusters.scss

@@ -7,13 +7,6 @@
     }
   }
 
-  .gl-card-body {
-    @include media-breakpoint-up(sm) {
-      @include gl-pt-2;
-      min-height: 372px;
-    }
-  }
-
   @include media-breakpoint-down(xs) {
     .nav-controls {
       @include gl-w-full;
@@ -27,6 +20,13 @@
   }
 }
 
+.cluster-card-item {
+  @include media-breakpoint-up(sm) {
+    @include gl-pt-2;
+    min-height: 372px;
+  }
+}
+
 .agent-activity-list {
   .system-note .timeline-entry-inner {
     .timeline-icon {

locale/gitlab.pot

@@ -7584,7 +7584,7 @@ msgstr ""
 msgid "ClusterAgents|All"
 msgstr ""
 
-msgid "ClusterAgents|An error occurred while loading your GitLab Agents"
+msgid "ClusterAgents|An error occurred while loading your Agents"
 msgstr ""
 
 msgid "ClusterAgents|An error occurred while loading your agent"
@@ -7671,6 +7671,9 @@ msgstr ""
 msgid "ClusterAgents|GitLab Agent for Kubernetes"
 msgstr ""
 
+msgid "ClusterAgents|Give feedback"
+msgstr ""
+
 msgid "ClusterAgents|Go to the repository files"
 msgstr ""
 
@@ -7755,7 +7758,7 @@ msgstr ""
 msgid "ClusterAgents|Select an agent to register with GitLab"
 msgstr ""
 
-msgid "ClusterAgents|Tell us your experience with the GitLab Agent %{linkStart}in this feedback issue%{linkEnd}."
+msgid "ClusterAgents|Tell us what you think"
 msgstr ""
 
 msgid "ClusterAgents|The GitLab Agent provides an increased level of security when connecting Kubernetes clusters to GitLab. %{linkStart}Learn more about the GitLab Agent.%{linkEnd}"
@@ -7799,6 +7802,9 @@ msgstr ""
 msgid "ClusterAgents|View all %{number} clusters"
 msgstr ""
 
+msgid "ClusterAgents|We would love to learn more about your experience with the GitLab Agent."
+msgstr ""
+
 msgid "ClusterAgents|What is GitLab Agent activity?"
 msgstr ""
 

spec/frontend/clusters_list/components/agents_spec.js

-import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlBanner } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import { nextTick } from 'vue';
 import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import Agents from '~/clusters_list/components/agents.vue';
-import { ACTIVE_CONNECTION_TIME, AGENT_FEEDBACK_ISSUE } from '~/clusters_list/constants';
+import {
+  ACTIVE_CONNECTION_TIME,
+  AGENT_FEEDBACK_KEY,
+  AGENT_FEEDBACK_ISSUE,
+} from '~/clusters_list/constants';
 import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -57,7 +62,8 @@ describe('Agents', () => {
         glFeatures,
       },
       stubs: {
-        GlSprintf,
+        GlBanner,
+        LocalStorageSync,
       },
     });
 
@@ -68,12 +74,12 @@ describe('Agents', () => {
   const findEmptyState = () => wrapper.findComponent(AgentEmptyState);
   const findPaginationButtons = () => wrapper.findComponent(GlKeysetPagination);
   const findAlert = () => wrapper.findComponent(GlAlert);
-  const findLink = () => wrapper.findComponent(GlLink);
+  const findBanner = () => wrapper.findComponent(GlBanner);
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-    }
+    wrapper.destroy();
+
+    localStorage.removeItem(AGENT_FEEDBACK_KEY);
   });
 
   describe('when there is a list of agents', () => {
@@ -159,7 +165,33 @@ describe('Agents', () => {
       expect(wrapper.emitted().onAgentsLoad).toEqual([[count]]);
     });
 
-    describe('when the agent feedback feature flag is enabled', () => {
+    describe.each`
+      featureFlagEnabled | localStorageItemExists | bannerShown
+      ${true}            | ${false}               | ${true}
+      ${true}            | ${true}                | ${false}
+      ${false}           | ${true}                | ${false}
+      ${false}           | ${false}               | ${false}
+    `(
+      'when the feature flag enabled is $featureFlagEnabled and dismissed localStorage item exists is $localStorageItemExists',
+      ({ featureFlagEnabled, localStorageItemExists, bannerShown }) => {
+        const glFeatures = {
+          showGitlabAgentFeedback: featureFlagEnabled,
+        };
+        beforeEach(() => {
+          if (localStorageItemExists) {
+            localStorage.setItem(AGENT_FEEDBACK_KEY, true);
+          }
+
+          return createWrapper({ glFeatures, agents, count, trees });
+        });
+
+        it(`should ${bannerShown ? 'show' : 'hide'} the feedback banner`, () => {
+          expect(findBanner().exists()).toBe(bannerShown);
+        });
+      },
+    );
+
+    describe('when the agent feedback banner is present', () => {
       const glFeatures = {
         showGitlabAgentFeedback: true,
       };
@@ -167,18 +199,12 @@ describe('Agents', () => {
         return createWrapper({ glFeatures, agents, count, trees });
       });
 
-      it('should show agent feedback alert', () => {
-        expect(findAlert().exists()).toBe(true);
+      it('should render the correct title', () => {
+        expect(findBanner().props('title')).toBe('Tell us what you think');
       });
 
       it('should render the correct issue link', () => {
-        expect(findLink().attributes('href')).toBe(AGENT_FEEDBACK_ISSUE);
-      });
-    });
-
-    describe('when the agent feedback feature flag is disabled', () => {
-      it('should not show agent feedback alert', () => {
-        expect(findAlert().exists()).toBe(false);
+        expect(findBanner().props('buttonLink')).toBe(AGENT_FEEDBACK_ISSUE);
       });
     });
 
@@ -267,7 +293,7 @@ describe('Agents', () => {
     });
 
     it('displays an alert message', () => {
-      expect(findAlert().text()).toBe('An error occurred while loading your GitLab Agents');
+      expect(findAlert().text()).toBe('An error occurred while loading your Agents');
     });
   });