From 0a9038ed32249d2850138b93f80cea23a48f7aee Mon Sep 17 00:00:00 2001
From: Taylor Vanderhelm <tvanderhelm@gitlab.com>
Date: Wed, 31 Jan 2024 00:04:12 +0000
Subject: [PATCH] Fix: hide redundant h2 and cta when empty state showing
---
.../components/common/workspaces_list.vue | 5 +++--
.../assets/javascripts/remote_development/pages/list.vue | 2 +-
.../agent_admin_ui/agent_workspaces_list_spec.js | 8 +++++++-
ee/spec/frontend/remote_development/pages/list_spec.js | 6 ++++++
4 files changed, 17 insertions(+), 4 deletions(-)
diff --git a/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue b/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
index b4625f0feea0..7ededb9ea501 100644
--- a/ee/app/assets/javascripts/remote_development/components/common/workspaces_list.vue
+++ b/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
>
diff --git a/ee/app/assets/javascripts/remote_development/pages/list.vue b/ee/app/assets/javascripts/remote_development/pages/list.vue
index 9f30f0c5a5f7..7df809c4c4e7 100644
--- a/ee/app/assets/javascripts/remote_development/pages/list.vue
+++ b/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>
diff --git a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
index 066e12f47574..95ecb008e04c 100644
--- a/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
+++ b/ee/spec/frontend/remote_development/components/agent_admin_ui/agent_workspaces_list_spec.js
@@ -1,7 +1,7 @@
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);
});
diff --git a/ee/spec/frontend/remote_development/pages/list_spec.js b/ee/spec/frontend/remote_development/pages/list_spec.js
index 808a8a6589e1..f2d159da6145 100644
--- a/ee/spec/frontend/remote_development/pages/list_spec.js
+++ b/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);
});
--
GitLab