MDL-82500 my: Move CTA from the menu to buttons

The icons have been updated to make them more consistent abroad Moodle and take advantage of the benefits of FontAwesome 6. This commit removes the actions from the first actions menu and moves them to buttons as suggested by the UX team. Based on recent UX decisions, the following changes have been implemented: - The "View Quickstart Guide" is no longer displayed as a button. Instead, this link will now appear within the text preceding the buttons (when available). - When no courses are available on the site, the "Manage courses" button has been replaced by "Manage course categories". - A "Manage courses/Manage course categories" button has been added to the zero-state view, ensuring consistency whether courses are present on the site or not.
sarjona · Aug 29, 2024 · a52b566 · a52b566
1 parent 056f473
commit a52b566
Show file tree

Hide file tree

Showing 11 changed files with 273 additions and 121 deletions.
diff --git a/blocks/myoverview/classes/output/main.php b/blocks/myoverview/classes/output/main.php
@@ -503,83 +503,70 @@ public function export_for_zero_state_template(renderer_base $output) {
 
         $nocoursesimg = $output->image_url('courses', 'block_myoverview');
 
+        $buttons = [];
         $coursecat = \core_course_category::user_top();
         if ($coursecat) {
+            // Request a course button.
             $category = \core_course_category::get_nearest_editable_subcategory($coursecat, ['moodle/course:request']);
             if ($category && $category->can_request_course()) {
-                // Add Request a course button.
-                $button = new \single_button(
+                $requestbutton = new \single_button(
                     new \moodle_url('/course/request.php', ['category' => $category->id]),
                     get_string('requestcourse'),
                     'post',
                     \single_button::BUTTON_PRIMARY
                 );
+                $buttons[] = $requestbutton->export_for_template($output);
                 return $this->generate_zero_state_data(
                     $nocoursesimg,
-                    [$button->export_for_template($output)],
-                    ['title' => 'zero_request_title', 'intro' => 'zero_request_intro']
+                    $buttons,
+                    [
+                        'title' => 'zero_request_title',
+                        'intro' => ($CFG->coursecreationguide ? 'zero_request_intro' : 'zero_nocourses_intro'),
+                    ],
                 );
             }
 
             $totalcourses = $DB->count_records_select('course', 'category > 0');
-            if (!$totalcourses && ($category = \core_course_category::get_nearest_editable_subcategory($coursecat, ['create']))) {
-                // Add Quickstart guide and Create course buttons.
-                $quickstarturl = $CFG->coursecreationguide;
-                if ($quickstarturl) {
-                    $quickstartbutton = new \single_button(
-                        new \moodle_url($quickstarturl, ['lang' => current_language()]),
-                        get_string('viewquickstart', 'block_myoverview'),
-                        'get',
+            if ($coursecat) {
+                // Manage courses or categories button.
+                $managebuttonname = get_string('managecategories');
+                if ($totalcourses) {
+                    $managebuttonname = get_string('managecourses');
+                }
+                if ($categorytomanage = \core_course_category::get_nearest_editable_subcategory($coursecat, ['manage'])) {
+                    $managebutton = new \single_button(
+                        new \moodle_url('/course/management.php', ['category' => $categorytomanage->id]),
+                        $managebuttonname,
                     );
-                    $buttons = [$quickstartbutton->export_for_template($output)];
+                    $buttons[] = $managebutton->export_for_template($output);
                 }
+            }
 
+            // Create course button.
+            if ($category = \core_course_category::get_nearest_editable_subcategory($coursecat, ['create'])) {
                 $createbutton = new \single_button(
                     new \moodle_url('/course/edit.php', ['category' => $category->id]),
                     get_string('createcourse', 'block_myoverview'),
                     'post',
-                    \single_button::BUTTON_PRIMARY
+                    \single_button::BUTTON_PRIMARY,
                 );
                 $buttons[] = $createbutton->export_for_template($output);
-                return $this->generate_zero_state_data(
-                    $nocoursesimg,
-                    $buttons,
-                    ['title' => 'zero_nocourses_title', 'intro' => 'zero_nocourses_intro']
-                );
-            }
 
-            if ($categorytocreate = \core_course_category::get_nearest_editable_subcategory($coursecat, ['create'])) {
-                $createbutton = new \single_button(
-                    new \moodle_url('/course/edit.php', ['category' => $categorytocreate->id]),
-                    get_string('createcourse', 'block_myoverview'),
-                    'post',
-                    \single_button::BUTTON_PRIMARY
-                );
-                $buttons = [$createbutton->export_for_template($output)];
-                if ($categorytomanage = \core_course_category::get_nearest_editable_subcategory($coursecat, ['manage'])) {
-                    // Add a Manage course button.
-                    $managebutton = new \single_button(
-                        new \moodle_url('/course/management.php', ['category' => $categorytomanage->id]),
-                        get_string('managecourses')
-                    );
-                    $buttons[] = $managebutton->export_for_template($output);
-                    return $this->generate_zero_state_data(
-                        $nocoursesimg,
-                        array_reverse($buttons),
-                        ['title' => 'zero_default_title', 'intro' => 'zero_default_intro']
-                    );
-                }
+                $title = $totalcourses ? 'zero_default_title' : 'zero_nocourses_title';
+                $intro = $totalcourses ? 'zero_default_intro' :
+                        ($CFG->coursecreationguide ? 'zero_request_intro' : 'zero_nocourses_intro');
                 return $this->generate_zero_state_data(
                     $nocoursesimg,
                     $buttons,
-                    ['title' => 'zero_default_title', 'intro' => 'zero_default_intro']
+                    ['title' => $title, 'intro' => $intro],
                 );
             }
+
         }
 
         return $this->generate_zero_state_data(
             $nocoursesimg,
-            [],
+            $buttons,
             ['title' => 'zero_default_title', 'intro' => 'zero_default_intro']
         );
     }
@@ -596,15 +583,20 @@ private function generate_zero_state_data(\moodle_url $imageurl, array $buttons,
         global $CFG;
         // Documentation data.
         $dochref = new \moodle_url($CFG->docroot, ['lang' => current_language()]);
-        $quickstart = new \moodle_url($CFG->coursecreationguide, ['lang' => current_language()]);
         $docparams = [
-            'quickhref' => $quickstart->out(),
-            'quicktitle' => get_string('viewquickstart', 'block_myoverview'),
-            'quicktarget' => '_blank',
             'dochref' => $dochref->out(),
             'doctitle' => get_string('documentation'),
             'doctarget' => $CFG->doctonewwindow ? '_blank' : '_self',
         ];
+        if ($CFG->coursecreationguide) {
+            // Add quickstart guide link.
+            $quickstart = new \moodle_url($CFG->coursecreationguide, ['lang' => current_language()]);
+            $docparams = [
+                'quickhref' => $quickstart->out(),
+                'quicktitle' => get_string('viewquickstart', 'block_myoverview'),
+                'quicktarget' => '_blank',
+            ];
+        }
         return [
             'nocoursesimg' => $imageurl->out(),
             'title' => ($strings['title']) ? get_string($strings['title'], 'block_myoverview') : '',

diff --git a/blocks/myoverview/lang/en/block_myoverview.php b/blocks/myoverview/lang/en/block_myoverview.php
@@ -90,7 +90,7 @@
 $string['viewquickstart'] = 'View Quickstart guide';
 $string['zero_default_title'] = 'You\'re not enrolled in any course';
 $string['zero_default_intro'] = 'Once you\'re enrolled in a course, it will appear here.';
+$string['zero_nocourses_intro'] = 'Need help getting started? Check out the <a href="{$a->dochref}" title="{$a->doctitle}" target="{$a->doctarget}">Moodle documentation</a>.';
+$string['zero_nocourses_title'] = 'Create your first course';
 $string['zero_request_title'] = 'Request your first course';
 $string['zero_request_intro'] = 'Need help getting started? Check out the <a href="{$a->dochref}" title="{$a->doctitle}" target="{$a->doctarget}">Moodle documentation</a> or take your first steps with our <a href="{$a->quickhref}" title="{$a->quicktitle}" target="{$a->quicktarget}">Quickstart guide</a>.';
-$string['zero_nocourses_title'] = 'Create your first course';
-$string['zero_nocourses_intro'] = 'Need help getting started? Check out the <a href="{$a->dochref}" title="{$a->doctitle}" target="{$a->doctarget}">Moodle documentation</a> or take your first steps with our Quickstart guide.';
diff --git a/blocks/myoverview/tests/behat/block_myoverview_zerostate.feature b/blocks/myoverview/tests/behat/block_myoverview_zerostate.feature
@@ -1,4 +1,4 @@
-@block @block_myoverview @javascript
+@block @block_myoverview
 Feature: Zero state on my overview block
   In order to know what should be the next step
   As a user
@@ -31,15 +31,29 @@ Feature: Zero state on my overview block
     And "Request a course" "button" should exist
     And I click on "Request a course" "button"
     And I should see "Details of the course"
+    # Quickstart guide link should not be displayed when $CFG->coursecreationguide is empty.
+    But the following config values are set as admin:
+      | coursecreationguide | |
+    And I am on the "My courses" page
+    And "Moodle documentation" "link" should exist
+    And "Quickstart guide" "link" should not exist
 
   Scenario: Users with permissions to create a course when there is no course created
     Given I am on the "My courses" page logged in as "manager"
     When I should see "Create your first course"
     Then "Moodle documentation" "link" should exist
-    And "View Quickstart guide" "button" should exist
+    And "Quickstart guide" "link" should exist
+    And "Manage courses" "button" should not exist
+    And "Manage course categories" "button" should exist
     And "Create course" "button" should exist
     And I click on "Create course" "button"
     And I should see "Add a new course"
+    # Quickstart guide link should not be displayed when $CFG->coursecreationguide is empty.
+    But the following config values are set as admin:
+      | coursecreationguide | |
+    And I am on the "My courses" page
+    And "Moodle documentation" "link" should exist
+    And "Quickstart guide" "link" should not exist
 
   Scenario: Users with permissions to create a course but is not enrolled in any existing course
     Given the following "course" exists:
@@ -71,7 +85,7 @@ Feature: Zero state on my overview block
     And I click on "Create course" "button"
     And I should see "Add a new course"
 
-  @accessibility
+  @javascript @accessibility
   Scenario: Evaluate the accessibility of the My courses (zero state)
     When I am on the "My courses" page logged in as "manager"
     Then the page should meet accessibility standards
diff --git a/lang/en/deprecated.txt b/lang/en/deprecated.txt
@@ -129,3 +129,4 @@ newpasswordtext,core
 cannotsetpassword,core_error
 registerwithmoodleorginfoapp,core_hub
 registration_help,core_admin
+coursemanagementoptions,core_my
diff --git a/lang/en/my.php b/lang/en/my.php
@@ -22,7 +22,6 @@
  * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
-$string['coursemanagementoptions'] = 'Course management options';
 $string['error:dashboardisdisabled'] = 'The Dashboard has been disabled by an administrator.';
 $string['mymoodle'] = 'Dashboard';
 $string['nocourses'] = 'No course information to show.';
@@ -42,3 +41,6 @@
 $string['resetpage'] = 'Reset page to default';
 $string['reseterror'] = 'There was an error resetting your page';
 $string['privacy:metadata:core_my:preference:user_home_page_preference'] = 'The user home page preference.';
+
+// Deprecated since Moodle 4.5.
+$string['coursemanagementoptions'] = 'Course management options';
diff --git a/my/courses.php b/my/courses.php
@@ -71,19 +71,21 @@
 // Add course management if the user has the capabilities for it.
 $coursecat = core_course_category::user_top();
 $coursemanagemenu = [];
-if ($coursecat && ($category = core_course_category::get_nearest_editable_subcategory($coursecat, ['create']))) {
-    // The user has the capability to create course.
-    $coursemanagemenu['newcourseurl'] = new moodle_url('/course/edit.php', ['category' => $category->id]);
-}
-if ($coursecat && ($category = core_course_category::get_nearest_editable_subcategory($coursecat, ['manage']))) {
-    // The user has the capability to manage the course category.
-    $coursemanagemenu['manageurl'] = new moodle_url('/course/management.php', ['categoryid' => $category->id]);
-}
-if ($coursecat) {
-    $category = core_course_category::get_nearest_editable_subcategory($coursecat, ['moodle/course:request']);
-    if ($category && $category->can_request_course()) {
-        $coursemanagemenu['courserequesturl'] = new moodle_url('/course/request.php', ['categoryid' => $category->id]);
-
+// Only display the action menu if the user has courses (otherwise, the buttons will be displayed in the zero state).
+if (count(enrol_get_all_users_courses($USER->id, true)) > 0) {
+    if ($coursecat && ($category = core_course_category::get_nearest_editable_subcategory($coursecat, ['create']))) {
+        // The user has the capability to create course.
+        $coursemanagemenu['newcourseurl'] = new moodle_url('/course/edit.php', ['category' => $category->id]);
+    }
+    if ($coursecat && ($category = core_course_category::get_nearest_editable_subcategory($coursecat, ['manage']))) {
+        // The user has the capability to manage the course category.
+        $coursemanagemenu['manageurl'] = new moodle_url('/course/management.php', ['categoryid' => $category->id]);
+    }
+    if ($coursecat) {
+        $category = core_course_category::get_nearest_editable_subcategory($coursecat, ['moodle/course:request']);
+        if ($category && $category->can_request_course()) {
+            $coursemanagemenu['courserequesturl'] = new moodle_url('/course/request.php', ['categoryid' => $category->id]);
+        }
     }
 }
 if (!empty($coursemanagemenu)) {

diff --git a/my/templates/dropdown.mustache b/my/templates/dropdown.mustache
@@ -15,9 +15,9 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template my/dropdown
+    @template core_my/dropdown
 
-    Simple dropdown for the my/courses page
+    Simple dropdown for the my/courses page.
 
     Example context (json):
     {
@@ -27,19 +27,21 @@
     }
 }}
 <div class="btn-group{{#manageurl}} course-manage{{/manageurl}}{{#courserequesturl}} course-request{{/courserequesturl}}">
-    <!-- Set as a link to appease BrowserKit behat. -->
-    <a href="#" class="btn btn-link btn-icon icon-size-3 rounded-circle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{#str}}coursemanagementoptions, my{{/str}}">
-        <i class="fa fa-ellipsis-v text-dark  py-2" aria-hidden="true"></i>
-    </a>
-    <div class="dropdown-menu dropdown-menu-right">
-        {{#newcourseurl}}
-            <a class="dropdown-item" href="{{newcourseurl}}">{{#str}}newcourse, core{{/str}}</a>
-        {{/newcourseurl}}
+    <div class="my-action-buttons my-action-buttons-right">
         {{#manageurl}}
-            <a class="dropdown-item" href="{{manageurl}}">{{#str}}managecourses, core{{/str}}</a>
+            <form action="{{manageurl}}" method="post" id="managecoursesform">
+                <button type="submit" class="btn btn-outline-primary m-1 w-100">{{#str}} managecourses {{/str}}</button>
+            </form>
         {{/manageurl}}
+        {{#newcourseurl}}
+            <form action="{{newcourseurl}}" method="post" id="newcourseform">
+                <button type="submit" class="btn btn-primary m-1 w-100">{{#str}} createcourse, block_myoverview {{/str}}</button>
+            </form>
+        {{/newcourseurl}}
         {{#courserequesturl}}
-            <a class="dropdown-item" href="{{courserequesturl}}">{{#str}}requestcourse, core{{/str}}</a>
+            <form action="{{courserequesturl}}" method="post" id="courserequestform">
+                <button type="submit" class="btn btn-primary m-1 w-100">{{#str}} requestcourse {{/str}}</button>
+            </form>
         {{/courserequesturl}}
     </div>
 </div>