Merge branch 'himkp-ide-new-utils' into 'master'

Web IDE: Add new utils: addFinalNewline, getPathParents

See merge request gitlab-org/gitlab!32420

app/assets/javascripts/ide/components/repo_editor.vue

@@ -14,6 +14,7 @@ import Editor from '../lib/editor';
 import FileTemplatesBar from './file_templates/bar.vue';
 import { __ } from '~/locale';
 import { extractMarkdownImagesFromEntries } from '../stores/utils';
+import { addFinalNewline } from '../utils';
 
 export default {
   components: {
@@ -31,6 +32,7 @@ export default {
     return {
       content: '',
       images: {},
+      addFinalNewline: true,
     };
   },
   computed: {
@@ -247,13 +249,14 @@ export default {
 
       this.model.onChange(model => {
         const { file } = model;
+        if (!file.active) return;
 
-        if (file.active) {
-          this.changeFileContent({
-            path: file.path,
-            content: model.getModel().getValue(),
-          });
-        }
+        const monacoModel = model.getModel();
+        const content = monacoModel.getValue();
+        this.changeFileContent({
+          path: file.path,
+          content: this.addFinalNewline ? addFinalNewline(content, monacoModel.getEOL()) : content,
+        });
       });
 
       // Handle Cursor Position

app/assets/javascripts/ide/stores/actions/file.js

@@ -4,7 +4,7 @@ import eventHub from '../../eventhub';
 import service from '../../services';
 import * as types from '../mutation_types';
 import router from '../../ide_router';
-import { addFinalNewlineIfNeeded, setPageTitleForFile } from '../utils';
+import { setPageTitleForFile } from '../utils';
 import { viewerTypes, stageKeys } from '../../constants';
 
 export const closeFile = ({ commit, state, dispatch }, file) => {
@@ -152,7 +152,7 @@ export const changeFileContent = ({ commit, state, getters }, { path, content })
   const file = state.entries[path];
   commit(types.UPDATE_FILE_CONTENT, {
     path,
-    content: addFinalNewlineIfNeeded(content),
+    content,
   });
 
   const indexOfChangedFile = state.changedFiles.findIndex(f => f.path === path);

app/assets/javascripts/ide/stores/utils.js

@@ -272,10 +272,6 @@ export const pathsAreEqual = (a, b) => {
   return cleanA === cleanB;
 };
 
-// if the contents of a file dont end with a newline, this function adds a newline
-export const addFinalNewlineIfNeeded = content =>
-  content.charAt(content.length - 1) !== '\n' ? `${content}\n` : content;
-
 export function extractMarkdownImagesFromEntries(mdFile, entries) {
   /**
    * Regex to identify an image tag in markdown, like:

app/assets/javascripts/ide/utils.js

@@ -76,3 +76,21 @@ export function registerLanguages(def, ...defs) {
 }
 
 export const otherSide = side => (side === SIDE_RIGHT ? SIDE_LEFT : SIDE_RIGHT);
+
+export function addFinalNewline(content, eol = '\n') {
+  return content.slice(-eol.length) !== eol ? `${content}${eol}` : content;
+}
+
+export function getPathParents(path) {
+  const pathComponents = path.split('/');
+  const paths = [];
+  while (pathComponents.length) {
+    pathComponents.pop();
+
+    let parentPath = pathComponents.join('/');
+    if (parentPath.startsWith('/')) parentPath = parentPath.slice(1);
+    if (parentPath) paths.push(parentPath);
+  }
+
+  return paths;
+}

spec/frontend/ide/components/repo_editor_spec.js

@@ -283,15 +283,25 @@ describe('RepoEditor', () => {
       expect(vm.model.events.size).toBe(2);
     });
 
-    it('updates state when model content changed', done => {
-      vm.model.setValue('testing 123\n');
-
-      setImmediate(() => {
-        expect(vm.file.content).toBe('testing 123\n');
-
-        done();
-      });
-    });
+    it.each`
+      insertFinalNewline | input              | eol       | output
+      ${true}            | ${'testing 123\n'} | ${'\n'}   | ${'testing 123\n'}
+      ${true}            | ${'testing 123'}   | ${'\n'}   | ${'testing 123\n'}
+      ${false}           | ${'testing 123'}   | ${'\n'}   | ${'testing 123'}
+      ${true}            | ${'testing 123'}   | ${'\r\n'} | ${'testing 123\r\n'}
+      ${false}           | ${'testing 123'}   | ${'\r\n'} | ${'testing 123'}
+    `(
+      'updates state with "$output" if `this.insertFinalNewline` is $insertFinalNewline',
+      ({ insertFinalNewline, input, eol, output }) => {
+        jest.spyOn(vm.model.getModel(), 'getEOL').mockReturnValue(eol);
+
+        vm.addFinalNewline = insertFinalNewline;
+
+        vm.model.setValue(input);
+
+        expect(vm.file.content).toBe(output);
+      },
+    );
 
     it('sets head model as staged file', () => {
       jest.spyOn(vm.editor, 'createModel');

spec/frontend/ide/stores/utils_spec.js

@@ -661,31 +661,6 @@ describe('Multi-file store utils', () => {
     });
   });
 
-  describe('addFinalNewlineIfNeeded', () => {
-    it('adds a newline if it doesnt already exist', () => {
-      [
-        {
-          input: 'some text',
-          output: 'some text\n',
-        },
-        {
-          input: 'some text\n',
-          output: 'some text\n',
-        },
-        {
-          input: 'some text\n\n',
-          output: 'some text\n\n',
-        },
-        {
-          input: 'some\n text',
-          output: 'some\n text\n',
-        },
-      ].forEach(({ input, output }) => {
-        expect(utils.addFinalNewlineIfNeeded(input)).toEqual(output);
-      });
-    });
-  });
-
   describe('extractMarkdownImagesFromEntries', () => {
     let mdFile;
     let entries;

spec/frontend/ide/utils_spec.js

-import { isTextFile, registerLanguages, trimPathComponents } from '~/ide/utils';
+import {
+  isTextFile,
+  registerLanguages,
+  trimPathComponents,
+  addFinalNewline,
+  getPathParents,
+} from '~/ide/utils';
 import { languages } from 'monaco-editor';
 
 describe('WebIDE utils', () => {
@@ -148,4 +154,39 @@ 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(addFinalNewline(input)).toEqual(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(addFinalNewline(input, '\r\n')).toEqual(output);
+    });
+  });
+
+  describe('getPathParents', () => {
+    it.each`
+      path                                  | parents
+      ${'foo/bar/baz/index.md'}             | ${['foo/bar/baz', 'foo/bar', 'foo']}
+      ${'foo/bar/baz'}                      | ${['foo/bar', 'foo']}
+      ${'index.md'}                         | ${[]}
+      ${'path with/spaces to/something.md'} | ${['path with/spaces to', 'path with']}
+    `('gets all parent directory names for path: $path', ({ path, parents }) => {
+      expect(getPathParents(path)).toEqual(parents);
+    });
+  });
 });