Add latest changes from gitlab-org/gitlab@master

1 files changed, 20 insertions, 6 deletions

diff --git a/app/assets/javascripts/ci_lint/components/ci_lint.vue b/app/assets/javascripts/ci_lint/components/ci_lint.vue
index 871aaecd165..2532f4b86d2 100644
--- a/app/assets/javascripts/ci_lint/components/ci_lint.vue
+++ b/app/assets/javascripts/ci_lint/components/ci_lint.vue
@@ -1,5 +1,6 @@
 <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';
 
@@ -11,6 +12,7 @@ export default {
     GlLink,
     GlAlert,
     CiLintResults,
+    EditorLite,
   },
   props: {
     endpoint: {
@@ -62,6 +64,9 @@ export default {
         this.isErrorDismissed = false;
       }
     },
+    clear() {
+      this.content = '';
+    },
   },
 };
 </script>
@@ -76,22 +81,31 @@ export default {
         @dismiss="isErrorDismissed = true"
         >{{ apiError }}</gl-alert
       >
-
-      <textarea v-model="content" cols="175" rows="20"></textarea>
+      <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" @click="lint">{{
-          __('Validate')
-        }}</gl-button>
+        <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>{{ __('Clear') }}</gl-button>
+      <gl-button data-testid="ci-lint-clear" @click="clear">{{ __('Clear') }}</gl-button>
     </div>
 
     <ci-lint-results