feat: show message in subsection visibility tab when hft is enabled (#33981)

Shows a message in the visibility tab of the subsections when the Hide From TOC is enabled.

Ref: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3853975595/Feature+Enhancement+Proposal+Hide+Sections+from+course+outline

cms/static/js/spec/views/pages/course_outline_spec.js

@@ -131,7 +131,7 @@ describe('CourseOutlinePage', function() {
             group_access: {},
             user_partition_info: {},
             hide_from_toc: false,
-            enable_hide_from_toc_ui: true
+            enable_hide_from_toc_ui: true,
         }, options, {child_info: {children: children}});
     };
 

cms/static/js/views/modals/course_outline_modals.js

@@ -1192,7 +1192,8 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
                 AbstractVisibilityEditor.prototype.getContext.call(this),
                 {
                     hide_after_due: this.modelVisibility() === 'hide_after_due',
-                    self_paced: course.get('self_paced') === true
+                    self_paced: course.get('self_paced') === true,
+                    enable_hide_from_toc_ui: this.model.get('enable_hide_from_toc_ui'),
                 }
             );
         }

cms/static/sass/elements/_modal-window.scss

@@ -202,6 +202,33 @@
         min-height: 95px;
       }
 
+      .enable-hide-from-toc-container {
+        background: #E5F1F8;
+        padding: 20px 32px;
+        margin: 16px 0px;
+        border-radius: 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .icon-message {
+          color: white;
+          background: #0075B4;
+          padding: 8px;
+          border-radius: 50%;
+          transform: rotate(90deg);
+          font-size: 16px;
+          height: 18px;
+          width: 20px;
+        }
+
+        .text-message {
+          padding: 0px 10px;
+          word-wrap: break-word;
+          font-weight: 500;
+        }
+      }
+
       .list-fields,
       .list-actions {
         display: inline-block;

cms/templates/js/content-visibility-editor.underscore

@@ -1,6 +1,12 @@
 <form>
 <h3 class="modal-section-title" id="content_visibility_label"><%- gettext('Subsection Visibility') %></h3>
 <div class="modal-section-content staff-lock">
+    <% if (enable_hide_from_toc_ui) { %>
+        <div class="enable-hide-from-toc-container">
+            <span class="icon fa fa-solid fa-link icon-message"></span>
+            <p class="text-message"><%- gettext('To hide the subsections and keep them accesible through links, you must adjust it from the section that contains them.') %></p>
+        </div>
+    <% } %>
     <div class="list-fields list-input content-visibility" role="group" aria-labelledby="content_visibility_label">
         <label class="label">
             <input class="input input-radio" name="content-visibility" type="radio" value="visible" aria-describedby="visible_description">