Add newline to files in single file editor on submit

app/assets/javascripts/blob/file_template_mediator.js

@@ -82,7 +82,6 @@ export default class FileTemplateMediator {
 
   initPageEvents() {
     this.listenForFilenameInput();
-    this.prepFileContentForSubmit();
     this.listenForPreviewMode();
   }
 
@@ -92,12 +91,6 @@ export default class FileTemplateMediator {
     });
   }
 
-  prepFileContentForSubmit() {
-    this.$commitForm.submit(() => {
-      this.$fileContent.val(this.editor.getValue());
-    });
-  }
-
   listenForPreviewMode() {
     this.$navLinks.on('click', 'a', e => {
       const urlPieces = e.target.href.split('#');

app/assets/javascripts/blob_edit/edit_blob.js

@@ -6,6 +6,7 @@ import TemplateSelectorMediator from '../blob/file_template_mediator';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
 import EditorLite from '~/editor/editor_lite';
 import { FileTemplateExtension } from '~/editor/editor_file_template_ext';
+import { insertFinalNewline } from '~/lib/utils/text_utility';
 
 export default class EditBlob {
   // The options object has:
@@ -49,7 +50,7 @@ export default class EditBlob {
     });
 
     form.addEventListener('submit', () => {
-      fileContentEl.value = this.editor.getValue();
+      fileContentEl.value = insertFinalNewline(this.editor.getValue());
     });
   }
 

app/assets/javascripts/ide/lib/common/model.js

 import { editor as monacoEditor, Uri } from 'monaco-editor';
 import Disposable from './disposable';
 import eventHub from '../../eventhub';
-import { trimTrailingWhitespace, insertFinalNewline } from '../../utils';
+import { trimTrailingWhitespace } from '../../utils';
+import { insertFinalNewline } from '~/lib/utils/text_utility';
 import { defaultModelOptions } from '../editor_options';
 
 export default class Model {

app/assets/javascripts/ide/utils.js

@@ -97,10 +97,6 @@ export function trimTrailingWhitespace(content) {
   return content.replace(/[^\S\r\n]+$/gm, '');
 }
 
-export function insertFinalNewline(content, eol = '\n') {
-  return content.slice(-eol.length) !== eol ? `${content}${eol}` : content;
-}
-
 export function getPathParents(path, maxDepth = Infinity) {
   const pathComponents = path.split('/');
   const paths = [];

app/assets/javascripts/lib/utils/text_utility.js

@@ -411,3 +411,13 @@ export const hasContent = obj => isString(obj) && obj.trim() !== '';
 export const isValidSha1Hash = str => {
   return /^[0-9a-f]{5,40}$/.test(str);
 };
+
+/**
+ * Adds a final newline to the content if it doesn't already exist
+ *
+ * @param {*} content Content
+ * @param {*} endOfLine Type of newline: CRLF='\r\n', LF='\n', CR='\r'
+ */
+export function insertFinalNewline(content, endOfLine = '\n') {
+  return content.slice(-endOfLine.length) !== endOfLine ? `${content}${endOfLine}` : content;
+}

changelogs/unreleased/267514-trailing-newline.yml

+---
+title: Add final newline on submit in blob editor
+merge_request: 49681
+author:
+type: fixed

spec/frontend/blob_edit/edit_blob_spec.js

@@ -12,13 +12,18 @@ describe('Blob Editing', () => {
   const useMock = jest.fn();
   const mockInstance = {
     use: useMock,
-    getValue: jest.fn(),
+    setValue: jest.fn(),
+    getValue: jest.fn().mockReturnValue('test value'),
     focus: jest.fn(),
   };
   beforeEach(() => {
-    setFixtures(
-      `<div class="js-edit-blob-form"><div id="file_path"></div><div id="editor"></div><input id="file-content"></div>`,
-    );
+    setFixtures(`
+      <form class="js-edit-blob-form">
+        <div id="file_path"></div>
+        <div id="editor"></div>
+        <textarea id="file-content"></textarea>
+      </form>
+    `);
     jest.spyOn(EditorLite.prototype, 'createInstance').mockReturnValue(mockInstance);
   });
   afterEach(() => {
@@ -55,4 +60,15 @@ describe('Blob Editing', () => {
       expect(EditorMarkdownExtension).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('adds trailing newline to the blob content on submit', async () => {
+    const form = document.querySelector('.js-edit-blob-form');
+    const fileContentEl = document.getElementById('file-content');
+
+    await initEditor();
+
+    form.dispatchEvent(new Event('submit'));
+
+    expect(fileContentEl.value).toBe('test value\n');
+  });
 });

spec/frontend/ide/utils_spec.js

@@ -4,7 +4,6 @@ import {
   registerLanguages,
   registerSchema,
   trimPathComponents,
-  insertFinalNewline,
   trimTrailingWhitespace,
   getPathParents,
   getPathParent,
@@ -225,29 +224,6 @@ describe('WebIDE utils', () => {
     });
   });
 
-  describe('addFinalNewline', () => {
-    it.each`
-      input              | output
-      ${'some text'}     | ${'some text\n'}
-      ${'some text\n'}   | ${'some text\n'}
-      ${'some text\n\n'} | ${'some text\n\n'}
-      ${'some\n text'}   | ${'some\n text\n'}
-    `('adds a newline if it doesnt already exist for input: $input', ({ input, output }) => {
-      expect(insertFinalNewline(input)).toBe(output);
-    });
-
-    it.each`
-      input                  | output
-      ${'some text'}         | ${'some text\r\n'}
-      ${'some text\r\n'}     | ${'some text\r\n'}
-      ${'some text\n'}       | ${'some text\n\r\n'}
-      ${'some text\r\n\r\n'} | ${'some text\r\n\r\n'}
-      ${'some\r\n text'}     | ${'some\r\n text\r\n'}
-    `('works with CRLF newline style; input: $input', ({ input, output }) => {
-      expect(insertFinalNewline(input, '\r\n')).toBe(output);
-    });
-  });
-
   describe('getPathParents', () => {
     it.each`
       path                                  | parents

spec/frontend/lib/utils/text_utility_spec.js

@@ -340,4 +340,27 @@ describe('text_utility', () => {
       expect(textUtils.isValidSha1Hash(hash)).toBe(valid);
     });
   });
+
+  describe('insertFinalNewline', () => {
+    it.each`
+      input              | output
+      ${'some text'}     | ${'some text\n'}
+      ${'some text\n'}   | ${'some text\n'}
+      ${'some text\n\n'} | ${'some text\n\n'}
+      ${'some\n text'}   | ${'some\n text\n'}
+    `('adds a newline if it doesnt already exist for input: $input', ({ input, output }) => {
+      expect(textUtils.insertFinalNewline(input)).toBe(output);
+    });
+
+    it.each`
+      input                  | output
+      ${'some text'}         | ${'some text\r\n'}
+      ${'some text\r\n'}     | ${'some text\r\n'}
+      ${'some text\n'}       | ${'some text\n\r\n'}
+      ${'some text\r\n\r\n'} | ${'some text\r\n\r\n'}
+      ${'some\r\n text'}     | ${'some\r\n text\r\n'}
+    `('works with CRLF newline style; input: $input', ({ input, output }) => {
+      expect(textUtils.insertFinalNewline(input, '\r\n')).toBe(output);
+    });
+  });
 });