7 files changed, 79 insertions, 6 deletions
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index bd29a266ccd..8ea1f082787 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -484,6 +484,9 @@ setup-test-env:
 
 build-qa-image:
   <<: *review-docker
+  variables:
+    <<: *review-docker-variables
+    GIT_DEPTH: "20"
   stage: prepare
   script:
     - time docker build --cache-from ${LATEST_QA_IMAGE} --tag ${QA_IMAGE} ./qa/
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 6ece8b92a30..be80661223c 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -1,14 +1,16 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import tablePagination from '../../vue_shared/components/table_pagination.vue';
-import environmentTable from '../components/environments_table.vue';
+import TablePagination from '~/vue_shared/components/table_pagination.vue';
+import containerMixin from 'ee_else_ce/environments/mixins/container_mixin';
+import EnvironmentTable from '../components/environments_table.vue';
 
 export default {
   components: {
-    environmentTable,
-    tablePagination,
+    EnvironmentTable,
+    TablePagination,
     GlLoadingIcon,
   },
+  mixins: [containerMixin],
   props: {
     isLoading: {
       type: Boolean,
@@ -47,7 +49,15 @@ export default {
     <slot name="emptyState"></slot>
 
     <div v-if="!isLoading && environments.length > 0" class="table-holder">
-      <environment-table :environments="environments" :can-read-environment="canReadEnvironment" />
+      <environment-table
+        :environments="environments"
+        :can-read-environment="canReadEnvironment"
+        :canary-deployment-feature-id="canaryDeploymentFeatureId"
+        :show-canary-deployment-callout="showCanaryDeploymentCallout"
+        :user-callouts-path="userCalloutsPath"
+        :lock-promotion-svg-path="lockPromotionSvgPath"
+        :help-canary-deployments-path="helpCanaryDeploymentsPath"
+      />
 
       <table-pagination
         v-if="pagination && pagination.totalPages > 1"
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 1e89dce69cb..a092bdfbc6c 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -4,6 +4,7 @@ import _ from 'underscore';
 import { GlTooltipDirective } from '@gitlab/ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
@@ -34,10 +35,10 @@ export default {
     TerminalButtonComponent,
     MonitoringButtonComponent,
   },
-
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [environmentItemMixin],
 
   props: {
     model: {
@@ -467,9 +468,18 @@ export default {
       <div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
         {{ s__('Environments|Environment') }}
       </div>
+
+      <span v-if="shouldRenderDeployBoard" 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/mixins/container_mixin.js b/app/assets/javascripts/environments/mixins/container_mixin.js
new file mode 100644
index 00000000000..f2907c120f8
--- /dev/null
+++ b/app/assets/javascripts/environments/mixins/container_mixin.js
@@ -0,0 +1,29 @@
+export default {
+  props: {
+    canaryDeploymentFeatureId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    showCanaryDeploymentCallout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    userCalloutsPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    lockPromotionSvgPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    helpCanaryDeploymentsPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+};
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..2dfed36ec99
--- /dev/null
+++ b/app/assets/javascripts/environments/mixins/environment_item_mixin.js
@@ -0,0 +1,13 @@
+export default {
+  computed: {
+    deployIconName() {
+      return '';
+    },
+    shouldRenderDeployBoard() {
+      return false;
+    },
+  },
+  methods: {
+    toggleDeployBoard() {},
+  },
+};
diff --git a/changelogs/unreleased/10029-env-item.yml b/changelogs/unreleased/10029-env-item.yml
new file mode 100644
index 00000000000..f4e742d3e17
--- /dev/null
+++ b/changelogs/unreleased/10029-env-item.yml
@@ -0,0 +1,5 @@
+---
+title: Removes EE differences for environment_item.vue
+merge_request:
+author:
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index df69e86c1ad..4751b7264a5 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3196,6 +3196,9 @@ msgstr ""
 msgid "Environments|You don't have any environments right now"
 msgstr ""
 
+msgid "Environments|protected"
+msgstr ""
+
 msgid "Epic"
 msgstr ""