Fix: hide redundant h2 and cta when empty state showing

ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue

@@ -70,14 +70,15 @@ export default {
       {{ error }}
     </gl-alert>
     <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
-      <div class="gl-display-flex gl-align-items-center">
+      <div v-if="!isEmpty" class="gl-display-flex gl-align-items-center">
         <h2>{{ $options.i18n.heading }}</h2>
       </div>
       <div
         class="gl-display-flex gl-align-items-center gl-flex-direction-column gl-md-flex-direction-row"
       >
         <gl-link
-          class="gl-mr-5 workspace-preview-link gl-sm-display-none"
+          v-if="!isEmpty"
+          class="gl-mr-5 workspace-preview-link gl-display-none gl-sm-display-block"
           :href="$options.workspacesHelpPath"
           >{{ $options.i18n.learnMoreHelpLink }}</gl-link
         >

ee/app/assets/javascripts/remote_development/pages/list.vue

@@ -107,7 +107,7 @@ export default {
     @error="onError"
     @page="onPaginationInput"
   >
-    <template #header>
+    <template v-if="!isEmpty" #header>
       <gl-button variant="confirm" :to="$options.ROUTES.new" data-testid="list-new-workspace-button"
         >{{ $options.i18n.newWorkspaceButton }}
       </gl-button>

ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js

 import { mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import Vue, { nextTick } from 'vue';
-import { GlAlert, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLink, GlSkeletonLoader } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -62,6 +62,8 @@ describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue
   const findHelpLink = () => wrapper.findComponent(GlLink);
   const findTable = () => wrapper.findComponent(WorkspacesTable);
   const findPagination = () => wrapper.findComponent(WorkspacesListPagination);
+  const findAllConfirmButtons = () =>
+    wrapper.findAllComponents(GlButton).filter((button) => button.props().variant === 'confirm');
 
   beforeEach(() => {
     buildMockApollo();
@@ -82,6 +84,10 @@ describe('remote_development/components/agent_admin_ui/agent_workspaces_list.vue
       expect(wrapper.findComponent(WorkspaceEmptyState).exists()).toBe(true);
     });
 
+    it('renders only one confirm button when empty state is present', () => {
+      expect(findAllConfirmButtons().length).toBe(1);
+    });
+
     it('does not render the workspaces table', () => {
       expect(findTable().exists()).toBe(false);
     });

ee/spec/frontend/remote_development/pages/list_spec.js

@@ -58,6 +58,8 @@ describe('remote_development/pages/list.vue', () => {
   const findTable = () => wrapper.findComponent(WorkspacesTable);
   const findPagination = () => wrapper.findComponent(WorkspacesListPagination);
   const findNewWorkspaceButton = () => wrapper.findComponent(GlButton);
+  const findAllConfirmButtons = () =>
+    wrapper.findAllComponents(GlButton).filter((button) => button.props().variant === 'confirm');
 
   beforeEach(() => {
     buildMockApollo();
@@ -76,6 +78,10 @@ describe('remote_development/pages/list.vue', () => {
       expect(wrapper.findComponent(WorkspaceEmptyState).exists()).toBe(true);
     });
 
+    it('renders only one confirm button when empty state is present', () => {
+      expect(findAllConfirmButtons().length).toBe(1);
+    });
+
     it('does not render the workspaces table', () => {
       expect(findTable().exists()).toBe(false);
     });