1 files changed, 28 insertions, 0 deletions
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 55e62d1c698..e98e2b37362 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -32,6 +32,10 @@ export default {
   registerAgentPath: helpPagePath('user/clusters/agent/install/index', {
     anchor: 'register-the-agent-with-gitlab',
   }),
+  terraformDocsLink:
+    'https://registry.terraform.io/providers/gitlabhq/gitlab/latest/docs/resources/cluster_agent_token',
+  minAgentsForTerraform: 10,
+  maxAgents: 100,
   components: {
     AvailableAgentsDropdown,
     AgentToken,
@@ -80,6 +84,7 @@ export default {
       clusterAgent: null,
       availableAgents: [],
       kasDisabled: false,
+      configuredAgentsCount: 0,
     };
   },
   computed: {
@@ -113,6 +118,12 @@ export default {
     modalSize() {
       return this.kasDisabled ? 'sm' : 'md';
     },
+    showTerraformSuggestionAlert() {
+      return this.configuredAgentsCount >= this.$options.minAgentsForTerraform;
+    },
+    showMaxAgentsAlert() {
+      return this.configuredAgentsCount >= this.$options.maxAgents;
+    },
   },
   methods: {
     setAgentName(name) {
@@ -135,6 +146,7 @@ export default {
       const configuredAgents =
         data?.project?.agentConfigurations?.nodes.map((config) => config.agentName) ?? [];
 
+      this.configuredAgentsCount = configuredAgents.length;
       this.availableAgents = configuredAgents.filter((agent) => !installedAgents.includes(agent));
     },
     createAgentMutation() {
@@ -233,6 +245,22 @@ export default {
           </gl-sprintf>
         </p>
 
+        <gl-alert
+          v-if="showTerraformSuggestionAlert"
+          :dismissible="false"
+          variant="warning"
+          class="gl-my-4"
+        >
+          <span v-if="showMaxAgentsAlert">{{ $options.i18n.maxAgentsSupport }}</span>
+          <span>
+            <gl-sprintf :message="$options.i18n.useTerraformText">
+              <template #link="{ content }">
+                <gl-link :href="$options.terraformDocsLink">{{ content }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </span>
+        </gl-alert>
+
         <form>
           <gl-form-group label-for="agent-name">
             <available-agents-dropdown