Merge branch '332443-environments-folders-currently-breaking-the-page-layout' into 'master'

Resolve "Environments Folders currently breaking the page layout"

See merge request gitlab-org/gitlab!64280

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

@@ -552,6 +552,9 @@ export default {
         { 'gl-display-none gl-md-display-block': !this.upcomingDeployment },
       ];
     },
+    tableNameSpacingClass() {
+      return this.isFolder ? 'section-100' : this.tableData.name.spacing;
+    },
   },
 
   methods: {
@@ -588,8 +591,9 @@ export default {
   >
     <div
       class="table-section section-wrap text-truncate"
-      :class="tableData.name.spacing"
+      :class="tableNameSpacingClass"
       role="gridcell"
+      data-testid="environment-name-cell"
     >
       <div v-if="!isFolder" class="table-mobile-header" role="rowheader">
         {{ getMobileViewTitleForField('name') }}
@@ -632,9 +636,11 @@ export default {
     </div>
 
     <div
+      v-if="!isFolder"
       class="table-section deployment-column d-none d-md-block"
       :class="tableData.deploy.spacing"
       role="gridcell"
+      data-testid="enviornment-deployment-id-cell"
     >
       <span v-if="shouldRenderDeploymentID" class="text-break-word">
         {{ deploymentInternalId }}
@@ -656,7 +662,13 @@ export default {
       </div>
     </div>
 
-    <div class="table-section d-none d-md-block" :class="tableData.build.spacing" role="gridcell">
+    <div
+      v-if="!isFolder"
+      class="table-section d-none d-md-block"
+      :class="tableData.build.spacing"
+      role="gridcell"
+      data-testid="environment-build-cell"
+    >
       <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link cgray">
         <tooltip-on-truncate
           :title="buildName"

spec/frontend/environments/environment_item_spec.js

@@ -285,6 +285,17 @@ describe('Environment item', () => {
     it('should not render the "Upcoming deployment" column', () => {
       expect(findUpcomingDeployment().exists()).toBe(false);
     });
+
+    it('should set the name cell to be full width', () => {
+      expect(wrapper.find('[data-testid="environment-name-cell"]').classes('section-100')).toBe(
+        true,
+      );
+    });
+
+    it('should hide non-folder properties', () => {
+      expect(wrapper.find('[data-testid="environment-deployment-id-cell"]').exists()).toBe(false);
+      expect(wrapper.find('[data-testid="environment-build-cell"]').exists()).toBe(false);
+    });
   });
 
   describe('When environment can be deleted', () => {