1 files changed, 109 insertions, 3 deletions
diff --git a/app/assets/javascripts/ci_lint/components/ci_lint.vue b/app/assets/javascripts/ci_lint/components/ci_lint.vue
index 135d02e4f76..2532f4b86d2 100644
--- a/app/assets/javascripts/ci_lint/components/ci_lint.vue
+++ b/app/assets/javascripts/ci_lint/components/ci_lint.vue
@@ -1,14 +1,120 @@
 <script>
+import { GlButton, GlFormCheckbox, GlIcon, GlLink, GlAlert } from '@gitlab/ui';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import CiLintResults from './ci_lint_results.vue';
+import lintCIMutation from '../graphql/mutations/lint_ci.mutation.graphql';
+
 export default {
+  components: {
+    GlButton,
+    GlFormCheckbox,
+    GlIcon,
+    GlLink,
+    GlAlert,
+    CiLintResults,
+    EditorLite,
+  },
   props: {
     endpoint: {
       type: String,
       required: true,
     },
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      content: '',
+      valid: false,
+      errors: null,
+      warnings: null,
+      jobs: [],
+      dryRun: false,
+      showingResults: false,
+      apiError: null,
+      isErrorDismissed: false,
+    };
+  },
+  computed: {
+    shouldShowError() {
+      return this.apiError && !this.isErrorDismissed;
+    },
+  },
+  methods: {
+    async lint() {
+      try {
+        const {
+          data: {
+            lintCI: { valid, errors, warnings, jobs },
+          },
+        } = await this.$apollo.mutate({
+          mutation: lintCIMutation,
+          variables: { endpoint: this.endpoint, content: this.content, dry: this.dryRun },
+        });
+
+        this.showingResults = true;
+        this.valid = valid;
+        this.errors = errors;
+        this.warnings = warnings;
+        this.jobs = jobs;
+      } catch (error) {
+        this.apiError = error;
+        this.isErrorDismissed = false;
+      }
+    },
+    clear() {
+      this.content = '';
+    },
   },
 };
 </script>
 
-<template
-  ><div></div
-></template>
+<template>
+  <div class="row">
+    <div class="col-sm-12">
+      <gl-alert
+        v-if="shouldShowError"
+        class="gl-mb-3"
+        variant="danger"
+        @dismiss="isErrorDismissed = true"
+        >{{ apiError }}</gl-alert
+      >
+      <div class="file-holder gl-mb-3">
+        <div class="js-file-title file-title clearfix">
+          {{ __('Contents of .gitlab-ci.yml') }}
+        </div>
+        <editor-lite v-model="content" file-name="*.yml" />
+      </div>
+    </div>
+
+    <div class="col-sm-12 gl-display-flex gl-justify-content-space-between">
+      <div class="gl-display-flex gl-align-items-center">
+        <gl-button
+          class="gl-mr-4"
+          category="primary"
+          variant="success"
+          data-testid="ci-lint-validate"
+          @click="lint"
+          >{{ __('Validate') }}</gl-button
+        >
+        <gl-form-checkbox v-model="dryRun"
+          >{{ __('Simulate a pipeline created for the default branch') }}
+          <gl-link :href="helpPagePath" target="_blank"
+            ><gl-icon class="gl-text-blue-600" name="question-o"/></gl-link
+        ></gl-form-checkbox>
+      </div>
+      <gl-button data-testid="ci-lint-clear" @click="clear">{{ __('Clear') }}</gl-button>
+    </div>
+
+    <ci-lint-results
+      v-if="showingResults"
+      :valid="valid"
+      :jobs="jobs"
+      :errors="errors"
+      :warnings="warnings"
+      :dry-run="dryRun"
+    />
+  </div>
+</template>