MDL-75596 course: Allow inserting activities everywhere

Co-authored-by: Mathew May <mathewm@hotmail.co.nz>

course/amd/src/activitychooser.js

@@ -146,7 +146,12 @@ const registerListenerEvents = (courseId, chooserConfig) => {
                 }
 
                 // Apply the section id to all the module instance links.
-                const builtModuleData = sectionIdMapper(data, caller.dataset.sectionid, caller.dataset.sectionreturnid);
+                const builtModuleData = sectionIdMapper(
+                    data,
+                    caller.dataset.sectionid,
+                    caller.dataset.sectionreturnid,
+                    caller.dataset.beforemod
+                );
 
                 ChooserDialogue.displayChooser(
                     sectionModal,
@@ -172,13 +177,14 @@ const registerListenerEvents = (courseId, chooserConfig) => {
  * @param {Object} webServiceData Our original data from the Web service call
  * @param {Number} id The ID of the section we need to append to the links
  * @param {Number|null} sectionreturnid The ID of the section return we need to append to the links
+ * @param {Number|null} beforemod The ID of the cm we need to append to the links
  * @return {Array} [modules] with URL's built
  */
-const sectionIdMapper = (webServiceData, id, sectionreturnid) => {
+const sectionIdMapper = (webServiceData, id, sectionreturnid, beforemod) => {
     // We need to take a fresh deep copy of the original data as an object is a reference type.
     const newData = JSON.parse(JSON.stringify(webServiceData));
     newData.content_items.forEach((module) => {
-        module.link += '&section=' + id + '&sr=' + (sectionreturnid ?? 0);
+        module.link += '&section=' + id + '&sr=' + (sectionreturnid ?? 0) + '&beforemod=' + (beforemod ?? 0);
     });
     return newData.content_items;
 };

course/format/templates/local/content/cm.mustache

@@ -56,6 +56,11 @@
         "modstealth": true
     }
 }}
+{{#editing}}
+    <div class="divider divider-plus" data-action="insert-before-{{activityname}}">
+        {{> core_course/activitychooserbuttonactivity}}
+    </div>
+{{/editing}}
 <div class="activity-item {{#modstealth}}hiddenactivity{{/modstealth}}{{!
         }}{{#modhiddenfromstudents}}hiddenactivity{{/modhiddenfromstudents}}{{!
         }}{{#modinline}}activityinline{{/modinline}}" data-activityname="{{activityname}}">

course/templates/activitychooserbuttonactivity.mustache

@@ -0,0 +1,37 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_course/activitychooserbuttonactivity
+
+    Displays a add activity or resource button.
+
+    Context variables required for this template:
+    * id - Which activity we want to add the new activity before.
+    * num - Relative section number (field course_sections.section).
+    * sectionreturn - The section to link back to.
+
+    Example context (json):
+    {
+        "id": 0,
+        "num": 1,
+        "sectionreturn": 5
+    }
+}}
+<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add d-flex align-items-center p-3 mb-3 activitychooser-button"
+     data-action="open-chooser" data-sectionid="{{num}}" data-sectionreturnid="{{sectionreturn}}" data-beforemod="{{id}}" aria-label="{{#str}}insertresourceoractivitybefore, core, { "activityname": {{#quote}} {{activityname}} {{/quote}} } {{/str}}" tabindex="0">
+     {{#pix}} t/add, core {{/pix}}
+</button>

course/tests/behat/activity_chooser_plus.feature

@@ -0,0 +1,42 @@
+@core @core_course @javascript
+Feature: Use the activity chooser to insert activities anywhere in a section
+  In order to add activities to a course
+  As a teacher
+  I should be able to add an activity anywhere in a section.
+
+  Background:
+    Given the following "users" exist:
+      | username  | firstname | lastname  | email               |
+      | teacher   | Teacher   | 1         | teacher@example.com |
+    And the following "courses" exist:
+      | fullname  | shortname | format |
+      | Course    | C         | topics |
+    And the following "course enrolments" exist:
+      | user      | course  | role            |
+      | teacher   | C       | editingteacher  |
+    And the following "activities" exist:
+      | activity  | course | idnumber | intro | name        | section  |
+      | page      | C      | p1       | x     | Test Page   | 1        |
+      | forum     | C      | f1       | x     | Test Forum  | 1        |
+      | label     | C      | l1       | x     | Test Label  | 1        |
+    And I log in as "teacher"
+    And I am on "Course" course homepage with editing mode on
+
+  Scenario: The activity chooser icon is hidden by default and be made visible on hover
+    Given I hover ".navbar-brand" "css_element"
+    And "[data-action='insert-before-Test Forum'] button" "css_element" should not be visible
+    When I hover "[data-action='insert-before-Test Forum']" "css_element"
+    Then "[data-action='insert-before-Test Forum'] button" "css_element" should be visible
+
+  Scenario: The activity chooser can be used to insert modules before existing modules
+    Given I hover "[data-action='insert-before-Test Forum']" "css_element"
+    And I click on "[data-action='insert-before-Test Forum'] button" "css_element"
+    And I should see "Add an activity or resource" in the ".modal-title" "css_element"
+    When I click on "Add a new Assignment" "link" in the "Add an activity or resource" "dialogue"
+    And I set the following fields to these values:
+      | Assignment name | Test Assignment |
+    And I press "Save and return to course"
+    And I should see "Test Assignment" in the "Topic 1" "section"
+    # Ensure the new assignment is in the middle of the two existing modules.
+    Then "Test Page" "text" should appear before "Test Assignment" "text"
+    And "Test Assignment" "text" should appear before "Test Forum" "text"

course/tests/behat/behat_course.php

@@ -215,8 +215,8 @@ public function i_add_to_section($activity, $section) {
         // Clicks add activity or resource section link.
         $sectionnode = $this->find('xpath', $sectionxpath);
         $this->execute('behat_general::i_click_on_in_the', [
-            get_string('addresourceoractivity', 'moodle'),
-            'button',
+            "//button[@data-action='open-chooser' and not(@data-beforemod)]",
+            'xpath',
             $sectionnode,
             'NodeElement',
         ]);