Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

7 files changed, 65 insertions, 47 deletions

diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue
index 2decdb5307b..496baf8cb08 100644
--- a/app/assets/javascripts/clusters_list/components/agent_table.vue
+++ b/app/assets/javascripts/clusters_list/components/agent_table.vue
@@ -39,7 +39,7 @@ export default {
   configHelpLink: helpPagePath('user/clusters/agent/install/index', {
     anchor: 'create-an-agent-configuration-file',
   }),
-  inject: ['gitlabVersion'],
+  inject: ['gitlabVersion', 'kasVersion'],
   props: {
     agents: {
       required: true,
@@ -102,6 +102,9 @@ export default {
         return { ...agent, versions };
       });
     },
+    serverVersion() {
+      return this.kasVersion || this.gitlabVersion;
+    },
   },
   methods: {
     getStatusCellId(item) {
@@ -135,12 +138,12 @@ export default {
       if (!agent.versions.length) return false;
 
       const [agentMajorVersion, agentMinorVersion] = this.getAgentVersionString(agent).split('.');
-      const [gitlabMajorVersion, gitlabMinorVersion] = this.gitlabVersion.split('.');
+      const [serverMajorVersion, serverMinorVersion] = this.serverVersion.split('.');
 
-      const majorVersionMismatch = agentMajorVersion !== gitlabMajorVersion;
+      const majorVersionMismatch = agentMajorVersion !== serverMajorVersion;
 
       // We should warn user if their current GitLab and agent versions are more than 1 minor version apart:
-      const minorVersionMismatch = Math.abs(agentMinorVersion - gitlabMinorVersion) > 1;
+      const minorVersionMismatch = Math.abs(agentMinorVersion - serverMinorVersion) > 1;
 
       return majorVersionMismatch || minorVersionMismatch;
     },
@@ -165,8 +168,6 @@ export default {
     :items="agentsList"
     :fields="fields"
     stacked="md"
-    head-variant="white"
-    thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
     class="gl-mb-4!"
     data-testid="cluster-agent-list-table"
   >
@@ -242,7 +243,7 @@ export default {
 
           <p class="gl-mb-0">
             <gl-sprintf :message="$options.i18n.versionOutdatedText">
-              <template #version>{{ gitlabVersion }}</template>
+              <template #version>{{ serverVersion }}</template>
             </gl-sprintf>
             <gl-link :href="$options.versionUpdateLink" class="gl-font-sm">
               {{ $options.i18n.viewDocsText }}</gl-link
@@ -255,7 +256,7 @@ export default {
 
         <p v-else-if="isVersionOutdated(item)" class="gl-mb-0">
           <gl-sprintf :message="$options.i18n.versionOutdatedText">
-            <template #version>{{ gitlabVersion }}</template>
+            <template #version>{{ serverVersion }}</template>
           </gl-sprintf>
           <gl-link :href="$options.versionUpdateLink" class="gl-font-sm">
             {{ $options.i18n.viewDocsText }}</gl-link
diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue
index 89b18ed6d06..8a4a81d3e96 100644
--- a/app/assets/javascripts/clusters_list/components/agents.vue
+++ b/app/assets/javascripts/clusters_list/components/agents.vue
@@ -175,7 +175,7 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="isLoading" size="md" />
+  <gl-loading-icon v-if="isLoading" size="lg" />
 
   <section v-else-if="agentList">
     <div v-if="agentList.length">
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 59cfdde731d..fb3c8ff66b0 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -224,7 +224,7 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loadingClusters" size="md" />
+  <gl-loading-icon v-if="loadingClusters" size="lg" />
 
   <section v-else>
     <ancestor-notice />
@@ -235,8 +235,6 @@ export default {
       :fields="fields"
       fixed
       stacked="md"
-      head-variant="white"
-      thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
       class="qa-clusters-table gl-mb-4!"
       data-testid="cluster_list_table"
     >
diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
index 8fd759bd3e9..2675d46dd16 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem, GlModalDirective, GlTooltip } from '@gitlab/ui';
 
 import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '../constants';
 
@@ -7,6 +7,7 @@ export default {
   i18n: CLUSTERS_ACTIONS,
   INSTALL_AGENT_MODAL_ID,
   components: {
+    GlButton,
     GlDropdown,
     GlDropdownItem,
     GlTooltip,
@@ -15,7 +16,6 @@ export default {
     GlModalDirective,
   },
   inject: [
-    'newClusterPath',
     'addClusterPath',
     'newClusterDocsPath',
     'canAddCluster',
@@ -42,20 +42,59 @@ export default {
       }
       return this.addClusterPath;
     },
+    actionItems() {
+      const createCluster = {
+        href: this.newClusterDocsPath,
+        title: this.$options.i18n.createCluster,
+        testid: 'create-cluster-link',
+      };
+      const connectCluster = {
+        href: this.addClusterPath,
+        title: this.$options.i18n.connectClusterCertificate,
+        testid: 'connect-cluster-link',
+      };
+      const actions = [];
+
+      if (this.displayClusterAgents) {
+        actions.push(createCluster);
+      }
+      if (this.displayClusterAgents && this.certificateBasedClustersEnabled) {
+        actions.push(connectCluster);
+      }
+
+      return actions;
+    },
+  },
+  methods: {
+    getTooltipTarget() {
+      return this.actionItems.length ? this.$refs.actions.$el : this.$refs.actionsContainer;
+    },
   },
 };
 </script>
 
 <template>
-  <div class="nav-controls gl-ml-auto">
+  <div ref="actionsContainer" class="nav-controls gl-ml-auto">
     <gl-tooltip
       v-if="!canAddCluster"
-      :target="() => $refs.dropdown.$el"
-      :title="$options.i18n.dropdownDisabledHint"
+      :target="() => getTooltipTarget()"
+      :title="$options.i18n.actionsDisabledHint"
     />
 
+    <gl-button
+      v-if="!actionItems.length"
+      data-qa-selector="clusters_actions_button"
+      category="primary"
+      variant="confirm"
+      :disabled="!canAddCluster"
+      :href="defaultActionUrl"
+    >
+      {{ defaultActionText }}
+    </gl-button>
+
     <gl-dropdown
-      ref="dropdown"
+      v-else
+      ref="actions"
       v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID"
       data-qa-selector="clusters_actions_button"
       category="primary"
@@ -67,31 +106,13 @@ export default {
       right
     >
       <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>
-      </template>
-
-      <gl-dropdown-item
-        v-if="certificateBasedClustersEnabled && !displayClusterAgents"
-        :href="newClusterPath"
-        data-testid="new-cluster-link"
+        v-for="action in actionItems"
+        :key="action.title"
+        :href="action.href"
+        :data-testid="action.testid"
         @click.stop
       >
-        {{ $options.i18n.createClusterDeprecated }}
+        {{ action.title }}
       </gl-dropdown-item>
     </gl-dropdown>
   </div>
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 73ca804e111..d831d79b994 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue
@@ -89,7 +89,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" size="md" />
+    <gl-loading-icon v-if="isLoading" size="lg" />
     <div v-show="!isLoading" data-testid="clusters-cards-container">
       <gl-card
         header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between gl-py-4"
diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js
index 4a168e811aa..10e71513065 100644
--- a/app/assets/javascripts/clusters_list/constants.js
+++ b/app/assets/javascripts/clusters_list/constants.js
@@ -234,11 +234,9 @@ export const CLUSTERS_ACTIONS = {
   connectCluster: s__('ClusterAgents|Connect a cluster'),
   connectWithAgent: s__('ClusterAgents|Connect a cluster (agent)'),
   connectClusterDeprecated: s__('ClusterAgents|Connect a cluster (deprecated)'),
-  createClusterDeprecated: s__('ClusterAgents|Create a cluster (deprecated)'),
   createCluster: s__('ClusterAgents|Create a cluster'),
-  createClusterCertificate: s__('ClusterAgents|Create a cluster (certificate - deprecated)'),
   connectClusterCertificate: s__('ClusterAgents|Connect a cluster (certificate - deprecated)'),
-  dropdownDisabledHint: s__(
+  actionsDisabledHint: s__(
     'ClusterAgents|Requires a Maintainer or greater role to perform these actions',
   ),
 };
diff --git a/app/assets/javascripts/clusters_list/index.js b/app/assets/javascripts/clusters_list/index.js
index f6dfb96ffd9..cd334d80e9c 100644
--- a/app/assets/javascripts/clusters_list/index.js
+++ b/app/assets/javascripts/clusters_list/index.js
@@ -23,7 +23,6 @@ export default () => {
     defaultBranchName,
     projectPath,
     kasAddress,
-    newClusterPath,
     addClusterPath,
     newClusterDocsPath,
     emptyStateHelpText,
@@ -31,6 +30,7 @@ export default () => {
     canAddCluster,
     canAdminCluster,
     gitlabVersion,
+    kasVersion,
     displayClusterAgents,
     certificateBasedClustersEnabled,
   } = el.dataset;
@@ -42,7 +42,6 @@ export default () => {
       emptyStateImage,
       projectPath,
       kasAddress,
-      newClusterPath,
       addClusterPath,
       newClusterDocsPath,
       emptyStateHelpText,
@@ -50,6 +49,7 @@ export default () => {
       canAddCluster: parseBoolean(canAddCluster),
       canAdminCluster: parseBoolean(canAdminCluster),
       gitlabVersion,
+      kasVersion,
       displayClusterAgents: parseBoolean(displayClusterAgents),
       certificateBasedClustersEnabled: parseBoolean(certificateBasedClustersEnabled),
     },