Removes EE code for environments10081-environments-ee

8 files changed, 103 insertions, 49 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 1e89dce69cb..3adc237c94b 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -2,18 +2,19 @@
 import Timeago from 'timeago.js';
 import _ from 'underscore';
 import { GlTooltipDirective } from '@gitlab/ui';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { CLUSTER_TYPE } from '~/clusters/constants';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import CommitComponent from '~/vue_shared/components/commit.vue';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
 import RollbackComponent from './environment_rollback.vue';
 import TerminalButtonComponent from './environment_terminal_button.vue';
 import MonitoringButtonComponent from './environment_monitoring.vue';
-import CommitComponent from '../../vue_shared/components/commit.vue';
 import eventHub from '../event_hub';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { CLUSTER_TYPE } from '~/clusters/constants';
+import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
 
 /**
  * Environment Item Component
@@ -34,25 +35,22 @@ export default {
     TerminalButtonComponent,
     MonitoringButtonComponent,
   },
-
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-
+  mixins: [environmentItemMixin],
   props: {
     model: {
       type: Object,
       required: true,
       default: () => ({}),
     },
-
     canReadEnvironment: {
       type: Boolean,
       required: false,
       default: false,
     },
   },
-
   computed: {
     /**
      * Verifies if `last_deployment` key exists in the current Environment.
@@ -67,7 +65,6 @@ export default {
       }
       return false;
     },
-
     /**
      * Checkes whether the environment is protected.
      * (`is_protected` currently only set in EE)
@@ -77,7 +74,6 @@ export default {
     isProtected() {
       return this.model && this.model.is_protected;
     },
-
     /**
      * Hide group cluster features which are not currently implemented.
      *
@@ -86,7 +82,6 @@ export default {
     disableGroupClusterFeatures() {
       return this.model && this.model.cluster_type === CLUSTER_TYPE.GROUP;
     },
-
     /**
      * Returns whether the environment can be stopped.
      *
@@ -95,7 +90,6 @@ export default {
     canStopEnvironment() {
       return this.model && this.model.can_stop;
     },
-
     /**
      * Verifies if the `deployable` key is present in `last_deployment` key.
      * Used to verify whether we should or not render the rollback partial.
@@ -111,7 +105,6 @@ export default {
         this.model.last_deployment.deployable.retry_path
       );
     },
-
     /**
      * Verifies if the date to be shown is present.
      *
@@ -125,7 +118,6 @@ export default {
         this.model.last_deployment.deployable !== undefined
       );
     },
-
     /**
      * Human readable date.
      *
@@ -142,7 +134,6 @@ export default {
       }
       return '';
     },
-
     actions() {
       if (!this.model || !this.model.last_deployment) {
         return [];
@@ -158,7 +149,6 @@ export default {
         name: action.name,
       }));
     },
-
     /**
      * Builds the string used in the user image alt attribute.
      *
@@ -175,7 +165,6 @@ export default {
       }
       return '';
     },
-
     /**
      * If provided, returns the commit tag.
      *
@@ -187,7 +176,6 @@ export default {
       }
       return undefined;
     },
-
     /**
      * If provided, returns the commit ref.
      *
@@ -199,7 +187,6 @@ export default {
       }
       return undefined;
     },
-
     /**
      * If provided, returns the commit url.
      *
@@ -216,7 +203,6 @@ export default {
       }
       return undefined;
     },
-
     /**
      * If provided, returns the commit short sha.
      *
@@ -233,7 +219,6 @@ export default {
       }
       return undefined;
     },
-
     /**
      * If provided, returns the commit title.
      *
@@ -250,7 +235,6 @@ export default {
       }
       return undefined;
     },
-
     /**
      * If provided, returns the commit tag.
      *
@@ -268,7 +252,6 @@ export default {
 
       return undefined;
     },
-
     /**
      * Verifies if the `retry_path` key is present and returns its value.
      *
@@ -285,7 +268,6 @@ export default {
       }
       return undefined;
     },
-
     /**
      * Verifies if the `last?` key is present and returns its value.
      *
@@ -294,7 +276,6 @@ export default {
     isLastDeployment() {
       return this.model && this.model.last_deployment && this.model.last_deployment['last?'];
     },
-
     /**
      * Builds the name of the builds needed to display both the name and the id.
      *
@@ -307,7 +288,6 @@ export default {
       }
       return '';
     },
-
     /**
      * Builds the needed string to show the internal id.
      *
@@ -319,7 +299,6 @@ export default {
       }
       return '';
     },
-
     /**
      * Verifies if the user object is present under last_deployment object.
      *
@@ -332,7 +311,6 @@ export default {
         !_.isEmpty(this.model.last_deployment.user)
       );
     },
-
     /**
      * Returns the user object nested with the last_deployment object.
      * Used to render the template.
@@ -349,7 +327,6 @@ export default {
       }
       return {};
     },
-
     /**
      * Verifies if the build name column should be rendered by verifing
      * if all the information needed is present
@@ -364,7 +341,6 @@ export default {
         !_.isEmpty(this.model.last_deployment.deployable)
       );
     },
-
     /**
      * Verifies the presence of all the keys needed to render the buil_path.
      *
@@ -382,7 +358,6 @@ export default {
 
       return '';
     },
-
     /**
      * Verifies the presence of all the keys needed to render the external_url.
      *
@@ -395,7 +370,6 @@ export default {
 
       return '';
     },
-
     /**
      * Verifies if deplyment internal ID should be rendered by verifing
      * if all the information needed is present
@@ -410,7 +384,6 @@ export default {
         this.model.last_deployment.iid !== undefined
       );
     },
-
     environmentPath() {
       if (this.model && this.model.environment_path) {
         return this.model.environment_path;
@@ -418,7 +391,6 @@ export default {
 
       return '';
     },
-
     monitoringUrl() {
       if (this.model && this.model.metrics_path) {
         return this.model.metrics_path;
@@ -426,7 +398,6 @@ export default {
 
       return '';
     },
-
     displayEnvironmentActions() {
       return (
         this.actions.length > 0 ||
@@ -436,12 +407,10 @@ export default {
         this.canRetry
       );
     },
-
     folderIconName() {
       return this.model.isOpen ? 'chevron-down' : 'chevron-right';
     },
   },
-
   methods: {
     onClickFolder() {
       eventHub.$emit('toggleFolder', this.model);
@@ -467,9 +436,18 @@ export default {
       <div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
         {{ s__('Environments|Environment') }}
       </div>
+
+      <span v-if="shouldRenderDeplopyBoard" class="deploy-board-icon" @click="toggleDeployBoard">
+        <icon :name="deployIconName" />
+      </span>
+
       <span v-if="!model.isFolder" class="environment-name table-mobile-content">
         <a class="qa-environment-link" :href="environmentPath"> {{ model.name }} </a>
+        <span v-if="isProtected" class="badge badge-success">
+          {{ s__('Environments|protected') }}
+        </span>
       </span>
+
       <span v-else class="folder-name" role="button" @click="onClickFolder">
         <icon :name="folderIconName" class="folder-icon" />
 
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index eef141a07ba..0c3618c9897 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 EnvironmentItem from './environment_item.vue';
+import environmentsTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin.js';
 
 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: [environmentsTableMixin],
   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="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" />
@@ -118,6 +136,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>
diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js
index 6af66d0f86e..bd71779ec32 100644
--- a/app/assets/javascripts/environments/index.js
+++ b/app/assets/javascripts/environments/index.js
@@ -1,7 +1,8 @@
 import Vue from 'vue';
-import environmentsComponent from './components/environments_app.vue';
+import EnvironmentsComponent from './components/environments_app.vue';
 import { parseBoolean } from '../lib/utils/common_utils';
 import Translate from '../vue_shared/translate';
+import CanaryCalloutMixin from 'ee_else_ce/environments/mixins/canary_callout_mixin';
 
 Vue.use(Translate);
 
@@ -9,8 +10,9 @@ export default () =>
   new Vue({
     el: '#environments-list-view',
     components: {
-      environmentsComponent,
+      EnvironmentsComponent,
     },
+    mixins: [CanaryCalloutMixin],
     data() {
       const environmentsData = document.querySelector(this.$options.el).dataset;
 
@@ -32,6 +34,7 @@ export default () =>
           cssContainerClass: this.cssContainerClass,
           canCreateEnvironment: this.canCreateEnvironment,
           canReadEnvironment: this.canReadEnvironment,
+          ...calloutProps,
         },
       });
     },
diff --git a/app/assets/javascripts/environments/mixins/canary_callout_mixin.js b/app/assets/javascripts/environments/mixins/canary_callout_mixin.js
new file mode 100644
index 00000000000..0b520edc43c
--- /dev/null
+++ b/app/assets/javascripts/environments/mixins/canary_callout_mixin.js
@@ -0,0 +1,7 @@
+export default {
+  computed: {
+    calloutProps() {
+      return {};
+    },
+  },
+};
diff --git a/app/assets/javascripts/environments/mixins/environment_item_mixin.js b/app/assets/javascripts/environments/mixins/environment_item_mixin.js
new file mode 100644
index 00000000000..6da9ec7ecbf
--- /dev/null
+++ b/app/assets/javascripts/environments/mixins/environment_item_mixin.js
@@ -0,0 +1,10 @@
+export default {
+  computed: {
+    shouldRenderDeployBoard() {
+      return false;
+    },
+  },
+  methods: {
+    toggleDeployBoard: () => {},
+  },
+};
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..9b78251d4a8
--- /dev/null
+++ b/app/assets/javascripts/environments/mixins/environments_table_mixin.js
@@ -0,0 +1,7 @@
+export default {
+  methods: {
+    shouldShowCanaryCallout() {
+      return false;
+    },
+  },
+};
diff --git a/spec/javascripts/environments/environment_item_spec.js b/spec/javascripts/environments/environment_item_spec.js
index a89e50045da..928bb26f646 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -20,23 +20,26 @@ describe('Environment item', () => {
         size: 3,
         isFolder: true,
         environment_path: 'url',
+        log_path: 'url',
       };
 
       component = new EnvironmentItem({
         propsData: {
           model: mockItem,
           canReadEnvironment: true,
+          toggleDeployBoard: () => {},
+          store: {},
           service: {},
         },
       }).$mount();
     });
 
-    it('Should render folder icon and name', () => {
+    it('should render folder icon and name', () => {
       expect(component.$el.querySelector('.folder-name').textContent).toContain(mockItem.name);
       expect(component.$el.querySelector('.folder-icon')).toBeDefined();
     });
 
-    it('Should render the number of children in a badge', () => {
+    it('should render the number of children in a badge', () => {
       expect(component.$el.querySelector('.folder-name .badge').textContent).toContain(
         mockItem.size,
       );
@@ -109,6 +112,7 @@ describe('Environment item', () => {
         },
         has_stop_action: true,
         environment_path: 'root/ci-folders/environments/31',
+        log_path: 'root/ci-folders/environments/31/logs',
         created_at: '2016-11-07T11:11:16.525Z',
         updated_at: '2016-11-10T15:55:58.778Z',
       };
@@ -117,6 +121,8 @@ describe('Environment item', () => {
         propsData: {
           model: environment,
           canReadEnvironment: true,
+          toggleDeployBoard: () => {},
+          store: {},
           service: {},
         },
       }).$mount();
@@ -157,13 +163,13 @@ describe('Environment item', () => {
       });
 
       describe('With build url', () => {
-        it('Should link to build url provided', () => {
+        it('should link to build url provided', () => {
           expect(component.$el.querySelector('.build-link').getAttribute('href')).toEqual(
             environment.last_deployment.deployable.build_path,
           );
         });
 
-        it('Should render deployable name and id', () => {
+        it('should render deployable name and id', () => {
           expect(component.$el.querySelector('.build-link').getAttribute('href')).toEqual(
             environment.last_deployment.deployable.build_path,
           );
@@ -178,7 +184,7 @@ describe('Environment item', () => {
     });
 
     describe('With manual actions', () => {
-      it('Should render actions component', () => {
+      it('should render actions component', () => {
         expect(component.$el.querySelector('.js-manual-actions-container')).toBeDefined();
       });
     });
@@ -190,13 +196,13 @@ describe('Environment item', () => {
     });
 
     describe('With stop action', () => {
-      it('Should render stop action component', () => {
+      it('should render stop action component', () => {
         expect(component.$el.querySelector('.js-stop-component-container')).toBeDefined();
       });
     });
 
     describe('With retry action', () => {
-      it('Should render rollback component', () => {
+      it('should render rollback component', () => {
         expect(component.$el.querySelector('.js-rollback-component-container')).toBeDefined();
       });
     });
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([