Add postMessage show & hideNavigationMenu

Lti tools can use postMessages to interact
with platform. There was a
toggleCourseNavigationMenu getting deprecated now,
and replaced with a showNavigationMenu
and a hideNavigationMenu to explicitly show
or hide the navigation menu in course, account or group page.

closes INTEROP-8809
flag=none

test plan:
- Open a course or account or group page
- Launch lti 1.3 test tool
- Send postmessage in test tool to hide course NavigationMenu
   with message {"subject":"hideNavigationMenu"}
- Verify course navigation menu is hidden
- Send postmessage in test tool to show course NavigationMenu
   with message {"subject":"showNavigationMenu"}
- Verify course navigation menu is shown

Change-Id: I2d84e48b0dc193f9bfe63e70683d445e0a3c95ca
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/360518
Reviewed-by: Csaba Csuzdi <csaba.csuzdi@instructure.com>
QA-Review: Csaba Csuzdi <csaba.csuzdi@instructure.com>
Product-Review: Alexis Nast <alexis.nast@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>

doc/api/lti_window_post_message.md

@@ -289,18 +289,6 @@ window.parent.postMessage(
 )
 ```
 
-## toggleCourseNavigationMenu
-
-Opens and closes the course navigation sidebar, giving more space for the tool to display.
-
-**Required properties:**
-
-- subject: "toggleCourseNavigationMenu"
-
-```js
-window.parent.postMessage({subject: 'toggleCourseNavigationMenu'}, '*')
-```
-
 ## lti.resourceImported
 
 Notifies the Canvas page holding the tool that a resource has finished importing.
@@ -509,3 +497,47 @@ Returning postMessage includes the following properties:
 ```js
 window.parent.postMessage({subject: 'lti.enableScrollEvents'}, '*')
 ```
+
+## showNavigationMenu
+
+Opens the navigation sidebar, a replacement for toggleCourseNavigationMenu.
+Can be used on course, account or group page.
+
+**Required properties:**
+
+- subject: "showNavigationMenu"
+
+```js
+window.parent.postMessage({subject: 'showNavigationMenu'}, '*')
+```
+
+## hideNavigationMenu
+
+Closes the navigation sidebar, a replacement for toggleCourseNavigationMenu.
+Can be used on course, account or group page.
+
+**Required properties:**
+
+- subject: "hideNavigationMenu"
+
+```js
+window.parent.postMessage({subject: 'hideNavigationMenu'}, '*')
+```
+
+<div class="warning-message">
+    Deprecated Message Types
+</div>
+
+## toggleCourseNavigationMenu <span title="this message type is deprecated!">⚠️</span>
+
+**Use show or hideNavigationMenu instead!**
+
+Opens and closes the course navigation sidebar, giving more space for the tool to display.
+
+**Required properties:**
+
+- subject: "toggleCourseNavigationMenu"
+
+```js
+window.parent.postMessage({subject: 'toggleCourseNavigationMenu'}, '*')
+```

ui/shared/courses/jquery/__tests__/toggleCourseNav.test.js

@@ -0,0 +1,62 @@
+/*
+ * 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 {showCourseNav, hideCourseNav} from '../toggleCourseNav'
+import updateSubnavMenuToggle from '@canvas/courses/jquery/updateSubnavMenuToggle'
+
+jest.mock('@canvas/courses/jquery/updateSubnavMenuToggle', () => jest.fn())
+
+describe('toggleCourseNav', () => {
+  describe('course nav menu is open', () => {
+    beforeEach(() => {
+      document.body.classList.add('course-menu-expanded')
+      jest.clearAllMocks()
+    })
+
+    it('showCourseNav show do nothing', () => {
+      showCourseNav()
+      expect(document.body.classList).toContain('course-menu-expanded')
+      expect(updateSubnavMenuToggle).not.toHaveBeenCalled()
+    })
+
+    it('hideCourseNav should hide course nav', () => {
+      hideCourseNav()
+      expect(document.body.classList).not.toContain('course-menu-expanded')
+      expect(updateSubnavMenuToggle).toHaveBeenCalled()
+    })
+  })
+
+  describe('course nav menu is closed', () => {
+    beforeEach(() => {
+      document.body.classList.remove('course-menu-expanded')
+      jest.clearAllMocks()
+    })
+
+    it('showCourseNav should show course nav', () => {
+      showCourseNav()
+      expect(document.body.classList).toContain('course-menu-expanded')
+      expect(updateSubnavMenuToggle).toHaveBeenCalled()
+    })
+
+    it('hideCourseNav should do nothing', () => {
+      hideCourseNav()
+      expect(document.body.classList).not.toContain('course-menu-expanded')
+      expect(updateSubnavMenuToggle).not.toHaveBeenCalled()
+    })
+  })
+})

ui/shared/courses/jquery/toggleCourseNav.js

@@ -92,4 +92,16 @@ const toggleCourseNav = () => {
   resetMenuItemTabIndexes()
 }
 
-export {initialize, toggleCourseNav}
+const showCourseNav = () => {
+  if (!$('body').hasClass('course-menu-expanded')) {
+    toggleCourseNav()
+  }
+}
+
+const hideCourseNav = () => {
+  if ($('body').hasClass('course-menu-expanded')) {
+    toggleCourseNav()
+  }
+}
+
+export {initialize, toggleCourseNav, showCourseNav, hideCourseNav}

ui/shared/lti/jquery/messages.ts

@@ -53,6 +53,8 @@ const SUBJECT_ALLOW_LIST = [
   'lti.getPageSettings',
   'requestFullWindowLaunch',
   'toggleCourseNavigationMenu',
+  'showNavigationMenu',
+  'hideNavigationMenu',
 ] as const
 
 /**
@@ -152,6 +154,8 @@ const handlers: Record<
   'lti.getPageSettings': () => import(`./subjects/lti.getPageSettings`),
   requestFullWindowLaunch: () => import(`./subjects/requestFullWindowLaunch`),
   toggleCourseNavigationMenu: () => import(`./subjects/toggleCourseNavigationMenu`),
+  showNavigationMenu: () => import(`./subjects/showNavigationMenu`),
+  hideNavigationMenu: () => import(`./subjects/hideNavigationMenu`),
 }
 
 /**

ui/shared/lti/jquery/subjects/__tests__/hideNavigationMenu.test.js

@@ -0,0 +1,31 @@
+/*
+ * 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 handler from '../hideNavigationMenu'
+import {hideCourseNav} from '@canvas/courses/jquery/toggleCourseNav'
+
+jest.mock('@canvas/courses/jquery/toggleCourseNav', () => ({
+  hideCourseNav: jest.fn(),
+}))
+
+describe('hideNavigationMenu handler', () => {
+  it('should call hideCourseNav', () => {
+    handler()
+    expect(hideCourseNav).toHaveBeenCalled()
+  })
+})

ui/shared/lti/jquery/subjects/__tests__/showNavigationMenu.test.js

@@ -0,0 +1,31 @@
+/*
+ * 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 handler from '../showNavigationMenu'
+import {showCourseNav} from '@canvas/courses/jquery/toggleCourseNav'
+
+jest.mock('@canvas/courses/jquery/toggleCourseNav', () => ({
+  showCourseNav: jest.fn(),
+}))
+
+describe('showNavigationMenu handler', () => {
+  it('should call showCourseNav', () => {
+    handler()
+    expect(showCourseNav).toHaveBeenCalled()
+  })
+})

ui/shared/lti/jquery/subjects/hideNavigationMenu.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 {hideCourseNav} from '@canvas/courses/jquery/toggleCourseNav'
+import type {LtiMessageHandler} from '../lti_message_handler'
+
+const handler: LtiMessageHandler = () => {
+  hideCourseNav()
+  return false
+}
+
+export default handler

ui/shared/lti/jquery/subjects/showNavigationMenu.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 {showCourseNav} from '@canvas/courses/jquery/toggleCourseNav'
+import type {LtiMessageHandler} from '../lti_message_handler'
+
+const handler: LtiMessageHandler = () => {
+  showCourseNav()
+  return false
+}
+
+export default handler