Move EE differences for `app/assets/javascripts/environments/components/environments_table.vue`

The file app/assets/javascripts/environments/components/environments_table.vue has differences between CE and EE.

Diferences

diff --git a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/environments/components/environments_table.vue b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/environments/components/environments_table.vue
index 75bdf87137f..08c3f5e377d 100644
--- a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/environments/components/environments_table.vue
+++ b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/environments/components/environments_table.vue
@@ -3,12 +3,21 @@
  * Render environments table.
  */
 import { GlLoadingIcon } from '@gitlab/ui';
-import environmentItem from './environment_item.vue';
+import environmentItem from './environment_item.vue'; // eslint-disable-line import/order
+
+// ee-only start
+import deployBoard from 'ee/environments/components/deploy_board_component.vue';
+import CanaryDeploymentCallout from 'ee/environments/components/canary_deployment_callout.vue';
+// ee-only end
 
 export default {
   components: {
     environmentItem,
+    deployBoard,
     GlLoadingIcon,
+    // ee-only start
+    CanaryDeploymentCallout,
+    // ee-only end
   },
 
   props: {
@@ -29,6 +38,33 @@ export default {
       required: false,
       default: false,
     },
+
+    // ee-only start
+    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,
+    },
+    // ee-only end
   },
   methods: {
     folderUrl(model) {
@@ -37,6 +73,11 @@ export default {
     shouldRenderFolderContent(env) {
       return env.isFolder && env.isOpen && env.children && env.children.length > 0;
     },
+    // ee-only start
+    shouldShowCanaryCallout(env) {
+      return env.showCanaryCallout && this.showCanaryDeploymentCallout;
+    },
+    // ee-only end
   },
 };
 </script>
@@ -68,6 +109,21 @@ export default {
         :can-read-environment="canReadEnvironment"
       />
 
+      <div
+        v-if="model.hasDeployBoard && model.isDeployBoardVisible"
+        :key="`deploy-board-row-${i}`"
+        class="js-deploy-board-row"
+      >
+        <div class="deploy-board-container">
+          <deploy-board
+            :deploy-board-data="model.deployBoardData"
+            :is-loading="model.isLoadingDeployBoard"
+            :is-empty="model.isEmptyDeployBoard"
+            :logs-path="model.logs_path"
+          />
+        </div>
+      </div>
+
       <template v-if="shouldRenderFolderContent(model)">
         <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
           <gl-loading-icon :size="2" class="prepend-top-16" />
@@ -92,6 +148,17 @@ export default {
           </div>
         </template>
       </template>
+
+      <template v-if="shouldShowCanaryCallout(model)">
+        <canary-deployment-callout
+          :key="`canary-promo-${i}`"
+          :canary-deployment-feature-id="canaryDeploymentFeatureId"
+          :user-callouts-path="userCalloutsPath"
+          :lock-promotion-svg-path="lockPromotionSvgPath"
+          :help-canary-deployments-path="helpCanaryDeploymentsPath"
+          :data-js-canary-promo-key="i"
+        />
+      </template>
     </template>
   </div>
 </template>

What needs to be done

1. Use mixins & async imports