Merge branch '23352-editorconfig' into 'master'

Support EditorConfig inside of the Web IDE

See merge request gitlab-org/gitlab!32378

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

@@ -15,6 +15,8 @@ import FileTemplatesBar from './file_templates/bar.vue';
 import { __ } from '~/locale';
 import { extractMarkdownImagesFromEntries } from '../stores/utils';
 import { getPathParent, readFileAsDataURL } from '../utils';
+import { getRulesWithTraversal } from '../lib/editorconfig/parser';
+import mapRulesToMonaco from '../lib/editorconfig/rules_mapper';
 
 export default {
   components: {
@@ -32,6 +34,7 @@ export default {
     return {
       content: '',
       images: {},
+      rules: {},
     };
   },
   computed: {
@@ -195,7 +198,7 @@ export default {
 
       this.editor.clearEditor();
 
-      this.fetchFileData()
+      Promise.all([this.fetchFileData(), this.fetchEditorconfigRules()])
         .then(() => {
           this.createEditorInstance();
         })
@@ -254,6 +257,8 @@ export default {
         this.editor.attachModel(this.model);
       }
 
+      this.model.updateOptions(this.rules);
+
       this.model.onChange(model => {
         const { file } = model;
         if (!file.active) return;
@@ -280,12 +285,29 @@ export default {
       this.setFileLanguage({
         fileLanguage: this.model.language,
       });
+
+      this.$emit('editorSetup');
     },
     refreshEditorDimensions() {
       if (this.showEditor) {
         this.editor.updateDimensions();
       }
     },
+    fetchEditorconfigRules() {
+      return getRulesWithTraversal(this.file.path, path => {
+        const entry = this.entries[path];
+        if (!entry) return Promise.resolve(null);
+
+        const content = entry.content || entry.raw;
+        if (content) return Promise.resolve(content);
+
+        return this.getFileData({ path: entry.path, makeFileActive: false }).then(() =>
+          this.getRawFileData({ path: entry.path }),
+        );
+      }).then(rules => {
+        this.rules = mapRulesToMonaco(rules);
+      });
+    },
     onPaste(event) {
       const editor = this.editor.instance;
       const reImage = /^image\/(png|jpg|jpeg|gif)$/;

app/assets/javascripts/ide/lib/editorconfig/parser.js

+import { parseString } from 'editorconfig/src/lib/ini';
+import minimatch from 'minimatch';
+import { getPathParents } from '../../utils';
+
+const dirname = path => path.replace(/\.editorconfig$/, '');
+
+function isRootConfig(config) {
+  return config.some(([pattern, rules]) => !pattern && rules?.root === 'true');
+}
+
+function getRulesForSection(path, [pattern, rules]) {
+  if (!pattern) {
+    return {};
+  }
+  if (minimatch(path, pattern, { matchBase: true })) {
+    return rules;
+  }
+
+  return {};
+}
+
+function getRulesWithConfigs(filePath, configFiles = [], rules = {}) {
+  if (!configFiles.length) return rules;
+
+  const [{ content, path: configPath }, ...nextConfigs] = configFiles;
+  const configDir = dirname(configPath);
+
+  if (!filePath.startsWith(configDir)) return rules;
+
+  const parsed = parseString(content);
+  const isRoot = isRootConfig(parsed);
+  const relativeFilePath = filePath.slice(configDir.length);
+
+  const sectionRules = parsed.reduce(
+    (acc, section) => Object.assign(acc, getRulesForSection(relativeFilePath, section)),
+    {},
+  );
+
+  // prefer existing rules by overwriting to section rules
+  const result = Object.assign(sectionRules, rules);
+
+  return isRoot ? result : getRulesWithConfigs(filePath, nextConfigs, result);
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function getRulesWithTraversal(filePath, getFileContent) {
+  const editorconfigPaths = [
+    ...getPathParents(filePath).map(x => `${x}/.editorconfig`),
+    '.editorconfig',
+  ];
+
+  return Promise.all(
+    editorconfigPaths.map(path => getFileContent(path).then(content => ({ path, content }))),
+  ).then(results => getRulesWithConfigs(filePath, results.filter(x => x.content)));
+}

app/assets/javascripts/ide/lib/editorconfig/rules_mapper.js

+import { isBoolean, isNumber } from 'lodash';
+
+const map = (key, validValues) => value =>
+  value in validValues ? { [key]: validValues[value] } : {};
+
+const bool = key => value => (isBoolean(value) ? { [key]: value } : {});
+
+const int = (key, isValid) => value =>
+  isNumber(value) && isValid(value) ? { [key]: Math.trunc(value) } : {};
+
+const rulesMapper = {
+  indent_style: map('insertSpaces', { tab: false, space: true }),
+  indent_size: int('tabSize', n => n > 0),
+  tab_width: int('tabSize', n => n > 0),
+  trim_trailing_whitespace: bool('trimTrailingWhitespace'),
+  end_of_line: map('endOfLine', { crlf: 1, lf: 0 }),
+  insert_final_newline: bool('insertFinalNewline'),
+};
+
+const parseValue = x => {
+  let value = typeof x === 'string' ? x.toLowerCase() : x;
+  if (/^[0-9.-]+$/.test(value)) value = Number(value);
+  if (value === 'true') value = true;
+  if (value === 'false') value = false;
+
+  return value;
+};
+
+export default function mapRulesToMonaco(rules) {
+  return Object.entries(rules).reduce((obj, [key, value]) => {
+    return Object.assign(obj, rulesMapper[key]?.(parseValue(value)) || {});
+  }, {});
+}

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

@@ -15,8 +15,7 @@ import routerModule from './modules/router';
 
 Vue.use(Vuex);
 
-export const createStore = () =>
-  new Vuex.Store({
+export const createStoreOptions = () => ({
   state: state(),
   actions,
   mutations,
@@ -31,6 +30,8 @@ export const createStore = () =>
     clientside: clientsideModule(),
     router: routerModule,
   },
-  });
+});
+
+export const createStore = () => new Vuex.Store(createStoreOptions());
 
 export default createStore();

changelogs/unreleased/23352-editorconfig.yml

+---
+title: Support reading .editorconfig files inside of the Web IDE
+merge_request: 32378
+author:
+type: added

package.json

@@ -79,6 +79,7 @@
     "diff": "^3.4.0",
     "document-register-element": "1.14.3",
     "dropzone": "^4.2.0",
+    "editorconfig": "^0.15.3",
     "emoji-regex": "^7.0.3",
     "emoji-unicode-version": "^0.2.1",
     "exports-loader": "^0.7.0",
@@ -103,6 +104,7 @@
     "marked": "^0.3.12",
     "mermaid": "^8.5.1",
     "mersenne-twister": "1.1.0",
+    "minimatch": "^3.0.4",
     "mitt": "^1.2.0",
     "monaco-editor": "^0.18.1",
     "monaco-editor-webpack-plugin": "^1.7.0",

spec/frontend/__mocks__/monaco-editor/index.js

@@ -9,5 +9,8 @@ import 'monaco-editor/esm/vs/language/json/monaco.contribution';
 import 'monaco-editor/esm/vs/language/html/monaco.contribution';
 import 'monaco-editor/esm/vs/basic-languages/monaco.contribution';
 
+// This language starts trying to spin up web workers which obviously breaks in Jest environment
+jest.mock('monaco-editor/esm/vs/language/typescript/tsMode');
+
 export * from 'monaco-editor/esm/vs/editor/editor.api';
 export default global.monaco;

spec/frontend/ide/components/repo_editor_spec.js

+import Vuex from 'vuex';
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import '~/behaviors/markdown/render_gfm';
 import { Range } from 'monaco-editor';
 import axios from '~/lib/utils/axios_utils';
-import { createStore } from '~/ide/stores';
-import repoEditor from '~/ide/components/repo_editor.vue';
+import { createStoreOptions } from '~/ide/stores';
+import RepoEditor from '~/ide/components/repo_editor.vue';
 import Editor from '~/ide/lib/editor';
 import { leftSidebarViews, FILE_VIEW_MODE_EDITOR, FILE_VIEW_MODE_PREVIEW } from '~/ide/constants';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { file } from '../helpers';
+import { exampleConfigs, exampleFiles } from '../lib/editorconfig/mock_data';
 
 describe('RepoEditor', () => {
   let vm;
   let store;
+  let mockActions;
+
+  const waitForEditorSetup = () =>
+    new Promise(resolve => {
+      vm.$once('editorSetup', resolve);
+    });
+
+  const createComponent = () => {
+    if (vm) {
+      throw new Error('vm already exists');
+    }
+    vm = createComponentWithStore(Vue.extend(RepoEditor), store, {
+      file: store.state.openFiles[0],
+    });
+    vm.$mount();
+  };
+
+  const createOpenFile = path => {
+    const origFile = store.state.openFiles[0];
+    const newFile = { ...origFile, path, key: path };
+
+    store.state.entries[path] = newFile;
+
+    store.state.openFiles = [newFile];
+  };
 
   beforeEach(() => {
+    mockActions = {
+      getFileData: jest.fn().mockResolvedValue(),
+      getRawFileData: jest.fn().mockResolvedValue(),
+    };
+
     const f = {
       ...file(),
       viewMode: FILE_VIEW_MODE_EDITOR,
     };
-    const RepoEditor = Vue.extend(repoEditor);
 
-    store = createStore();
-    vm = createComponentWithStore(RepoEditor, store, {
-      file: f,
-    });
+    const storeOptions = createStoreOptions();
+    storeOptions.actions = {
+      ...storeOptions.actions,
+      ...mockActions,
+    };
+    store = new Vuex.Store(storeOptions);
 
     f.active = true;
     f.tempFile = true;
 
-    vm.$store.state.openFiles.push(f);
-    vm.$store.state.projects = {
+    store.state.openFiles.push(f);
+    store.state.projects = {
       'gitlab-org/gitlab': {
         branches: {
           master: {
@@ -43,27 +76,28 @@ describe('RepoEditor', () => {
         },
       },
     };
-    vm.$store.state.currentProjectId = 'gitlab-org/gitlab';
-    vm.$store.state.currentBranchId = 'master';
+    store.state.currentProjectId = 'gitlab-org/gitlab';
+    store.state.currentBranchId = 'master';
 
-    Vue.set(vm.$store.state.entries, f.path, f);
-
-    jest.spyOn(vm, 'getFileData').mockResolvedValue();
-    jest.spyOn(vm, 'getRawFileData').mockResolvedValue();
-
-    vm.$mount();
-
-    return vm.$nextTick();
+    Vue.set(store.state.entries, f.path, f);
   });
 
   afterEach(() => {
     vm.$destroy();
+    vm = null;
 
     Editor.editorInstance.dispose();
   });
 
   const findEditor = () => vm.$el.querySelector('.multi-file-editor-holder');
 
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+
+      return waitForEditorSetup();
+    });
+
     it('sets renderWhitespace to `all`', () => {
       vm.$store.state.renderWhitespaceInCode = true;
 
@@ -98,6 +132,7 @@ describe('RepoEditor', () => {
 
       beforeEach(() => {
         mock = new MockAdapter(axios);
+
         mock.onPost(/(.*)\/preview_markdown/).reply(200, {
           body: '<p>testing 123</p>',
         });
@@ -274,11 +309,11 @@ describe('RepoEditor', () => {
       });
 
       it('updates state with the value of the model', () => {
-      vm.model.setValue('testing 1234');
+        vm.model.setValue('testing 1234\n');
 
         vm.setupEditor();
 
-      expect(vm.file.content).toBe('testing 1234');
+        expect(vm.file.content).toBe('testing 1234\n');
       });
 
       it('sets head model as staged file', () => {
@@ -403,7 +438,7 @@ describe('RepoEditor', () => {
         vm.initEditor();
         vm.$nextTick()
           .then(() => {
-          expect(vm.getFileData).not.toHaveBeenCalled();
+            expect(mockActions.getFileData).not.toHaveBeenCalled();
           })
           .then(done)
           .catch(done.fail);
@@ -416,8 +451,8 @@ describe('RepoEditor', () => {
         vm.initEditor();
         vm.$nextTick()
           .then(() => {
-          expect(vm.getFileData).toHaveBeenCalled();
-          expect(vm.getRawFileData).toHaveBeenCalled();
+            expect(mockActions.getFileData).toHaveBeenCalled();
+            expect(mockActions.getRawFileData).toHaveBeenCalled();
           })
           .then(done)
           .catch(done.fail);
@@ -429,8 +464,8 @@ describe('RepoEditor', () => {
         vm.initEditor();
         vm.$nextTick()
           .then(() => {
-          expect(vm.getFileData).not.toHaveBeenCalled();
-          expect(vm.getRawFileData).not.toHaveBeenCalled();
+            expect(mockActions.getFileData).not.toHaveBeenCalled();
+            expect(mockActions.getRawFileData).not.toHaveBeenCalled();
             expect(vm.editor.createInstance).not.toHaveBeenCalled();
           })
           .then(done)
@@ -576,4 +611,54 @@ describe('RepoEditor', () => {
         });
       });
     });
+  });
+
+  describe('fetchEditorconfigRules', () => {
+    beforeEach(() => {
+      exampleConfigs.forEach(({ path, content }) => {
+        store.state.entries[path] = { ...file(), path, content };
+      });
+    });
+
+    it.each(exampleFiles)(
+      'does not fetch content from remote for .editorconfig files present locally (case %#)',
+      ({ path, monacoRules }) => {
+        createOpenFile(path);
+        createComponent();
+
+        return waitForEditorSetup().then(() => {
+          expect(vm.rules).toEqual(monacoRules);
+          expect(vm.model.options).toMatchObject(monacoRules);
+          expect(mockActions.getFileData).not.toHaveBeenCalled();
+          expect(mockActions.getRawFileData).not.toHaveBeenCalled();
+        });
+      },
+    );
+
+    it('fetches content from remote for .editorconfig files not available locally', () => {
+      exampleConfigs.forEach(({ path }) => {
+        delete store.state.entries[path].content;
+        delete store.state.entries[path].raw;
+      });
+
+      // Include a "test" directory which does not exist in store. This one should be skipped.
+      createOpenFile('foo/bar/baz/test/my_spec.js');
+      createComponent();
+
+      return waitForEditorSetup().then(() => {
+        expect(mockActions.getFileData.mock.calls.map(([, args]) => args)).toEqual([
+          { makeFileActive: false, path: 'foo/bar/baz/.editorconfig' },
+          { makeFileActive: false, path: 'foo/bar/.editorconfig' },
+          { makeFileActive: false, path: 'foo/.editorconfig' },
+          { makeFileActive: false, path: '.editorconfig' },
+        ]);
+        expect(mockActions.getRawFileData.mock.calls.map(([, args]) => args)).toEqual([
+          { path: 'foo/bar/baz/.editorconfig' },
+          { path: 'foo/bar/.editorconfig' },
+          { path: 'foo/.editorconfig' },
+          { path: '.editorconfig' },
+        ]);
+      });
+    });
+  });
 });

spec/frontend/ide/lib/editorconfig/mock_data.js

+export const exampleConfigs = [
+  {
+    path: 'foo/bar/baz/.editorconfig',
+    content: `
+[*]
+tab_width = 6
+indent_style = tab
+`,
+  },
+  {
+    path: 'foo/bar/.editorconfig',
+    content: `
+root = false
+
+[*]
+indent_size = 5
+indent_style = space
+trim_trailing_whitespace = true
+
+[*_spec.{js,py}]
+end_of_line = crlf
+    `,
+  },
+  {
+    path: 'foo/.editorconfig',
+    content: `
+[*]
+tab_width = 4
+indent_style = tab
+    `,
+  },
+  {
+    path: '.editorconfig',
+    content: `
+root = true
+
+[*]
+indent_size = 3
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+
+[*.js]
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+
+[*.txt]
+end_of_line = crlf
+    `,
+  },
+  {
+    path: 'foo/bar/root/.editorconfig',
+    content: `
+root = true
+
+[*]
+tab_width = 1
+indent_style = tab
+    `,
+  },
+];
+
+export const exampleFiles = [
+  {
+    path: 'foo/bar/root/README.md',
+    rules: {
+      indent_style: 'tab', // foo/bar/root/.editorconfig
+      tab_width: '1', // foo/bar/root/.editorconfig
+    },
+    monacoRules: {
+      insertSpaces: false,
+      tabSize: 1,
+    },
+  },
+  {
+    path: 'foo/bar/baz/my_spec.js',
+    rules: {
+      end_of_line: 'crlf', // foo/bar/.editorconfig (for _spec.js files)
+      indent_size: '5', // foo/bar/.editorconfig
+      indent_style: 'tab', // foo/bar/baz/.editorconfig
+      insert_final_newline: 'true', // .editorconfig
+      tab_width: '6', // foo/bar/baz/.editorconfig
+      trim_trailing_whitespace: 'true', // .editorconfig (for .js files)
+    },
+    monacoRules: {
+      endOfLine: 1,
+      insertFinalNewline: true,
+      insertSpaces: false,
+      tabSize: 6,
+      trimTrailingWhitespace: true,
+    },
+  },
+  {
+    path: 'foo/my_file.js',
+    rules: {
+      end_of_line: 'lf', // .editorconfig
+      indent_size: '2', // .editorconfig (for .js files)
+      indent_style: 'tab', // foo/.editorconfig
+      insert_final_newline: 'true', // .editorconfig
+      tab_width: '4', // foo/.editorconfig
+      trim_trailing_whitespace: 'true', // .editorconfig (for .js files)
+    },
+    monacoRules: {
+      endOfLine: 0,
+      insertFinalNewline: true,
+      insertSpaces: false,
+      tabSize: 4,
+      trimTrailingWhitespace: true,
+    },
+  },
+  {
+    path: 'foo/my_file.md',
+    rules: {
+      end_of_line: 'lf', // .editorconfig
+      indent_size: '3', // .editorconfig
+      indent_style: 'tab', // foo/.editorconfig
+      insert_final_newline: 'true', // .editorconfig
+      tab_width: '4', // foo/.editorconfig
+    },
+    monacoRules: {
+      endOfLine: 0,
+      insertFinalNewline: true,
+      insertSpaces: false,
+      tabSize: 4,
+    },
+  },
+  {
+    path: 'foo/bar/my_file.txt',
+    rules: {
+      end_of_line: 'crlf', // .editorconfig (for .txt files)
+      indent_size: '5', // foo/bar/.editorconfig
+      indent_style: 'space', // foo/bar/.editorconfig
+      insert_final_newline: 'true', // .editorconfig
+      tab_width: '4', // foo/.editorconfig
+      trim_trailing_whitespace: 'true', // foo/bar/.editorconfig
+    },
+    monacoRules: {
+      endOfLine: 1,
+      insertFinalNewline: true,
+      insertSpaces: true,
+      tabSize: 4,
+      trimTrailingWhitespace: true,
+    },
+  },
+];

spec/frontend/ide/lib/editorconfig/parser_spec.js

+import { getRulesWithTraversal } from '~/ide/lib/editorconfig/parser';
+import { exampleConfigs, exampleFiles } from './mock_data';
+
+describe('~/ide/lib/editorconfig/parser', () => {
+  const getExampleConfigContent = path =>
+    Promise.resolve(exampleConfigs.find(x => x.path === path)?.content);
+
+  describe('getRulesWithTraversal', () => {
+    it.each(exampleFiles)(
+      'traverses through all editorconfig files in parent directories (until root=true is hit) and finds rules for this file (case %#)',
+      ({ path, rules }) => {
+        return getRulesWithTraversal(path, getExampleConfigContent).then(result => {
+          expect(result).toEqual(rules);
+        });
+      },
+    );
+  });
+});

spec/frontend/ide/lib/editorconfig/rules_mapper_spec.js

+import mapRulesToMonaco from '~/ide/lib/editorconfig/rules_mapper';
+
+describe('mapRulesToMonaco', () => {
+  const multipleEntries = {
+    input: { indent_style: 'tab', indent_size: '4', insert_final_newline: 'true' },
+    output: { insertSpaces: false, tabSize: 4, insertFinalNewline: true },
+  };
+
+  // tab width takes precedence
+  const tabWidthAndIndent = {
+    input: { indent_style: 'tab', indent_size: '4', tab_width: '3' },
+    output: { insertSpaces: false, tabSize: 3 },
+  };
+
+  it.each`
+    rule                                     | monacoOption
+    ${{ indent_style: 'tab' }}               | ${{ insertSpaces: false }}
+    ${{ indent_style: 'space' }}             | ${{ insertSpaces: true }}
+    ${{ indent_style: 'unset' }}             | ${{}}
+    ${{ indent_size: '4' }}                  | ${{ tabSize: 4 }}
+    ${{ indent_size: '4.4' }}                | ${{ tabSize: 4 }}
+    ${{ indent_size: '0' }}                  | ${{}}
+    ${{ indent_size: '-10' }}                | ${{}}
+    ${{ indent_size: 'NaN' }}                | ${{}}
+    ${{ tab_width: '4' }}                    | ${{ tabSize: 4 }}
+    ${{ tab_width: '5.4' }}                  | ${{ tabSize: 5 }}
+    ${{ tab_width: '-10' }}                  | ${{}}
+    ${{ trim_trailing_whitespace: 'true' }}  | ${{ trimTrailingWhitespace: true }}
+    ${{ trim_trailing_whitespace: 'false' }} | ${{ trimTrailingWhitespace: false }}
+    ${{ trim_trailing_whitespace: 'unset' }} | ${{}}
+    ${{ end_of_line: 'lf' }}                 | ${{ endOfLine: 0 }}
+    ${{ end_of_line: 'crlf' }}               | ${{ endOfLine: 1 }}
+    ${{ end_of_line: 'cr' }}                 | ${{}}
+    ${{ end_of_line: 'unset' }}              | ${{}}
+    ${{ insert_final_newline: 'true' }}      | ${{ insertFinalNewline: true }}
+    ${{ insert_final_newline: 'false' }}     | ${{ insertFinalNewline: false }}
+    ${{ insert_final_newline: 'unset' }}     | ${{}}
+    ${multipleEntries.input}                 | ${multipleEntries.output}
+    ${tabWidthAndIndent.input}               | ${tabWidthAndIndent.output}
+  `('correctly maps editorconfig rule to monaco option: $rule', ({ rule, monacoOption }) => {
+    expect(mapRulesToMonaco(rule)).toEqual(monacoOption);
+  });
+});