Add latest changes from gitlab-org/gitlab@16-3-stable-eev16.3.0-rc42

9 files changed, 40 insertions, 5 deletions

diff --git a/app/assets/javascripts/clusters_list/components/agent_token.vue b/app/assets/javascripts/clusters_list/components/agent_token.vue
index 93c37226a09..5f40815bd02 100644
--- a/app/assets/javascripts/clusters_list/components/agent_token.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_token.vue
@@ -89,6 +89,7 @@ export default {
     <p class="gl-display-flex gl-align-items-flex-start">
       <code-block class="gl-w-full" :code="agentRegistrationCommand" />
       <modal-copy-button
+        data-testid="agent-registration-command"
         :title="$options.i18n.copyCommand"
         :text="agentRegistrationCommand"
         :modal-id="modalId"
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index b1765d336c8..33d98c381fb 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { GlAlert, GlLoadingIcon, GlBanner } from '@gitlab/ui';
 import { s__ } from '~/locale';
diff --git a/app/assets/javascripts/clusters_list/components/ancestor_notice.vue b/app/assets/javascripts/clusters_list/components/ancestor_notice.vue
index b241aa34283..d2cc0df8a9d 100644
--- a/app/assets/javascripts/clusters_list/components/ancestor_notice.vue
+++ b/app/assets/javascripts/clusters_list/components/ancestor_notice.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapState } from 'vuex';
 
 export default {
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 4b85ca2b508..590fdb947b3 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import {
   GlBadge,
@@ -9,6 +10,7 @@ import {
   GlTableLite,
   GlTooltipDirective,
 } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapState, mapActions } from 'vuex';
 import { __, sprintf } from '~/locale';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index 7b97a5af373..c388d3fee71 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -92,11 +92,7 @@ export default {
 
     <!--TODO: Replace button-group workaround once `split` option for new dropdowns is implemented.-->
     <!-- See issue at https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2263-->
-    <gl-button-group
-      ref="actions"
-      data-qa-selector="clusters_actions_button"
-      class="gl-w-full gl-mb-3 gl-md-w-auto gl-md-mb-0"
-    >
+    <gl-button-group ref="actions" class="gl-w-full gl-mb-3 gl-md-w-auto gl-md-mb-0">
       <gl-button
         v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
         :href="defaultActionUrl"
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
index d831d79b994..4450c85661a 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlCard, GlSprintf, GlPopover, GlLink, GlBadge, GlLoadingIcon } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
 import { mapState } from 'vuex';
 import { AGENT_CARD_INFO, CERTIFICATE_BASED_CARD_INFO, MAX_CLUSTERS_LIST } from '../constants';
 import Clusters from './clusters.vue';
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
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 3ce10f7c3a2..7c5a2d27829 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -131,6 +131,10 @@ export const I18N_AGENT_MODAL = {
   learnMoreLink: s__('ClusterAgents|How do I register an agent?'),
   registrationErrorTitle: s__('ClusterAgents|Failed to register an agent'),
   unknownError: s__('ClusterAgents|An unknown error occurred. Please try again.'),
+  maxAgentsSupport: s__('ClusterAgents|We only support 100 agents on the UI.'),
+  useTerraformText: s__(
+    'ClusterAgents|To manage more agents, %{linkStart}use Terraform%{linkEnd}.',
+  ),
 };
 
 export const KAS_DISABLED_ERROR = 'Gitlab::Kas::Client::ConfigurationError';
diff --git a/app/assets/javascripts/clusters_list/store/index.js b/app/assets/javascripts/clusters_list/store/index.js
index 7cdd93eeae9..4161098f199 100644
--- a/app/assets/javascripts/clusters_list/store/index.js
+++ b/app/assets/javascripts/clusters_list/store/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 import * as actions from './actions';
 import mutations from './mutations';