Pass merge requests illustration to SSSE

Pass merge requests illustration path to the
Static Site Editor app

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

+<script>
+export default {
+  props: {
+    mergeRequestsIllustrationPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
 <template>
-  <router-view />
+  <router-view v-bind="$props" />
 </template>

app/assets/javascripts/static_site_editor/index.js

@@ -5,7 +5,14 @@ import createRouter from './router';
 import createApolloProvider from './graphql';
 
 const initStaticSiteEditor = el => {
-  const { isSupportedContent, path: sourcePath, baseUrl, namespace, project } = el.dataset;
+  const {
+    isSupportedContent,
+    path: sourcePath,
+    baseUrl,
+    namespace,
+    project,
+    mergeRequestsIllustrationPath,
+  } = el.dataset;
   const { current_username: username } = window.gon;
   const returnUrl = el.dataset.returnUrl || null;
 
@@ -26,7 +33,11 @@ const initStaticSiteEditor = el => {
       App,
     },
     render(createElement) {
-      return createElement('app');
+      return createElement('app', {
+        props: {
+          mergeRequestsIllustrationPath,
+        },
+      });
     },
   });
 };

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

-#static-site-editor{ data: @config.payload }
+#static-site-editor{ data: @config.payload.merge({ merge_requests_illustration_path: image_path('illustrations/merge_requests.svg') }) }

spec/frontend/static_site_editor/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import App from '~/static_site_editor/components/app.vue';
+
+describe('static_site_editor/components/app', () => {
+  const mergeRequestsIllustrationPath = 'illustrations/merge_requests.svg';
+  const RouterView = {
+    template: '<div></div>',
+  };
+  let wrapper;
+
+  const buildWrapper = () => {
+    wrapper = shallowMount(App, {
+      stubs: {
+        RouterView,
+      },
+      propsData: {
+        mergeRequestsIllustrationPath,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('passes merge request illustration path to the router view component', () => {
+    buildWrapper();
+
+    expect(wrapper.find(RouterView).attributes()).toMatchObject({
+      mergerequestsillustrationpath: mergeRequestsIllustrationPath,
+    });
+  });
+});