diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index 18f698553496f46bad81787e2ec0d7a79a0c1942..8c4d374ebe7d8489117dbd5a111a22694b38ba2b 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 0000000000000000000000000000000000000000..73d01d0f6203d163ba28b28d88a5310449e7e214 --- /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 22b066fae414b79ba5b8cefab3361c065219cfbc..a21eff6aa45f34bab78445a3d22e345811dc1d36 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); + }); + }); + }); });