Implemented suggested change after FE review

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

@@ -247,7 +247,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.connection_error"
@@ -268,7 +268,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.node_connection_error"
@@ -289,7 +289,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.metrics_connection_error"
@@ -304,7 +304,7 @@ export default {
       </template>
     </gl-table>
 
-    <ClustersEmptyState v-else />
+    <clusters-empty-state v-else />
 
     <gl-pagination
       v-if="hasClustersPerPage"

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

@@ -23,7 +23,7 @@ export default {
     :title="s__('ClusterIntegration|Integrate Kubernetes with a cluster certificate')"
   >
     <template #description>
-      <p class="mw-460 gl-mx-auto gl-text-left">
+      <p class="gl-text-left">
         {{
           s__(
             'ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way.',
@@ -31,15 +31,11 @@ export default {
         }}
       </p>
 
-      <p
-        v-if="emptyStateHelpText"
-        class="mw-460 gl-mx-auto gl-text-left"
-        data-testid="clusters-empty-state-text"
-      >
+      <p v-if="emptyStateHelpText" class="gl-text-left" data-testid="clusters-empty-state-text">
         {{ emptyStateHelpText }}
       </p>
 
-      <p class="mw-460 gl-mx-auto">
+      <p>
         <gl-link :href="$options.learnMoreHelpUrl" target="_blank" data-testid="clusters-docs-link">
           {{ s__('ClusterIntegration|Learn more about Kubernetes') }}
         </gl-link>

app/views/clusters/clusters/_cluster_list.html.haml

-.top-area.adjust
-  .gl-display-block.gl-text-right.gl-my-4.gl-w-full
-    - if clusterable.can_add_cluster?
-      = link_to s_('ClusterIntegration|Connect cluster with certificate'), clusterable.new_path, class: 'btn gl-button btn-confirm js-add-cluster gl-py-2', qa_selector: :integrate_kubernetes_cluster_button
-    - else
-      %span.btn.gl-button.btn-confirm.js-add-cluster.disabled.gl-py-2
-        = s_("ClusterIntegration|Connect cluster with certificate")
+- if !clusters.empty?
+  .top-area.adjust
+    .gl-display-block.gl-text-right.gl-my-4.gl-w-full
+      - if clusterable.can_add_cluster?
+        = link_to s_('ClusterIntegration|Connect cluster with certificate'), clusterable.new_path, class: 'btn gl-button btn-confirm js-add-cluster gl-py-2', qa_selector: :integrate_kubernetes_cluster_button
+      - else
+        %span.btn.gl-button.btn-confirm.js-add-cluster.disabled.gl-py-2
+          = s_("ClusterIntegration|Connect cluster with certificate")
 
 #js-clusters-list-app{ data: js_clusters_list_data(clusterable) }

spec/frontend/clusters_list/components/clusters_empty_state_spec.js

@@ -62,7 +62,6 @@ describe('ClustersEmptyStateComponent', () => {
     });
 
     it('should show the empty state text', () => {
-      expect(findEmptyStateText().exists()).toBe(true);
       expect(findEmptyStateText().text()).toBe(emptyStateHelpText);
     });
   });

spec/frontend/clusters_list/components/clusters_spec.js

@@ -95,21 +95,6 @@ describe('Clusters', () => {
       it('displays a table component', () => {
         expect(findTable().exists()).toBe(true);
       });
-
-      it('renders the correct table headers', () => {
-        const tableHeaders = wrapper.vm.fields;
-        const headers = findTable().findAll('th');
-
-        expect(headers.length).toBe(tableHeaders.length);
-
-        tableHeaders.forEach((headerText, i) =>
-          expect(headers.at(i).text()).toEqual(headerText.label),
-        );
-      });
-
-      it('should stack on smaller devices', () => {
-        expect(findTable().classes()).toContain('b-table-stacked-md');
-      });
     });
 
     describe('when there are no clusters', () => {