Add latest changes from gitlab-org/gitlab@13-0-stable-ee

28 files changed, 454 insertions, 254 deletions

diff --git a/app/assets/javascripts/static_site_editor/components/app.vue b/app/assets/javascripts/static_site_editor/components/app.vue
new file mode 100644
index 00000000000..98240aef810
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue
index 921d93669c5..dff21d919a9 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -1,18 +1,61 @@
 <script>
-import { GlFormTextarea } from '@gitlab/ui';
+import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
+import PublishToolbar from './publish_toolbar.vue';
+import EditHeader from './edit_header.vue';
 
 export default {
   components: {
-    GlFormTextarea,
+    RichContentEditor,
+    PublishToolbar,
+    EditHeader,
   },
   props: {
-    value: {
+    title: {
       type: String,
       required: true,
     },
+    content: {
+      type: String,
+      required: true,
+    },
+    savingChanges: {
+      type: Boolean,
+      required: true,
+    },
+    returnUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      editableContent: this.content,
+      saveable: false,
+    };
+  },
+  computed: {
+    modified() {
+      return this.content !== this.editableContent;
+    },
+  },
+  methods: {
+    onSubmit() {
+      this.$emit('submit', { content: this.editableContent });
+    },
   },
 };
 </script>
 <template>
-  <gl-form-textarea :value="value" v-on="$listeners" />
+  <div class="d-flex flex-grow-1 flex-column">
+    <edit-header class="py-2" :title="title" />
+    <rich-content-editor v-model="editableContent" class="mb-9" />
+    <publish-toolbar
+      class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
+      :return-url="returnUrl"
+      :saveable="modified"
+      :saving-changes="savingChanges"
+      @submit="onSubmit"
+    />
+  </div>
 </template>
diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
index 274d2f71749..6cd2a4dd700 100644
--- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
+++ b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
@@ -1,10 +1,9 @@
 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 
 export default {
   components: {
     GlButton,
-    GlLoadingIcon,
   },
   props: {
     returnUrl: {
@@ -26,14 +25,18 @@ export default {
 };
 </script>
 <template>
-  <div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4">
-    <gl-loading-icon :class="{ invisible: !savingChanges }" size="md" />
+  <div class="d-flex bg-light border-top justify-content-end align-items-center py-3 px-4">
     <div>
       <gl-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{
         s__('StaticSiteEditor|Return to site')
       }}</gl-button>
-      <gl-button variant="success" :disabled="!saveable || savingChanges" @click="$emit('submit')">
-        {{ __('Submit Changes') }}
+      <gl-button
+        variant="success"
+        :disabled="!saveable"
+        :loading="savingChanges"
+        @click="$emit('submit')"
+      >
+        <span>{{ __('Submit Changes') }}</span>
       </gl-button>
     </div>
   </div>
diff --git a/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue b/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
index 41cb901720c..dd907570114 100644
--- a/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
+++ b/app/assets/javascripts/static_site_editor/components/saved_changes_message.vue
@@ -28,7 +28,8 @@ export default {
     },
     returnUrl: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
 };
@@ -46,7 +47,7 @@ export default {
         }}
       </p>
       <div class="d-flex justify-content-end">
-        <gl-button ref="returnToSiteButton" :href="returnUrl">{{
+        <gl-button v-if="returnUrl" ref="returnToSiteButton" :href="returnUrl">{{
           s__('StaticSiteEditor|Return to site')
         }}</gl-button>
         <gl-button ref="mergeRequestButton" class="ml-2" :href="mergeRequest.url" variant="success">
@@ -60,7 +61,7 @@ export default {
       <ul>
         <li>
           {{ s__('StaticSiteEditor|You created a new branch:') }}
-          <span ref="branchLink">{{ branch.label }}</span>
+          <gl-link ref="branchLink" :href="branch.url">{{ branch.label }}</gl-link>
         </li>
         <li>
           {{ s__('StaticSiteEditor|You created a merge request:') }}
diff --git a/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue b/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue
new file mode 100644
index 00000000000..1b6179883aa
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue
@@ -0,0 +1,19 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSkeletonLoader,
+  },
+};
+</script>
+<template>
+  <gl-skeleton-loader :width="500" :height="102">
+    <rect width="500" height="16" rx="4" />
+    <rect y="20" width="375" height="16" rx="4" />
+    <rect x="380" y="20" width="120" height="16" rx="4" />
+    <rect y="40" width="250" height="16" rx="4" />
+    <rect x="255" y="40" width="150" height="16" rx="4" />
+    <rect x="410" y="40" width="90" height="16" rx="4" />
+  </gl-skeleton-loader>
+</template>
diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
deleted file mode 100644
index 82917319fc3..00000000000
--- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-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 Toolbar from './publish_toolbar.vue';
-import InvalidContentMessage from './invalid_content_message.vue';
-import SubmitChangesError from './submit_changes_error.vue';
-
-export default {
-  components: {
-    EditArea,
-    EditHeader,
-    InvalidContentMessage,
-    GlSkeletonLoader,
-    SavedChangesMessage,
-    Toolbar,
-    SubmitChangesError,
-  },
-  computed: {
-    ...mapState([
-      'content',
-      'isLoadingContent',
-      'isSavingChanges',
-      'isContentLoaded',
-      'isSupportedContent',
-      'returnUrl',
-      'title',
-      'submitChangesError',
-      'savedContentMeta',
-    ]),
-    ...mapGetters(['contentChanged']),
-  },
-  mounted() {
-    if (this.isSupportedContent) {
-      this.loadContent();
-    }
-  },
-  methods: {
-    ...mapActions(['loadContent', 'setContent', 'submitChanges', 'dismissSubmitChangesError']),
-  },
-};
-</script>
-<template>
-  <div class="d-flex justify-content-center h-100 pt-2">
-    <!-- Success view -->
-    <saved-changes-message
-      v-if="savedContentMeta"
-      :branch="savedContentMeta.branch"
-      :commit="savedContentMeta.commit"
-      :merge-request="savedContentMeta.mergeRequest"
-      :return-url="returnUrl"
-    />
-
-    <!-- Main view -->
-    <template v-else-if="isSupportedContent">
-      <div v-if="isLoadingContent" class="w-50 h-50">
-        <gl-skeleton-loader :width="500" :height="102">
-          <rect width="500" height="16" rx="4" />
-          <rect y="20" width="375" height="16" rx="4" />
-          <rect x="380" y="20" width="120" height="16" rx="4" />
-          <rect y="40" width="250" height="16" rx="4" />
-          <rect x="255" y="40" width="150" height="16" rx="4" />
-          <rect x="410" y="40" width="90" height="16" rx="4" />
-        </gl-skeleton-loader>
-      </div>
-      <div v-if="isContentLoaded" class="d-flex flex-grow-1 flex-column">
-        <submit-changes-error
-          v-if="submitChangesError"
-          class="w-75 align-self-center"
-          :error="submitChangesError"
-          @retry="submitChanges"
-          @dismiss="dismissSubmitChangesError"
-        />
-        <edit-header class="w-75 align-self-center py-2" :title="title" />
-        <edit-area
-          class="w-75 h-100 shadow-none align-self-center"
-          :value="content"
-          @input="setContent"
-        />
-        <toolbar
-          :return-url="returnUrl"
-          :saveable="contentChanged"
-          :saving-changes="isSavingChanges"
-          @submit="submitChanges"
-        />
-      </div>
-    </template>
-
-    <!-- Error view -->
-    <invalid-content-message v-else class="w-75" />
-  </div>
-</template>
diff --git a/app/assets/javascripts/static_site_editor/constants.js b/app/assets/javascripts/static_site_editor/constants.js
index d7ce2a93a56..4794cf5eead 100644
--- a/app/assets/javascripts/static_site_editor/constants.js
+++ b/app/assets/javascripts/static_site_editor/constants.js
@@ -1,4 +1,4 @@
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export const BRANCH_SUFFIX_COUNT = 8;
 export const DEFAULT_TARGET_BRANCH = 'master';
@@ -10,5 +10,10 @@ export const SUBMIT_CHANGES_COMMIT_ERROR = s__(
 export const SUBMIT_CHANGES_MERGE_REQUEST_ERROR = s__(
   'StaticSiteEditor|Could not create merge request.',
 );
+export const LOAD_CONTENT_ERROR = __(
+  'An error ocurred while loading your content. Please try again.',
+);
 
 export const DEFAULT_HEADING = s__('StaticSiteEditor|Static site editor');
+
+export const TRACKING_ACTION_CREATE_COMMIT = 'create_commit';
diff --git a/app/assets/javascripts/static_site_editor/graphql/index.js b/app/assets/javascripts/static_site_editor/graphql/index.js
new file mode 100644
index 00000000000..0a5d8c07ad9
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/graphql/index.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import typeDefs from './typedefs.graphql';
+import fileResolver from './resolvers/file';
+import submitContentChangesResolver from './resolvers/submit_content_changes';
+
+Vue.use(VueApollo);
+
+const createApolloProvider = appData => {
+  const defaultClient = createDefaultClient(
+    {
+      Project: {
+        file: fileResolver,
+      },
+      Mutation: {
+        submitContentChanges: submitContentChangesResolver,
+      },
+    },
+    {
+      typeDefs,
+    },
+  );
+
+  defaultClient.cache.writeData({
+    data: {
+      appData: {
+        __typename: 'AppData',
+        ...appData,
+      },
+    },
+  });
+
+  return new VueApollo({
+    defaultClient,
+  });
+};
+
+export default createApolloProvider;
diff --git a/app/assets/javascripts/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql b/app/assets/javascripts/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql
new file mode 100644
index 00000000000..2840d419966
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql
@@ -0,0 +1,7 @@
+mutation submitContentChanges($input: SubmitContentChangesInput) {
+  submitContentChanges(input: $input)  @client {
+    branch
+    commit
+    mergeRequest
+  }
+}
diff --git a/app/assets/javascripts/static_site_editor/graphql/queries/app_data.query.graphql b/app/assets/javascripts/static_site_editor/graphql/queries/app_data.query.graphql
new file mode 100644
index 00000000000..fdbf4459aee
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/graphql/queries/app_data.query.graphql
@@ -0,0 +1,9 @@
+query appData {
+  appData @client {
+    isSupportedContent
+    project
+    sourcePath
+    username,
+    returnUrl
+  }
+}
diff --git a/app/assets/javascripts/static_site_editor/graphql/queries/saved_content_meta.query.graphql b/app/assets/javascripts/static_site_editor/graphql/queries/saved_content_meta.query.graphql
new file mode 100644
index 00000000000..c29b6f93b81
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/graphql/queries/saved_content_meta.query.graphql
@@ -0,0 +1,3 @@
+query savedContentMeta {
+  savedContentMeta @client
+}
diff --git a/app/assets/javascripts/static_site_editor/graphql/queries/source_content.query.graphql b/app/assets/javascripts/static_site_editor/graphql/queries/source_content.query.graphql
new file mode 100644
index 00000000000..e36d244ae57
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/graphql/queries/source_content.query.graphql
@@ -0,0 +1,9 @@
+query sourceContent($project: ID!, $sourcePath: String!) {
+  project(fullPath: $project) {
+    fullPath,
+    file(path: $sourcePath) @client {
+      title
+      content
+    }
+  }
+}
diff --git a/app/assets/javascripts/static_site_editor/graphql/resolvers/file.js b/app/assets/javascripts/static_site_editor/graphql/resolvers/file.js
new file mode 100644
index 00000000000..16f176581cb
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/graphql/resolvers/file.js
@@ -0,0 +1,11 @@
+import loadSourceContent from '../../services/load_source_content';
+
+const fileResolver = ({ fullPath: projectId }, { path: sourcePath }) => {
+  return loadSourceContent({ projectId, sourcePath }).then(sourceContent => ({
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    __typename: 'File',
+    ...sourceContent,
+  }));
+};
+
+export default fileResolver;
diff --git a/app/assets/javascripts/static_site_editor/graphql/resolvers/submit_content_changes.js b/app/assets/javascripts/static_site_editor/graphql/resolvers/submit_content_changes.js
new file mode 100644
index 00000000000..6c4e3a4d973
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/graphql/resolvers/submit_content_changes.js
@@ -0,0 +1,24 @@
+import submitContentChanges from '../../services/submit_content_changes';
+import savedContentMetaQuery from '../queries/saved_content_meta.query.graphql';
+
+const submitContentChangesResolver = (
+  _,
+  { input: { project: projectId, username, sourcePath, content } },
+  { cache },
+) => {
+  return submitContentChanges({ projectId, username, sourcePath, content }).then(
+    savedContentMeta => {
+      cache.writeQuery({
+        query: savedContentMetaQuery,
+        data: {
+          savedContentMeta: {
+            __typename: 'SavedContentMeta',
+            ...savedContentMeta,
+          },
+        },
+      });
+    },
+  );
+};
+
+export default submitContentChangesResolver;
diff --git a/app/assets/javascripts/static_site_editor/graphql/typedefs.graphql b/app/assets/javascripts/static_site_editor/graphql/typedefs.graphql
new file mode 100644
index 00000000000..59da2e27144
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/graphql/typedefs.graphql
@@ -0,0 +1,43 @@
+type File {
+  title: String
+  content: String!
+}
+
+type SavedContentField {
+  label: String!
+  url: String!
+}
+
+type SavedContentMeta {
+  mergeRequest: SavedContentField!
+  commit: SavedContentField!
+  branch: SavedContentField!
+}
+
+type AppData {
+  isSupportedContent: Boolean!
+  project: String!
+  returnUrl: String
+  sourcePath: String!
+  username: String!
+}
+
+type SubmitContentChangesInput {
+  project: String!
+  sourcePath: String!
+  content: String!
+  username: String!
+}
+
+extend type Project {
+  file(path: ID!): File
+}
+
+extend type Query {
+  appData: AppData!
+  savedContentMeta: SavedContentMeta
+}
+
+extend type Mutation {
+  submitContentChanges(input: SubmitContentChangesInput!): SavedContentMeta
+}
diff --git a/app/assets/javascripts/static_site_editor/index.js b/app/assets/javascripts/static_site_editor/index.js
index 15d668fd431..12aa301e02f 100644
--- a/app/assets/javascripts/static_site_editor/index.js
+++ b/app/assets/javascripts/static_site_editor/index.js
@@ -1,29 +1,32 @@
 import Vue from 'vue';
-import StaticSiteEditor from './components/static_site_editor.vue';
-import createStore from './store';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import App from './components/app.vue';
+import createRouter from './router';
+import createApolloProvider from './graphql';
 
 const initStaticSiteEditor = el => {
-  const { projectId, path: sourcePath, returnUrl } = el.dataset;
-  const isSupportedContent = 'isSupportedContent' in el.dataset;
+  const { isSupportedContent, path: sourcePath, baseUrl, namespace, project } = el.dataset;
+  const { current_username: username } = window.gon;
+  const returnUrl = el.dataset.returnUrl || null;
 
-  const store = createStore({
-    initialState: {
-      isSupportedContent,
-      projectId,
-      returnUrl,
-      sourcePath,
-      username: window.gon.current_username,
-    },
+  const router = createRouter(baseUrl);
+  const apolloProvider = createApolloProvider({
+    isSupportedContent: parseBoolean(isSupportedContent),
+    project: `${namespace}/${project}`,
+    returnUrl,
+    sourcePath,
+    username,
   });
 
   return new Vue({
     el,
-    store,
+    router,
+    apolloProvider,
     components: {
-      StaticSiteEditor,
+      App,
     },
     render(createElement) {
-      return createElement('static-site-editor', StaticSiteEditor);
+      return createElement('app');
     },
   });
 };
diff --git a/app/assets/javascripts/static_site_editor/pages/home.vue b/app/assets/javascripts/static_site_editor/pages/home.vue
new file mode 100644
index 00000000000..f65b648acd6
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/pages/home.vue
@@ -0,0 +1,120 @@
+<script>
+import SkeletonLoader from '../components/skeleton_loader.vue';
+import EditArea from '../components/edit_area.vue';
+import InvalidContentMessage from '../components/invalid_content_message.vue';
+import SubmitChangesError from '../components/submit_changes_error.vue';
+import appDataQuery from '../graphql/queries/app_data.query.graphql';
+import sourceContentQuery from '../graphql/queries/source_content.query.graphql';
+import submitContentChangesMutation from '../graphql/mutations/submit_content_changes.mutation.graphql';
+import createFlash from '~/flash';
+import { LOAD_CONTENT_ERROR } from '../constants';
+import { SUCCESS_ROUTE } from '../router/constants';
+
+export default {
+  components: {
+    SkeletonLoader,
+    EditArea,
+    InvalidContentMessage,
+    SubmitChangesError,
+  },
+  apollo: {
+    appData: {
+      query: appDataQuery,
+    },
+    sourceContent: {
+      query: sourceContentQuery,
+      update: ({
+        project: {
+          file: { title, content },
+        },
+      }) => {
+        return { title, content };
+      },
+      variables() {
+        return {
+          project: this.appData.project,
+          sourcePath: this.appData.sourcePath,
+        };
+      },
+      skip() {
+        return !this.appData.isSupportedContent;
+      },
+      error() {
+        createFlash(LOAD_CONTENT_ERROR);
+      },
+    },
+  },
+  data() {
+    return {
+      content: null,
+      submitChangesError: null,
+      isSavingChanges: false,
+    };
+  },
+  computed: {
+    isLoadingContent() {
+      return this.$apollo.queries.sourceContent.loading;
+    },
+    isContentLoaded() {
+      return Boolean(this.sourceContent);
+    },
+  },
+  methods: {
+    onDismissError() {
+      this.submitChangesError = null;
+    },
+    onSubmit({ content }) {
+      this.content = content;
+      this.submitChanges();
+    },
+    submitChanges() {
+      this.isSavingChanges = true;
+
+      this.$apollo
+        .mutate({
+          mutation: submitContentChangesMutation,
+          variables: {
+            input: {
+              project: this.appData.project,
+              username: this.appData.username,
+              sourcePath: this.appData.sourcePath,
+              content: this.content,
+            },
+          },
+        })
+        .then(() => {
+          this.$router.push(SUCCESS_ROUTE);
+        })
+        .catch(e => {
+          this.submitChangesError = e.message;
+        })
+        .finally(() => {
+          this.isSavingChanges = false;
+        });
+    },
+  },
+};
+</script>
+<template>
+  <div class="container d-flex gl-flex-direction-column pt-2 h-100">
+    <template v-if="appData.isSupportedContent">
+      <skeleton-loader v-if="isLoadingContent" class="w-75 gl-align-self-center gl-mt-5" />
+      <submit-changes-error
+        v-if="submitChangesError"
+        :error="submitChangesError"
+        @retry="submitChanges"
+        @dismiss="onDismissError"
+      />
+      <edit-area
+        v-if="isContentLoaded"
+        :title="sourceContent.title"
+        :content="sourceContent.content"
+        :saving-changes="isSavingChanges"
+        :return-url="appData.returnUrl"
+        @submit="onSubmit"
+      />
+    </template>
+
+    <invalid-content-message v-else class="w-75" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/static_site_editor/pages/success.vue b/app/assets/javascripts/static_site_editor/pages/success.vue
new file mode 100644
index 00000000000..123683b2833
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/pages/success.vue
@@ -0,0 +1,35 @@
+<script>
+import savedContentMetaQuery from '../graphql/queries/saved_content_meta.query.graphql';
+import appDataQuery from '../graphql/queries/app_data.query.graphql';
+import SavedChangesMessage from '../components/saved_changes_message.vue';
+import { HOME_ROUTE } from '../router/constants';
+
+export default {
+  components: {
+    SavedChangesMessage,
+  },
+  apollo: {
+    savedContentMeta: {
+      query: savedContentMetaQuery,
+    },
+    appData: {
+      query: appDataQuery,
+    },
+  },
+  created() {
+    if (!this.savedContentMeta) {
+      this.$router.push(HOME_ROUTE);
+    }
+  },
+};
+</script>
+<template>
+  <div v-if="savedContentMeta" class="container">
+    <saved-changes-message
+      :branch="savedContentMeta.branch"
+      :commit="savedContentMeta.commit"
+      :merge-request="savedContentMeta.mergeRequest"
+      :return-url="appData.returnUrl"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/static_site_editor/router/constants.js b/app/assets/javascripts/static_site_editor/router/constants.js
new file mode 100644
index 00000000000..fd715f918ce
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/router/constants.js
@@ -0,0 +1,2 @@
+export const HOME_ROUTE = { name: 'home' };
+export const SUCCESS_ROUTE = { name: 'success' };
diff --git a/app/assets/javascripts/static_site_editor/router/index.js b/app/assets/javascripts/static_site_editor/router/index.js
new file mode 100644
index 00000000000..12692612bbc
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/router/index.js
@@ -0,0 +1,15 @@
+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;
+}
diff --git a/app/assets/javascripts/static_site_editor/router/routes.js b/app/assets/javascripts/static_site_editor/router/routes.js
new file mode 100644
index 00000000000..6fb9dbe0182
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/router/routes.js
@@ -0,0 +1,21 @@
+import Home from '../pages/home.vue';
+import Success from '../pages/success.vue';
+
+import { HOME_ROUTE, SUCCESS_ROUTE } from './constants';
+
+export default [
+  {
+    ...HOME_ROUTE,
+    path: '/',
+    component: Home,
+  },
+  {
+    ...SUCCESS_ROUTE,
+    path: '/success',
+    component: Success,
+  },
+  {
+    path: '*',
+    redirect: HOME_ROUTE,
+  },
+];
diff --git a/app/assets/javascripts/static_site_editor/services/submit_content_changes.js b/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
index ff591e4b245..49135d2141b 100644
--- a/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
+++ b/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
@@ -1,4 +1,5 @@
 import Api from '~/api';
+import Tracking from '~/tracking';
 import { s__, sprintf } from '~/locale';
 import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
 import generateBranchName from '~/static_site_editor/services/generate_branch_name';
@@ -8,6 +9,7 @@ import {
   SUBMIT_CHANGES_BRANCH_ERROR,
   SUBMIT_CHANGES_COMMIT_ERROR,
   SUBMIT_CHANGES_MERGE_REQUEST_ERROR,
+  TRACKING_ACTION_CREATE_COMMIT,
 } from '../constants';
 
 const createBranch = (projectId, branch) =>
@@ -18,8 +20,10 @@ const createBranch = (projectId, branch) =>
     throw new Error(SUBMIT_CHANGES_BRANCH_ERROR);
   });
 
-const commitContent = (projectId, message, branch, sourcePath, content) =>
-  Api.commitMultiple(
+const commitContent = (projectId, message, branch, sourcePath, content) => {
+  Tracking.event(document.body.dataset.page, TRACKING_ACTION_CREATE_COMMIT);
+
+  return Api.commitMultiple(
     projectId,
     convertObjectPropsToSnakeCase({
       branch,
@@ -35,6 +39,7 @@ const commitContent = (projectId, message, branch, sourcePath, content) =>
   ).catch(() => {
     throw new Error(SUBMIT_CHANGES_COMMIT_ERROR);
   });
+};
 
 const createMergeRequest = (projectId, title, sourceBranch, targetBranch = DEFAULT_TARGET_BRANCH) =>
   Api.createProjectMergeRequest(
@@ -56,8 +61,8 @@ const submitContentChanges = ({ username, projectId, sourcePath, content }) => {
   const meta = {};
 
   return createBranch(projectId, branch)
-    .then(() => {
-      Object.assign(meta, { branch: { label: branch } });
+    .then(({ data: { web_url: url } }) => {
+      Object.assign(meta, { branch: { label: branch, url } });
 
       return commitContent(projectId, mergeRequestTitle, branch, sourcePath, content);
     })
@@ -67,7 +72,7 @@ const submitContentChanges = ({ username, projectId, sourcePath, content }) => {
       return createMergeRequest(projectId, mergeRequestTitle, branch);
     })
     .then(({ data: { iid: label, web_url: url } }) => {
-      Object.assign(meta, { mergeRequest: { label, url } });
+      Object.assign(meta, { mergeRequest: { label: label.toString(), url } });
 
       return meta;
     });
diff --git a/app/assets/javascripts/static_site_editor/store/actions.js b/app/assets/javascripts/static_site_editor/store/actions.js
deleted file mode 100644
index 9f5e9e8c589..00000000000
--- a/app/assets/javascripts/static_site_editor/store/actions.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import createFlash from '~/flash';
-import { __ } from '~/locale';
-
-import * as mutationTypes from './mutation_types';
-import loadSourceContent from '~/static_site_editor/services/load_source_content';
-import submitContentChanges from '~/static_site_editor/services/submit_content_changes';
-
-export const loadContent = ({ commit, state: { sourcePath, projectId } }) => {
-  commit(mutationTypes.LOAD_CONTENT);
-
-  return loadSourceContent({ sourcePath, projectId })
-    .then(data => commit(mutationTypes.RECEIVE_CONTENT_SUCCESS, data))
-    .catch(() => {
-      commit(mutationTypes.RECEIVE_CONTENT_ERROR);
-      createFlash(__('An error ocurred while loading your content. Please try again.'));
-    });
-};
-
-export const setContent = ({ commit }, content) => {
-  commit(mutationTypes.SET_CONTENT, content);
-};
-
-export const submitChanges = ({ state: { projectId, content, sourcePath, username }, commit }) => {
-  commit(mutationTypes.SUBMIT_CHANGES);
-
-  return submitContentChanges({ content, projectId, sourcePath, username })
-    .then(data => commit(mutationTypes.SUBMIT_CHANGES_SUCCESS, data))
-    .catch(error => {
-      commit(mutationTypes.SUBMIT_CHANGES_ERROR, error.message);
-    });
-};
-
-export const dismissSubmitChangesError = ({ commit }) => {
-  commit(mutationTypes.DISMISS_SUBMIT_CHANGES_ERROR);
-};
-
-export default () => {};
diff --git a/app/assets/javascripts/static_site_editor/store/getters.js b/app/assets/javascripts/static_site_editor/store/getters.js
deleted file mode 100644
index ebc68f8e9e6..00000000000
--- a/app/assets/javascripts/static_site_editor/store/getters.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export const contentChanged = ({ originalContent, content }) => originalContent !== content;
diff --git a/app/assets/javascripts/static_site_editor/store/index.js b/app/assets/javascripts/static_site_editor/store/index.js
deleted file mode 100644
index 43256979ddd..00000000000
--- a/app/assets/javascripts/static_site_editor/store/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Vuex from 'vuex';
-import Vue from 'vue';
-import createState from './state';
-import * as getters from './getters';
-import * as actions from './actions';
-import mutations from './mutations';
-
-Vue.use(Vuex);
-
-const createStore = ({ initialState } = {}) => {
-  return new Vuex.Store({
-    state: createState(initialState),
-    getters,
-    actions,
-    mutations,
-  });
-};
-
-export default createStore;
diff --git a/app/assets/javascripts/static_site_editor/store/mutation_types.js b/app/assets/javascripts/static_site_editor/store/mutation_types.js
deleted file mode 100644
index 9cf356aecc5..00000000000
--- a/app/assets/javascripts/static_site_editor/store/mutation_types.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const LOAD_CONTENT = 'loadContent';
-export const RECEIVE_CONTENT_SUCCESS = 'receiveContentSuccess';
-export const RECEIVE_CONTENT_ERROR = 'receiveContentError';
-export const SET_CONTENT = 'setContent';
-export const SUBMIT_CHANGES = 'submitChanges';
-export const SUBMIT_CHANGES_SUCCESS = 'submitChangesSuccess';
-export const SUBMIT_CHANGES_ERROR = 'submitChangesError';
-export const DISMISS_SUBMIT_CHANGES_ERROR = 'dismissSubmitChangesError';
diff --git a/app/assets/javascripts/static_site_editor/store/mutations.js b/app/assets/javascripts/static_site_editor/store/mutations.js
deleted file mode 100644
index 72fe71f1c9b..00000000000
--- a/app/assets/javascripts/static_site_editor/store/mutations.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as types from './mutation_types';
-
-export default {
-  [types.LOAD_CONTENT](state) {
-    state.isLoadingContent = true;
-  },
-  [types.RECEIVE_CONTENT_SUCCESS](state, { title, content }) {
-    state.isLoadingContent = false;
-    state.isContentLoaded = true;
-    state.title = title;
-    state.content = content;
-    state.originalContent = content;
-  },
-  [types.RECEIVE_CONTENT_ERROR](state) {
-    state.isLoadingContent = false;
-  },
-  [types.SET_CONTENT](state, content) {
-    state.content = content;
-  },
-  [types.SUBMIT_CHANGES](state) {
-    state.isSavingChanges = true;
-    state.submitChangesError = '';
-  },
-  [types.SUBMIT_CHANGES_SUCCESS](state, meta) {
-    state.savedContentMeta = meta;
-    state.isSavingChanges = false;
-    state.originalContent = state.content;
-  },
-  [types.SUBMIT_CHANGES_ERROR](state, error) {
-    state.submitChangesError = error;
-    state.isSavingChanges = false;
-  },
-  [types.DISMISS_SUBMIT_CHANGES_ERROR](state) {
-    state.submitChangesError = '';
-  },
-};
diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js
deleted file mode 100644
index 8c524b4ffe9..00000000000
--- a/app/assets/javascripts/static_site_editor/store/state.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const createState = (initialState = {}) => ({
-  username: null,
-  projectId: null,
-  returnUrl: null,
-  sourcePath: null,
-
-  isLoadingContent: false,
-  isSavingChanges: false,
-  isSupportedContent: false,
-
-  isContentLoaded: false,
-
-  originalContent: '',
-  content: '',
-  title: '',
-
-  submitChangesError: '',
-  savedContentMeta: null,
-
-  ...initialState,
-});
-
-export default createState;