Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

9 files changed, 102 insertions, 218 deletions

diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
index f54f7b11414..2f45ef8a862 100644
--- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue
@@ -1,55 +1,30 @@
 <script>
-import { GlButton, GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui';
+import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants';
+import { I18N_AGENTS_EMPTY_STATE } from '../constants';
 
 export default {
   i18n: I18N_AGENTS_EMPTY_STATE,
-  modalId: INSTALL_AGENT_MODAL_ID,
   agentDocsUrl: helpPagePath('user/clusters/agent/index'),
   components: {
-    GlButton,
     GlEmptyState,
     GlLink,
     GlSprintf,
   },
-  directives: {
-    GlModalDirective,
-  },
   inject: ['emptyStateImage'],
-  props: {
-    isChildComponent: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-  },
 };
 </script>
 
 <template>
-  <gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state">
-    <template #description>
-      <p class="gl-text-left">
-        <gl-sprintf :message="$options.i18n.introText">
-          <template #link="{ content }">
-            <gl-link :href="$options.agentDocsUrl">
-              {{ content }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </template>
-
-    <template #actions>
-      <gl-button
-        v-if="!isChildComponent"
-        v-gl-modal-directive="$options.modalId"
-        category="primary"
-        variant="confirm"
-      >
-        {{ $options.i18n.buttonText }}
-      </gl-button>
+  <gl-empty-state :svg-path="emptyStateImage" :svg-height="100">
+    <template #title>
+      <gl-sprintf :message="$options.i18n.introText">
+        <template #link="{ content }">
+          <gl-link :href="$options.agentDocsUrl">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
     </template>
   </gl-empty-state>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 1144ce68e2c..2decdb5307b 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -37,7 +37,7 @@ export default {
     anchor: 'update-the-agent-version',
   }),
   configHelpLink: helpPagePath('user/clusters/agent/install/index', {
-    anchor: 'create-an-agent-without-configuration-file',
+    anchor: 'create-an-agent-configuration-file',
   }),
   inject: ['gitlabVersion'],
   props: {
diff --git a/app/assets/javascripts/clusters_list/components/agent_token.vue b/app/assets/javascripts/clusters_list/components/agent_token.vue
index eab3fc3ed63..751ad9795dd 100644
--- a/app/assets/javascripts/clusters_list/components/agent_token.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_token.vue
@@ -8,11 +8,8 @@ import { I18N_AGENT_TOKEN } from '../constants';
 
 export default {
   i18n: I18N_AGENT_TOKEN,
-  basicInstallPath: helpPagePath('user/clusters/agent/install/index', {
-    anchor: 'install-the-agent-into-the-cluster',
-  }),
   advancedInstallPath: helpPagePath('user/clusters/agent/install/index', {
-    anchor: 'advanced-installation',
+    anchor: 'advanced-installation-method',
   }),
   components: {
     GlAlert,
@@ -43,27 +40,7 @@ export default {
 
 <template>
   <div>
-    <p>
-      <strong>{{ $options.i18n.tokenTitle }}</strong>
-    </p>
-
-    <p>
-      <gl-sprintf :message="$options.i18n.tokenBody">
-        <template #link="{ content }">
-          <gl-link :href="$options.basicInstallPath" target="_blank"> {{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
-    </p>
-
-    <p>
-      <gl-alert
-        :title="$options.i18n.tokenSingleUseWarningTitle"
-        variant="warning"
-        :dismissible="false"
-      >
-        {{ $options.i18n.tokenSingleUseWarningBody }}
-      </gl-alert>
-    </p>
+    <p class="gl-mb-3">{{ $options.i18n.tokenLabel }}</p>
 
     <p>
       <gl-form-input-group readonly :value="agentToken" :select-on-click="true">
@@ -78,6 +55,14 @@ export default {
     </p>
 
     <p>
+      {{ $options.i18n.tokenSubtitle }}
+    </p>
+
+    <gl-alert :dismissible="false" variant="warning" class="gl-mb-5">
+      {{ $options.i18n.tokenSingleUseWarningTitle }}
+    </gl-alert>
+
+    <p>
       <strong>{{ $options.i18n.basicInstallTitle }}</strong>
     </p>
 
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index 70b9b8ac3c9..89b18ed6d06 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -20,7 +20,7 @@ export default {
       'ClusterAgents|We would love to learn more about your experience with the GitLab Agent.',
     ),
     feedbackBannerButton: s__('ClusterAgents|Give feedback'),
-    error: s__('ClusterAgents|An error occurred while loading your Agents'),
+    error: s__('ClusterAgents|An error occurred while loading your agents'),
   },
   AGENT_FEEDBACK_ISSUE,
   AGENT_FEEDBACK_KEY,
@@ -208,7 +208,7 @@ export default {
       </div>
     </div>
 
-    <agent-empty-state v-else :is-child-component="isChildComponent" />
+    <agent-empty-state v-else />
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">
diff --git a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
index 662cf2a7e36..bde76c46b4b 100644
--- a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
+++ b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
@@ -3,6 +3,7 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlDropdownDivider,
+  GlDropdownText,
   GlSearchBoxByType,
   GlSprintf,
 } from '@gitlab/ui';
@@ -15,6 +16,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlDropdownDivider,
+    GlDropdownText,
     GlSearchBoxByType,
     GlSprintf,
   },
@@ -73,13 +75,24 @@ export default {
       this.clearSearch();
       this.focusSearch();
     },
+    onKeyEnter() {
+      if (!this.searchTerm?.length) {
+        return;
+      }
+      this.$refs.dropdown.hide();
+      this.selectAgent(this.searchTerm);
+    },
   },
 };
 </script>
 <template>
-  <gl-dropdown :text="dropdownText" :loading="isRegistering" @shown="handleShow">
+  <gl-dropdown ref="dropdown" :text="dropdownText" :loading="isRegistering" @shown="handleShow">
     <template #header>
-      <gl-search-box-by-type ref="searchInput" v-model.trim="searchTerm" />
+      <gl-search-box-by-type
+        ref="searchInput"
+        v-model.trim="searchTerm"
+        @keydown.enter.stop.prevent="onKeyEnter"
+      />
     </template>
     <gl-dropdown-item
       v-for="agent in filteredResults"
@@ -90,9 +103,9 @@ export default {
     >
       {{ agent }}
     </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    <gl-dropdown-text v-if="!filteredResults.length" ref="noMatchingResults">{{
       $options.i18n.noResults
-    }}</gl-dropdown-item>
+    }}</gl-dropdown-text>
     <template v-if="shouldRenderCreateButton">
       <gl-dropdown-divider />
       <gl-dropdown-item data-testid="create-config-button" @click="selectAgent(searchTerm)">
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index ccb973f1eb8..8fd759bd3e9 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -1,13 +1,5 @@
 <script>
-import {
-  GlButton,
-  GlDropdown,
-  GlDropdownItem,
-  GlModalDirective,
-  GlTooltipDirective,
-  GlDropdownDivider,
-  GlDropdownSectionHeader,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui';
 
 import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
 
@@ -15,37 +7,40 @@ export default {
   i18n: CLUSTERS_ACTIONS,
   INSTALL_AGENT_MODAL_ID,
   components: {
-    GlButton,
     GlDropdown,
     GlDropdownItem,
-    GlDropdownDivider,
-    GlDropdownSectionHeader,
+    GlTooltip,
   },
   directives: {
     GlModalDirective,
-    GlTooltip: GlTooltipDirective,
   },
   inject: [
     'newClusterPath',
     'addClusterPath',
+    'newClusterDocsPath',
     'canAddCluster',
     'displayClusterAgents',
     'certificateBasedClustersEnabled',
   ],
   computed: {
-    tooltip() {
-      const { connectWithAgent, connectExistingCluster, dropdownDisabledHint } = this.$options.i18n;
+    shouldTriggerModal() {
+      return this.canAddCluster && this.displayClusterAgents;
+    },
+    defaultActionText() {
+      const { connectCluster, connectWithAgent, connectClusterDeprecated } = this.$options.i18n;
 
-      if (!this.canAddCluster) {
-        return dropdownDisabledHint;
-      } else if (this.displayClusterAgents) {
-        return connectWithAgent;
+      if (!this.displayClusterAgents) {
+        return connectClusterDeprecated;
+      } else if (!this.certificateBasedClustersEnabled) {
+        return connectCluster;
       }
-
-      return connectExistingCluster;
+      return connectWithAgent;
     },
-    shouldTriggerModal() {
-      return this.canAddCluster && this.displayClusterAgents;
+    defaultActionUrl() {
+      if (this.displayClusterAgents) {
+        return null;
+      }
+      return this.addClusterPath;
     },
   },
 };
@@ -53,46 +48,51 @@ export default {
 
 <template>
   <div class="nav-controls gl-ml-auto">
+    <gl-tooltip
+      v-if="!canAddCluster"
+      :target="() => $refs.dropdown.$el"
+      :title="$options.i18n.dropdownDisabledHint"
+    />
+
     <gl-dropdown
-      v-if="certificateBasedClustersEnabled"
       ref="dropdown"
       v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
-      v-gl-tooltip="tooltip"
+      data-qa-selector="clusters_actions_button"
       category="primary"
       variant="confirm"
-      :text="$options.i18n.actionsButton"
+      :text="defaultActionText"
       :disabled="!canAddCluster"
-      :split="displayClusterAgents"
+      :split-href="defaultActionUrl"
+      split
       right
     >
-      <template v-if="displayClusterAgents">
-        <gl-dropdown-section-header>{{ $options.i18n.agent }}</gl-dropdown-section-header>
-        <gl-dropdown-item
-          v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-          data-testid="connect-new-agent-link"
-        >
-          {{ $options.i18n.connectWithAgent }}
+      <gl-dropdown-item
+        v-if="displayClusterAgents"
+        :href="newClusterDocsPath"
+        data-testid="create-cluster-link"
+        @click.stop
+      >
+        {{ $options.i18n.createCluster }}
+      </gl-dropdown-item>
+
+      <template v-if="displayClusterAgents && certificateBasedClustersEnabled">
+        <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
+          {{ $options.i18n.createClusterCertificate }}
+        </gl-dropdown-item>
+
+        <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
+          {{ $options.i18n.connectClusterCertificate }}
         </gl-dropdown-item>
-        <gl-dropdown-divider />
-        <gl-dropdown-section-header>{{ $options.i18n.certificate }}</gl-dropdown-section-header>
       </template>
 
-      <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop>
-        {{ $options.i18n.createNewCluster }}
-      </gl-dropdown-item>
-      <gl-dropdown-item :href="addClusterPath" data-testid="connect-cluster-link" @click.stop>
-        {{ $options.i18n.connectExistingCluster }}
+      <gl-dropdown-item
+        v-if="certificateBasedClustersEnabled && !displayClusterAgents"
+        :href="newClusterPath"
+        data-testid="new-cluster-link"
+        @click.stop
+      >
+        {{ $options.i18n.createClusterDeprecated }}
       </gl-dropdown-item>
     </gl-dropdown>
-    <gl-button
-      v-else
-      v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-      v-gl-tooltip="tooltip"
-      :disabled="!canAddCluster"
-      category="primary"
-      variant="confirm"
-    >
-      {{ $options.i18n.connectWithAgent }}
-    </gl-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
index 76bec05cfc7..f4134ab5072 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -1,6 +1,5 @@
 <script>
-import { GlEmptyState, GlButton, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
-import { mapState } from 'vuex';
+import { GlEmptyState, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { I18N_CLUSTERS_EMPTY_STATE } from '../constants';
 
@@ -8,35 +7,24 @@ export default {
   i18n: I18N_CLUSTERS_EMPTY_STATE,
   components: {
     GlEmptyState,
-    GlButton,
     GlLink,
     GlSprintf,
     GlAlert,
   },
-  inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'addClusterPath'],
-  props: {
-    isChildComponent: {
-      default: false,
-      required: false,
-      type: Boolean,
-    },
-  },
+  inject: ['emptyStateHelpText', 'clustersEmptyStateImage'],
   clustersHelpUrl: helpPagePath('user/infrastructure/clusters/index', {
     anchor: 'certificate-based-kubernetes-integration-deprecated',
   }),
   blogPostUrl:
     'https://about.gitlab.com/blog/2021/11/15/deprecating-the-cert-based-kubernetes-integration/',
-  computed: {
-    ...mapState(['canAddCluster']),
-  },
 };
 </script>
 
 <template>
   <div>
-    <gl-empty-state :svg-path="clustersEmptyStateImage" title="">
-      <template #description>
-        <p class="gl-text-left">
+    <gl-empty-state :svg-path="clustersEmptyStateImage" :svg-height="100">
+      <template #title>
+        <p>
           <gl-sprintf :message="$options.i18n.introText">
             <template #link="{ content }">
               <gl-link :href="$options.clustersHelpUrl">{{ content }}</gl-link>
@@ -48,28 +36,12 @@ export default {
           {{ emptyStateHelpText }}
         </p>
       </template>
-
-      <template #actions>
-        <gl-button
-          v-if="!isChildComponent"
-          data-testid="integration-primary-button"
-          data-qa-selector="add_kubernetes_cluster_link"
-          category="primary"
-          variant="confirm"
-          :disabled="!canAddCluster"
-          :href="addClusterPath"
-        >
-          {{ $options.i18n.buttonText }}
-        </gl-button>
-      </template>
     </gl-empty-state>
 
     <gl-alert variant="warning" :dismissible="false">
       <gl-sprintf :message="$options.i18n.alertText">
         <template #link="{ content }">
-          <gl-link :href="$options.blogPostUrl" target="_blank">
-            {{ content }}
-          </gl-link>
+          <gl-link :href="$options.blogPostUrl" target="_blank">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </gl-alert>
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 b730c0adfa2..73ca804e111 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -1,22 +1,7 @@
 <script>
-import {
-  GlCard,
-  GlSprintf,
-  GlPopover,
-  GlLink,
-  GlButton,
-  GlBadge,
-  GlLoadingIcon,
-  GlModalDirective,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlCard, GlSprintf, GlPopover, GlLink, GlBadge, GlLoadingIcon } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import {
-  AGENT_CARD_INFO,
-  CERTIFICATE_BASED_CARD_INFO,
-  MAX_CLUSTERS_LIST,
-  INSTALL_AGENT_MODAL_ID,
-} from '../constants';
+import { AGENT_CARD_INFO, CERTIFICATE_BASED_CARD_INFO, MAX_CLUSTERS_LIST } from '../constants';
 import Clusters from './clusters.vue';
 import Agents from './agents.vue';
 
@@ -26,23 +11,16 @@ export default {
     GlSprintf,
     GlPopover,
     GlLink,
-    GlButton,
     GlBadge,
     GlLoadingIcon,
     Clusters,
     Agents,
   },
-  directives: {
-    GlModalDirective,
-    GlTooltip: GlTooltipDirective,
-  },
   MAX_CLUSTERS_LIST,
-  INSTALL_AGENT_MODAL_ID,
   i18n: {
     agent: AGENT_CARD_INFO,
     certificate: CERTIFICATE_BASED_CARD_INFO,
   },
-  inject: ['addClusterPath', 'canAddCluster'],
   props: {
     defaultBranchName: {
       default: '.noBranch',
@@ -93,14 +71,6 @@ export default {
 
       return cardTitle;
     },
-    installAgentTooltip() {
-      return this.canAddCluster ? '' : this.$options.i18n.agent.installAgentDisabledHint;
-    },
-    connectExistingClusterTooltip() {
-      return this.canAddCluster
-        ? ''
-        : this.$options.i18n.certificate.connectExistingClusterDisabledHint;
-    },
   },
   methods: {
     cardFooterNumber(number) {
@@ -177,21 +147,6 @@ export default {
               ><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf
             ></gl-link
           >
-          <div
-            v-gl-tooltip="installAgentTooltip"
-            class="gl-display-inline-block"
-            tabindex="-1"
-            data-testid="install-agent-button-tooltip"
-          >
-            <gl-button
-              v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID"
-              class="gl-ml-4"
-              category="secondary"
-              variant="confirm"
-              :disabled="!canAddCluster"
-              >{{ $options.i18n.agent.actionText }}</gl-button
-            >
-          </div>
         </template>
       </gl-card>
 
@@ -214,7 +169,7 @@ export default {
           <gl-badge variant="warning">{{ $options.i18n.certificate.badgeText }}</gl-badge>
         </template>
 
-        <clusters :limit="$options.MAX_CLUSTERS_LIST" :is-child-component="true" />
+        <clusters :limit="$options.MAX_CLUSTERS_LIST" />
 
         <template #footer>
           <gl-link
@@ -226,22 +181,6 @@ export default {
               ><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf
             ></gl-link
           >
-          <div
-            v-gl-tooltip="connectExistingClusterTooltip"
-            class="gl-display-inline-block"
-            tabindex="-1"
-            data-testid="connect-existing-cluster-button-tooltip"
-          >
-            <gl-button
-              category="secondary"
-              data-qa-selector="connect_existing_cluster_button"
-              variant="confirm"
-              class="gl-ml-4"
-              :href="addClusterPath"
-              :disabled="!canAddCluster"
-              >{{ $options.i18n.certificate.actionText }}</gl-button
-            >
-          </div>
         </template>
       </gl-card>
     </div>
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 ae0affe4c8b..3b39c3aac45 100644
--- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
+++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue
@@ -31,7 +31,7 @@ export default {
   EVENT_LABEL_MODAL,
   enableKasPath: helpPagePath('administration/clusters/kas'),
   registerAgentPath: helpPagePath('user/clusters/agent/install/index', {
-    anchor: 'register-an-agent-with-gitlab',
+    anchor: 'register-the-agent-with-gitlab',
   }),
   components: {
     AvailableAgentsDropdown,