[webpack] Scheduling app

corehq/apps/hqwebapp/static/hqwebapp/js/ckeditor_knockout_bindings.js

@@ -1,5 +1,4 @@
 'use strict';
-/* global CKEditor5 */
 
 // When adding a ckeditor binding, be sure to also add the name of an image upload url. 
 // For example <textarea data-bind="ckeditor: message" data-image-upload-url="upload_messaging_image"></textarea>
@@ -9,42 +8,46 @@
     'underscore',
     'knockout',
     'hqwebapp/js/initial_page_data',
+    'ckeditor5/ckeditor5.js',   // This needs the .js extension to differentiate it from ckeditor.css
+                                // and similar files in the same directory
 ], function (
     $,
     _,
     ko,
-    initialPageData
+    initialPageData,
+    CKEditor5
 ) {
     ko.bindingHandlers.ckeditor = {
         init: function (element, valueAccessor) {
             var options = {
+                    licenseKey: 'GPL',
                     plugins: [
-                        CKEditor5.alignment.Alignment,
-                        CKEditor5.link.AutoLink,
-                        CKEditor5.autoformat.Autoformat,
-                        CKEditor5.basicStyles.Bold,
-                        CKEditor5.basicStyles.Italic,
-                        CKEditor5.essentials.Essentials,
-                        CKEditor5.font.Font,
-                        CKEditor5.font.FontColor,
-                        CKEditor5.heading.Heading,
-                        CKEditor5.horizontalLine.HorizontalLine,
-                        CKEditor5.htmlSupport.GeneralHtmlSupport,
-                        CKEditor5.image.Image,
-                        CKEditor5.image.ImageCaption,
-                        CKEditor5.image.ImageStyle,
-                        CKEditor5.image.ImageResize,
-                        CKEditor5.image.ImageResizeButtons,
-                        CKEditor5.image.ImageToolbar,
-                        CKEditor5.image.ImageUpload,
-                        CKEditor5.indent.Indent,
-                        CKEditor5.link.Link,
-                        CKEditor5.link.LinkImage,
-                        CKEditor5.list.List,
-                        CKEditor5.paragraph.Paragraph,
-                        CKEditor5.pasteFromOffice.PasteFromOffice,
-                        CKEditor5.restrictedEditing.RestrictedEditingMode,
-                        CKEditor5.upload.SimpleUploadAdapter,
+                        CKEditor5.Alignment,
+                        CKEditor5.AutoLink,
+                        CKEditor5.Autoformat,
+                        CKEditor5.Bold,
+                        CKEditor5.Italic,
+                        CKEditor5.Essentials,
+                        CKEditor5.Font,
+                        CKEditor5.FontColor,
+                        CKEditor5.Heading,
+                        CKEditor5.HorizontalLine,
+                        CKEditor5.GeneralHtmlSupport,
+                        CKEditor5.Image,
+                        CKEditor5.ImageCaption,
+                        CKEditor5.ImageStyle,
+                        CKEditor5.ImageResize,
+                        CKEditor5.ImageResizeButtons,
+                        CKEditor5.ImageToolbar,
+                        CKEditor5.ImageUpload,
+                        CKEditor5.Indent,
+                        CKEditor5.Link,
+                        CKEditor5.LinkImage,
+                        CKEditor5.List,
+                        CKEditor5.Paragraph,
+                        CKEditor5.PasteFromOffice,
+                        CKEditor5.RestrictedEditingMode,
+                        CKEditor5.SimpleUploadAdapter,
                     ],
                     toolbar: {
                         items: [
@@ -146,7 +149,7 @@
                 },
                 editorInstance = undefined;
 
-            CKEditor5.editorClassic.ClassicEditor.create(element, options).then(function (editor) {
+            CKEditor5.ClassicEditor.create(element, options).then(function (editor) {
                 var isSubscriberChange = false,
                     isEditorChange = false,
                     editorInstance = editor;
@@ -161,7 +164,7 @@
                         valueAccessor()(editorInstance.getData());
                         isEditorChange = false;
                     }
-                    
+
                 });
 
                 // Update the document whenever the observable changes
@@ -181,7 +184,7 @@
 
             // handle disposal (if KO removes by the template binding)
             ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
-                CKEditor5.editorClassic.ClassicEditor.remove(editorInstance);
+                CKEditor5.ClassicEditor.remove(editorInstance);
             });
 
         },

corehq/messaging/scheduling/static/scheduling/js/broadcasts_list.js

@@ -4,7 +4,8 @@ hqDefine("scheduling/js/broadcasts_list", [
     'knockout',
     'hqwebapp/js/assert_properties',
     'hqwebapp/js/initial_page_data',
-    "hqwebapp/js/components/pagination",
+    'hqwebapp/js/components/pagination',
+    'commcarehq',
 ], function (
     $,
     _,

corehq/messaging/scheduling/static/scheduling/js/conditional_alert_list.js

@@ -6,6 +6,7 @@ hqDefine("scheduling/js/conditional_alert_list", [
     'hqwebapp/js/initial_page_data',
     'hqwebapp/js/components/pagination',
     'hqwebapp/js/components/search_box',
+    'commcarehq',
 ], function (
     $,
     ko,

corehq/messaging/scheduling/static/scheduling/js/conditional_alert_main.js

@@ -6,8 +6,9 @@ hqDefine("scheduling/js/conditional_alert_main", [
     'data_interfaces/js/case_rule_criteria',
     'data_interfaces/js/case_property_input',
     'hqwebapp/js/bootstrap3/widgets',
-    'scheduling/js/create_schedule.ko',
+    'scheduling/js/create_schedule',
     'data_interfaces/js/make_read_only',
+    'commcarehq',
 ], function (
     $,
     _,

corehq/messaging/scheduling/static/scheduling/js/create_schedule.ko.js → corehq/messaging/scheduling/static/scheduling/js/create_schedule.js

@@ -1,4 +1,4 @@
-hqDefine("scheduling/js/create_schedule.ko", [
+hqDefine("scheduling/js/create_schedule", [
     'jquery',
     'knockout',
     'hqwebapp/js/initial_page_data',
@@ -9,17 +9,17 @@
     'hqwebapp/js/components/select_toggle',
 ], function ($, ko, initialPageData, select2Handler) {
     ko.bindingHandlers.useTimePicker = {
         init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
             $(element).timepicker({
                 showMeridian: false,
                 showSeconds: false,
                 defaultTime: $(element).val() || '',
             });
         },
         update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {},
     };
 
     var MessageViewModel = function (language_code, message) {
         var self = this;
 
         self.language_code = ko.observable(language_code);
@@ -521,11 +521,11 @@
                 fieldName: field,
                 multiple: true,
             });
-        
+
             self.getHandlerSlug = function () {
                 return 'scheduling_select2_helper';
             };
-        
+
             self.getInitialData = function () {
                 return initial_object_list;
             };
@@ -534,7 +534,7 @@
 
             return self;
         };
-    
+
     recipientsSelect2Handler.prototype = Object.create(recipientsSelect2Handler.prototype);
     recipientsSelect2Handler.prototype.constructor = recipientsSelect2Handler;
 

corehq/messaging/scheduling/static/scheduling/js/create_schedule_main.js

@@ -1,7 +1,8 @@
 hqDefine("scheduling/js/create_schedule_main", [
-    'scheduling/js/create_schedule.ko',
+    'scheduling/js/create_schedule',
     'data_interfaces/js/make_read_only',
     'locations/js/widgets', // remove this altogether?
+    'commcarehq'
 ], function () {
     // This page doesn't have any page-specific logic, it just depends on the modules above
 });

corehq/messaging/scheduling/static/scheduling/js/dashboard.js

@@ -4,6 +4,7 @@ hqDefine("scheduling/js/dashboard",[
     'hqwebapp/js/initial_page_data',
     'd3/d3.min',
     'nvd3/nv.d3.min',
+    'commcarehq',
 ], function ($, ko, initialPageData, d3, nv) {
     var dashboardUrl = initialPageData.reverse("messaging_dashboard");
 

corehq/messaging/scheduling/templates/scheduling/broadcasts_list.html

@@ -2,7 +2,7 @@
 {% load hq_shared_tags %}
 {% load i18n %}
 
-{% requirejs_main 'scheduling/js/broadcasts_list' %}
+{% js_entry_b3 'scheduling/js/broadcasts_list' %}
 
 {% block stylesheets %}{{ block.super }}
   <style>

corehq/messaging/scheduling/templates/scheduling/conditional_alert.html

@@ -3,30 +3,12 @@
 {% load crispy_forms_tags %}
 {% load i18n %}
 
-{% block js %}{{ block.super }}
-  {% if request|toggle_enabled:"RICH_TEXT_EMAILS" %}
-    <script src="{% static 'ckeditor5/build/ckeditor5-dll.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-editor-classic/build/editor-classic.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-autoformat/build/autoformat.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-basic-styles/build/basic-styles.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-block-quote/build/block-quote.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-essentials/build/essentials.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-font/build/font.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-heading/build/heading.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-html-support/build/html-support.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-horizontal-line/build/horizontal-line.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-image/build/image.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-indent/build/indent.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-link/build/link.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-list/build/list.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-restricted-editing/build/restricted-editing.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-alignment/build/alignment.js' %}"></script>
-  {% endif %}
-  {% requirejs_main 'scheduling/js/conditional_alert_main' %}
-{% endblock %}
+{% js_entry_b3 'scheduling/js/conditional_alert_main' %}
 
 {% block stylesheets %}{{ block.super }}
+  {% if request|toggle_enabled:"RICH_TEXT_EMAILS" %}
+    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/44.0.0/ckeditor5.css" />
+  {% endif %}
   <style>
     .nav-tabs li.has-error a, .nav-tabs li.has-error a:focus, .nav-tabs li.has-error a:hover {
       background-color: #f2dede;

corehq/messaging/scheduling/templates/scheduling/conditional_alert_list.html

@@ -2,7 +2,7 @@
 {% load hq_shared_tags %}
 {% load i18n %}
 
-{% requirejs_main "scheduling/js/conditional_alert_list" %}
+{% js_entry_b3 "scheduling/js/conditional_alert_list" %}
 
 {% block stylesheets %}{{ block.super }}
   <style>

corehq/messaging/scheduling/templates/scheduling/create_schedule.html

@@ -3,30 +3,14 @@
 {% load hq_shared_tags %}
 {% load i18n %}
 
-
-{% block js %}{{ block.super }}
+{% block stylesheets %}{{ block.super }}
   {% if request|toggle_enabled:"RICH_TEXT_EMAILS" %}
-    <script src="{% static 'ckeditor5/build/ckeditor5-dll.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-editor-classic/build/editor-classic.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-autoformat/build/autoformat.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-basic-styles/build/basic-styles.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-block-quote/build/block-quote.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-essentials/build/essentials.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-font/build/font.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-heading/build/heading.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-html-support/build/html-support.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-horizontal-line/build/horizontal-line.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-image/build/image.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-indent/build/indent.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-link/build/link.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-list/build/list.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-restricted-editing/build/restricted-editing.js' %}"></script>
-    <script src="{% static '@ckeditor/ckeditor5-alignment/build/alignment.js' %}"></script>
+    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/44.0.0/ckeditor5.css" />
   {% endif %}
-  {% requirejs_main 'scheduling/js/create_schedule_main' %}
 {% endblock %}
 
+{% js_entry_b3 'scheduling/js/create_schedule_main' %}
+
 {% block page_content %}{{ block.super }}
   {% initial_page_data 'read_only_mode' read_only_mode %}
   <p class="help-block">

corehq/messaging/scheduling/templates/scheduling/dashboard.html

@@ -2,7 +2,7 @@
 {% load hq_shared_tags %}
 {% load i18n %}
 
-{% requirejs_main 'scheduling/js/dashboard' %}
+{% js_entry_b3 'scheduling/js/dashboard' %}
 
 {% block page_content %}
   {% registerurl 'messaging_dashboard' domain %}

package.json

@@ -7,12 +7,6 @@
     "dependencies": {
         "@babel/core": "7.25.2",
         "@babel/standalone": "^7.21.4",
-        "@ckeditor/ckeditor5-alignment": "^43.3.1",
-        "@ckeditor/ckeditor5-build-classic": "^43.3.1",
-        "@ckeditor/ckeditor5-font": "^43.3.1",
-        "@ckeditor/ckeditor5-horizontal-line": "^43.3.1",
-        "@ckeditor/ckeditor5-html-support": "^43.3.1",
-        "@ckeditor/ckeditor5-restricted-editing": "^43.3.1",
         "@eonasdan/tempus-dominus": "npm:@eonasdan/tempus-dominus#6.9.4",
         "@fortawesome/fontawesome-free": "npm:@fortawesome/fontawesome-free#6.5.1",
         "@mapbox/mapbox-gl-draw": "1.4.3",
@@ -34,6 +28,7 @@
         "bootstrap-timepicker": "0.5.1",
         "bootstrap5": "npm:[email protected]",
         "calendars": "kbwood/calendars#2.1.2",
+        "ckeditor5": "44.0.0",
         "clipboard": "1.5.15",
         "crypto-js": "4.2.0",
         "d3": "3.5.17",

webpack/appPaths.js

@@ -18,6 +18,7 @@ const nonStandardAppPaths = {
     "soil": path.resolve(EX_SUBMODULES_PATH, 'soil'),
     "langcodes": path.resolve(SUBMODULES_PATH, 'langcodes'),
     "motech": MOTECH_PATH,
+    "scheduling": path.resolve(MESSAGING_PATH, 'scheduling'),
     "telerivet": path.resolve(MESSAGING_PATH, 'smsbackends', 'telerivet'),
     // the path itself is standard, but the app has no templates so getStandardAppPaths filters it out
     "smsbillables": path.resolve(APPS_PATH, 'smsbillables'),

webpack/webpack.common.js

@@ -68,6 +68,17 @@ module.exports = {
                 },
             },
 
+            {
+                test: /nvd3\/nv\.d3\.min/,
+                loader: "exports-loader",
+                options: {
+                    type: "commonjs",
+                    exports: {
+                        syntax: "single",
+                        name: "nv",
+                    },
+                },
+            },
             {
                 test: /sentry\.browser/,
                 loader: "exports-loader",