MDL-87663 course: Display Done status label for automatic completion

public/course/templates/completion_status.mustache

@@ -0,0 +1,35 @@
+{{!
+    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/completion_status
+
+    Template for displaying the completion status.
+
+    Example context (json):
+    {
+        "istrackeduser": true,
+        "overallcomplete": true,
+        "overallincomplete": false
+    }
+}}
+{{#istrackeduser}}
+    {{#overallcomplete}}
+        <span class="completion-status text-success">
+            <i class="fa fa-check"></i> <span>{{#str}} done, core_completion {{/str}}</span>
+        </span>
+    {{/overallcomplete}}
+{{/istrackeduser}}

public/lib/classes/output/activity_header.php

@@ -201,9 +201,12 @@ class activity_header implements renderable, templatable {
             if (
                 !empty($data)
                 && !empty($data['uservisible'])
-                && !empty($data['showmanualcompletion'])
             ) {
-                $this->add_manual_completion_to_page_header($output, $data);
+                if (!empty($data['showmanualcompletion'])) {
+                    $this->add_manual_completion_to_page_header($output, $data);
+                } else if (!empty($data['hascompletion']) && !empty($data['isautomatic'])) {
+                    $this->add_completion_status_to_page_header($output, $data);
+                }
             }
 
             $activityinfo = $output->render_from_template('core_course/activity_info', $data);
@@ -256,6 +259,26 @@ class activity_header implements renderable, templatable {
         return true;
     }
 
+    /**
+     * Adds the completion status 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_completion_status_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_status', $data)
+        );
+        return true;
+    }
+
     /**
      * Get the heading level for a given heading depending on whether the theme's activity header displays a heading
      * (usually the activity name).

public/mod/choice/tests/behat/activity_info_completion_automatic.feature

@@ -32,15 +32,20 @@ Feature: Automatic completion in the choice activity
     When I am on the "What to drink?" "choice activity" page logged in as student1
     Then the "View" completion condition of "What to drink?" is displayed as "done"
     And the "Make a choice" completion condition of "What to drink?" is displayed as "todo"
+    # Initially, the completion status should be shown as not completed.
+    And ".completion-status" "css_element" should not exist
     And I set the field "Beer" to "1"
     And I press "Save my choice"
     And the "View" completion condition of "What to drink?" is displayed as "done"
     And the "Make a choice" completion condition of "What to drink?" is displayed as "done"
+    # Now, the activity completion status should be shown as completed.
+    And I should see "Done" in the ".completion-status" "css_element"
 
   Scenario: Viewing a choice activity with automatic completion as a teacher
     When I am on the "What to drink?" "choice activity" page logged in as teacher1
     Then "What to drink?" should have the "View" completion condition
     And "What to drink?" should have the "Make a choice" completion condition
+    And ".completion-status" "css_element" should not exist
 
   @javascript
   Scenario: Overriding automatic choice completion for a user
@@ -53,3 +58,4 @@ Feature: Automatic completion in the choice activity
     When I am on the "What to drink?" "choice activity" page logged in as student1
     Then the "View" completion condition of "What to drink?" overridden by "Teacher 1" is displayed as "done"
     And the "Make a choice" completion condition of "What to drink?" overridden by "Teacher 1" is displayed as "done"
+    And I should see "Done" in the ".completion-status" "css_element"

public/theme/boost/scss/moodle/modules.scss

@@ -69,6 +69,13 @@ select {
         padding-bottom: 0;
         margin-bottom: 0;
     }
+    .completion-status {
+        font-weight: $font-weight-medium;
+        white-space: nowrap;
+        i {
+            margin-right: map-get($spacers, 1);
+        }
+    }
 }
 
 // Choice module

public/theme/boost/style/moodle.css

@@ -35648,6 +35648,13 @@ select {
   padding-bottom: 0;
   margin-bottom: 0;
 }
+.path-mod .completion-status {
+  font-weight: 500;
+  white-space: nowrap;
+}
+.path-mod .completion-status i {
+  margin-right: 0.25rem;
+}
 
 .path-mod-choice .horizontal .choices .option {
   display: inline-block;

public/theme/classic/style/moodle.css

@@ -35648,6 +35648,13 @@ select {
   padding-bottom: 0;
   margin-bottom: 0;
 }
+.path-mod .completion-status {
+  font-weight: 500;
+  white-space: nowrap;
+}
+.path-mod .completion-status i {
+  margin-right: 0.25rem;
+}
 
 .path-mod-choice .horizontal .choices .option {
   display: inline-block;

public/theme/classic/templates/core/activity_header.mustache

@@ -80,6 +80,14 @@
             </div>
         {{/showmanualcompletion}}
     {{/isautomatic}}
+    {{#hascompletion}}
+        {{#isautomatic}}
+            <div class="header-actions">
+                {{> core_course/completion_status }}
+            </div>
+        {{/isautomatic}}
+    {{/hascompletion}}
+
 </div>