Add latest changes from gitlab-org/gitlab@master

5 files changed, 41 insertions, 6 deletions

diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
index 9db3011ba5d..2cf71de7ea2 100644
--- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
+++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
@@ -3,6 +3,7 @@
  * Render modal to confirm rollback/redeploy.
  */
 import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { escape } from 'lodash';
 import csrf from '~/lib/utils/csrf';
 import { __, s__, sprintf } from '~/locale';
@@ -125,10 +126,17 @@ export default {
     },
     onOk() {
       if (this.graphql) {
-        this.$apollo.mutate({
-          mutation: rollbackEnvironment,
-          variables: { environment: this.environment },
-        });
+        this.$apollo
+          .mutate({
+            mutation: rollbackEnvironment,
+            variables: { environment: this.environment },
+          })
+          .then(() => {
+            this.$emit('rollback');
+          })
+          .catch((e) => {
+            Sentry.captureException(e);
+          });
       } else {
         eventHub.$emit('rollbackEnvironment', this.environment);
       }
diff --git a/app/assets/javascripts/environments/environment_details/constants.js b/app/assets/javascripts/environments/environment_details/constants.js
index 07579092e23..e7b10aed20d 100644
--- a/app/assets/javascripts/environments/environment_details/constants.js
+++ b/app/assets/javascripts/environments/environment_details/constants.js
@@ -1,6 +1,7 @@
 import { __, s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
+export const ENVIRONMENT_DETAILS_QUERY_POLLING_INTERVAL = 3000;
 export const ENVIRONMENT_DETAILS_PAGE_SIZE = 20;
 export const ENVIRONMENT_DETAILS_TABLE_FIELDS = [
   {
diff --git a/app/assets/javascripts/environments/environment_details/index.vue b/app/assets/javascripts/environments/environment_details/index.vue
index f91e68e793f..1b7320df674 100644
--- a/app/assets/javascripts/environments/environment_details/index.vue
+++ b/app/assets/javascripts/environments/environment_details/index.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { logError } from '~/lib/logger';
+import { toggleQueryPollingByVisibility, etagQueryHeaders } from '~/graphql_shared/utils';
 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';
@@ -8,7 +9,10 @@ import { convertToDeploymentTableRow } from '../helpers/deployment_data_transfor
 import EmptyState from './empty_state.vue';
 import DeploymentsTable from './deployments_table.vue';
 import Pagination from './pagination.vue';
-import { ENVIRONMENT_DETAILS_PAGE_SIZE } from './constants';
+import {
+  ENVIRONMENT_DETAILS_QUERY_POLLING_INTERVAL,
+  ENVIRONMENT_DETAILS_PAGE_SIZE,
+} from './constants';
 
 export default {
   components: {
@@ -18,6 +22,7 @@ export default {
     EmptyState,
     GlLoadingIcon,
   },
+  inject: { graphqlEtagKey: { default: '' } },
   props: {
     projectFullPath: {
       type: String,
@@ -51,6 +56,12 @@ export default {
           before: this.before,
         };
       },
+      pollInterval() {
+        return this.graphqlEtagKey ? ENVIRONMENT_DETAILS_QUERY_POLLING_INTERVAL : null;
+      },
+      context() {
+        return etagQueryHeaders('environment_details', this.graphqlEtagKey);
+      },
     },
     environmentToRollback: {
       query: environmentToRollbackQuery,
@@ -136,6 +147,19 @@ export default {
       this.isPrefetchingPages = false;
     },
   },
+  mounted() {
+    if (this.graphqlEtagKey) {
+      toggleQueryPollingByVisibility(
+        this.$apollo.queries.project,
+        ENVIRONMENT_DETAILS_QUERY_POLLING_INTERVAL,
+      );
+    }
+  },
+  methods: {
+    resetPage() {
+      this.$router.push({ query: {} });
+    },
+  },
 };
 </script>
 <template>
@@ -150,6 +174,6 @@ export default {
       <pagination :page-info="pageInfo" :disabled="isPaginationDisabled" />
     </div>
     <empty-state v-if="!isDeploymentTableShown && !isLoading" />
-    <confirm-rollback-modal :environment="environmentToRollback" graphql />
+    <confirm-rollback-modal :environment="environmentToRollback" graphql @rollback="resetPage" />
   </div>
 </template>
diff --git a/app/assets/javascripts/environments/graphql/client.js b/app/assets/javascripts/environments/graphql/client.js
index bb6f57e7e80..b7754558b10 100644
--- a/app/assets/javascripts/environments/graphql/client.js
+++ b/app/assets/javascripts/environments/graphql/client.js
@@ -13,6 +13,7 @@ import typeDefs from './typedefs.graphql';
 export const apolloProvider = (endpoint) => {
   const defaultClient = createDefaultClient(resolvers(endpoint), {
     typeDefs,
+    useGet: true,
   });
   const { cache } = defaultClient;
 
diff --git a/app/assets/javascripts/environments/mount_show.js b/app/assets/javascripts/environments/mount_show.js
index 5e812c85c96..364f68cefb7 100644
--- a/app/assets/javascripts/environments/mount_show.js
+++ b/app/assets/javascripts/environments/mount_show.js
@@ -94,6 +94,7 @@ export const initPage = async () => {
     router,
     provide: {
       projectPath: dataSet.projectFullPath,
+      graphqlEtagKey: dataSet.graphqlEtagPath,
     },
     render(createElement) {
       return createElement('router-view');