Add support for Draftail ModalWorkflow JS to use chooserUrls supplied

Instead of relying on global window.chooserUrls, add the support for also passing in entityType config objects that serve the same purpose.

Update JS unit tests to reflect that the future will no longer support the window.chooserUrls

client/src/components/Draftail/sources/ModalWorkflowSource.js

@@ -173,16 +173,21 @@ class ImageModalWorkflowSource extends ModalWorkflowSource {
   getChooserConfig(entity) {
     let url;
     let urlParams;
+    const { imageChooser } = {
+      ...this.props.entityType?.chooserUrls,
+      /** @deprecated RemovedInWagtail70 - Remove global.chooserUrls usage  */
+      ...global.chooserUrls,
+    };
 
     if (entity) {
       const data = entity.getData();
-      url = `${global.chooserUrls.imageChooser}${data.id}/select_format/`;
+      url = `${imageChooser}${data.id}/select_format/`;
       urlParams = {
         format: data.format,
         alt_text: data.alt,
       };
     } else {
-      url = `${global.chooserUrls.imageChooser}?select_format=true`;
+      url = `${imageChooser}?select_format=true`;
       urlParams = {};
     }
     return {
@@ -207,13 +212,18 @@ class ImageModalWorkflowSource extends ModalWorkflowSource {
 
 class EmbedModalWorkflowSource extends ModalWorkflowSource {
   getChooserConfig(entity) {
+    const { embedsChooser } = {
+      ...this.props.entityType?.chooserUrls,
+      /** @deprecated RemovedInWagtail70 - Remove global.chooserUrls usage  */
+      ...global.chooserUrls,
+    };
     const urlParams = {};
 
     if (entity) {
       urlParams.url = entity.getData().url;
     }
     return {
-      url: global.chooserUrls.embedsChooser,
+      url: embedsChooser,
       urlParams,
       onload: global.EMBED_CHOOSER_MODAL_ONLOAD_HANDLERS,
       responses: {
@@ -237,7 +247,13 @@ class EmbedModalWorkflowSource extends ModalWorkflowSource {
 
 class LinkModalWorkflowSource extends ModalWorkflowSource {
   getChooserConfig(entity, selectedText) {
-    let url = global.chooserUrls.pageChooser;
+    const chooserUrls = {
+      ...this.props.entityType?.chooserUrls,
+      /** @deprecated RemovedInWagtail70 - Remove global.chooserUrls usage  */
+      ...global.chooserUrls,
+    };
+    let url = chooserUrls.pageChooser;
+
     const urlParams = {
       page_type: 'wagtailcore.page',
       allow_external_link: true,
@@ -252,21 +268,21 @@ class LinkModalWorkflowSource extends ModalWorkflowSource {
 
       if (data.id) {
         if (data.parentId !== null) {
-          url = `${global.chooserUrls.pageChooser}${data.parentId}/`;
+          url = `${chooserUrls.pageChooser}${data.parentId}/`;
         } else {
-          url = global.chooserUrls.pageChooser;
+          url = chooserUrls.pageChooser;
         }
       } else if (data.url.startsWith('mailto:')) {
-        url = global.chooserUrls.emailLinkChooser;
+        url = chooserUrls.emailLinkChooser;
         urlParams.link_url = data.url.replace('mailto:', '');
       } else if (data.url.startsWith('tel:')) {
-        url = global.chooserUrls.phoneLinkChooser;
+        url = chooserUrls.phoneLinkChooser;
         urlParams.link_url = data.url.replace('tel:', '');
       } else if (data.url.startsWith('#')) {
-        url = global.chooserUrls.anchorLinkChooser;
+        url = chooserUrls.anchorLinkChooser;
         urlParams.link_url = data.url.replace('#', '');
       } else {
-        url = global.chooserUrls.externalLinkChooser;
+        url = chooserUrls.externalLinkChooser;
         urlParams.link_url = data.url;
       }
     }
@@ -298,8 +314,14 @@ class LinkModalWorkflowSource extends ModalWorkflowSource {
 
 class DocumentModalWorkflowSource extends ModalWorkflowSource {
   getChooserConfig() {
+    const { documentChooser } = {
+      ...this.props.entityType?.chooserUrls,
+      /** @deprecated RemovedInWagtail70 - Remove global.chooserUrls usage  */
+      ...global.chooserUrls,
+    };
+
     return {
-      url: global.chooserUrls.documentChooser,
+      url: documentChooser,
       urlParams: {},
       onload: global.DOCUMENT_CHOOSER_MODAL_ONLOAD_HANDLERS,
       responses: {

client/src/components/Draftail/sources/ModalWorkflowSource.test.js

@@ -44,7 +44,13 @@ describe('ModalWorkflowSource', () => {
   });
 
   describe('#getChooserConfig', () => {
-    const imageSource = new ImageModalWorkflowSource();
+    const imageSource = new ImageModalWorkflowSource({
+      entityType: {
+        chooserUrls: {
+          imageChooser: '/admin/images/chooser/',
+        },
+      },
+    });
     it('IMAGE without entity', () => {
       expect(imageSource.getChooserConfig(null, '')).toEqual({
         url: '/admin/images/chooser/?select_format=true',
@@ -67,7 +73,13 @@ describe('ModalWorkflowSource', () => {
       });
     });
 
-    const embedSource = new EmbedModalWorkflowSource();
+    const embedSource = new EmbedModalWorkflowSource({
+      entityType: {
+        chooserUrls: {
+          embedsChooser: '/admin/embeds/chooser/',
+        },
+      },
+    });
     it('EMBED without entity', () => {
       expect(embedSource.getChooserConfig(null, '')).toMatchObject({
         url: '/admin/embeds/chooser/',
@@ -85,7 +97,13 @@ describe('ModalWorkflowSource', () => {
       });
     });
 
-    const documentSource = new DocumentModalWorkflowSource();
+    const documentSource = new DocumentModalWorkflowSource({
+      entityType: {
+        chooserUrls: {
+          documentChooser: '/admin/documents/chooser/',
+        },
+      },
+    });
     it('DOCUMENT', () => {
       expect(documentSource.getChooserConfig(null, '')).toEqual({
         url: '/admin/documents/chooser/',
@@ -95,7 +113,17 @@ describe('ModalWorkflowSource', () => {
       });
     });
 
-    const linkSource = new LinkModalWorkflowSource();
+    const linkSource = new LinkModalWorkflowSource({
+      entityType: {
+        chooserUrls: {
+          pageChooser: '/admin/choose-page/',
+          emailLinkChooser: '/admin/choose-email-link/',
+          externalLinkChooser: '/admin/choose-external-link/',
+          anchorLinkChooser: '/admin/choose-anchor-link/',
+          phoneLinkChooser: 'admin/choose-phone-link/',
+        },
+      },
+    });
     describe('LINK', () => {
       it('no entity', () => {
         expect(linkSource.getChooserConfig(null, '')).toMatchSnapshot();

client/tests/stubs.js

@@ -46,16 +46,6 @@ global.wagtailVersion = '1.6a1';
 
 global.wagtail = {};
 
-global.chooserUrls = {
-  documentChooser: '/admin/documents/chooser/',
-  emailLinkChooser: '/admin/choose-email-link/',
-  anchorLinkChooser: '/admin/choose-anchor-link',
-  embedsChooser: '/admin/embeds/chooser/',
-  externalLinkChooser: '/admin/choose-external-link/',
-  imageChooser: '/admin/images/chooser/',
-  pageChooser: '/admin/choose-page/',
-};
-
 /* use dummy content for onload handlers just so that we can verify that we've chosen the right one */
 global.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { type: 'image' };
 global.PAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { type: 'page' };