Add alert about the gitops keyword deprecation

Show the alert to affected users on the Kubernetes cluster page.

Changelog: added

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

@@ -10,6 +10,7 @@ import getAgentsQuery from '../graphql/queries/get_agents.query.graphql';
 import { getAgentLastContact, getAgentStatus } from '../clusters_util';
 import AgentEmptyState from './agent_empty_state.vue';
 import AgentTable from './agent_table.vue';
+import GitopsDeprecationAlert from './gitops_deprecation_alert.vue';
 
 export default {
   i18n: {
@@ -50,6 +51,7 @@ export default {
     GlLoadingIcon,
     GlBanner,
     LocalStorageSync,
+    GitopsDeprecationAlert,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['projectPath'],
@@ -104,6 +106,12 @@ export default {
 
       return filteredList;
     },
+    agentConfigs() {
+      return this.agentList.map((agent) => agent.configFolder?.path).filter(Boolean) || [];
+    },
+    projectGid() {
+      return this.agents?.project?.id || '';
+    },
     isLoading() {
       return this.$apollo.queries.agents.loading;
     },
@@ -141,6 +149,12 @@ export default {
   <gl-loading-icon v-if="isLoading" size="lg" />
 
   <section v-else-if="!queryErrored">
+    <gitops-deprecation-alert
+      v-if="agentConfigs.length"
+      :agent-configs="agentConfigs"
+      :project-gid="projectGid"
+    />
+
     <div v-if="agentList.length">
       <local-storage-sync
         v-if="feedbackBannerEnabled"

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

+<script>
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { s__ } from '~/locale';
+import Api from '~/api';
+
+export default {
+  components: {
+    GlAlert,
+    GlSprintf,
+    GlLink,
+  },
+  props: {
+    agentConfigs: {
+      required: true,
+      type: Array,
+    },
+    projectGid: {
+      required: true,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      hasGitopsKeyword: false,
+    };
+  },
+  computed: {
+    projectId() {
+      return getIdFromGraphQLId(this.projectGid);
+    },
+  },
+  mounted() {
+    this.searchForGitopsKeyword();
+  },
+  methods: {
+    async searchForGitopsKeyword() {
+      for (const path of this.agentConfigs) {
+        // eslint-disable-next-line no-await-in-loop
+        const config = await this.getConfigFile(`${path}/config.yaml`);
+        const regexp = /\bgitops:\s/;
+        const match = regexp.exec(config);
+        if (match) {
+          this.hasGitopsKeyword = true;
+          return;
+        }
+      }
+    },
+    async getConfigFile(path) {
+      try {
+        const { data } = await Api.getRawFile(this.projectId, path);
+        return data;
+      } catch {
+        return '';
+      }
+    },
+  },
+  i18n: {
+    alertText: s__(
+      'ClusterAgents|The pull-based deployment features of the GitLab agent for Kubernetes is deprecated. If you use the agent for pull-based deployments, you should %{linkStart}migrate to Flux%{linkEnd}.',
+    ),
+  },
+  documentationLink: helpPagePath('user/clusters/agent/gitops/migrate_to_flux'),
+};
+</script>
+
+<template>
+  <gl-alert v-if="hasGitopsKeyword" variant="warning" :dismissible="false" class="gl-mb-4">
+    <gl-sprintf :message="$options.i18n.alertText">
+      <template #link="{ content }">
+        <gl-link :href="$options.documentationLink">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>

locale/gitlab.pot

@@ -11593,6 +11593,9 @@ msgstr ""
 msgid "ClusterAgents|The agent version do not match each other across your cluster's pods. This can happen when a new agent version was just deployed and Kubernetes is shutting down the old pods."
 msgstr ""
+msgid "ClusterAgents|The pull-based deployment features of the GitLab agent for Kubernetes is deprecated. If you use the agent for pull-based deployments, you should %{linkStart}migrate to Flux%{linkEnd}."
+msgstr ""
+
 msgid "ClusterAgents|This agent has no tokens"
 msgstr ""

spec/frontend/clusters_list/components/agents_spec.js

@@ -5,6 +5,7 @@ import Vue, { 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 GitopsDeprecationAlert from '~/clusters_list/components/gitops_deprecation_alert.vue';
 import {
   ACTIVE_CONNECTION_TIME,
   AGENT_FEEDBACK_KEY,
@@ -41,7 +42,7 @@ describe('Agents', () => {
     const queryResponseData = {
       data: {
         project: {
-          id: '1',
+          id: 'gid://gitlab/Project/1',
           clusterAgents: {
             nodes: agents,
             connections: { nodes: [] },
@@ -85,6 +86,7 @@ describe('Agents', () => {
   const findEmptyState = () => wrapper.findComponent(AgentEmptyState);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findBanner = () => wrapper.findComponent(GlBanner);
+  const findGitopsDeprecationAlert = () => wrapper.findComponent(GitopsDeprecationAlert);
 
   afterEach(() => {
     localStorage.removeItem(AGENT_FEEDBACK_KEY);
@@ -277,6 +279,13 @@ describe('Agents', () => {
         expect(findAgentTable().props('agents')).toMatchObject(expectedAgentsList);
       });
     });
+
+    it('should show agent gitops deprecation alert', () => {
+      expect(findGitopsDeprecationAlert().props()).toEqual({
+        agentConfigs: ['.gitlab/agents/agent-2'],
+        projectGid: 'gid://gitlab/Project/1',
+      });
+    });
   });
 
   describe('when the agent list is empty', () => {
@@ -292,6 +301,10 @@ describe('Agents', () => {
     it('should not show agent feedback alert', () => {
       expect(findAlert().exists()).toBe(false);
     });
+
+    it('should not show agent gitops deprecation alert', () => {
+      expect(findGitopsDeprecationAlert().exists()).toBe(false);
+    });
   });
 
   describe('when agents query has errored', () => {

spec/frontend/clusters_list/components/gitops_deprecation_alert_spec.js

+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import GitopsDeprecationAlert from '~/clusters_list/components/gitops_deprecation_alert.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import Api from '~/api';
+import { HTTP_STATUS_NO_CONTENT, HTTP_STATUS_NOT_FOUND } from '~/lib/utils/http_status';
+
+const projectGid = 'gid://gitlab/Project/1';
+const installDocsUrl = helpPagePath('user/clusters/agent/gitops/migrate_to_flux');
+const agentConfigPath = '.gitlab/agents/my-agent';
+
+const rawFileWithGitops = `gitops:
+  manifest_projects:
+  - id: my-project`;
+const rawFileWithoutGitops = `ci_access:
+  manifest_projects:
+  - id: my-project`;
+
+describe('GitopsDeprecationAlert', () => {
+  let wrapper;
+
+  const createWrapper = (props) => {
+    wrapper = shallowMount(GitopsDeprecationAlert, {
+      propsData: {
+        projectGid,
+        agentConfigs: [agentConfigPath],
+        ...props,
+      },
+      stubs: { GlSprintf },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findDocsLink = () => wrapper.findComponent(GlLink);
+
+  describe('on mount', () => {
+    beforeEach(() => {
+      jest.spyOn(Api, 'getRawFile').mockReturnValue(Promise.resolve({ data: '' }));
+      createWrapper();
+    });
+
+    it('requests the config file from the API', () => {
+      expect(Api.getRawFile).toHaveBeenCalledWith(1, `${agentConfigPath}/config.yaml`);
+    });
+  });
+
+  describe('when no gitops config is present', () => {
+    beforeEach(() => {
+      jest
+        .spyOn(Api, 'getRawFile')
+        .mockReturnValue(Promise.resolve({ data: rawFileWithoutGitops }));
+      createWrapper();
+    });
+
+    it('does not render an alert', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('when one gitops config is present', () => {
+    beforeEach(() => {
+      jest.spyOn(Api, 'getRawFile').mockReturnValue(Promise.resolve({ data: rawFileWithGitops }));
+      createWrapper();
+    });
+
+    it('renders an alert with the deprecation message', () => {
+      expect(findAlert().text()).toBe(
+        'The pull-based deployment features of the GitLab agent for Kubernetes is deprecated. If you use the agent for pull-based deployments, you should migrate to Flux.',
+      );
+    });
+
+    it('renders a link to the documentation', () => {
+      expect(findDocsLink().attributes('href')).toBe(installDocsUrl);
+    });
+  });
+
+  describe('when multiple config path are present', () => {
+    beforeEach(() => {
+      jest
+        .spyOn(Api, 'getRawFile')
+        .mockReturnValueOnce(Promise.resolve({ data: rawFileWithoutGitops }))
+        .mockReturnValueOnce(Promise.resolve({ data: rawFileWithGitops }));
+      createWrapper({
+        agentConfigs: [
+          '.gitlab/agents/my-agent-1',
+          '.gitlab/agents/my-agent-2',
+          '.gitlab/agents/my-agent-3',
+          '.gitlab/agents/my-agent-4',
+        ],
+      });
+    });
+
+    it('requests the config files from the API till the first gitops keyword is found', () => {
+      expect(Api.getRawFile).toHaveBeenCalledTimes(2);
+
+      expect(Api.getRawFile).toHaveBeenCalledWith(1, '.gitlab/agents/my-agent-1/config.yaml');
+      expect(Api.getRawFile).toHaveBeenCalledWith(1, '.gitlab/agents/my-agent-2/config.yaml');
+      expect(Api.getRawFile).not.toHaveBeenCalledWith(1, '.gitlab/agents/my-agent-3/config.yaml');
+      expect(Api.getRawFile).not.toHaveBeenCalledWith(1, '.gitlab/agents/my-agent-4/config.yaml');
+    });
+  });
+
+  describe('when one of the API calls fails', () => {
+    beforeEach(() => {
+      jest
+        .spyOn(Api, 'getRawFile')
+        .mockReturnValueOnce(Promise.resolve({ response: HTTP_STATUS_NOT_FOUND }))
+        .mockReturnValueOnce(Promise.resolve({ data: rawFileWithGitops }));
+      createWrapper({
+        agentConfigs: ['.gitlab/agents/my-agent-1', '.gitlab/agents/my-agent-2'],
+      });
+    });
+
+    it('requests the next config file', () => {
+      expect(Api.getRawFile).toHaveBeenCalledTimes(2);
+
+      expect(Api.getRawFile).toHaveBeenCalledWith(1, '.gitlab/agents/my-agent-1/config.yaml');
+      expect(Api.getRawFile).toHaveBeenCalledWith(1, '.gitlab/agents/my-agent-2/config.yaml');
+    });
+  });
+
+  describe('when all API calls fail', () => {
+    beforeEach(() => {
+      jest
+        .spyOn(Api, 'getRawFile')
+        .mockReturnValueOnce(Promise.resolve({ response: HTTP_STATUS_NOT_FOUND }))
+        .mockReturnValueOnce(Promise.resolve({ response: HTTP_STATUS_NO_CONTENT }));
+      createWrapper({
+        agentConfigs: ['.gitlab/agents/my-agent-1', '.gitlab/agents/my-agent-2'],
+      });
+    });
+
+    it('does not render an alert', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+});