allow external tools to toggle course nav

* via window.postMessage

closes INTEROP-6628
flag=none

test plan:
- launch an lti 1.3 tool
- open the dev tools, go to the console tab
- there should be a dropdown for choosing the context of the console,
and it might default to "top"
- find and select the context of the iframe that holds the 1.3 tool
- paste this into the console:
```
window.parent.postMessage({messageType: "toggleCourseNavigationMenu"},"*");
```
- the course nav should collapse
- run it again and the course nav should expand

Change-Id: Iffaefc26be4e9f1c1b63a1e5697329ceb2395449
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/263037
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Mysti Lilla <mysti@instructure.com>
Reviewed-by: Tucker Mcknight <tmcknight@instructure.com>
QA-Review: Tucker Mcknight <tmcknight@instructure.com>
Product-Review: Xander Moffatt <xmoffatt@instructure.com>

doc/api/lti_window_post_message.md

@@ -60,6 +60,17 @@ window.parent.postMessage(
 )
 ```
 
+## toggleCourseNavigationMenu
+
+Opens and closes the course navigation sidebar, giving more space for the tool to display.
+
+**Required properties:**
+- messageType: "toggleCourseNavigationMenu"
+
+```js
+window.parent.postMessage({ messageType: "toggleCourseNavigationMenu" }, "*")
+```
+
 ## lti.resourceImported
 
 Notifies the Canvas page holding the tool that a resource has finished importing.

spec/javascripts/jsx/subnav_menu/updateSubnavMenuToggleSpec.js

@@ -18,7 +18,7 @@
 
 import $ from 'jquery'
 
-import updateSubnavMenuToggle from '../../../../ui/boot/initializers/updateSubnavMenuToggle.js'
+import updateSubnavMenuToggle from '../../../../ui/shared/courses/jquery/updateSubnavMenuToggle'
 
 const container = $('#fixtures')
 

ui/boot/initializers/runOnEveryPageButDontBlockAnythingElse.js

@@ -22,27 +22,32 @@
 // any other js_bundle code runs. and by moving it into an async chunk,
 // the critical code to display a page will be executed sooner
 
-import _ from 'underscore'
 import $ from 'jquery'
-import updateSubnavMenuToggle from './updateSubnavMenuToggle.js'
 import preventDefault from 'prevent-default'
 
 // modules that do their own thing on every page that simply need to be required
 import '@canvas/media-comments'
-import './activateReminderControls.js'
+import './activateReminderControls'
 import '../../features/navigation_header/jquery/instructure'
 import '@canvas/authenticity-token'
-import './ujsLinks.js'
-import './expandAdminLinkMenusOnClick.js'
-import './activateElementToggler.js'
-import './toggleICSuperToggleWidgetsOnEnterKeyEvent.js'
-import './loadInlineMediaComments.js'
-import './ping.js'
-import './markBrokenImages.js'
-import './activateLtiThumbnailLauncher.js'
-import './sanitizeCSSOverflow.js'
+import './ujsLinks'
+import './expandAdminLinkMenusOnClick'
+import './activateElementToggler'
+import './toggleICSuperToggleWidgetsOnEnterKeyEvent'
+import './loadInlineMediaComments'
+import './ping'
+import './markBrokenImages'
+import './activateLtiThumbnailLauncher'
+import './sanitizeCSSOverflow'
 
-if (ENV.page_view_update_url) import('./trackPageViews.js')
+// show and hide the courses vertical menu when the user clicks the hamburger button
+// This now lives in the courses package for usage elsewhere, but it sometimes needs
+// to work in places that don't load the courses bundle.
+import {initialize} from '@canvas/courses/jquery/toggleCourseNav'
+
+initialize()
+
+if (ENV.page_view_update_url) import('./trackPageViews')
 
 // preventDefault so we dont change the hash
 // this will make nested apps that use the hash happy
@@ -54,32 +59,3 @@ $('#skip_navigation_link').on(
       .focus()
   })
 )
-
-// show and hide the courses vertical menu when the user clicks the hamburger button
-// This was in the courses bundle, but it sometimes needs to work in places that don't
-// load that bundle.
-const WIDE_BREAKPOINT = 1200
-
-function resetMenuItemTabIndexes() {
-  const $sectionTabLinks = $('#section-tabs li a')
-  if ($sectionTabLinks.length) {
-    // in testing this, it seems that $(document).width() returns 15px less than what it should.
-    const tabIndex =
-      $('body').hasClass('course-menu-expanded') || $(document).width() >= WIDE_BREAKPOINT - 15
-        ? 0
-        : -1
-    $sectionTabLinks.attr('tabIndex', tabIndex)
-  }
-}
-
-$(resetMenuItemTabIndexes)
-$(window).on('resize', _.debounce(resetMenuItemTabIndexes, 50))
-$('body').on('click', '#courseMenuToggle', () => {
-  $('body').toggleClass('course-menu-expanded')
-  updateSubnavMenuToggle()
-  $('#left-side').css({
-    display: $('body').hasClass('course-menu-expanded') ? 'block' : 'none'
-  })
-
-  resetMenuItemTabIndexes()
-})

ui/shared/courses/jquery/toggleCourseNav.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2021 - 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 'underscore'
+import $ from 'jquery'
+import updateSubnavMenuToggle from './updateSubnavMenuToggle'
+
+const WIDE_BREAKPOINT = 1200
+
+const resetMenuItemTabIndexes = () => {
+  const $sectionTabLinks = $('#section-tabs li a')
+  if ($sectionTabLinks.length) {
+    // in testing this, it seems that $(document).width() returns 15px less than what it should.
+    const tabIndex =
+      $('body').hasClass('course-menu-expanded') || $(document).width() >= WIDE_BREAKPOINT - 15
+        ? 0
+        : -1
+    $sectionTabLinks.attr('tabIndex', tabIndex)
+  }
+}
+
+/**
+ * should be called on page load
+ */
+const initialize = () => {
+  $(resetMenuItemTabIndexes)
+  $(window).on('resize', _.debounce(resetMenuItemTabIndexes, 50))
+  $('body').on('click', '#courseMenuToggle', toggleCourseNav)
+}
+
+/**
+ * toggles the course navigation menu
+ *
+ * exported separately for usage other than the initialize call on page load
+ */
+const toggleCourseNav = () => {
+  $('body').toggleClass('course-menu-expanded')
+  updateSubnavMenuToggle()
+  $('#left-side').css({
+    display: $('body').hasClass('course-menu-expanded') ? 'block' : 'none'
+  })
+
+  resetMenuItemTabIndexes()
+}
+
+export {initialize, toggleCourseNav}

ui/shared/lti/jquery/post_message/messageTypes.js

@@ -16,7 +16,11 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-export const whitelist = ['requestFullWindowLaunch', 'lti.resourceImported']
+export const whitelist = [
+  'requestFullWindowLaunch',
+  'lti.resourceImported',
+  'toggleCourseNavigationMenu'
+]
 
 // These are handled elsewhere so ignore them
 export const ignorelist = ['LtiDeepLinkingResponse']

ui/shared/lti/jquery/post_message/toggleCourseNavigationMenu.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2021 - 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 {toggleCourseNav} from '@canvas/courses/jquery/toggleCourseNav'
+
+const handler = () => toggleCourseNav()
+
+export default handler