From 6200c31f94c9216f32902e263620f545250ad9ab Mon Sep 17 00:00:00 2001
From: Sara Arjona <sara@moodle.com>
Date: Tue, 27 Jan 2026 12:46:06 +0100
Subject: [PATCH] MDL-87662 course: Relocate manual completion button to
 activity header

Co-author: Ferran Recio <ferran@moodle.com>
---
 .upgradenotes/MDL-87662-2026012705202377.yml  |  12 +++
 .../tests/behat/behat_completion.php          |   6 +-
 .../course/templates/activity_info.mustache   |  13 +--
 .../templates/completion_manual.mustache      |   4 +
 public/lib/classes/output/activity_header.php |  39 ++++++-
 public/lib/templates/full_header.mustache     |   4 +-
 public/theme/boost/templates/secure.mustache  |   2 +-
 public/theme/classic/config.php               |   1 +
 public/theme/classic/scss/classic/course.scss |   8 ++
 .../templates/core/activity_header.mustache   | 101 ++++++++++++++++++
 .../templates/core/full_header.mustache       |   2 +-
 .../theme/classic/templates/secure.mustache   |   2 +-
 12 files changed, 175 insertions(+), 19 deletions(-)
 create mode 100644 .upgradenotes/MDL-87662-2026012705202377.yml
 create mode 100644 public/theme/classic/templates/core/activity_header.mustache

diff --git a/.upgradenotes/MDL-87662-2026012705202377.yml b/.upgradenotes/MDL-87662-2026012705202377.yml
new file mode 100644
index 00000000000..6a47f02a2f9
--- /dev/null
+++ b/.upgradenotes/MDL-87662-2026012705202377.yml
@@ -0,0 +1,12 @@
+issueNumber: MDL-87662
+notes:
+  theme:
+    - message: >-
+        The manual completion button has been moved to the activity header
+        to improve visibility and proximity to the activity name. A new
+        theme layout option, `completioninheader`, has been introduced to
+        control this behaviour and is enabled by default. Themes that set
+        completioninheader to false must manually override the relevant
+        template (such as `activity_header` or `activity_info`) to ensure
+        the completion information is displayed correctly.
+      type: improved
diff --git a/public/completion/tests/behat/behat_completion.php b/public/completion/tests/behat/behat_completion.php
index c1b77b3a336..39660d5f197 100644
--- a/public/completion/tests/behat/behat_completion.php
+++ b/public/completion/tests/behat/behat_completion.php
@@ -302,7 +302,7 @@ class behat_completion extends behat_base {
      * @param string $activityname The activity name.
      */
     public function the_manual_completion_button_for_activity_should_be_disabled(string $activityname): void {
-        $selector = "div[data-region='activity-information'][data-activityname='$activityname'] button";
+        $selector = "button[data-activityname='$activityname'][data-completion='manual']";
 
         $params = [$selector, "css_element"];
         $this->execute("behat_general::the_element_should_be_disabled", $params);
@@ -315,7 +315,7 @@ class behat_completion extends behat_base {
      * @param string $activityname The activity name.
      */
     public function the_manual_completion_button_for_activity_should_not_exist(string $activityname): void {
-        $selector = "div[data-region=activity-information][data-activityname='$activityname'] button";
+        $selector = "button[data-activityname='$activityname'][data-completion='manual']";
 
         $params = [$selector, "css_element"];
         $this->execute('behat_general::should_not_exist', $params);
@@ -328,7 +328,7 @@ class behat_completion extends behat_base {
      * @param string $activityname The activity name.
      */
     public function the_manual_completion_button_for_activity_should_exist(string $activityname): void {
-        $selector = "div[data-region=activity-information][data-activityname='$activityname'] button";
+        $selector = "button[data-activityname='$activityname'][data-completion='manual']";
 
         $params = [$selector, "css_element"];
         $this->execute('behat_general::should_exist', $params);
diff --git a/public/course/templates/activity_info.mustache b/public/course/templates/activity_info.mustache
index db544a12b35..9282c4a3161 100644
--- a/public/course/templates/activity_info.mustache
+++ b/public/course/templates/activity_info.mustache
@@ -53,20 +53,15 @@
 
     {{#hascompletion}}
         {{#uservisible}}
-            <div class="completion-info" data-region="completion-info">
-                {{#isautomatic}}
+            {{#isautomatic}}
+                <div class="completion-info" data-region="completion-info">
                     <div class="automatic-completion-conditions" data-region ="completionrequirements" role="list" aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}">
                         {{#completiondetails}}
                             {{> core_course/completion_automatic }}
                         {{/completiondetails}}
                     </div>
-                {{/isautomatic}}
-                {{^isautomatic}}
-                    {{#showmanualcompletion}}
-                        {{> core_course/completion_manual }}
-                    {{/showmanualcompletion}}
-                {{/isautomatic}}
-            </div>
+                </div>
+            {{/isautomatic}}
         {{/uservisible}}
     {{/hascompletion}}
 
diff --git a/public/course/templates/completion_manual.mustache b/public/course/templates/completion_manual.mustache
index b2d1dddedbf..361b051baeb 100644
--- a/public/course/templates/completion_manual.mustache
+++ b/public/course/templates/completion_manual.mustache
@@ -35,6 +35,7 @@
             data-toggletype="manual:undo"
             data-cmid="{{cmid}}"
             data-activityname="{{activityname}}"
+            data-completion="manual"
             data-withavailability="{{withavailability}}" {{!
             }}{{#accessibledescription}}{{!
                 }}title="{{.}}" {{!
@@ -55,6 +56,7 @@
             data-toggletype="manual:mark-done"
             data-cmid="{{cmid}}"
             data-activityname="{{activityname}}"
+            data-completion="manual"
             data-withavailability="{{withavailability}}" {{!
             }}{{#accessibledescription}}{{!
                 }}title="{{.}}" {{!
@@ -72,6 +74,8 @@
 {{^istrackeduser}}
     <button
         class="btn btn-subtle-body {{^normalbutton}}btn-sm{{/normalbutton}} text-nowrap"
+        data-activityname="{{activityname}}"
+        data-completion="manual"
         disabled
     >
         {{#str}} completion_manual:markdone, core_course {{/str}}
diff --git a/public/lib/classes/output/activity_header.php b/public/lib/classes/output/activity_header.php
index 1e836ef019f..fe86ddf63f0 100644
--- a/public/lib/classes/output/activity_header.php
+++ b/public/lib/classes/output/activity_header.php
@@ -187,6 +187,7 @@ class activity_header implements renderable, templatable {
         }
 
         $activityinfo = null;
+        $activitycompletiondata = [];
         if (!$this->hidecompletion) {
             $completiondetails = \core_completion\cm_completion_details::get_instance($this->page->cm, $this->user->id);
             $activitydates = \core\activity_dates::get_dates_for_module($this->page->cm, $this->user->id);
@@ -197,6 +198,14 @@ class activity_header implements renderable, templatable {
             $activitydatesdata = (array) $activitydates->export_for_template($output);
             $data = array_merge($activitycompletiondata, $activitydatesdata);
 
+            if (
+                !empty($data)
+                && !empty($data['uservisible'])
+                && !empty($data['showmanualcompletion'])
+            ) {
+                $this->add_manual_completion_to_page_header($output, $data);
+            }
+
             $activityinfo = $output->render_from_template('core_course/activity_info', $data);
         }
 
@@ -213,12 +222,38 @@ class activity_header implements renderable, templatable {
             $additionalitems = $this->additionalnavitems->export_for_template($output);
         }
 
-        return [
+        return array_merge([
             'title' => $this->title,
             'description' => $this->description,
             'completion' => $activityinfo,
             'additional_items' => $additionalitems,
-        ];
+        ], $activitycompletiondata);
+    }
+
+    /**
+     * Adds the manual completion component to the page header actions.
+     *
+     * @param renderer_base $output
+     * @param array $data the template data for the completion component
+     * @return bool if the completion was added
+     */
+    private function add_manual_completion_to_page_header(renderer_base $output, array $data): bool {
+        // Some themes may not use completion in the header, so we check first.
+        $showcompletion = $this->page?->layout_options['completioninheader'] ?? true;
+        if (!$showcompletion) {
+            return false;
+        }
+
+        $this->page->add_header_action(
+            $output->render_from_template('core_course/completion_manual', $data)
+        );
+        // Also init the heading component to manage feature like manual completion button display.
+        $this->page->requires->js_call_amd(
+            'core_courseformat/local/content/activity_header',
+            'init',
+            ["[data-for='page-heading']"],
+        );
+        return true;
     }
 
     /**
diff --git a/public/lib/templates/full_header.mustache b/public/lib/templates/full_header.mustache
index e1f2fc6ef04..83b69fc23d4 100644
--- a/public/lib/templates/full_header.mustache
+++ b/public/lib/templates/full_header.mustache
@@ -29,7 +29,7 @@
         "welcomemessage": "welcomemessage"
     }
 }}
-<header id="page-header" class="header-maxwidth d-print-none">
+<header id="page-header" class="header-maxwidth d-print-none" data-for="page-heading">
     <div class="w-100">
         <div class="d-flex flex-wrap">
             {{#hasnavbar}}
@@ -62,4 +62,4 @@
             </div>
         </div>
     </div>
-</header>
\ No newline at end of file
+</header>
diff --git a/public/theme/boost/templates/secure.mustache b/public/theme/boost/templates/secure.mustache
index 51ed3f48940..eafb8d87943 100644
--- a/public/theme/boost/templates/secure.mustache
+++ b/public/theme/boost/templates/secure.mustache
@@ -48,7 +48,7 @@
     <div id="page" class="container-fluid">
         {{! Secured full header }}
 
-        <header id="page-header" class="row">
+        <header id="page-header" class="row" data-for="page-heading">
             <div class="col-12 py-3">
                 <div class="page-context-header">
                     <div class="page-header-headings">
diff --git a/public/theme/classic/config.php b/public/theme/classic/config.php
index defd043bc6b..c44190aa124 100644
--- a/public/theme/classic/config.php
+++ b/public/theme/classic/config.php
@@ -58,6 +58,7 @@ $THEME->layouts = [
         'file' => 'columns.php',
         'regions' => array('side-pre', 'side-post'),
         'defaultregion' => 'side-pre',
+        'options' => ['completioninheader' => false],
     ),
     // The site home page.
     'frontpage' => array(
diff --git a/public/theme/classic/scss/classic/course.scss b/public/theme/classic/scss/classic/course.scss
index 45d6f131eeb..c587f17734c 100644
--- a/public/theme/classic/scss/classic/course.scss
+++ b/public/theme/classic/scss/classic/course.scss
@@ -47,3 +47,11 @@
         white-space: pre-wrap;
     }
 }
+
+// Manual completion button in activity header
+.header-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+}
diff --git a/public/theme/classic/templates/core/activity_header.mustache b/public/theme/classic/templates/core/activity_header.mustache
new file mode 100644
index 00000000000..0bf28b406fe
--- /dev/null
+++ b/public/theme/classic/templates/core/activity_header.mustache
@@ -0,0 +1,101 @@
+{{!
+    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/activity_header
+
+    Activity header template.
+
+    Context variables required for this template:
+    * title - The title of the activity module
+    * description - The intro for the module
+    * completion - The completion info if available for the the module as acquired via the activity_information method
+    * additional_items - Any additional URL select navigation that needs to show up in the header
+
+    Example context (json):
+    {
+        "title": "Assignment 1",
+        "description": "The assignment does something",
+        "completion": "<div class='activitycompletion'>Some activity completion criteria</div>",
+        "additional_items": {
+            "id": "url_select_test",
+            "action": "https://example.com/post",
+            "formid": "url_select_form",
+            "sesskey": "sesskey",
+            "label": "core/url_select",
+            "helpicon": {
+                "title": "Help with something",
+                "text": "Help with something",
+                "url": "http://example.org/help",
+                "linktext": "",
+                "icon":{
+                    "extraclasses": "",
+                    "attributes": [
+                        {"name": "src", "value": "../../../pix/help.svg"},
+                        {"name": "alt", "value": "Help icon"}
+                    ]
+                }
+            },
+            "showbutton": "Go",
+            "options": [{
+                "name": "Group 1", "isgroup": true, "options":
+                [
+                    {"name": "Item 1", "isgroup": false, "value": "1"},
+                    {"name": "Item 2", "isgroup": false, "value": "2"}
+                ]},
+                {"name": "Group 2", "isgroup": true, "options":
+                [
+                    {"name": "Item 3", "isgroup": false, "value": "3"},
+                    {"name": "Item 4", "isgroup": false, "value": "4"}
+                ]}],
+            "disabled": false,
+            "title": "Some cool title"
+        }
+    }
+}}
+<span id="maincontent"></span>
+<div class="header-group">
+    <div class="activity-title">
+    {{#title}}
+        <h2>{{{title}}}</h2>
+    {{/title}}
+    </div>
+    {{^isautomatic}}
+        {{#showmanualcompletion}}
+            <div class="header-actions">
+                {{> core_course/completion_manual }}
+            </div>
+        {{/showmanualcompletion}}
+    {{/isautomatic}}
+</div>
+
+
+<div class="activity-header" data-for="page-activity-header">{{!
+    }}{{#completion}}
+        <span class="visually-hidden">{{#str}} overallaggregation, completion {{/str}}</span>
+        {{{completion}}}
+    {{/completion}}
+    {{#description}}
+        <div class="activity-description" id="intro">
+            {{{description}}}
+        </div>
+    {{/description}}{{!
+}}</div>
+{{#additional_items}}
+    <nav aria-label="{{#str}} additionalcustomnav, core {{/str}}">
+        {{> core/url_select}}
+    </nav>
+{{/additional_items}}
diff --git a/public/theme/classic/templates/core/full_header.mustache b/public/theme/classic/templates/core/full_header.mustache
index 957810067ac..77287ad6f4e 100644
--- a/public/theme/classic/templates/core/full_header.mustache
+++ b/public/theme/classic/templates/core/full_header.mustache
@@ -28,7 +28,7 @@
         "welcomemessage": "welcomemessage"
     }
 }}
-<header id="page-header" class="row">
+<header id="page-header" class="row" data-for="page-heading">
     <div class="col-12 pt-3 pb-3">
         <div class="card {{^contextheader}}border-0 bg-transparent{{/contextheader}}">
             <div class="card-body {{^contextheader}}p-2{{/contextheader}}">
diff --git a/public/theme/classic/templates/secure.mustache b/public/theme/classic/templates/secure.mustache
index b5f02208434..38cd0e83a9a 100644
--- a/public/theme/classic/templates/secure.mustache
+++ b/public/theme/classic/templates/secure.mustache
@@ -59,7 +59,7 @@
     <div id="page" class="container-fluid">
         {{! Secured full header }}
 
-        <header id="page-header" class="row">
+        <header id="page-header" class="row" data-for="page-heading">
             <div class="col-12 py-3">
                 <div class="page-context-header">
                     <div class="page-header-headings">