Pipeline Graph Structural Update: Menu Bugfix

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

@@ -78,11 +78,7 @@ export default {
       return `ci-badge-${escape(group.name)}`;
     },
     isFadedOut(jobName) {
-      return (
-        this.jobHovered &&
-        this.highlightedJobs.length > 1 &&
-        !this.highlightedJobs.includes(jobName)
-      );
+      return this.highlightedJobs.length > 1 && !this.highlightedJobs.includes(jobName);
     },
   },
 };
@@ -126,12 +122,9 @@ export default {
           :class="{ 'gl-opacity-3': isFadedOut(group.name) }"
           @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
         />
-        <job-group-dropdown
-          v-else
-          :group="group"
-          :pipeline-id="pipelineId"
-          :class="{ 'gl-opacity-3': isFadedOut(group.name) }"
-        />
+        <div v-else :class="{ 'gl-opacity-3': isFadedOut(group.name) }">
+          <job-group-dropdown :group="group" :pipeline-id="pipelineId" />
+        </div>
       </div>
     </template>
   </main-graph-wrapper>

spec/frontend/pipelines/graph/graph_component_spec.js

@@ -22,6 +22,13 @@ describe('graph component', () => {
     pipeline: generateResponse(mockPipelineResponse, 'root/fungi-xoxo'),
   };
 
+  const defaultData = {
+    measurements: {
+      width: 800,
+      height: 800,
+    },
+  };
+
   const createComponent = ({
     data = {},
     mountFn = shallowMount,
@@ -34,7 +41,10 @@ describe('graph component', () => {
         ...props,
       },
       data() {
-        return { ...data };
+        return {
+          ...defaultData,
+          ...data,
+        };
       },
       provide: {
         dataMethod: GRAPHQL,