Downgrade vue-router to 3.4.5

This addresses a regression in the IDE with
special characters.

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

@@ -54,7 +54,7 @@ export default {
   <ide-tree-list>
     <template #header>
       {{ __('Edit') }}
-      <div class="ide-tree-actions ml-auto d-flex">
+      <div class="ide-tree-actions ml-auto d-flex" data-testid="ide-root-actions">
         <new-entry-button
           :label="__('New file')"
           :show-label="false"

changelogs/unreleased/271391-downgrade-vue-router.yml

+---
+title: Fix IDE issues with special characters
+merge_request: 46398
+author:
+type: fixed

package.json

@@ -146,7 +146,7 @@
     "vue": "^2.6.12",
     "vue-apollo": "^3.0.3",
     "vue-loader": "^15.9.3",
-    "vue-router": "^3.4.7",
+    "vue-router": "3.4.5",
     "vue-template-compiler": "^2.6.12",
     "vue-virtual-scroll-list": "^1.4.4",
     "vuedraggable": "^2.23.0",

spec/frontend/monitoring/router_spec.js

@@ -105,7 +105,8 @@ describe('Monitoring router', () => {
       path                                                     | currentDashboard
       ${'/panel/new'}                                          | ${undefined}
       ${'/dashboard.yml/panel/new'}                            | ${'dashboard.yml'}
-      ${'/config%2Fprometheus%2Fcommon_metrics.yml/panel/new'} | ${'config%2Fprometheus%2Fcommon_metrics.yml'}
+      ${'/config/prometheus/common_metrics.yml/panel/new'}     | ${'config/prometheus/common_metrics.yml'}
+      ${'/config%2Fprometheus%2Fcommon_metrics.yml/panel/new'} | ${'config/prometheus/common_metrics.yml'}
     `('"$path" renders page with dashboard "$currentDashboard"', ({ path, currentDashboard }) => {
       const wrapper = createWrapper(BASE_PATH, path);
 

spec/frontend_integration/ide/ide_helper.js

 import { findAllByText, fireEvent, getByLabelText, screen } from '@testing-library/dom';
 
-const isFileRowOpen = row => row.matches('.is-open');
+const isFolderRowOpen = row => row.matches('.folder.is-open');
 
 const getLeftSidebar = () => screen.getByTestId('left-sidebar');
 
@@ -24,6 +24,8 @@ const findAndSetEditorValue = async value => {
 
 const findTreeBody = () => screen.findByTestId('ide-tree-body', {}, { timeout: 5000 });
 
+const findRootActions = () => screen.findByTestId('ide-root-actions', {}, { timeout: 7000 });
+
 const findFileRowContainer = (row = null) =>
   row ? Promise.resolve(row.parentElement) : findTreeBody();
 
@@ -35,7 +37,7 @@ const findFileChild = async (row, name, index = 0) => {
 };
 
 const openFileRow = row => {
-  if (!row || isFileRowOpen(row)) {
+  if (!row || isFolderRowOpen(row)) {
     return;
   }
 
@@ -74,6 +76,19 @@ const findAndSetFileName = async value => {
   createButton.click();
 };
 
+const findAndClickRootAction = async name => {
+  const container = await findRootActions();
+  const button = getByLabelText(container, name);
+
+  button.click();
+};
+
+export const openFile = async path => {
+  const row = await findAndTraverseToPath(path);
+
+  openFileRow(row);
+};
+
 export const createFile = async (path, content) => {
   const parentPath = path
     .split('/')
@@ -81,7 +96,12 @@ export const createFile = async (path, content) => {
     .join('/');
 
   const parentRow = await findAndTraverseToPath(parentPath);
-  clickFileRowAction(parentRow, 'New file');
+
+  if (parentRow) {
+    clickFileRowAction(parentRow, 'New file');
+  } else {
+    await findAndClickRootAction('New file');
+  }
 
   await findAndSetFileName(path);
   await findAndSetEditorValue(content);

spec/frontend_integration/ide/ide_integration_spec.js

 import { TEST_HOST } from 'helpers/test_constants';
 import { waitForText } from 'helpers/wait_for_text';
+import waitForPromises from 'helpers/wait_for_promises';
 import { useOverclockTimers } from 'test_helpers/utils/overclock_timers';
 import { createCommitId } from 'test_helpers/factories/commit_id';
 import { initIde } from '~/ide';
@@ -86,4 +87,18 @@ describe('WebIDE', () => {
       ],
     });
   });
+
+  it('user adds file that starts with +', async () => {
+    createComponent();
+
+    await ideHelper.createFile('+test', 'Hello world!');
+    await ideHelper.openFile('+test');
+
+    // Wait for monaco things
+    await waitForPromises();
+
+    // Assert that +test is the only open tab
+    const tabs = Array.from(document.querySelectorAll('.multi-file-tab'));
+    expect(tabs.map(x => x.textContent.trim())).toEqual(['+test']);
+  });
 });

spec/frontend_integration/test_helpers/setup/setup_globals.js

@@ -6,7 +6,7 @@ beforeEach(() => {
     relative_url_root: '',
   };
 
-  setTestTimeout(5000);
+  setTestTimeout(7000);
   jest.useRealTimers();
 });
 

yarn.lock

@@ -12363,10 +12363,10 @@ vue-loader@^15.9.3:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-router@^3.4.7:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.7.tgz#bf189bafd16f4e4ef783c4a6250a3090f2c1fa1b"
-  integrity sha512-CbHXue5BLrDivOk5O4eZ0WT4Yj8XwdXa4kCnsEIOzYUPF/07ZukayA2jGxDCJxLc9SgVQX9QX0OuGOwGlVB4Qg==
+vue-router@3.4.5:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.5.tgz#d396ec037b35931bdd1e9b7edd86f9788dc15175"
+  integrity sha512-ioRY5QyDpXM9TDjOX6hX79gtaMXSVDDzSlbIlyAmbHNteIL81WIVB2e+jbzV23vzxtoV0krdS2XHm+GxFg+Nxg==
 
 vue-runtime-helpers@^1.1.2:
   version "1.1.2"