Trim all path components in a path

When renaming or creating a new file/folder in the Web IDE,
trim whitespaces from all path components instead of just leading
or trailing spaces.

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -4,6 +4,7 @@ import flash from '~/flash';
 import { __, sprintf, s__ } from '~/locale';
 import { GlModal } from '@gitlab/ui';
 import { modalTypes } from '../../constants';
+import { trimPathComponents } from '../../utils';
 
 export default {
   components: {
@@ -51,6 +52,8 @@ export default {
   methods: {
     ...mapActions(['createTempEntry', 'renameEntry']),
     submitForm() {
+      this.entryName = trimPathComponents(this.entryName);
+
       if (this.modalType === modalTypes.rename) {
         if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
           flash(

app/assets/javascripts/ide/utils.js

@@ -69,6 +69,12 @@ export const createPathWithExt = p => {
   return `${p.substring(1, p.lastIndexOf('.') + 1 || p.length)}${ext || '.js'}`;
 };
 
+export const trimPathComponents = path =>
+  path
+    .split('/')
+    .map(s => s.trim())
+    .join('/');
+
 export function registerLanguages(def, ...defs) {
   if (defs.length) defs.forEach(lang => registerLanguages(lang));
 

changelogs/unreleased/216509-ide-new-file-trim.yml

+---
+title: Trim whitespace in directory names in the Web IDE
+merge_request: 31305
+author:
+type: fixed

spec/frontend/ide/components/new_dropdown/modal_spec.js

@@ -122,9 +122,9 @@ describe('new file modal component', () => {
 
   describe('submitForm', () => {
     let store;
+
     beforeEach(() => {
       store = createStore();
-
       store.state.entries = {
         'test-path/test': {
           name: 'test',
@@ -161,5 +161,15 @@ describe('new file modal component', () => {
 
       expect(createFlash).not.toHaveBeenCalled();
     });
+
+    it('removes leading/trailing found in the new name', () => {
+      vm.open('rename', 'test-path/test');
+
+      vm.entryName = 'test-path /test';
+
+      vm.submitForm();
+
+      expect(vm.entryName).toBe('test-path/test');
+    });
   });
 });

spec/frontend/ide/utils_spec.js

 import { commitItemIconMap } from '~/ide/constants';
-import { getCommitIconMap, isTextFile, registerLanguages } from '~/ide/utils';
+import { getCommitIconMap, isTextFile, registerLanguages, trimPathComponents } from '~/ide/utils';
 import { decorateData } from '~/ide/stores/utils';
 import { languages } from 'monaco-editor';
 
@@ -104,6 +104,21 @@ describe('WebIDE utils', () => {
     });
   });
 
+  describe('trimPathComponents', () => {
+    it.each`
+      input                           | output
+      ${'example path '}              | ${'example path'}
+      ${'p/somefile '}                | ${'p/somefile'}
+      ${'p /somefile '}               | ${'p/somefile'}
+      ${'p/ somefile '}               | ${'p/somefile'}
+      ${' p/somefile '}               | ${'p/somefile'}
+      ${'p/somefile  .md'}            | ${'p/somefile  .md'}
+      ${'path / to / some/file.doc '} | ${'path/to/some/file.doc'}
+    `('trims all path components in path: "$input"', ({ input, output }) => {
+      expect(trimPathComponents(input)).toEqual(output);
+    });
+  });
+
   describe('registerLanguages', () => {
     let langs;