Reactify email sending dialog (indico#5547)

Co-authored-by: Pedro Lourenço <[email protected]> Co-authored-by: Adrian Moennich <[email protected]>
javfg · Nov 24, 2022 · f0f318c · f0f318c
1 parent 3b7a87c
commit f0f318c
Show file tree

Hide file tree

Showing 19 changed files with 706 additions and 125 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -30,6 +30,7 @@ settings:
         - ['indico/modules/events/reviewing', './indico/modules/events/client/js/reviewing']
         - ['indico/modules/events/editing', './indico/modules/events/editing/client/js']
         - ['indico/modules/events/management', './indico/modules/events/management/client/js']
+        - ['indico/modules/events/persons', './indico/modules/events/persons/client/js']
         - ['indico/modules/events', './indico/modules/events/client/js']
         - ['indico', './indico/web/client/js']
       extensions: [.js, .jsx, .json]

diff --git a/CHANGES.rst b/CHANGES.rst
@@ -20,6 +20,11 @@ Bugfixes
   on someone's behalf (:pr:`5574`)
 - Disallow nonsensical retention periods and visibility durations (:pr:`5576`)
 
+Internal Changes
+^^^^^^^^^^^^^^^^
+
+- Refactor email-sending dialog using React (:pr:`5547`)
+
 
 Version 3.2.1
 -------------

diff --git a/indico/modules/events/management/client/js/index.js b/indico/modules/events/management/client/js/index.js
@@ -17,13 +17,37 @@ import 'indico/modules/events/util/static_filters';
 
 import './badges';
 
+import {EmailButton} from 'indico/modules/events/persons/Email';
 import {$T} from 'indico/utils/i18n';
 import {natSortCompare} from 'indico/utils/sort';
 
 import {SingleEventMove, EventPublish} from './EventMove';
 import {SeriesManagement} from './SeriesManagement';
 
 (function(global) {
+  global.setupEmailButton = function setupEmailButton(field, trigger) {
+    const element = document.querySelector(field);
+    const {eventId, roleId, personSelector, userSelector} = element.dataset;
+    const extraParams = {};
+    if (element.dataset.noAccount !== undefined) {
+      extraParams.noAccount = true;
+    }
+    if (element.dataset.notInvitedOnly !== undefined) {
+      extraParams.notInvitedOnly = true;
+    }
+    ReactDOM.render(
+      <EmailButton
+        eventId={+eventId}
+        roleId={roleId && +roleId}
+        personSelector={personSelector}
+        userSelector={userSelector}
+        triggerSelector={trigger}
+        {...extraParams}
+      />,
+      element
+    );
+  };
+
   global.setupEventManagementActionMenu = function setupEventManagementActionMenu() {
     const moveContainer = document.querySelector('#event-action-move-container');
     if (moveContainer) {

diff --git a/indico/modules/events/management/templates/_base_person_list.html b/indico/modules/events/management/templates/_base_person_list.html
@@ -37,18 +37,18 @@
         </table>
     </div>
     <div class="form-group-mail hide-if-locked">
-        <button class="i-button icon-mail right highlight disabled js-requires-selected-row"
-                {% block send_email_href %}
-                    data-href="{{ url_for('persons.email_event_persons', event) }}"
-                {% endblock %}
-                data-title="{% trans %}Send email{% endtrans %}"
-                data-method="POST"
-                data-params-selector="#person-list-table input[name=person_id]:checkbox:checked:visible, #person-list-table input[name=user_id]:checkbox:checked:visible"
-                data-ajax-dialog>
+        <div id="persons-email"
+             data-event-id="{{ event.id }}"
+             data-user-selector="#person-list-table input[name=user_id][type=checkbox]:checked"
+             data-person-selector="#person-list-table input[name=person_id][type=checkbox]:checked">
+        </div>
+        <button id="persons-email-trigger"
+                class="i-button icon-mail right highlight disabled js-requires-selected-row">
             {%- trans %}Send emails{% endtrans -%}
         </button>
     </div>
 </div>
 <script>
     setupEventPersonsList();
+    setupEmailButton('#persons-email', '#persons-email-trigger');
 </script>
diff --git a/indico/modules/events/persons/blueprint.py b/indico/modules/events/persons/blueprint.py
@@ -5,7 +5,8 @@
 # modify it under the terms of the MIT License; see the
 # LICENSE file for more details.
 
-from indico.modules.events.persons.controllers import (RHDeleteUnusedEventPerson, RHEmailEventPersons,
+from indico.modules.events.persons.controllers import (RHAPIEmailEventPersonsMetadata, RHAPIEmailEventPersonsSend,
+                                                       RHDeleteUnusedEventPerson, RHEmailEventPersonsPreview,
                                                        RHEventPersonSearch, RHGrantModificationRights,
                                                        RHGrantSubmissionRights, RHManagePersonLists, RHPersonsList,
                                                        RHRevokeSubmissionRights, RHUpdateEventPerson)
@@ -16,7 +17,12 @@
                       url_prefix='/event/<int:event_id>/manage')
 
 _bp.add_url_rule('/persons/', 'person_list', RHPersonsList)
-_bp.add_url_rule('/persons/email', 'email_event_persons', RHEmailEventPersons, methods=('POST',))
+_bp.add_url_rule('/api/persons/email/send', 'api_email_event_persons_send', RHAPIEmailEventPersonsSend,
+                 methods=('POST',))
+_bp.add_url_rule('/api/persons/email/metadata', 'api_email_event_persons_metadata', RHAPIEmailEventPersonsMetadata,
+                 methods=('POST',))
+_bp.add_url_rule('/api/persons/email/preview', 'email_event_persons_preview', RHEmailEventPersonsPreview,
+                 methods=('POST',))
 _bp.add_url_rule('/persons/grant-submission', 'grant_submission_rights', RHGrantSubmissionRights, methods=('POST',))
 _bp.add_url_rule('/persons/grant-modification', 'grant_modification_rights', RHGrantModificationRights,
                  methods=('POST',))