Enable new cluster list design

app/assets/javascripts/clusters_list/components/clusters.vue

@@ -201,7 +201,13 @@ export default {
   <section v-else>
     <ancestor-notice />
 
-    <gl-table :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
+    <gl-table
+      :items="clusters"
+      :fields="fields"
+      stacked="md"
+      class="qa-clusters-table"
+      data-testid="cluster_list_table"
+    >
       <template #cell(name)="{ item }">
         <div :class="[contentAlignClasses, 'js-status']">
           <img

app/views/clusters/clusters/index.html.haml

@@ -12,7 +12,7 @@
         = s_('ClusterIntegration|Kubernetes clusters can be used to deploy applications and to provide Review Apps for this project')
       = render 'clusters/clusters/buttons'
 
-    - if Feature.enabled?(:clusters_list_redesign)
+    - if Feature.enabled?(:clusters_list_redesign, default_enabled: true)
       #js-clusters-list-app{ data: js_clusters_list_data(clusterable.index_path(format: :json)) }
     - else
       - if @has_ancestor_clusters
@@ -20,7 +20,7 @@
           = s_('ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters.')
           %strong
             = link_to _('More information'), help_page_path('user/group/clusters/index', anchor: 'cluster-precedence')
-      .clusters-table.js-clusters-list
+      .clusters-table.js-clusters-list{ data: { testid: 'cluster_list_table' } }
         .gl-responsive-table-row.table-row-header{ role: "row" }
           .table-section.section-60{ role: "rowheader" }
             = s_("ClusterIntegration|Kubernetes cluster")

changelogs/unreleased/220182-remove-feature-flag.yml

+---
+title: Display cluster list node information
+merge_request: 42396
+author:
+type: added

config/feature_flags/development/clusters_list_redesign.yml

 ---
 name: clusters_list_redesign
-introduced_by_url: 
-rollout_issue_url: 
-group: 
+introduced_by_url:
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/220182
+group: Configure
 type: development
-default_enabled: false
+default_enabled: true

spec/features/projects/clusters_spec.rb

@@ -11,7 +11,36 @@ RSpec.describe 'Clusters', :js do
   before do
     project.add_maintainer(user)
     gitlab_sign_in(user)
-    stub_feature_flags(clusters_list_redesign: false)
+  end
+
+  context 'when clusters_list_redesign feature flag is disabled' do
+    before do
+      stub_feature_flags(clusters_list_redesign: false)
+    end
+
+    context 'when user does not have a cluster and visits cluster index page' do
+      before do
+        visit project_clusters_path(project)
+      end
+
+      it 'sees empty state' do
+        expect(page).to have_link('Add Kubernetes cluster')
+        expect(page).to have_selector('.empty-state')
+      end
+    end
+
+    context 'when user has a cluster and visits cluster index page' do
+      let!(:cluster) { create(:cluster, :project, :provided_by_gcp) }
+      let(:project) { cluster.project }
+
+      before do
+        visit project_clusters_path(project)
+      end
+
+      it 'user sees a table with one cluster' do
+        expect(page).to have_selector('[data-testid="cluster_list_table"] .card-body', count: 1)
+      end
+    end
   end
 
   context 'when user does not have a cluster and visits cluster index page' do
@@ -196,8 +225,7 @@ RSpec.describe 'Clusters', :js do
     end
 
     it 'user sees a table with one cluster' do
-      # One is the header row, the other the cluster row
-      expect(page).to have_selector('.gl-responsive-table-row', count: 2)
+      expect(page).to have_selector('[data-testid="cluster_list_table"] tbody tr', count: 1)
     end
 
     context 'when user clicks on a cluster' do