Add mounts data to apollo cache

Added the mounts data for SSE to the apollo cache

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

@@ -37,6 +37,10 @@ export default {
       required: false,
       default: '',
     },
+    mounts: {
+      type: Array,
+      required: true,
+    },
     imageRoot: {
       type: String,
       required: false,

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

@@ -25,11 +25,15 @@ const createApolloProvider = appData => {
     },
   );
 
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  const mounts = appData.mounts.map(mount => ({ __typename: 'Mount', ...mount }));
+
   defaultClient.cache.writeData({
     data: {
       appData: {
         __typename: 'AppData',
         ...appData,
+        mounts,
       },
     },
   });

app/assets/javascripts/static_site_editor/graphql/queries/app_data.query.graphql

@@ -6,5 +6,9 @@ query appData {
     sourcePath
     username
     returnUrl
+    mounts {
+      source
+      target
+    }
   }
 }

app/assets/javascripts/static_site_editor/graphql/typedefs.graphql

@@ -14,6 +14,11 @@ type SavedContentMeta {
   branch: SavedContentField!
 }
 
+type Mount {
+  source: String!
+  target: String
+}
+
 type AppData {
   isSupportedContent: Boolean!
   hasSubmittedChanges: Boolean!
@@ -21,6 +26,7 @@ type AppData {
   returnUrl: String
   sourcePath: String!
   username: String!
+  mounts: [Mount]!
 }
 
 input HasSubmittedChangesInput {

app/assets/javascripts/static_site_editor/index.js

@@ -20,9 +20,6 @@ const initStaticSiteEditor = el => {
     imageUploadPath,
     mounts,
   } = el.dataset;
-  // NOTE that the object in 'mounts' is a JSON string from the data attribute, so it must be parsed into an object.
-  // eslint-disable-next-line no-unused-vars
-  const mountsObject = JSON.parse(mounts);
   const { current_username: username } = window.gon;
   const returnUrl = el.dataset.returnUrl || null;
   const router = createRouter(baseUrl);
@@ -30,6 +27,7 @@ const initStaticSiteEditor = el => {
     isSupportedContent: parseBoolean(isSupportedContent),
     hasSubmittedChanges: false,
     project: `${namespace}/${project}`,
+    mounts: JSON.parse(mounts), // NOTE that the object in 'mounts' is a JSON string from the data attribute, so it must be parsed into an object.
     returnUrl,
     sourcePath,
     username,

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

@@ -138,6 +138,7 @@ export default {
         :content="sourceContent.content"
         :saving-changes="isSavingChanges"
         :return-url="appData.returnUrl"
+        :mounts="appData.mounts"
         @submit="onPrepareSubmit"
       />
       <edit-meta-modal

spec/frontend/static_site_editor/components/edit_area_spec.js

@@ -15,6 +15,7 @@ import {
   sourceContentHeaderObjYAML as headerSettings,
   sourceContentBody as body,
   returnUrl,
+  mounts,
 } from '../mock_data';
 
 jest.mock('~/static_site_editor/services/formatter', () => jest.fn(str => `${str} format-pass`));
@@ -31,6 +32,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
         title,
         content,
         returnUrl,
+        mounts,
         savingChanges,
         ...propsData,
       },

spec/frontend/static_site_editor/mock_data.js

@@ -67,3 +67,10 @@ export const images = new Map([
   ['path/to/image1.png', 'image1-content'],
   ['path/to/image2.png', 'image2-content'],
 ]);
+
+export const mounts = [
+  {
+    source: 'some/source/',
+    target: '',
+  },
+];

spec/frontend/static_site_editor/pages/home_spec.js

@@ -23,6 +23,7 @@ import {
   submitChangesError,
   trackingCategory,
   images,
+  mounts,
 } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -41,6 +42,7 @@ describe('static_site_editor/pages/home', () => {
     project,
     username,
     sourcePath,
+    mounts,
   };
   const hasSubmittedChangesMutationPayload = {
     data: {
@@ -119,6 +121,7 @@ describe('static_site_editor/pages/home', () => {
     it('provides source content, returnUrl, and isSavingChanges to the edit area', () => {
       expect(findEditArea().props()).toMatchObject({
         title,
+        mounts,
         content,
         returnUrl,
         savingChanges: false,