Fix Module Header when there are no modules

closes LF-1331

flag=instui_header

test plan:
- go to the modules page
- test with a course with no modules
- test with a course with modules
- button expand/collapse should not appear when no modules

Change-Id: I43410c6978d6fbc4156b4154a0e092dff52678f9
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/341790
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Sarah Gerard <sarah.gerard@instructure.com>
QA-Review: Sarah Gerard <sarah.gerard@instructure.com>
Product-Review: Alvaro Talavera <alvaro.talavera@instructure.com>

app/views/context_modules/_content_next.html.erb

@@ -38,8 +38,6 @@
 <% end %>
 
 <% if Account.site_admin.feature_enabled?(:instui_header) %>
-<% js_bundle :context_modules_header %>
-
 <%
 context_modules_header_props = {
   title: t("Modules"),

config/teams/learning-foundations.yml

@@ -50,6 +50,5 @@ owned_globs:
   - ui/features/context_modules/**/*
   - ui/features/context_modules_publish_icon/**/*
   - ui/features/context_modules_publish_menu/**/*
-  - ui/features/context_modules_header/**/*
   - ui/features/module_dnd/**/*
   - app/views/context_modules/**/*

ui/featureBundles.ts

@@ -63,7 +63,6 @@ const featureBundles: {
   context_module_progressions: () => import('./features/context_module_progressions/index'),
   context_modules_publish_icon: () => import('./features/context_modules_publish_icon/index'),
   context_modules_publish_menu: () => import('./features/context_modules_publish_menu/index'),
-  context_modules_header: () => import('./features/context_modules_header/index'),
   context_modules: () => import('./features/context_modules/index'),
   context_roster_usage: () => import('./features/context_roster_usage/index'),
   context_roster_user_services: () => import('./features/context_roster_user_services/index'),

ui/features/context_modules_header/index.tsx

@@ -1,30 +0,0 @@
-// @ts-nocheck
-/*
- * Copyright (C) 2024 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas 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 Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import $ from 'jquery'
-import React from 'react'
-import ReactDOM from 'react-dom'
-import ContextModulesHeader from '@canvas/context-modules/react/ContextModulesHeader'
-import ready from '@instructure/ready'
-
-ready(() => {
-  const root = $('#context-modules-header-root')
-  if (!root) return
-  ReactDOM.render(<ContextModulesHeader {...root.data('props')} />, root[0])
-})

ui/features/context_modules_header/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "@canvas-features/context_modules_header",
-  "private": true,
-  "version": "1.0.0",
-  "owner": "LF"
-}

ui/shared/context-modules/jquery/index.jsx

@@ -63,6 +63,7 @@ import {
   scrollTo,
   setExpandAllButton,
   setExpandAllButtonHandler,
+  setExpandAllButtonVisible,
   updateProgressionState,
   openExternalTool,
 } from './utils'
@@ -74,6 +75,7 @@ import DifferentiatedModulesTray from '../differentiated-modules'
 import ItemAssignToTray from '../differentiated-modules/react/Item/ItemAssignToTray'
 import {parseModule, parseModuleList} from '../differentiated-modules/utils/moduleHelpers'
 import {addModuleElement} from '../utils/moduleHelpers'
+import ContextModulesHeader from '../react/ContextModulesHeader'
 
 if (!('INST' in window)) window.INST = {}
 
@@ -1330,6 +1332,7 @@ modules.initModuleManagement = function (duplicate) {
           $('.duplicate_module_link').die()
           $('.duplicate_item_link').die()
           if (!ENV.FEATURES.instui_header) {
+            // not using with instui header, clicks are handled differently
             $('.add_module_link').die()
           }
           $('.edit_module_link').die()
@@ -1386,7 +1389,7 @@ modules.initModuleManagement = function (duplicate) {
             $toFocus.focus()
             const $contextModules = $('#context_modules .context_module')
             if (!$contextModules.length) {
-              $('#expand_collapse_all').hide()
+              setExpandAllButtonVisible(false)
               updatePublishMenuDisabledState(true)
             }
           })
@@ -1717,10 +1720,10 @@ modules.initModuleManagement = function (duplicate) {
   }
 
   if (ENV.FEATURES.instui_header) {
-    setTimeout(() => { // export for react, use timer to avoid race conditions.
+    // export "new module" handler for react
     document.add_module_link_handler = add_module_link_handler
-    }, 300)
   } else {
+    // adds the "new module" button click handler
     $(document).on('click', '.add_module_link', add_module_link_handler)
   }
 
@@ -2182,6 +2185,11 @@ $(document).ready(function () {
     modules.evaluateItemCyoe($item)
   })
 
+  if (ENV.FEATURES.instui_header) {
+    // render the new INSTUI header component
+    renderHeaderComponent()
+  }
+
   let $currentElem = null
   const hover = function ($elem) {
     if ($elem.hasClass('context_module')) {
@@ -2301,6 +2309,7 @@ $(document).ready(function () {
     // "n" opens up the Add Module form
     $document.keycodes('n', event => {
       if (ENV.FEATURES.instui_header) {
+        // handles the "new module" button action on keypress
         $('#context-modules-header-add-module-button:visible').click()
       } else {
         $('.add_module_link:visible:first').click()
@@ -2362,26 +2371,26 @@ $(document).ready(function () {
   const $contextModules = $('#context_modules .context_module')
   if (!$contextModules.length) {
     $('#no_context_modules_message').show()
-    $('#expand_collapse_all').hide()
+    setExpandAllButtonVisible(false)
     $('#context_modules_sortable_container').addClass('item-group-container--is-empty')
   }
   $contextModules.each(function () {
     updateProgressionState($(this))
   })
 
-  if (ENV.FEATURES.instui_header) {
-    setTimeout(() => {
-      setExpandAllButton()
-    }, 300)
-  }
-  else {
   setExpandAllButton()
+
+  if (!ENV.FEATURES.instui_header) {
+    // set the click handler for the expand/collapse all button 
+    // if the instui header is not enabled
     setExpandAllButtonHandler()
   }
 
   if (!ENV.FEATURES.instui_header) {
+    // menu tools click handler for the old UI
     $('.menu_tray_tool_link').click(openExternalTool)
   }
+
   monitorLtiMessages()
 
   function renderCopyToTray(open, contentSelection, returnFocusTo) {
@@ -2414,6 +2423,13 @@ $(document).ready(function () {
     )
   }
 
+  function renderHeaderComponent() {
+    const root = $('#context-modules-header-root')
+    if (root) {
+      ReactDOM.render(<ContextModulesHeader {...root.data('props')} />, root[0])
+    }
+  }
+
   $(document).on('click', '.module_copy_to', event => {
     event.preventDefault()
     const moduleId = $(event.target).closest('.context_module').data('module-id').toString()

ui/shared/context-modules/jquery/utils.jsx

@@ -193,6 +193,13 @@ export function initPublishButton($el, data) {
   return view
 }
 
+export function setExpandAllButtonVisible(visible) {
+  const element = ENV.FEATURES.instui_header ? 
+    $('#expand_collapse_all').parent() : 
+    $('#expand_collapse_all')
+  visible ? element.show() : element.hide()
+}
+
 export function setExpandAllButton() {
   let someVisible = false
   $('#context_modules .context_module .content').each(function () {

ui/shared/context-modules/utils/moduleHelpers.tsx

@@ -24,7 +24,12 @@ import ModuleFile from '@canvas/files/backbone/models/ModuleFile'
 import $, * as JQuery from 'jquery'
 import {renderContextModulesPublishIcon} from './publishOneModuleHelper'
 import setupContentIds from '../jquery/setupContentIds'
-import {initPublishButton, overrideModel, setExpandAllButton} from '../jquery/utils'
+import {
+  initPublishButton,
+  overrideModel,
+  setExpandAllButton,
+  setExpandAllButtonVisible,
+} from '../jquery/utils'
 import RelockModulesDialog from '@canvas/relock-modules-dialog'
 
 export function addModuleElement(
@@ -59,7 +64,7 @@ export function addModuleElement(
   }
 
   $('#no_context_modules_message').slideUp()
-  $('#expand_collapse_all').show()
+  setExpandAllButtonVisible(true)
   setExpandAllButton()
   const published = data.context_module.workflow_state === 'active'
   const $publishIcon = $module.find('.publish-icon')