Merge branch '218529-change-image-upload-path' into 'master'

Update image upload path

See merge request gitlab-org/gitlab!46967

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

@@ -6,7 +6,6 @@ import EditDrawer from './edit_drawer.vue';
 import UnsavedChangesConfirmDialog from './unsaved_changes_confirm_dialog.vue';
 import parseSourceFile from '~/static_site_editor/services/parse_source_file';
 import { EDITOR_TYPES } from '~/vue_shared/components/rich_content_editor/constants';
-import { DEFAULT_IMAGE_UPLOAD_PATH } from '../constants';
 import imageRepository from '../image_repository';
 import formatter from '../services/formatter';
 import templater from '../services/templater';
@@ -48,9 +47,7 @@ export default {
     },
     imageRoot: {
       type: String,
-      required: false,
-      default: DEFAULT_IMAGE_UPLOAD_PATH,
-      validator: prop => prop.endsWith('/'),
+      required: true,
     },
   },
   data() {

app/assets/javascripts/static_site_editor/constants.js

@@ -20,6 +20,4 @@ export const TRACKING_ACTION_CREATE_COMMIT = 'create_commit';
 export const TRACKING_ACTION_CREATE_MERGE_REQUEST = 'create_merge_request';
 export const TRACKING_ACTION_INITIALIZE_EDITOR = 'initialize_editor';
 
-export const DEFAULT_IMAGE_UPLOAD_PATH = 'source/images/uploads/';
-
 export const MR_META_LOCAL_STORAGE_KEY = 'sse-merge-request-meta-storage-key';

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

@@ -10,5 +10,6 @@ query appData {
       source
       target
     }
+    imageUploadPath
   }
 }

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

@@ -27,6 +27,7 @@ type AppData {
   sourcePath: String!
   username: String!
   mounts: [Mount]!
+  imageUploadPath: String!
 }
 
 input HasSubmittedChangesInput {

app/assets/javascripts/static_site_editor/index.js

@@ -16,7 +16,6 @@ const initStaticSiteEditor = el => {
     //       so we are adding them here as a convenience for future use.
     // eslint-disable-next-line no-unused-vars
     staticSiteGenerator,
-    // eslint-disable-next-line no-unused-vars
     imageUploadPath,
     mounts,
   } = el.dataset;
@@ -31,6 +30,7 @@ const initStaticSiteEditor = el => {
     returnUrl,
     sourcePath,
     username,
+    imageUploadPath,
   });
 
   return new Vue({

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

@@ -140,6 +140,7 @@ export default {
         :return-url="appData.returnUrl"
         :mounts="appData.mounts"
         :project="appData.project"
+        :image-root="appData.imageUploadPath"
         @submit="onPrepareSubmit"
       />
       <edit-meta-modal

app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue

 <script>
 import { GlModal, GlFormGroup, GlFormInput, GlTabs, GlTab } from '@gitlab/ui';
-import { isSafeURL } from '~/lib/utils/url_utility';
+import { isSafeURL, joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { IMAGE_TABS } from '../../constants';
@@ -74,7 +74,7 @@ export default {
         return;
       }
 
-      const imageUrl = `${this.imageRoot}${file.name}`;
+      const imageUrl = joinPaths(this.imageRoot, file.name);
 
       this.$emit('addImage', { imageUrl, file, altText: altText || file.name });
     },

app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue

@@ -53,7 +53,6 @@ export default {
     imageRoot: {
       type: String,
       required: true,
-      validator: prop => prop.endsWith('/'),
     },
   },
   data() {

changelogs/unreleased/218529-change-image-upload-path.yml

+---
+title: Update image upload path (SSE)
+merge_request: 46967
+author:
+type: changed

spec/frontend/static_site_editor/components/edit_area_spec.js

@@ -17,6 +17,7 @@ import {
   returnUrl,
   mounts,
   project,
+  imageRoot,
 } from '../mock_data';
 
 jest.mock('~/static_site_editor/services/formatter', () => jest.fn(str => `${str} format-pass`));
@@ -35,6 +36,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
         returnUrl,
         mounts,
         project,
+        imageRoot,
         savingChanges,
         ...propsData,
       },

spec/frontend/static_site_editor/mock_data.js

@@ -79,3 +79,5 @@ export const mounts = [
     target: '',
   },
 ];
+
+export const imageRoot = 'source/images/';

spec/frontend/static_site_editor/pages/home_spec.js

@@ -24,6 +24,7 @@ import {
   trackingCategory,
   images,
   mounts,
+  imageRoot,
 } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -43,6 +44,7 @@ describe('static_site_editor/pages/home', () => {
     username,
     sourcePath,
     mounts,
+    imageUploadPath: imageRoot,
   };
   const hasSubmittedChangesMutationPayload = {
     data: {