Add latest changes from gitlab-org/gitlab@master

2 files changed, 70 insertions, 33 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
index bdd46d6a656..a3d5a6bed11 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlTooltipDirective, GlButton } from '@gitlab/ui';
-import { __ } from '~/locale';
-import { RUNNING } from './constants';
+import { RUNNING, WILL_DEPLOY } from './constants';
 
 export default {
   name: 'DeploymentActionButton',
@@ -42,40 +41,50 @@ export default {
   },
   computed: {
     isActionInProgress() {
-      return Boolean(this.computedDeploymentStatus === RUNNING || this.actionInProgress);
-    },
-    actionInProgressTooltip() {
-      switch (this.actionInProgress) {
-        case this.actionsConfiguration.actionName:
-          return this.actionsConfiguration.busyText;
-        case null:
-          return '';
-        default:
-          return __('Another action is currently in progress');
-      }
+      return Boolean(
+        this.computedDeploymentStatus === RUNNING ||
+          this.computedDeploymentStatus === WILL_DEPLOY ||
+          this.actionInProgress,
+      );
     },
     isLoading() {
-      return this.actionInProgress === this.actionsConfiguration.actionName;
+      return (
+        this.actionInProgress === this.actionsConfiguration.actionName ||
+        this.computedDeploymentStatus === WILL_DEPLOY
+      );
     },
   },
 };
 </script>
 
 <template>
-  <span v-gl-tooltip :title="actionInProgressTooltip" class="gl-display-inline-block" tabindex="0">
-    <gl-button
-      v-gl-tooltip
-      category="primary"
-      size="small"
-      :title="buttonTitle"
-      :aria-label="buttonTitle"
-      :loading="isLoading"
-      :disabled="isActionInProgress"
-      :class="`inline gl-ml-3 ${containerClasses}`"
-      :icon="icon"
-      @click="$emit('click')"
-    >
-      <slot> </slot>
-    </gl-button>
-  </span>
+  <gl-button
+    v-if="isLoading || isActionInProgress"
+    category="primary"
+    size="small"
+    :title="buttonTitle"
+    :aria-label="buttonTitle"
+    :loading="isLoading"
+    :disabled="isActionInProgress"
+    :class="`inline gl-ml-3 ${containerClasses}`"
+    :icon="icon"
+    @click="$emit('click')"
+  >
+    <slot> </slot>
+  </gl-button>
+  <gl-button
+    v-else
+    v-gl-tooltip.hover
+    category="primary"
+    size="small"
+    :title="buttonTitle"
+    :aria-label="buttonTitle"
+    :loading="isLoading"
+    :disabled="isActionInProgress"
+    :class="`inline gl-ml-3 ${containerClasses}`"
+    :icon="icon"
+    @click="$emit('click')"
+  >
+    <slot> </slot>
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
index 306ed664326..e79d2db4b5a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
@@ -71,11 +71,25 @@ export default {
       return this.deployment.details?.playable_build?.play_path;
     },
     redeployPath() {
+      if (this.redeployMrWidgetFeatureFlagEnabled) {
+        return this.deployment.retry_url;
+      }
       return this.deployment.details?.playable_build?.retry_path;
     },
     stopUrl() {
       return this.deployment.stop_url;
     },
+    environmentAvailable() {
+      return Boolean(this.deployment.environment_available);
+    },
+    redeployMrWidgetFeatureFlagEnabled() {
+      return this.glFeatures.reviewAppsRedeployMrWidget;
+    },
+    showDeploymentActionButton() {
+      return (
+        this.redeployPath && !this.environmentAvailable && this.redeployMrWidgetFeatureFlagEnabled
+      );
+    },
   },
   actionsConfiguration: {
     [STOPPING]: {
@@ -124,6 +138,10 @@ export default {
 
         MRWidgetService.executeInlineAction(endpoint)
           .then((resp) => {
+            if (this.redeployMrWidgetFeatureFlagEnabled) {
+              return;
+            }
+
             const redirectUrl = resp?.data?.redirect_url;
             if (redirectUrl) {
               visitUrl(redirectUrl);
@@ -167,7 +185,7 @@ export default {
       <span>{{ $options.actionsConfiguration[constants.DEPLOYING].buttonText }}</span>
     </deployment-action-button>
     <deployment-action-button
-      v-if="canBeManuallyRedeployed"
+      v-if="canBeManuallyRedeployed && !redeployMrWidgetFeatureFlagEnabled"
       :action-in-progress="actionInProgress"
       :actions-configuration="$options.actionsConfiguration[constants.REDEPLOYING]"
       :computed-deployment-status="computedDeploymentStatus"
@@ -178,12 +196,12 @@ export default {
       <span>{{ $options.actionsConfiguration[constants.REDEPLOYING].buttonText }}</span>
     </deployment-action-button>
     <deployment-view-button
-      v-if="hasExternalUrls"
+      v-if="hasExternalUrls && environmentAvailable"
       :app-button-text="appButtonText"
       :deployment="deployment"
     />
     <deployment-action-button
-      v-if="stopUrl"
+      v-if="stopUrl && environmentAvailable"
       :action-in-progress="actionInProgress"
       :computed-deployment-status="computedDeploymentStatus"
       :actions-configuration="$options.actionsConfiguration[constants.STOPPING]"
@@ -192,5 +210,15 @@ export default {
       container-classes="js-stop-env"
       @click="stopEnvironment"
     />
+    <deployment-action-button
+      v-if="showDeploymentActionButton"
+      :action-in-progress="actionInProgress"
+      :computed-deployment-status="computedDeploymentStatus"
+      :actions-configuration="$options.actionsConfiguration[constants.REDEPLOYING]"
+      :button-title="$options.actionsConfiguration[constants.REDEPLOYING].buttonText"
+      :icon="$options.btnIcons.repeat"
+      container-classes="js-redeploy-action"
+      @click="redeploy"
+    />
   </div>
 </template>