1 files changed, 154 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/lint/ci_lint_results.vue b/app/assets/javascripts/ci/pipeline_editor/components/lint/ci_lint_results.vue
new file mode 100644
index 00000000000..0f19b9386e6
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_editor/components/lint/ci_lint_results.vue
@@ -0,0 +1,154 @@
+<script>
+import { GlAlert, GlLink, GlSprintf, GlTableLite } from '@gitlab/ui';
+import { __ } from '~/locale';
+import CiLintResultsParam from './ci_lint_results_param.vue';
+import CiLintResultsValue from './ci_lint_results_value.vue';
+import CiLintWarnings from './ci_lint_warnings.vue';
+
+const thBorderColor = 'gl-border-gray-100!';
+
+export default {
+  correct: {
+    variant: 'success',
+    text: __('Syntax is correct.'),
+  },
+  incorrect: {
+    variant: 'danger',
+    text: __('Syntax is incorrect.'),
+  },
+  includesText: __(
+    'CI configuration validated, including all configuration added with the %{codeStart}include%{codeEnd} keyword. %{link}',
+  ),
+  warningTitle: __('The form contains the following warning:'),
+  fields: [
+    {
+      key: 'parameter',
+      label: __('Parameter'),
+      thClass: thBorderColor,
+    },
+    {
+      key: 'value',
+      label: __('Value'),
+      thClass: thBorderColor,
+    },
+  ],
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+    GlTableLite,
+    CiLintWarnings,
+    CiLintResultsValue,
+    CiLintResultsParam,
+  },
+  props: {
+    errors: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hideAlert: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isValid: {
+      type: Boolean,
+      required: true,
+    },
+    jobs: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    lintHelpPagePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    warnings: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      isWarningDismissed: false,
+    };
+  },
+  computed: {
+    status() {
+      return this.isValid ? this.$options.correct : this.$options.incorrect;
+    },
+    shouldShowTable() {
+      return this.errors.length === 0;
+    },
+    shouldShowError() {
+      return this.errors.length > 0;
+    },
+    shouldShowWarning() {
+      return this.warnings.length > 0 && !this.isWarningDismissed;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-alert
+      v-if="!hideAlert"
+      class="gl-mb-5"
+      :variant="status.variant"
+      :title="__('Status:')"
+      :dismissible="false"
+      data-testid="ci-lint-status"
+      >{{ status.text }}
+      <gl-sprintf :message="$options.includesText">
+        <template #code="{ content }">
+          <code>
+            {{ content }}
+          </code>
+        </template>
+        <template #link>
+          <gl-link :href="lintHelpPagePath" target="_blank">
+            {{ __('More information') }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+
+    <pre
+      v-if="shouldShowError"
+      class="gl-mb-5"
+      data-testid="ci-lint-errors"
+    ><div v-for="error in errors" :key="error">{{ error }}</div></pre>
+
+    <ci-lint-warnings
+      v-if="shouldShowWarning"
+      :warnings="warnings"
+      data-testid="ci-lint-warnings"
+      @dismiss="isWarningDismissed = true"
+    />
+
+    <gl-table-lite
+      v-if="shouldShowTable"
+      :items="jobs"
+      :fields="$options.fields"
+      bordered
+      data-testid="ci-lint-table"
+    >
+      <template #cell(parameter)="{ item }">
+        <ci-lint-results-param :stage="item.stage" :job-name="item.name" />
+      </template>
+      <template #cell(value)="{ item }">
+        <ci-lint-results-value :item="item" :dry-run="dryRun" />
+      </template>
+    </gl-table-lite>
+  </div>
+</template>