1 files changed, 19 insertions, 9 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
index 3a2b8a20bae..11ad2f2a3b6 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue
@@ -97,15 +97,20 @@ export default {
         this.reportFailure(DRAW_FAILURE);
       }
     },
-    getStageBackgroundClass(index) {
+    getStageBackgroundClasses(index) {
       const { length } = this.pipelineData.stages;
-
+      // It's possible for a graph to have only one stage, in which
+      // case we concatenate both the left and right rounding classes
       if (length === 1) {
-        return 'stage-rounded';
-      } else if (index === 0) {
-        return 'stage-left-rounded';
-      } else if (index === length - 1) {
-        return 'stage-right-rounded';
+        return 'gl-rounded-bottom-left-6 gl-rounded-top-left-6 gl-rounded-bottom-right-6 gl-rounded-top-right-6';
+      }
+
+      if (index === 0) {
+        return 'gl-rounded-bottom-left-6 gl-rounded-top-left-6';
+      }
+
+      if (index === length - 1) {
+        return 'gl-rounded-bottom-right-6 gl-rounded-top-right-6';
       }
 
       return '';
@@ -162,7 +167,11 @@ export default {
       {{ failure.text }}
     </gl-alert>
     <gl-alert v-if="isPipelineDataEmpty" variant="tip" :dismissible="false">
-      {{ __('No content to show') }}
+      {{
+        __(
+          'The visualization will appear in this tab when the CI/CD configuration file is populated with valid syntax.',
+        )
+      }}
     </gl-alert>
     <div
       v-else
@@ -190,7 +199,8 @@ export default {
       >
         <div
           class="gl-display-flex gl-align-items-center gl-bg-white gl-w-full gl-px-8 gl-py-4 gl-mb-5"
-          :class="getStageBackgroundClass(index)"
+          :class="getStageBackgroundClasses(index)"
+          data-testid="stage-background"
         >
           <stage-pill :stage-name="stage.name" :is-empty="stage.groups.length === 0" />
         </div>