Add latest changes from gitlab-org/gitlab@master

6 files changed, 96 insertions, 5 deletions

diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
index 53a93bbce30..9db3011ba5d 100644
--- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
+++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
@@ -75,7 +75,12 @@ export default {
       if (this.hasMultipleCommits) {
         if (this.graphql) {
           const { lastDeployment } = this.environment;
-          return this.commitData(lastDeployment, 'commitPath');
+          return (
+            // data shape comming from REST and GraphQL is unfortunately different
+            // once we fully migrate to GraphQL it could be streamlined
+            this.commitData(lastDeployment, 'commitPath') ||
+            this.commitData(lastDeployment, 'webUrl')
+          );
         }
 
         const { last_deployment } = this.environment;
@@ -135,7 +140,6 @@ export default {
   csrf,
   cancelProps: {
     text: __('Cancel'),
-    attributes: { variant: 'danger' },
   },
   docsPath: helpPagePath('ci/environments/index.md', { anchor: 'retry-or-roll-back-a-deployment' }),
 };
@@ -157,7 +161,7 @@ export default {
         }}</gl-link>
       </template>
       <template #docs="{ content }">
-        <gl-link :href="$options.docsLink" target="_blank">{{ content }}</gl-link>
+        <gl-link :href="$options.docsPath" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
   </gl-modal>
diff --git a/app/assets/javascripts/environments/environment_details/components/deployment_actions.vue b/app/assets/javascripts/environments/environment_details/components/deployment_actions.vue
index 77d9311743c..94804f3eb6e 100644
--- a/app/assets/javascripts/environments/environment_details/components/deployment_actions.vue
+++ b/app/assets/javascripts/environments/environment_details/components/deployment_actions.vue
@@ -1,10 +1,18 @@
 <script>
+import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
+import { translations } from '~/environments/environment_details/constants';
 import ActionsComponent from '~/environments/components/environment_actions.vue';
+import setEnvironmentToRollback from '~/environments/graphql/mutations/set_environment_to_rollback.mutation.graphql';
 
 export default {
   components: {
+    GlButton,
     ActionsComponent,
   },
+  directives: {
+    GlModal: GlModalDirective,
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     actions: {
       // actions shape:
@@ -18,14 +26,63 @@ export default {
       type: Array,
       required: true,
     },
+    rollback: {
+      // rollback shape:
+      /*
+      {
+        id: string,
+        name: string,
+        lastDeployment: {
+          commit: Commit,
+          isLast: boolean,
+        },
+        retryUrl: url,
+      };
+      */
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   computed: {
+    isRollbackAvailable() {
+      return Boolean(this.rollback?.lastDeployment);
+    },
+    rollbackIcon() {
+      return this.rollback.lastDeployment.isLast ? 'repeat' : 'redo';
+    },
     isActionsShown() {
       return this.actions.length > 0;
     },
+    rollbackButtonTitle() {
+      return this.rollback.lastDeployment?.isLast
+        ? translations.redeployButtonTitle
+        : translations.rollbackButtonTitle;
+    },
+  },
+  methods: {
+    onRollbackClick() {
+      this.$apollo.mutate({
+        mutation: setEnvironmentToRollback,
+        variables: {
+          environment: this.rollback,
+        },
+      });
+    },
   },
 };
 </script>
 <template>
-  <actions-component v-if="isActionsShown" :actions="actions" graphql />
+  <div>
+    <actions-component v-if="isActionsShown" :actions="actions" graphql />
+    <gl-button
+      v-if="isRollbackAvailable"
+      v-gl-modal.confirm-rollback-modal
+      v-gl-tooltip
+      data-testid="rollback-button"
+      :title="rollbackButtonTitle"
+      :icon="rollbackIcon"
+      @click="onRollbackClick"
+    />
+  </div>
 </template>
diff --git a/app/assets/javascripts/environments/environment_details/constants.js b/app/assets/javascripts/environments/environment_details/constants.js
index 3b33d6a676e..d3683613d8c 100644
--- a/app/assets/javascripts/environments/environment_details/constants.js
+++ b/app/assets/javascripts/environments/environment_details/constants.js
@@ -61,6 +61,8 @@ export const translations = {
   ),
   nextPageButtonLabel: __('Next'),
   previousPageButtonLabel: __('Prev'),
+  redeployButtonTitle: s__('Environments|Re-deploy to environment'),
+  rollbackButtonTitle: s__('Environments|Rollback environment'),
 };
 
 export const codeBlockPlaceholders = { code: ['code_open', 'code_close'] };
diff --git a/app/assets/javascripts/environments/environment_details/deployments_table.vue b/app/assets/javascripts/environments/environment_details/deployments_table.vue
index 10f8c06e581..430fe8d9ece 100644
--- a/app/assets/javascripts/environments/environment_details/deployments_table.vue
+++ b/app/assets/javascripts/environments/environment_details/deployments_table.vue
@@ -54,7 +54,7 @@ export default {
       <time-ago-tooltip :time="item.deployed" />
     </template>
     <template #cell(actions)="{ item }">
-      <deployment-actions :actions="item.actions" />
+      <deployment-actions :actions="item.actions" :rollback="item.rollback" />
     </template>
   </gl-table-lite>
 </template>
diff --git a/app/assets/javascripts/environments/environment_details/index.vue b/app/assets/javascripts/environments/environment_details/index.vue
index f4657c5100a..f91e68e793f 100644
--- a/app/assets/javascripts/environments/environment_details/index.vue
+++ b/app/assets/javascripts/environments/environment_details/index.vue
@@ -1,7 +1,9 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
+import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue';
 import environmentDetailsQuery from '../graphql/queries/environment_details.query.graphql';
+import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql';
 import { convertToDeploymentTableRow } from '../helpers/deployment_data_transformation_helper';
 import EmptyState from './empty_state.vue';
 import DeploymentsTable from './deployments_table.vue';
@@ -10,6 +12,7 @@ import { ENVIRONMENT_DETAILS_PAGE_SIZE } from './constants';
 
 export default {
   components: {
+    ConfirmRollbackModal,
     Pagination,
     DeploymentsTable,
     EmptyState,
@@ -49,10 +52,14 @@ export default {
         };
       },
     },
+    environmentToRollback: {
+      query: environmentToRollbackQuery,
+    },
   },
   data() {
     return {
       project: {},
+      environmentToRollback: {},
       isInitialPageDataReceived: false,
       isPrefetchingPages: false,
     };
@@ -143,5 +150,6 @@ export default {
       <pagination :page-info="pageInfo" :disabled="isPaginationDisabled" />
     </div>
     <empty-state v-if="!isDeploymentTableShown && !isLoading" />
+    <confirm-rollback-modal :environment="environmentToRollback" graphql />
   </div>
 </template>
diff --git a/app/assets/javascripts/environments/helpers/deployment_data_transformation_helper.js b/app/assets/javascripts/environments/helpers/deployment_data_transformation_helper.js
index 9802dcbcf78..63ccb568794 100644
--- a/app/assets/javascripts/environments/helpers/deployment_data_transformation_helper.js
+++ b/app/assets/javascripts/environments/helpers/deployment_data_transformation_helper.js
@@ -62,6 +62,25 @@ export const getActionsFromDeploymentNode = (deploymentNode, lastDeploymentName)
   );
 };
 
+export const getRollbackActionFromDeploymentNode = (deploymentNode, environment) => {
+  const { job, id } = deploymentNode;
+
+  if (!job) {
+    return null;
+  }
+  const isLastDeployment = id === environment.lastDeployment?.id;
+  const { webPath } = job;
+  return {
+    id,
+    name: environment.name,
+    lastDeployment: {
+      commit: deploymentNode.commit,
+      isLast: isLastDeployment,
+    },
+    retryUrl: `${webPath}/retry`,
+  };
+};
+
 /**
  * This function transforms deploymentNode object coming from GraphQL to object compatible with app/assets/javascripts/environments/environment_details/page.vue table
  * @param {Object} deploymentNode
@@ -82,5 +101,6 @@ export const convertToDeploymentTableRow = (deploymentNode, environment) => {
     created: deploymentNode.createdAt || '',
     deployed: deploymentNode.finishedAt || '',
     actions: getActionsFromDeploymentNode(deploymentNode, lastDeployment?.job?.name),
+    rollback: getRollbackActionFromDeploymentNode(deploymentNode, environment),
   };
 };