From 3bb27e94dc3fe20a051d23ff16ad5cb4f904b539 Mon Sep 17 00:00:00 2001
From: Angelo Gulina <agulina@gitlab.com>
Date: Wed, 7 Oct 2020 16:05:20 +0200
Subject: [PATCH] Avoid New Environment button glitching when changing tabs
---
.../components/environments_app.vue | 4 +--
...umping-button-on-the-environments-page.yml | 5 ++++
.../environments/environments_app_spec.js | 30 ++++++++++++++++++-
3 files changed, 36 insertions(+), 3 deletions(-)
create mode 100644 changelogs/unreleased/250571-jumping-button-on-the-environments-page.yml
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 18f698553496f..8c4d374ebe7d8 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -145,7 +145,7 @@ export default {
class="gl-mb-3 gl-flex-fill-1"
/>
<gl-button
- v-if="canCreateEnvironment && !isLoading"
+ v-if="canCreateEnvironment"
:href="newEnvironmentPath"
category="primary"
variant="success"
@@ -181,7 +181,7 @@ export default {
class="gl-mb-3 gl-lg-mr-3 gl-lg-mb-0"
/>
<gl-button
- v-if="canCreateEnvironment && !isLoading"
+ v-if="canCreateEnvironment"
:href="newEnvironmentPath"
category="primary"
variant="success"
diff --git a/changelogs/unreleased/250571-jumping-button-on-the-environments-page.yml b/changelogs/unreleased/250571-jumping-button-on-the-environments-page.yml
new file mode 100644
index 0000000000000..73d01d0f6203d
--- /dev/null
+++ b/changelogs/unreleased/250571-jumping-button-on-the-environments-page.yml
@@ -0,0 +1,5 @@
+---
+title: Avoid New Environment button glitching when changing tabs
+merge_request: 44603
+author:
+type: fixed
diff --git a/spec/frontend/environments/environments_app_spec.js b/spec/frontend/environments/environments_app_spec.js
index 22b066fae414b..a21eff6aa45f3 100644
--- a/spec/frontend/environments/environments_app_spec.js
+++ b/spec/frontend/environments/environments_app_spec.js
@@ -1,9 +1,10 @@
+import { GlButton } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
import Container from '~/environments/components/container.vue';
import EmptyState from '~/environments/components/empty_state.vue';
import EnvironmentsApp from '~/environments/components/environments_app.vue';
+import axios from '~/lib/utils/axios_utils';
import { environment, folder } from './mock_data';
describe('Environment', () => {
@@ -40,6 +41,7 @@ describe('Environment', () => {
return axios.waitForAll();
};
+ const findNewEnvironmentButton = () => wrapper.find(GlButton);
const findEnvironmentsTabAvailable = () => wrapper.find('.js-environments-tab-available > a');
const findEnvironmentsTabStopped = () => wrapper.find('.js-environments-tab-stopped > a');
@@ -175,4 +177,30 @@ describe('Environment', () => {
expect(wrapper.find('.text-center > a.btn').text()).toContain('Show all');
});
});
+
+ describe('environment button', () => {
+ describe('when user can create environment', () => {
+ beforeEach(() => {
+ mockRequest([environment]);
+ wrapper = mount(EnvironmentsApp, { propsData: mockData });
+ });
+
+ it('should render', () => {
+ expect(findNewEnvironmentButton().exists()).toBe(true);
+ });
+ });
+
+ describe('when user can not create environment', () => {
+ beforeEach(() => {
+ mockRequest([environment]);
+ wrapper = mount(EnvironmentsApp, {
+ propsData: { ...mockData, canCreateEnvironment: false },
+ });
+ });
+
+ it('should not render', () => {
+ expect(findNewEnvironmentButton().exists()).toBe(false);
+ });
+ });
+ });
});
--
GitLab