Merge branch '250571-jumping-button-on-the-environments-page' into 'master'

Avoid New Environment button glitching when changing tabs

See merge request gitlab-org/gitlab!44603

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"

changelogs/unreleased/250571-jumping-button-on-the-environments-page.yml

+---
+title: Avoid New Environment button glitching when changing tabs
+merge_request: 44603
+author:
+type: fixed

spec/frontend/environments/environments_app_spec.js

+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);
+      });
+    });
+  });
 });