Remove extra gap when 0 roadmap epics have children

When none of the epics shown in a roadmap view have children, remove the
unnecessary gap that is left for the show/hide children toggle button.

Changelog: fixed
EE: true

ee/app/assets/javascripts/roadmap/components/epic_item.vue

@@ -45,6 +45,11 @@ export default {
       type: Object,
       required: true,
     },
+    epicsHaveChildren: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     clientWidth: {
       type: Number,
       required: false,
@@ -166,6 +171,7 @@ export default {
     >
       <epic-item-details
         :epic="epic"
+        :epics-have-children="epicsHaveChildren"
         :timeframe-string="timeframeString(epic)"
         :child-level="childLevel"
         :is-expanded="isExpanded"
@@ -203,6 +209,7 @@ export default {
     </div>
     <epic-item-container
       v-if="hasChildrenToShow"
+      :epics-have-children="epicsHaveChildren"
       :client-width="clientWidth"
       :children="childEpics"
       :child-level="childLevel + 1"

ee/app/assets/javascripts/roadmap/components/epic_item_container.vue

@@ -12,6 +12,11 @@ export default {
       required: false,
       default: 0,
     },
+    epicsHaveChildren: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     children: {
       type: Array,
       required: true,
@@ -33,6 +38,7 @@ export default {
       v-for="child in children"
       :key="generateKey(child)"
       :epic="child"
+      :epics-have-children="epicsHaveChildren"
       :client-width="clientWidth"
       :child-level="childLevel"
     />

ee/app/assets/javascripts/roadmap/components/epic_item_details.vue

@@ -24,6 +24,11 @@ export default {
       type: Object,
       required: true,
     },
+    epicsHaveChildren: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     timeframeString: {
       type: String,
       required: true,
@@ -168,7 +173,10 @@ export default {
     >
       <span ref="expandCollapseInfo">
         <gl-button
-          :class="{ invisible: isExpandIconHidden }"
+          :class="{
+            invisible: isExpandIconHidden,
+            'gl-hidden': !epicsHaveChildren,
+          }"
           :aria-label="expandIconLabel"
           category="tertiary"
           size="small"

ee/app/assets/javascripts/roadmap/components/epics_list_section.vue

@@ -37,6 +37,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    epicsHaveChildren: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     hasNextPage: {
       type: Boolean,
       required: true,
@@ -177,6 +182,7 @@ export default {
       ref="epicItems"
       :key="generateKey(epic)"
       :epic="epic"
+      :epics-have-children="epicsHaveChildren"
       :timeframe="timeframe"
       :client-width="clientWidth"
       :child-level="0"

ee/app/assets/javascripts/roadmap/components/roadmap_shell.vue

@@ -122,6 +122,9 @@ export default {
     footerMessageHeight() {
       return document.querySelector('.footer-message')?.getBoundingClientRect().height || 0;
     },
+    epicsHaveChildren() {
+      return this.epics.some((epic) => epic.hasChildren);
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -172,6 +175,7 @@ export default {
       :epics="epics"
       :timeframe="timeframe"
       :epics-fetch-next-page-in-progress="epicsFetchNextPageInProgress"
+      :epics-have-children="epicsHaveChildren"
       :has-next-page="hasNextPage"
       :buffer-size="bufferSize"
       @scrolledToEnd="$emit('scrolledToEnd')"