Convert the embed chooser modal to use static onload handlers

.eslintignore

@@ -17,7 +17,5 @@ wagtail/users/static
 wagtail/admin/templates/wagtailadmin/edit_handlers/inline_panel.js
 wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/includes/searchpromotions_formset.js
 wagtail/users/templates/wagtailusers/groups/includes/page_permissions_formset.js
-wagtail/embeds/templates/wagtailembeds/chooser/embed_chosen.js
-wagtail/embeds/templates/wagtailembeds/chooser/chooser.js
 wagtail/documents/templates/wagtaildocs/chooser/chooser.js
 wagtail/documents/templates/wagtaildocs/chooser/document_chosen.js

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

@@ -33,7 +33,7 @@ export const getChooserConfig = (entityType, entity, selectedText) => {
     return {
       url: global.chooserUrls.embedsChooser,
       urlParams: {},
-      onload: {},
+      onload: global.EMBED_CHOOSER_MODAL_ONLOAD_HANDLERS,
     };
 
   case ENTITY_TYPE.LINK:

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

@@ -42,7 +42,7 @@ describe('ModalWorkflowSource', () => {
       expect(getChooserConfig({ type: 'EMBED' }, null, '')).toEqual({
         url: '/admin/embeds/chooser/',
         urlParams: {},
-        onload: {},
+        onload: global.EMBED_CHOOSER_MODAL_ONLOAD_HANDLERS,
       });
     });
 

client/tests/stubs.js

@@ -61,6 +61,7 @@ global.chooserUrls = {
 /* 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' };
+global.EMBED_CHOOSER_MODAL_ONLOAD_HANDLERS = { type: 'embed' };
 
 const jQueryObj = {
   on: jest.fn(),

wagtail/embeds/static_src/wagtailembeds/js/embed-chooser-modal.js

@@ -0,0 +1,23 @@
+EMBED_CHOOSER_MODAL_ONLOAD_HANDLERS = {
+    'chooser': function(modal, jsonData) {
+        $('form.embed-form', modal.body).on('submit', function() {
+            var formdata = new FormData(this);
+
+            $.ajax({
+                url: this.action,
+                data: formdata,
+                processData: false,
+                contentType: false,
+                type: 'POST',
+                dataType: 'text',
+                success: modal.loadResponseText
+            });
+
+            return false;
+        });
+    },
+    'embed_chosen': function(modal, jsonData) {
+        modal.respond('embedChosen', jsonData['embed_html'], jsonData['embed_data']);
+        modal.close();
+    }
+};

wagtail/embeds/static_src/wagtailembeds/js/hallo-plugins/hallo-wagtailembeds.js

@@ -29,6 +29,7 @@
 
                     return ModalWorkflow({
                         url: window.chooserUrls.embedsChooser,
+                        onload: global.EMBED_CHOOSER_MODAL_ONLOAD_HANDLERS,
                         responses: {
                             embedChosen: function(embedData) {
                                 var elem;

wagtail/embeds/templates/wagtailembeds/chooser/chooser.js

@@ -1,17 +0,0 @@
-function(modal) {
-    $('form.embed-form', modal.body).on('submit', function() {
-        var formdata = new FormData(this);
-
-        $.ajax({
-            url: this.action,
-            data: formdata,
-            processData: false,
-            contentType: false,
-            type: 'POST',
-            dataType: 'text',
-            success: modal.loadResponseText
-        });
-
-        return false;
-    });
-}

wagtail/embeds/templates/wagtailembeds/chooser/embed_chosen.js

@@ -1,4 +0,0 @@
-function(modal, jsonData) {
-    modal.respond('embedChosen', jsonData['embed_html'], jsonData['embed_data']);
-    modal.close();
-}

wagtail/embeds/tests.py

@@ -1,3 +1,4 @@
+import json
 import unittest
 import urllib.request
 from urllib.error import URLError
@@ -172,7 +173,9 @@ class TestChooser(TestCase, WagtailTestUtils):
     def test_chooser_with_edit_params(self):
         r = self.client.get('/admin/embeds/chooser/?url=http://example2.com')
         self.assertEqual(r.status_code, 200)
-        self.assertContains(r, 'value=\\"http://example2.com\\"')
+        response_json = json.loads(r.content.decode())
+        self.assertEqual(response_json['step'], 'chooser')
+        self.assertIn('value="http://example2.com"', response_json['html'])
 
     @patch('wagtail.embeds.embeds.get_embed')
     def test_submit_valid_embed(self, get_embed):
@@ -182,8 +185,9 @@ class TestChooser(TestCase, WagtailTestUtils):
             'url': 'http://www.example.com/'
         })
         self.assertEqual(response.status_code, 200)
-        self.assertContains(response, """modal.respond('embedChosen'""")
+        response_json = json.loads(response.content.decode())
-        self.assertContains(response, """An example embed""")
+        self.assertEqual(response_json['step'], 'embed_chosen')
+        self.assertEqual(response_json['embed_data']['title'], "An example embed")
 
     @patch('wagtail.embeds.embeds.get_embed')
     def test_submit_unrecognised_embed(self, get_embed):
@@ -193,8 +197,10 @@ class TestChooser(TestCase, WagtailTestUtils):
             'url': 'http://www.example.com/'
         })
         self.assertEqual(response.status_code, 200)
-        self.assertNotContains(response, """modal.respond('embedChosen'""")
+
-        self.assertContains(response, """Cannot find an embed for this URL.""")
+        response_json = json.loads(response.content.decode())
+        self.assertEqual(response_json['step'], 'chooser')
+        self.assertIn("Cannot find an embed for this URL.", response_json['html'])
 
 
 class TestEmbedly(TestCase):

wagtail/embeds/views/chooser.py

@@ -12,9 +12,11 @@ from wagtail.embeds.forms import EmbedForm
 def chooser(request):
     form = EmbedForm(initial=request.GET.dict())
 
-    return render_modal_workflow(request, 'wagtailembeds/chooser/chooser.html', 'wagtailembeds/chooser/chooser.js', {
+    return render_modal_workflow(
-        'form': form,
+        request, 'wagtailembeds/chooser/chooser.html', None,
-    })
+        {'form': form},
+        json_data={'step': 'chooser'}
+    )
 
 
 def chooser_upload(request):
@@ -35,8 +37,8 @@ def chooser_upload(request):
                     'title': embed_obj.title,
                 }
                 return render_modal_workflow(
-                    request, None, 'wagtailembeds/chooser/embed_chosen.js',
+                    request, None, None,
-                    None, json_data={'embed_html': embed_html, 'embed_data': embed_data}
+                    None, json_data={'step': 'embed_chosen', 'embed_html': embed_html, 'embed_data': embed_data}
                 )
             except AccessDeniedEmbedlyException:
                 error = _("There seems to be a problem with your embedly API key. Please check your settings.")
@@ -52,16 +54,15 @@ def chooser_upload(request):
                 errors = form._errors.setdefault('url', ErrorList())
                 errors.append(error)
                 return render_modal_workflow(
-                    request,
+                    request, 'wagtailembeds/chooser/chooser.html', None,
-                    'wagtailembeds/chooser/chooser.html',
+                    {'form': form},
-                    'wagtailembeds/chooser/chooser.js',
+                    json_data={'step': 'chooser'}
-                    {
-                        'form': form,
-                    }
                 )
     else:
         form = EmbedForm()
 
-    return render_modal_workflow(request, 'wagtailembeds/chooser/chooser.html', 'wagtailembeds/chooser/chooser.js', {
+    return render_modal_workflow(
-        'form': form,
+        request, 'wagtailembeds/chooser/chooser.html', None,
-    })
+        {'form': form},
+        json_data={'step': 'chooser'}
+    )

wagtail/embeds/wagtail_hooks.py

@@ -40,7 +40,10 @@ def register_embed_feature(features):
         'hallo', 'embed',
         HalloPlugin(
             name='hallowagtailembeds',
-            js=['wagtailembeds/js/hallo-plugins/hallo-wagtailembeds.js'],
+            js=[
+                'wagtailembeds/js/embed-chooser-modal.js',
+                'wagtailembeds/js/hallo-plugins/hallo-wagtailembeds.js',
+            ],
         )
     )
 
@@ -54,7 +57,7 @@ def register_embed_feature(features):
             'type': 'EMBED',
             'icon': 'media',
             'description': _('Embed'),
-        })
+        }, js=['wagtailembeds/js/embed-chooser-modal.js'])
     )
 
     # define how to convert between contentstate's representation of embeds and