Merge branch '213282-setup-vue-router' into 'master'

Set up VueRouter in the Static Site Editor

See merge request gitlab-org/gitlab!30394

app/assets/javascripts/static_site_editor/components/app.vue

+<template>
+  <router-view />
+</template>

app/assets/javascripts/static_site_editor/index.js

 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import StaticSiteEditor from './components/static_site_editor.vue';
+import App from './components/app.vue';
 import createStore from './store';
+import createRouter from './router';
 
 const initStaticSiteEditor = el => {
-  const { isSupportedContent, projectId, path: sourcePath, returnUrl } = el.dataset;
+  const { isSupportedContent, projectId, path: sourcePath, returnUrl, baseUrl } = el.dataset;
 
   const store = createStore({
     initialState: {
@@ -15,15 +16,17 @@ const initStaticSiteEditor = el => {
       username: window.gon.current_username,
     },
   });
+  const router = createRouter(baseUrl);
 
   return new Vue({
     el,
     store,
+    router,
     components: {
-      StaticSiteEditor,
+      App,
     },
     render(createElement) {
-      return createElement('static-site-editor', StaticSiteEditor);
+      return createElement('app');
     },
   });
 };

app/assets/javascripts/static_site_editor/components/static_site_editor.vue → app/assets/javascripts/static_site_editor/pages/home.vue

@@ -2,12 +2,12 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlSkeletonLoader } from '@gitlab/ui';
 
-import EditArea from './edit_area.vue';
-import EditHeader from './edit_header.vue';
-import SavedChangesMessage from './saved_changes_message.vue';
-import PublishToolbar from './publish_toolbar.vue';
-import InvalidContentMessage from './invalid_content_message.vue';
-import SubmitChangesError from './submit_changes_error.vue';
+import EditArea from '../components/edit_area.vue';
+import EditHeader from '../components/edit_header.vue';
+import SavedChangesMessage from '../components/saved_changes_message.vue';
+import PublishToolbar from '../components/publish_toolbar.vue';
+import InvalidContentMessage from '../components/invalid_content_message.vue';
+import SubmitChangesError from '../components/submit_changes_error.vue';
 
 export default {
   components: {

app/assets/javascripts/static_site_editor/router/constants.js

+// eslint-disable-next-line import/prefer-default-export
+export const HOME_ROUTE_NAME = 'home';

app/assets/javascripts/static_site_editor/router/index.js

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import routes from './routes';
+
+Vue.use(VueRouter);
+
+export default function createRouter(base) {
+  const router = new VueRouter({
+    base,
+    mode: 'history',
+    routes,
+  });
+
+  return router;
+}

app/assets/javascripts/static_site_editor/router/routes.js

+import Home from '../pages/home.vue';
+import { HOME_ROUTE_NAME } from './constants';
+
+export default [
+  {
+    name: HOME_ROUTE_NAME,
+    path: '/',
+    component: Home,
+  },
+];

app/views/projects/static_site_editor/show.html.haml

-#static-site-editor{ data: @config.payload }
+-# TODO: Remove after base URL is included in the model !30735
+- data = @config.payload.merge({ base_url: namespace_project_show_sse_path })
+
+#static-site-editor{ data: data }

spec/frontend/static_site_editor/components/static_site_editor_spec.js → spec/frontend/static_site_editor/pages/home_spec.js

@@ -4,7 +4,7 @@ import { GlSkeletonLoader } from '@gitlab/ui';
 
 import createState from '~/static_site_editor/store/state';
 
-import StaticSiteEditor from '~/static_site_editor/components/static_site_editor.vue';
+import Home from '~/static_site_editor/pages/home.vue';
 import EditArea from '~/static_site_editor/components/edit_area.vue';
 import EditHeader from '~/static_site_editor/components/edit_header.vue';
 import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue';
@@ -24,7 +24,7 @@ const localVue = createLocalVue();
 
 localVue.use(Vuex);
 
-describe('StaticSiteEditor', () => {
+describe('static_site_editor/pages/home', () => {
   let wrapper;
   let store;
   let loadContentActionMock;
@@ -68,7 +68,7 @@ describe('StaticSiteEditor', () => {
   };
 
   const buildWrapper = () => {
-    wrapper = shallowMount(StaticSiteEditor, {
+    wrapper = shallowMount(Home, {
       localVue,
       store,
     });