1 files changed, 24 insertions, 16 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results_value.vue b/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results_value.vue
index 4929c3206df..ef2be2a5fba 100644
--- a/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results_value.vue
+++ b/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results_value.vue
@@ -14,7 +14,7 @@ export default {
   },
   computed: {
     tagList() {
-      return this.item.tagList.join(', ');
+      return this.item.tags?.join(', ');
     },
     onlyPolicy() {
       return this.item.only ? this.item.only.refs.join(', ') : this.item.only;
@@ -26,15 +26,15 @@ export default {
       return {
         beforeScript: {
           show: !isEmpty(this.item.beforeScript),
-          content: this.item.beforeScript.join('\n'),
+          content: this.item.beforeScript?.join('\n'),
         },
         script: {
           show: !isEmpty(this.item.script),
-          content: this.item.script.join('\n'),
+          content: this.item.script?.join('\n'),
         },
         afterScript: {
           show: !isEmpty(this.item.afterScript),
-          content: this.item.afterScript.join('\n'),
+          content: this.item.afterScript?.join('\n'),
         },
       };
     },
@@ -43,35 +43,43 @@ export default {
 </script>
 
 <template>
-  <div>
-    <pre v-if="scripts.beforeScript.show" data-testid="ci-lint-before-script">{{
-      scripts.beforeScript.content
-    }}</pre>
-    <pre v-if="scripts.script.show" data-testid="ci-lint-script">{{ scripts.script.content }}</pre>
-    <pre v-if="scripts.afterScript.show" data-testid="ci-lint-after-script">{{
-      scripts.afterScript.content
+  <div data-testid="ci-lint-value">
+    <pre
+      v-if="scripts.beforeScript.show"
+      class="gl-white-space-pre-wrap"
+      data-testid="ci-lint-before-script"
+      >{{ scripts.beforeScript.content }}</pre
+    >
+    <pre v-if="scripts.script.show" class="gl-white-space-pre-wrap" data-testid="ci-lint-script">{{
+      scripts.script.content
     }}</pre>
+    <pre
+      v-if="scripts.afterScript.show"
+      class="gl-white-space-pre-wrap"
+      data-testid="ci-lint-after-script"
+      >{{ scripts.afterScript.content }}</pre
+    >
 
     <ul class="gl-list-style-none gl-pl-0 gl-mb-0">
-      <li>
+      <li v-if="tagList">
         <b>{{ __('Tag list:') }}</b>
         {{ tagList }}
       </li>
       <div v-if="!dryRun" data-testid="ci-lint-only-except">
-        <li>
+        <li v-if="onlyPolicy">
           <b>{{ __('Only policy:') }}</b>
           {{ onlyPolicy }}
         </li>
-        <li>
+        <li v-if="exceptPolicy">
           <b>{{ __('Except policy:') }}</b>
           {{ exceptPolicy }}
         </li>
       </div>
-      <li>
+      <li v-if="item.environment">
         <b>{{ __('Environment:') }}</b>
         {{ item.environment }}
       </li>
-      <li>
+      <li v-if="item.when">
         <b>{{ __('When:') }}</b>
         {{ item.when }}
         <b v-if="item.allowFailure">{{ __('Allowed to fail') }}</b>