Reduces EE differences for environments table

Async loads EE components
Creates a Mixin for EE properties

4 files changed, 65 insertions, 7 deletions

diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index eef141a07ba..ff4e16178e8 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -4,21 +4,24 @@
  */
 import { GlLoadingIcon } from '@gitlab/ui';
 import _ from 'underscore';
-import environmentItem from './environment_item.vue';
+import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin';
+import EnvironmentItem from './environment_item.vue';
 
 export default {
   components: {
-    environmentItem,
+    EnvironmentItem,
     GlLoadingIcon,
+    DeployBoard: () => import('ee_component/environments/components/deploy_board_component.vue'),
+    CanaryDeploymentCallout: () =>
+      import('ee_component/environments/components/canary_deployment_callout.vue'),
   },
-
+  mixins: [environmentTableMixin],
   props: {
     environments: {
       type: Array,
       required: true,
       default: () => [],
     },
-
     canReadEnvironment: {
       type: Boolean,
       required: false,
@@ -95,6 +98,21 @@ export default {
         :can-read-environment="canReadEnvironment"
       />
 
+      <div
+        v-if="shouldRenderDeployBoard"
+        :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" />
@@ -111,13 +129,24 @@ export default {
 
           <div :key="`sub-div-${i}`">
             <div class="text-center prepend-top-10">
-              <a :href="folderUrl(model)" class="btn btn-default">{{
-                s__('Environments|Show all')
-              }}</a>
+              <a :href="folderUrl(model)" class="btn btn-default">
+                {{ s__('Environments|Show all') }}
+              </a>
             </div>
           </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>
diff --git a/app/assets/javascripts/environments/mixins/environments_table_mixin.js b/app/assets/javascripts/environments/mixins/environments_table_mixin.js
new file mode 100644
index 00000000000..208f1a7373d
--- /dev/null
+++ b/app/assets/javascripts/environments/mixins/environments_table_mixin.js
@@ -0,0 +1,10 @@
+export default {
+  methods: {
+    shouldShowCanaryCallout() {
+      return false;
+    },
+    shouldRenderDeployBoard() {
+      return false;
+    },
+  },
+};
diff --git a/changelogs/unreleased/10081-env-table.yml b/changelogs/unreleased/10081-env-table.yml
new file mode 100644
index 00000000000..b27a1be8cca
--- /dev/null
+++ b/changelogs/unreleased/10081-env-table.yml
@@ -0,0 +1,5 @@
+---
+title: Removes EE differences for environments_table.vue
+merge_request:
+author:
+type: other
diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js
index ecd28594873..a3f34232a85 100644
--- a/spec/javascripts/environments/environment_table_spec.js
+++ b/spec/javascripts/environments/environment_table_spec.js
@@ -6,6 +6,14 @@ describe('Environment table', () => {
   let Component;
   let vm;
 
+  const eeOnlyProps = {
+    canaryDeploymentFeatureId: 'canary_deployment',
+    showCanaryDeploymentCallout: true,
+    userCalloutsPath: '/callouts',
+    lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
+    helpCanaryDeploymentsPath: 'help/canary-deployments',
+  };
+
   beforeEach(() => {
     Component = Vue.extend(environmentTableComp);
   });
@@ -27,6 +35,7 @@ describe('Environment table', () => {
     vm = mountComponent(Component, {
       environments: [mockItem],
       canReadEnvironment: true,
+      ...eeOnlyProps,
     });
 
     expect(vm.$el.getAttribute('class')).toContain('ci-table');
@@ -67,6 +76,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
+        ...eeOnlyProps,
       });
 
       const [old, newer, older, noDeploy] = mockItems;
@@ -130,6 +140,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
+        ...eeOnlyProps,
       });
 
       const [prod, review, staging] = mockItems;
@@ -166,6 +177,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
+        ...eeOnlyProps,
       });
 
       const [old, newer, older] = mockItems;
@@ -192,6 +204,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
+        ...eeOnlyProps,
       });
 
       const [old, newer, older] = mockItems;
@@ -240,6 +253,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
+        ...eeOnlyProps,
       });
 
       expect(vm.sortedEnvironments.map(env => env.name)).toEqual([