1 files changed, 27 insertions, 9 deletions
diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
index 7dd5ece9b8e..aab6d3dc1f0 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -3,11 +3,13 @@ import { GlTabs, GlTab } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import {
   CLUSTERS_TABS,
+  CERTIFICATE_TAB,
   MAX_CLUSTERS_LIST,
   MAX_LIST_COUNT,
   AGENT,
   EVENT_LABEL_TABS,
   EVENT_ACTIONS_CHANGE,
+  AGENT_TAB,
 } from '../constants';
 import Agents from './agents.vue';
 import InstallAgentModal from './install_agent_modal.vue';
@@ -27,8 +29,8 @@ export default {
     Agents,
     InstallAgentModal,
   },
-  CLUSTERS_TABS,
   mixins: [trackingMixin],
+  inject: ['displayClusterAgents', 'certificateBasedClustersEnabled'],
   props: {
     defaultBranchName: {
       default: '.noBranch',
@@ -42,13 +44,30 @@ export default {
       maxAgents: MAX_CLUSTERS_LIST,
     };
   },
+  computed: {
+    availableTabs() {
+      const clusterTabs = this.displayClusterAgents ? CLUSTERS_TABS : [CERTIFICATE_TAB];
+      return this.certificateBasedClustersEnabled ? clusterTabs : [AGENT_TAB];
+    },
+  },
+  watch: {
+    selectedTabIndex: {
+      handler(val) {
+        this.onTabChange(val);
+      },
+      immediate: true,
+    },
+  },
   methods: {
-    onTabChange(tabName) {
-      this.selectedTabIndex = CLUSTERS_TABS.findIndex((tab) => tab.queryParamValue === tabName);
-      this.maxAgents = tabName === AGENT ? MAX_LIST_COUNT : MAX_CLUSTERS_LIST;
+    setSelectedTab(tabName) {
+      this.selectedTabIndex = this.availableTabs.findIndex(
+        (tab) => tab.queryParamValue === tabName,
+      );
     },
-    trackTabChange(tab) {
-      const tabName = CLUSTERS_TABS[tab].queryParamValue;
+    onTabChange(tab) {
+      const tabName = this.availableTabs[tab].queryParamValue;
+
+      this.maxAgents = tabName === AGENT ? MAX_LIST_COUNT : MAX_CLUSTERS_LIST;
       this.track(EVENT_ACTIONS_CHANGE, { property: tabName });
     },
   },
@@ -61,10 +80,9 @@ export default {
       sync-active-tab-with-query-params
       nav-class="gl-flex-grow-1 gl-align-items-center"
       lazy
-      @input="trackTabChange"
     >
       <gl-tab
-        v-for="(tab, idx) in $options.CLUSTERS_TABS"
+        v-for="(tab, idx) in availableTabs"
         :key="idx"
         :title="tab.title"
         :query-param-value="tab.queryParamValue"
@@ -74,7 +92,7 @@ export default {
           :is="tab.component"
           :default-branch-name="defaultBranchName"
           data-testid="clusters-tab-component"
-          @changeTab="onTabChange"
+          @changeTab="setSelectedTab"
         />
       </gl-tab>