Disable stop environment button while deployment is running

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

@@ -65,6 +65,14 @@ export default {
     deployedText() {
       return this.$options.deployedTextMap[this.deployment.status];
     },
+    isDeployInProgress() {
+      return this.deployment.status === 'running';
+    },
+    deployInProgressTooltip() {
+      return this.isDeployInProgress
+        ? __('Stopping this environment is currently not possible as a deployment is in progress')
+        : '';
+    },
     shouldRenderDropdown() {
       return (
         this.enableCiEnvironmentsStatusChanges &&
@@ -183,15 +191,23 @@ export default {
                 css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin"
               />
             </template>
-            <loading-button
+            <span 
               v-if="deployment.stop_url"
-              :loading="isStopping"
-              container-class="btn btn-default btn-sm inline prepend-left-4"
-              title="Stop environment"
-              @click="stopEnvironment"
+              v-tooltip 
+              :title="deployInProgressTooltip"
+              class="d-inline-block" 
+              tabindex="0"
             >
-              <icon name="stop" />
-            </loading-button>
+              <loading-button
+                :loading="isStopping"
+                :disabled="isDeployInProgress"
+                :title="__('Stop environment')"
+                container-class="js-stop-env btn btn-default btn-sm inline prepend-left-4"
+                @click="stopEnvironment"
+              >
+                <icon name="stop" />
+              </loading-button>
+            </span>
           </div>
         </div>
       </div>

changelogs/unreleased/25140-disable-stop-button.yml

+---
+title: Disables stop environment button while the deploy is in progress
+merge_request:
+author:
+type: other

locale/gitlab.pot

@@ -5847,6 +5847,9 @@ msgstr ""
 msgid "Status"
 msgstr ""
 
+msgid "Stop environment"
+msgstr ""
+
 msgid "Stop impersonation"
 msgstr ""
 
@@ -5856,6 +5859,9 @@ msgstr ""
 msgid "Stopped"
 msgstr ""
 
+msgid "Stopping this environment is currently not possible as a deployment is in progress"
+msgstr ""
+
 msgid "Storage"
 msgstr ""
 

spec/features/merge_request/user_sees_deployment_widget_spec.rb

@@ -38,7 +38,7 @@ describe 'Merge request > User sees deployment widget', :js do
       end
 
       it 'does start build when stop button clicked' do
-        accept_confirm { click_button('Stop environment') }
+        accept_confirm { find('.js-stop-env').click }
 
         expect(page).to have_content('close_app')
       end
@@ -47,7 +47,7 @@ describe 'Merge request > User sees deployment widget', :js do
         let(:role) { :reporter }
 
         it 'does not show stop button' do
-          expect(page).not_to have_button('Stop environment')
+          expect(page).not_to have_selector('.js-stop-env')
         end
       end
     end

spec/javascripts/vue_mr_widget/components/deployment_spec.js

@@ -242,6 +242,10 @@ describe('Deployment component', () => {
       it('renders information about running deployment', () => {
         expect(vm.$el.querySelector('.js-deployment-info').textContent).toContain('Deploying to');
       });
+
+      it('renders disabled stop button', () => {
+        expect(vm.$el.querySelector('.js-stop-env').getAttribute('disabled')).toBe('disabled');
+      });
     });
 
     describe('success', () => {