Reduces EE differences for environments table

Async loads EE components
Creates a Mixin for EE properties

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

@@ -4,62 +4,29 @@
  */
 import { GlLoadingIcon } from '@gitlab/ui';
 import _ from 'underscore';
-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
+import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin';
+import EnvironmentItem from './environment_item.vue';
 
 export default {
   components: {
-    environmentItem,
-    deployBoard,
+    EnvironmentItem,
     GlLoadingIcon,
-    // ee-only start
-    CanaryDeploymentCallout,
-    // ee-only end
+    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,
       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
   },
   computed: {
     sortedEnvironments() {
@@ -101,11 +68,6 @@ export default {
         .sortBy(env => (env.isFolder ? -1 : 1))
         .value();
     },
-    // ee-only start
-    shouldShowCanaryCallout(env) {
-      return env.showCanaryCallout && this.showCanaryDeploymentCallout;
-    },
-    // ee-only end
   },
 };
 </script>
@@ -137,7 +99,7 @@ export default {
       />
 
       <div
-        v-if="model.hasDeployBoard && model.isDeployBoardVisible"
+        v-if="shouldRenderDeployBoard(model)"
         :key="`deploy-board-row-${i}`"
         class="js-deploy-board-row"
       >
@@ -167,9 +129,9 @@ 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>

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

+export default {
+  methods: {
+    shouldShowCanaryCallout() {
+      return false;
+    },
+    shouldRenderDeployBoard() {
+      return false;
+    },
+  },
+};

changelogs/unreleased/10081-env-table.yml

+---
+title: Removes EE differences for environments_table.vue
+merge_request:
+author:
+type: other

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

+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,
+    },
+  },
+  methods: {
+    shouldShowCanaryCallout(env) {
+      return env.showCanaryCallout && this.showCanaryDeploymentCallout;
+    },
+    shouldRenderDeployBoard(model) {
+      return model.hasDeployBoard && model.isDeployBoardVisible;
+    },
+  },
+};

ee/spec/javascripts/environments/environments_table_spec.js

@@ -28,13 +28,11 @@ describe('Environment table', () => {
     vm = mountComponent(Component, {
       environments: [mockItem],
       canReadEnvironment: true,
-      // ee-only start
       canaryDeploymentFeatureId: 'canary_deployment',
       showCanaryDeploymentCallout: true,
       userCalloutsPath: '/callouts',
       lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
       helpCanaryDeploymentsPath: 'help/canary-deployments',
-      // ee-only end
     });
 
     expect(vm.$el.getAttribute('class')).toContain('ci-table');
@@ -57,13 +55,11 @@ describe('Environment table', () => {
       environments: [mockItem],
       canCreateDeployment: false,
       canReadEnvironment: true,
-      // ee-only start
       canaryDeploymentFeatureId: 'canary_deployment',
       showCanaryDeploymentCallout: true,
       userCalloutsPath: '/callouts',
       lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
       helpCanaryDeploymentsPath: 'help/canary-deployments',
-      // ee-only end
     });
 
     expect(vm.$el.querySelector('.js-deploy-board-row')).toBeDefined();
@@ -95,19 +91,16 @@ describe('Environment table', () => {
     vm = mountComponent(Component, {
       environments: [mockItem],
       canReadEnvironment: true,
-      // ee-only start
       canaryDeploymentFeatureId: 'canary_deployment',
       showCanaryDeploymentCallout: true,
       userCalloutsPath: '/callouts',
       lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
       helpCanaryDeploymentsPath: 'help/canary-deployments',
-      // ee-only end
     });
 
     vm.$el.querySelector('.deploy-board-icon').click();
   });
 
-  // ee-only start
   it('should render canary callout', () => {
     const mockItem = {
       name: 'review',
@@ -131,5 +124,4 @@ describe('Environment table', () => {
 
     expect(vm.$el.querySelector('.canary-deployment-callout')).not.toBeNull();
   });
-  // ee-only end
 });

spec/javascripts/environments/environment_table_spec.js

@@ -5,21 +5,17 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper';
 describe('Environment table', () => {
   let Component;
   let vm;
-  // ee-only start
-  let eeOnlyProps;
-  // ee-only end
+
+  const eeOnlyProps = {
+    canaryDeploymentFeatureId: 'canary_deployment',
+    showCanaryDeploymentCallout: true,
+    userCalloutsPath: '/callouts',
+    lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
+    helpCanaryDeploymentsPath: 'help/canary-deployments',
+  };
 
   beforeEach(() => {
     Component = Vue.extend(environmentTableComp);
-    // ee-only start
-    eeOnlyProps = {
-      canaryDeploymentFeatureId: 'canary_deployment',
-      showCanaryDeploymentCallout: true,
-      userCalloutsPath: '/callouts',
-      lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
-      helpCanaryDeploymentsPath: 'help/canary-deployments',
-    };
-    // ee-only end
   });
 
   afterEach(() => {
@@ -39,9 +35,7 @@ describe('Environment table', () => {
     vm = mountComponent(Component, {
       environments: [mockItem],
       canReadEnvironment: true,
-      // ee-only start
       ...eeOnlyProps,
-      // ee-only end
     });
 
     expect(vm.$el.getAttribute('class')).toContain('ci-table');
@@ -82,9 +76,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
-        // ee-only start
         ...eeOnlyProps,
-        // ee-only end
       });
 
       const [old, newer, older, noDeploy] = mockItems;
@@ -148,9 +140,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
-        // ee-only start
         ...eeOnlyProps,
-        // ee-only end
       });
 
       const [prod, review, staging] = mockItems;
@@ -187,9 +177,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
-        // ee-only start
         ...eeOnlyProps,
-        // ee-only end
       });
 
       const [old, newer, older] = mockItems;
@@ -216,9 +204,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
-        // ee-only start
         ...eeOnlyProps,
-        // ee-only end
       });
 
       const [old, newer, older] = mockItems;
@@ -267,9 +253,7 @@ describe('Environment table', () => {
       vm = mountComponent(Component, {
         environments: mockItems,
         canReadEnvironment: true,
-        // ee-only start
         ...eeOnlyProps,
-        // ee-only end
       });
 
       expect(vm.sortedEnvironments.map(env => env.name)).toEqual([