Ask for feedback on the Agent listing page

As we want to gather more information on the Agent usage,
we are adding an alert on the top of the page
to ask users for feedback.
It can be disabled via the feature flag.

Changelog: added

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

 <script>
-import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
-import { MAX_LIST_COUNT, ACTIVE_CONNECTION_TIME } from '../constants';
+import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf, GlLink } 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 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}.',
+    ),
+    error: s__('ClusterAgents|An error occurred while loading your GitLab Agents'),
+  },
+  AGENT_FEEDBACK_ISSUE,
   apollo: {
     agents: {
       query: getAgentsQuery,
@@ -31,7 +40,10 @@ export default {
     GlAlert,
     GlKeysetPagination,
     GlLoadingIcon,
+    GlSprintf,
+    GlLink,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['projectPath'],
   props: {
     defaultBranchName: {
@@ -86,6 +98,12 @@ export default {
     treePageInfo() {
       return this.agents?.project?.repository?.tree?.trees?.pageInfo || {};
     },
+    showFeedbackAlert() {
+      return this.glFeatures.showGitlabAgentFeedback;
+    },
+    feedbackAlertClasses() {
+      return this.isChildComponent ? 'gl-my-2' : 'gl-mb-4';
+    },
   },
   methods: {
     reloadAgents() {
@@ -151,6 +169,19 @@ export default {
 
   <section v-else-if="agentList">
     <div v-if="agentList.length">
+      <gl-alert
+        v-if="showFeedbackAlert"
+        variant="tip"
+        :class="feedbackAlertClasses"
+        :dismissible="false"
+      >
+        <gl-sprintf :message="$options.i18n.feedbackAlert"
+          ><template #link="{ content }">
+            <gl-link :href="$options.AGENT_FEEDBACK_ISSUE">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+
       <agent-table
         :agents="agentList"
         :default-branch-name="defaultBranchName"
@@ -166,6 +197,6 @@ export default {
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">
-    {{ s__('ClusterAgents|An error occurred while loading your GitLab Agents') }}
+    {{ $options.i18n.error }}
   </gl-alert>
 </template>

app/assets/javascripts/clusters_list/constants.js

@@ -265,3 +265,5 @@ export const MODAL_TYPE_EMPTY = 'empty_state';
 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';

app/controllers/projects/clusters_controller.rb

@@ -6,6 +6,7 @@ class Projects::ClustersController < Clusters::ClustersController
 
   before_action do
     push_frontend_feature_flag(:prometheus_computed_alerts)
+    push_frontend_feature_flag(:show_gitlab_agent_feedback, type: :ops, default_enabled: :yaml)
   end
 
   layout 'project'

config/feature_flags/ops/show_gitlab_agent_feedback.yml

+---
+name: show_gitlab_agent_feedback
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78567
+rollout_issue_url: 
+milestone: '14.8'
+type: ops
+group: group::configure
+default_enabled: true

locale/gitlab.pot

@@ -7755,6 +7755,9 @@ 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}."
+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}"
 msgstr ""
 

spec/frontend/clusters_list/components/agents_spec.js

-import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf, GlLink } 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 } from '~/clusters_list/constants';
+import { ACTIVE_CONNECTION_TIME, 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';
 
@@ -24,6 +24,7 @@ describe('Agents', () => {
 
   const createWrapper = async ({
     props = {},
+    glFeatures = {},
     agents = [],
     pageInfo = null,
     trees = [],
@@ -51,15 +52,23 @@ describe('Agents', () => {
         ...defaultProps,
         ...props,
       },
-      provide: provideData,
+      provide: {
+        ...provideData,
+        glFeatures,
+      },
+      stubs: {
+        GlSprintf,
+      },
     });
 
     await nextTick();
   };
 
-  const findAgentTable = () => wrapper.find(AgentTable);
-  const findEmptyState = () => wrapper.find(AgentEmptyState);
-  const findPaginationButtons = () => wrapper.find(GlKeysetPagination);
+  const findAgentTable = () => wrapper.findComponent(AgentTable);
+  const findEmptyState = () => wrapper.findComponent(AgentEmptyState);
+  const findPaginationButtons = () => wrapper.findComponent(GlKeysetPagination);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findLink = () => wrapper.findComponent(GlLink);
 
   afterEach(() => {
     if (wrapper) {
@@ -150,6 +159,29 @@ describe('Agents', () => {
       expect(wrapper.emitted().onAgentsLoad).toEqual([[count]]);
     });
 
+    describe('when the agent feedback feature flag is enabled', () => {
+      const glFeatures = {
+        showGitlabAgentFeedback: true,
+      };
+      beforeEach(() => {
+        return createWrapper({ glFeatures, agents, count, trees });
+      });
+
+      it('should show agent feedback alert', () => {
+        expect(findAlert().exists()).toBe(true);
+      });
+
+      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);
+      });
+    });
+
     describe('when the agent has recently connected tokens', () => {
       it('should set agent status to active', () => {
         expect(findAgentTable().props('agents')).toMatchObject(expectedAgentsList);
@@ -223,6 +255,10 @@ describe('Agents', () => {
       expect(findAgentTable().exists()).toBe(false);
       expect(findEmptyState().exists()).toBe(true);
     });
+
+    it('should not show agent feedback alert', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
   });
 
   describe('when agents query has errored', () => {
@@ -231,7 +267,7 @@ describe('Agents', () => {
     });
 
     it('displays an alert message', () => {
-      expect(wrapper.find(GlAlert).exists()).toBe(true);
+      expect(findAlert().text()).toBe('An error occurred while loading your GitLab Agents');
     });
   });