Merge branch 'dmishunov-editor-lite-reusability' into 'master'

Improve re-usability of Editor Lite

See merge request gitlab-org/gitlab!45083

app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue

@@ -123,7 +123,7 @@ export default {
 };
 </script>
 <template>
-  <div class="form-group file-editor">
+  <div class="form-group">
     <label :for="firstInputId">{{ s__('Snippets|Files') }}</label>
     <snippet-blob-edit
       v-for="(blobId, index) in blobIds"

app/assets/javascripts/vue_shared/components/editor_lite.vue

@@ -57,6 +57,9 @@ export default {
     fileName(newVal) {
       this.editor.updateModelLanguage(newVal);
     },
+    value(newVal) {
+      this.editor.setValue(newVal);
+    },
   },
   mounted() {
     this.editor = initEditorLite({
@@ -83,9 +86,12 @@ export default {
 };
 </script>
 <template>
-  <div class="file-content code">
-    <div id="editor" ref="editor" data-editor-loading @editor-ready="$emit('editor-ready')">
-      <pre class="editor-loading-content">{{ value }}</pre>
-    </div>
+  <div
+    :id="`editor-lite-${fileGlobalId}`"
+    ref="editor"
+    data-editor-loading
+    @editor-ready="$emit('editor-ready')"
+  >
+    <pre class="editor-loading-content">{{ value }}</pre>
   </div>
 </template>

app/assets/stylesheets/framework/editor-lite.scss

-.monaco-editor.gl-editor-lite {
-  .line-numbers {
-    @include gl-pt-0;
-  }
+[id^='editor-lite-'] {
+  height: 500px;
 }

qa/qa/page/component/new_snippet.rb

@@ -79,7 +79,7 @@ module QA
         private
 
         def text_area
-          find('#editor textarea', visible: false)
+          find('.monaco-editor textarea', visible: false)
         end
       end
     end

qa/qa/page/dashboard/snippet/edit.rb

@@ -26,7 +26,7 @@ module QA
           private
 
           def text_area
-            find('#editor textarea', visible: false)
+            find('.monaco-editor textarea', visible: false)
           end
         end
       end

spec/frontend/vue_shared/components/__snapshots__/editor_lite_spec.js.snap

@@ -2,17 +2,13 @@
 
 exports[`Editor Lite component rendering matches the snapshot 1`] = `
 <div
-  class="file-content code"
+  data-editor-loading=""
+  id="editor-lite-snippet_777"
 >
-  <div
-    data-editor-loading=""
-    id="editor"
+  <pre
+    class="editor-loading-content"
   >
-    <pre
-      class="editor-loading-content"
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </pre>
-  </div>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </pre>
 </div>
 `;

spec/frontend/vue_shared/components/editor_lite_spec.js

@@ -10,6 +10,7 @@ describe('Editor Lite component', () => {
   const onDidChangeModelContent = jest.fn();
   const updateModelLanguage = jest.fn();
   const getValue = jest.fn();
+  const setValue = jest.fn();
   const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
   const fileName = 'lorem.txt';
   const fileGlobalId = 'snippet_777';
@@ -17,6 +18,7 @@ describe('Editor Lite component', () => {
     onDidChangeModelContent,
     updateModelLanguage,
     getValue,
+    setValue,
     dispose: jest.fn(),
   }));
   Editor.mockImplementation(() => {
@@ -68,7 +70,7 @@ describe('Editor Lite component', () => {
       createComponent({ value: undefined });
 
       expect(spy).not.toHaveBeenCalled();
-      expect(wrapper.find('#editor').exists()).toBe(true);
+      expect(wrapper.find('[id^="editor-lite-"]').exists()).toBe(true);
     });
 
     it('initialises Editor Lite instance', () => {
@@ -94,6 +96,17 @@ describe('Editor Lite component', () => {
       });
     });
 
+    it('reacts to the changes in the pased value', async () => {
+      const newValue = 'New Value';
+
+      wrapper.setProps({
+        value: newValue,
+      });
+
+      await nextTick();
+      expect(setValue).toHaveBeenCalledWith(newValue);
+    });
+
     it('registers callback with editor onChangeContent', () => {
       expect(onDidChangeModelContent).toHaveBeenCalledWith(expect.any(Function));
     });

spec/support/helpers/features/snippet_helpers.rb

@@ -31,7 +31,7 @@ module Spec
           end
 
           def snippet_get_first_blob_value
-            page.find('.file-content', match: :first)
+            page.find('.gl-editor-lite', match: :first)
           end
 
           def snippet_description_value
@@ -53,7 +53,7 @@ module Spec
           end
 
           def snippet_fill_in_content(value)
-            page.within('.file-editor') do
+            page.within('.gl-editor-lite') do
               el = find('.inputarea')
               el.send_keys value
             end