Add latest changes from gitlab-org/gitlab@13-0-stable-ee

18 files changed, 179 insertions, 145 deletions

diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
index 5c03c008faf..f0723e96ddf 100644
--- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
+++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue
@@ -3,7 +3,7 @@
  * Render modal to confirm rollback/redeploy.
  */
 
-import { escape as esc } from 'lodash';
+import { escape } from 'lodash';
 import { GlModal } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
@@ -30,7 +30,7 @@ export default {
         : s__('Environments|Rollback environment %{name}?');
 
       return sprintf(title, {
-        name: esc(this.environment.name),
+        name: escape(this.environment.name),
       });
     },
 
@@ -50,10 +50,10 @@ export default {
     },
 
     modalText() {
-      const linkStart = `<a class="commit-sha mr-0" href="${esc(this.commitUrl)}">`;
-      const commitId = esc(this.commitShortSha);
+      const linkStart = `<a class="commit-sha mr-0" href="${escape(this.commitUrl)}">`;
+      const commitId = escape(this.commitShortSha);
       const linkEnd = '</a>';
-      const name = esc(this.name);
+      const name = escape(this.name);
       const body = this.environment.isLastDeployment
         ? s__(
             'Environments|This action will relaunch the job for commit %{linkStart}%{commitId}%{linkEnd}, putting the environment in a previous version. Are you sure you want to continue?',
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 0a978ab5869..899d7ec8521 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -1,8 +1,7 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import containerMixin from 'ee_else_ce/environments/mixins/container_mixin';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
-import EnvironmentTable from '../components/environments_table.vue';
+import EnvironmentTable from './environments_table.vue';
 
 export default {
   components: {
@@ -10,8 +9,12 @@ export default {
     TablePagination,
     GlLoadingIcon,
   },
-  mixins: [containerMixin],
   props: {
+    canaryDeploymentFeatureId: {
+      type: String,
+      required: false,
+      default: null,
+    },
     isLoading: {
       type: Boolean,
       required: true,
@@ -28,6 +31,31 @@ export default {
       type: Boolean,
       required: true,
     },
+    deployBoardsHelpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    helpCanaryDeploymentsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lockPromotionSvgPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCanaryDeploymentCallout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    userCalloutsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   methods: {
     onChangePage(page) {
diff --git a/app/assets/javascripts/environments/components/delete_environment_modal.vue b/app/assets/javascripts/environments/components/delete_environment_modal.vue
index f731dc49a5b..29aab268fd3 100644
--- a/app/assets/javascripts/environments/components/delete_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/delete_environment_modal.vue
@@ -52,7 +52,7 @@ export default {
     footer-primary-button-variant="danger"
     @submit="onSubmit"
   >
-    <template slot="header">
+    <template #header>
       <h4 class="modal-title d-flex mw-100">
         {{ __('Delete') }}
         <span v-gl-tooltip :title="environment.name" class="text-truncate mx-1 flex-fill">
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 335c668474e..fa3d217f148 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -9,7 +9,6 @@ import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link
 import CommitComponent from '~/vue_shared/components/commit.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
-import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
 import eventHub from '../event_hub';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
@@ -44,7 +43,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [environmentItemMixin, timeagoMixin],
+  mixins: [timeagoMixin],
 
   props: {
     canReadEnvironment: {
@@ -65,6 +64,9 @@ export default {
   },
 
   computed: {
+    deployIconName() {
+      return this.model.isDeployBoardVisible ? 'chevron-down' : 'chevron-right';
+    },
     /**
      * Verifies if `last_deployment` key exists in the current Environment.
      * This key is required to render most of the html - this method works has
@@ -210,6 +212,10 @@ export default {
       }));
     },
 
+    shouldRenderDeployBoard() {
+      return this.model.hasDeployBoard;
+    },
+
     /**
      * Builds the string used in the user image alt attribute.
      *
@@ -501,6 +507,9 @@ export default {
   },
 
   methods: {
+    toggleDeployBoard() {
+      eventHub.$emit('toggleDeployBoard', this.model);
+    },
     onClickFolder() {
       eventHub.$emit('toggleFolder', this.model);
     },
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 0cc6f3df2d7..0a5538237f9 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlDeprecatedButton } from '@gitlab/ui';
-import envrionmentsAppMixin from 'ee_else_ce/environments/mixins/environments_app_mixin';
 import Flash from '~/flash';
 import { s__ } from '~/locale';
 import emptyState from './empty_state.vue';
@@ -22,13 +21,18 @@ export default {
     DeleteEnvironmentModal,
   },
 
-  mixins: [CIPaginationMixin, environmentsMixin, envrionmentsAppMixin],
+  mixins: [CIPaginationMixin, environmentsMixin],
 
   props: {
     endpoint: {
       type: String,
       required: true,
     },
+    canaryDeploymentFeatureId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     canCreateEnvironment: {
       type: Boolean,
       required: true,
@@ -41,6 +45,11 @@ export default {
       type: String,
       required: true,
     },
+    helpCanaryDeploymentsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     helpPagePath: {
       type: String,
       required: true,
@@ -50,17 +59,37 @@ export default {
       required: false,
       default: '',
     },
+    lockPromotionSvgPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCanaryDeploymentCallout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    userCalloutsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
 
   created() {
     eventHub.$on('toggleFolder', this.toggleFolder);
+    eventHub.$on('toggleDeployBoard', this.toggleDeployBoard);
   },
 
   beforeDestroy() {
     eventHub.$off('toggleFolder');
+    eventHub.$off('toggleDeployBoard');
   },
 
   methods: {
+    toggleDeployBoard(model) {
+      this.store.toggleDeployBoard(model.id);
+    },
     toggleFolder(folder) {
       this.store.toggleFolder(folder);
 
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index 89e40faa23e..380e16c7b71 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -4,7 +4,6 @@
  */
 import { GlLoadingIcon } from '@gitlab/ui';
 import { flow, reverse, sortBy } from 'lodash/fp';
-import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin';
 import { s__ } from '~/locale';
 import EnvironmentItem from './environment_item.vue';
 
@@ -16,7 +15,6 @@ export default {
     CanaryDeploymentCallout: () =>
       import('ee_component/environments/components/canary_deployment_callout.vue'),
   },
-  mixins: [environmentTableMixin],
   props: {
     environments: {
       type: Array,
@@ -33,6 +31,31 @@ export default {
       required: false,
       default: false,
     },
+    canaryDeploymentFeatureId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    helpCanaryDeploymentsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lockPromotionSvgPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCanaryDeploymentCallout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    userCalloutsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     sortedEnvironments() {
@@ -79,9 +102,15 @@ export default {
     folderUrl(model) {
       return `${window.location.pathname}/folders/${model.folderName}`;
     },
+    shouldRenderDeployBoard(model) {
+      return model.hasDeployBoard && model.isDeployBoardVisible;
+    },
     shouldRenderFolderContent(env) {
       return env.isFolder && env.isOpen && env.children && env.children.length > 0;
     },
+    shouldShowCanaryCallout(env) {
+      return env.showCanaryCallout && this.showCanaryDeploymentCallout;
+    },
     sortEnvironments(environments) {
       /*
        * The sorting algorithm should sort in the following priorities:
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index d3e8fb7ff08..7448fd584c6 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -60,7 +60,7 @@ export default {
     footer-primary-button-variant="danger"
     @submit="onSubmit"
   >
-    <template slot="header">
+    <template #header>
       <h4 class="modal-title d-flex mw-100">
         Stopping
         <span v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill">
diff --git a/app/assets/javascripts/environments/event_hub.js b/app/assets/javascripts/environments/event_hub.js
index 0948c2e5352..e31806ad199 100644
--- a/app/assets/javascripts/environments/event_hub.js
+++ b/app/assets/javascripts/environments/event_hub.js
@@ -1,3 +1,3 @@
-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-export default new Vue();
+export default createEventHub();
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index c1bfe8d05fe..56896ac4d43 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import canaryCalloutMixin from 'ee_else_ce/environments/mixins/canary_callout_mixin';
+import canaryCalloutMixin from '../mixins/canary_callout_mixin';
 import environmentsFolderApp from './environments_folder_view.vue';
 import { parseBoolean } from '../../lib/utils/common_utils';
 import Translate from '../../vue_shared/translate';
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 30b02585692..e1e356a977f 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -1,5 +1,4 @@
 <script>
-import folderMixin from 'ee_else_ce/environments/mixins/environments_folder_view_mixin';
 import environmentsMixin from '../mixins/environments_mixin';
 import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 import StopEnvironmentModal from '../components/stop_environment_modal.vue';
@@ -11,7 +10,7 @@ export default {
     DeleteEnvironmentModal,
   },
 
-  mixins: [environmentsMixin, CIPaginationMixin, folderMixin],
+  mixins: [environmentsMixin, CIPaginationMixin],
 
   props: {
     endpoint: {
@@ -30,6 +29,31 @@ export default {
       type: Boolean,
       required: true,
     },
+    canaryDeploymentFeatureId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCanaryDeploymentCallout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    userCalloutsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lockPromotionSvgPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    helpCanaryDeploymentsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   methods: {
     successCallback(resp) {
diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js
index 9a68619d4f7..4848cb0f13d 100644
--- a/app/assets/javascripts/environments/index.js
+++ b/app/assets/javascripts/environments/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import canaryCalloutMixin from 'ee_else_ce/environments/mixins/canary_callout_mixin';
+import canaryCalloutMixin from './mixins/canary_callout_mixin';
 import environmentsComponent from './components/environments_app.vue';
 import { parseBoolean } from '../lib/utils/common_utils';
 import Translate from '../vue_shared/translate';
diff --git a/app/assets/javascripts/environments/mixins/canary_callout_mixin.js b/app/assets/javascripts/environments/mixins/canary_callout_mixin.js
index f6d3d67b777..398576a31cb 100644
--- a/app/assets/javascripts/environments/mixins/canary_callout_mixin.js
+++ b/app/assets/javascripts/environments/mixins/canary_callout_mixin.js
@@ -1,5 +1,26 @@
+import { parseBoolean } from '~/lib/utils/common_utils';
+
 export default {
+  data() {
+    const data = document.querySelector(this.$options.el).dataset;
+
+    return {
+      canaryDeploymentFeatureId: data.environmentsDataCanaryDeploymentFeatureId,
+      showCanaryDeploymentCallout: parseBoolean(data.environmentsDataShowCanaryDeploymentCallout),
+      userCalloutsPath: data.environmentsDataUserCalloutsPath,
+      lockPromotionSvgPath: data.environmentsDataLockPromotionSvgPath,
+      helpCanaryDeploymentsPath: data.environmentsDataHelpCanaryDeploymentsPath,
+    };
+  },
   computed: {
-    canaryCalloutProps() {},
+    canaryCalloutProps() {
+      return {
+        canaryDeploymentFeatureId: this.canaryDeploymentFeatureId,
+        showCanaryDeploymentCallout: this.showCanaryDeploymentCallout,
+        userCalloutsPath: this.userCalloutsPath,
+        lockPromotionSvgPath: this.lockPromotionSvgPath,
+        helpCanaryDeploymentsPath: this.helpCanaryDeploymentsPath,
+      };
+    },
   },
 };
diff --git a/app/assets/javascripts/environments/mixins/container_mixin.js b/app/assets/javascripts/environments/mixins/container_mixin.js
deleted file mode 100644
index abf7d33be91..00000000000
--- a/app/assets/javascripts/environments/mixins/container_mixin.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export default {
-  props: {
-    canaryDeploymentFeatureId: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    showCanaryDeploymentCallout: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    userCalloutsPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    lockPromotionSvgPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    helpCanaryDeploymentsPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    deployBoardsHelpPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-};
diff --git a/app/assets/javascripts/environments/mixins/environment_item_mixin.js b/app/assets/javascripts/environments/mixins/environment_item_mixin.js
deleted file mode 100644
index 2dfed36ec99..00000000000
--- a/app/assets/javascripts/environments/mixins/environment_item_mixin.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  computed: {
-    deployIconName() {
-      return '';
-    },
-    shouldRenderDeployBoard() {
-      return false;
-    },
-  },
-  methods: {
-    toggleDeployBoard() {},
-  },
-};
diff --git a/app/assets/javascripts/environments/mixins/environments_app_mixin.js b/app/assets/javascripts/environments/mixins/environments_app_mixin.js
deleted file mode 100644
index fc805b9235a..00000000000
--- a/app/assets/javascripts/environments/mixins/environments_app_mixin.js
+++ /dev/null
@@ -1,32 +0,0 @@
-export default {
-  props: {
-    canaryDeploymentFeatureId: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    showCanaryDeploymentCallout: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    userCalloutsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    lockPromotionSvgPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    helpCanaryDeploymentsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  metods: {
-    toggleDeployBoard() {},
-  },
-};
diff --git a/app/assets/javascripts/environments/mixins/environments_folder_view_mixin.js b/app/assets/javascripts/environments/mixins/environments_folder_view_mixin.js
deleted file mode 100644
index e793a7cadf2..00000000000
--- a/app/assets/javascripts/environments/mixins/environments_folder_view_mixin.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export default {
-  props: {
-    canaryDeploymentFeatureId: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    showCanaryDeploymentCallout: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    userCalloutsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    lockPromotionSvgPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    helpCanaryDeploymentsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-};
diff --git a/app/assets/javascripts/environments/mixins/environments_table_mixin.js b/app/assets/javascripts/environments/mixins/environments_table_mixin.js
deleted file mode 100644
index 208f1a7373d..00000000000
--- a/app/assets/javascripts/environments/mixins/environments_table_mixin.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default {
-  methods: {
-    shouldShowCanaryCallout() {
-      return false;
-    },
-    shouldRenderDeployBoard() {
-      return false;
-    },
-  },
-};
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
index 6b7c1ff627d..1992e753255 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -58,13 +58,14 @@ export default class EnvironmentsStore {
       let filtered = {};
 
       if (env.size > 1) {
-        filtered = Object.assign({}, env, {
+        filtered = {
+          ...env,
           isFolder: true,
           isLoadingFolderContent: oldEnvironmentState.isLoading || false,
           folderName: env.name,
           isOpen: oldEnvironmentState.isOpen || false,
           children: oldEnvironmentState.children || [],
-        });
+        };
       }
 
       if (env.latest) {
@@ -133,6 +134,17 @@ export default class EnvironmentsStore {
   }
 
   /**
+   * Toggles deploy board visibility for the provided environment ID.
+   * Currently only works on EE.
+   *
+   * @param  {Object} environment
+   * @return {Array}
+   */
+  toggleDeployBoard() {
+    return this.state.environments;
+  }
+
+  /**
    * Toggles folder open property for the given folder.
    *
    * @param  {Object} folder
@@ -155,7 +167,7 @@ export default class EnvironmentsStore {
       let updated = env;
 
       if (env.latest) {
-        updated = Object.assign({}, env, env.latest);
+        updated = { ...env, ...env.latest };
         delete updated.latest;
       } else {
         updated = env;
@@ -181,7 +193,7 @@ export default class EnvironmentsStore {
     const { environments } = this.state;
 
     const updatedEnvironments = environments.map(env => {
-      const updateEnv = Object.assign({}, env);
+      const updateEnv = { ...env };
       if (env.id === environment.id) {
         updateEnv[prop] = newValue;
       }