Merge branch '212320-mixin-env_app' into 'master'

Move environments_app_mixin out of ee folder

See merge request gitlab-org/gitlab!29987

app/assets/javascripts/environments/components/environments_app.vue

 <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);
 

app/assets/javascripts/environments/mixins/environments_app_mixin.js

-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() {},
-  },
-};

app/assets/javascripts/environments/stores/environments_store.js

@@ -132,6 +132,17 @@ export default class EnvironmentsStore {
     return count;
   }
 
+  /**
+   * 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.
    *

ee/app/assets/javascripts/environments/mixins/environments_app_mixin.js

-import eventHub from '~/environments/event_hub';
-
-export default {
-  props: {
-    canaryDeploymentFeatureId: {
-      type: String,
-      required: true,
-    },
-    showCanaryDeploymentCallout: {
-      type: Boolean,
-      required: true,
-    },
-    userCalloutsPath: {
-      type: String,
-      required: true,
-    },
-    lockPromotionSvgPath: {
-      type: String,
-      required: true,
-    },
-    helpCanaryDeploymentsPath: {
-      type: String,
-      required: true,
-    },
-  },
-
-  created() {
-    eventHub.$on('toggleDeployBoard', this.toggleDeployBoard);
-  },
-
-  beforeDestroy() {
-    eventHub.$off('toggleDeployBoard');
-  },
-
-  methods: {
-    /**
-     * Toggles the visibility of the deploy boards of the clicked environment.
-     * @param {Object} model
-     */
-    toggleDeployBoard(model) {
-      this.store.toggleDeployBoard(model.id);
-    },
-  },
-};