Port of protected environments frontend changes from EE to CE

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

@@ -86,6 +86,28 @@ export default {
       );
     },
 
+    /**
+     * Checkes whether the user is allowed to deploy to this environment.
+     * (`can_deploy` currently only set in EE)
+     *
+     * @returns {Boolean}
+     */
+    isDeployableByUser() {
+      return this.model && 'can_deploy' in this.model
+        ? this.model.can_deploy
+        : this.canCreateDeployment;
+    },
+
+    /**
+     * Checkes whether the environment is protected.
+     * (`is_protected` currently only set in EE)
+     *
+     * @returns {Boolean}
+     */
+    isProtected() {
+      return this.model && this.model.is_protected;
+    },
+
     /**
      * Returns whether the environment can be stopped.
      *
@@ -455,7 +477,7 @@ export default {
     class="gl-responsive-table-row"
     role="row">
     <div
-      class="table-section section-10"
+      class="table-section section-wrap section-15"
       role="gridcell"
     >
       <div
@@ -465,16 +487,17 @@ export default {
       >
         {{ s__("Environments|Environment") }}
       </div>
-      <a
-        v-if="!model.isFolder"
-        :href="environmentPath"
-        class="environment-name flex-truncate-parent table-mobile-content">
       <span
+        v-if="!model.isFolder"
+        class="environment-name table-mobile-content">
+        <a
           v-tooltip
+          :href="environmentPath"
           :title="model.name"
-          class="flex-truncate-child"
-        >{{ model.name }}</span>
+        >
+          {{ model.name }}
         </a>
+      </span>
       <span
         v-else
         class="folder-name"
@@ -548,7 +571,7 @@ export default {
 
     <div
       v-if="!model.isFolder"
-      class="table-section section-25"
+      class="table-section section-20"
       role="gridcell"
     >
       <div
@@ -612,7 +635,7 @@ export default {
         />
 
         <actions-component
-          v-if="hasManualActions && canCreateDeployment"
+          v-if="hasManualActions && isDeployableByUser"
           :actions="manualActions"
         />
 
@@ -622,7 +645,7 @@ export default {
         />
 
         <rollback-component
-          v-if="canRetry && canCreateDeployment"
+          v-if="canRetry && isDeployableByUser"
           :is-last-deployment="isLastDeployment"
           :retry-url="retryUrl"
         />

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

@@ -15,7 +15,7 @@ export default {
     environments: {
       type: Array,
       required: true,
-      default: () => ([]),
+      default: () => [],
     },
 
     canReadEnvironment: {
@@ -35,10 +35,7 @@ export default {
       return `${window.location.pathname}/folders/${model.folderName}`;
     },
     shouldRenderFolderContent(env) {
-      return env.isFolder &&
-        env.isOpen &&
-        env.children &&
-        env.children.length > 0;
+      return env.isFolder && env.isOpen && env.children && env.children.length > 0;
     },
   },
 };
@@ -53,7 +50,7 @@ export default {
       role="row"
     >
       <div
-        class="table-section section-10 environments-name"
+        class="table-section section-15 environments-name"
         role="columnheader"
       >
         {{ s__("Environments|Environment") }}
@@ -71,7 +68,7 @@ export default {
         {{ s__("Environments|Job") }}
       </div>
       <div
-        class="table-section section-25 environments-commit"
+        class="table-section section-20 environments-commit"
         role="columnheader"
       >
         {{ s__("Environments|Commit") }}
@@ -91,7 +88,7 @@ export default {
         :model="model"
         :can-create-deployment="canCreateDeployment"
         :can-read-environment="canReadEnvironment"
-        :key="i"
+        :key="`environment-item-${i}`"
       />
 
       <template

app/views/projects/settings/ci_cd/show.html.haml

@@ -28,6 +28,8 @@
   .settings-content
     = render 'autodevops_form'
 
+= render_if_exists 'projects/settings/ci_cd/protected_environments', expanded: expanded
+
 %section.qa-runners-settings.settings.no-animate#js-runners-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4