Add course and user menu items under the rce media toolbar button

and comments out the upload media menu item until we work a ticket to make that work. closes COREFE-39 test plan: - load the RCE in a course as a teacher - click on the Media toolbar button > expect the expect User Media and Course Media in the menu - click on a menu item > expect the tray to open to My|Course Files and Media - repeat as a student > expect User Media only, no Course option Change-Id: I3c92ea1265ab74fb2da793912734f7134250d0ff Reviewed-on: https://gerrit.instructure.com/207011 Tested-by: Jenkins Product-Review: Ed Schiebel <[email protected]> Reviewed-by: Clay Diffrient <[email protected]> QA-Review: Clay Diffrient <[email protected]>
ralacas · Sep 17, 2019 · b5984c7 · b5984c7
1 parent 96981b5
commit b5984c7
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 49 deletions.
diff --git a/packages/canvas-rce/src/rce/plugins/instructure_record/plugin.js b/packages/canvas-rce/src/rce/plugins/instructure_record/plugin.js
@@ -16,41 +16,55 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import htmlEscape from "escape-html";
 import clickCallback from "./clickCallback";
+import bridge from '../../../bridge'
 import formatMessage from "../../../format-message";
 import TrayController from './VideoOptionsTray/TrayController'
-import {isVideoElement} from '../shared/ContentSelection'
+// import {isVideoElement} from '../shared/ContentSelection'
 
 const trayController = new TrayController()
 
+const COURSE_PLUGIN_KEY = 'course_media'
+const USER_PLUGIN_KEY  = 'user_media'
+
+
 tinymce.create("tinymce.plugins.InstructureRecord", {
   init(ed) {
+    const contextType = ed.settings.canvas_rce_user_context.type
+
     ed.addCommand("instructureRecord", clickCallback.bind(this, ed, document));
     ed.ui.registry.addMenuButton("instructure_record", {
-      tooltip: htmlEscape(
-        formatMessage({
-          default: "Record/Upload Media",
-          description: "Title for RCE button to insert or record media"
-        })
-      ),
+      tooltip: formatMessage('Record/Upload Media'),
       icon: "video",
       fetch(callback) {
         const items = [
-          {
-            type: 'menuitem',
-            text: formatMessage('Upload/Record Media'),
-            onAction: () => ed.execCommand("instructureRecord"),
-          },
-
           // {
           //   type: 'menuitem',
-          //   text: formatMessage('Course Media'), // This item needs to be adjusted to be user/context aware, i.e. Use Media
-          //   onAction() {
-          //     ed.focus(true) // activate the editor without changing focus
-          //   }
-          // }
+          //   text: formatMessage('Upload/Record Media'),
+          //   onAction: () => ed.execCommand("instructureRecord"),
+          // },
+
+          {
+            type: 'menuitem',
+            text: formatMessage('My Media'),
+            onAction() {
+              ed.focus(true)
+              bridge.showTrayForPlugin(USER_PLUGIN_KEY)
+            }
+          }
         ]
+
+        if (contextType === 'course') {
+          items.splice(1, 0, {
+            type: 'menuitem',
+            text: formatMessage('Course Media'),
+            onAction() {
+              ed.focus(true) // activate the editor without changing focus
+              bridge.showTrayForPlugin(COURSE_PLUGIN_KEY)
+            }
+          })
+        }
+
         callback(items);
       }
     });

diff --git a/packages/canvas-rce/src/rce/plugins/shared/CanvasContentTray.js b/packages/canvas-rce/src/rce/plugins/shared/CanvasContentTray.js
@@ -43,11 +43,13 @@ function getTrayLabel({contentType, contentSubtype}) {
 
   switch (contentSubtype) {
     case 'images':
-        return contentType === 'course_files' ?
-          formatMessage('Course Images') :
-          formatMessage('User Images')
-    // case 'media':
-    //   return formatMessage('Course Media')
+      return contentType === 'course_files' ?
+        formatMessage('Course Images') :
+        formatMessage('User Images')
+    case 'media':
+      return contentType === 'course_files' ?
+        formatMessage('Course Media') :
+        formatMessage('User Media')
     case 'documents':
       return contentType === 'course_files' ?
         formatMessage('Course Documents') :
@@ -61,7 +63,8 @@ const thePanels = {
   links: React.lazy(() => import('../instructure_links/components/LinksPanel')),
   images: React.lazy(() => import('../instructure_image/Images')),
   documents: React.lazy(() => import('../instructure_documents/components/DocumentsPanel')),
-  // media: React.lazy(() => import('./FakeComponent'))
+  media: React.lazy(() => import('./UnknownFileTypePanel')),
+  unknown: React.lazy(() => import('./UnknownFileTypePanel'))
 }
 /**
  * @param {contentType, contentSubType} filterSettings: key to which panel is desired
@@ -73,18 +76,19 @@ function renderContentComponent({contentType, contentSubtype}, contentProps) {
   if (contentType === 'links') {
     Component = thePanels.links
   } else {
-    Component = thePanels[contentSubtype]
+    Component = contentSubtype in thePanels ? thePanels[contentSubtype] : thePanels.unknown
   }
   return Component && <Component {...contentProps} />
 }
 
 const FILTER_SETTINGS_BY_PLUGIN = {
-  user_documents: {contextType: 'user', contentType: 'user_files', contentSubtype: 'documents', sortValue: 'date_added'},
+  user_documents:   {contextType: 'user',   contentType: 'user_files',   contentSubtype: 'documents', sortValue: 'date_added'},
   course_documents: {contextType: 'course', contentType: 'course_files', contentSubtype: 'documents', sortValue: 'date_added'},
-  user_images: {contextType: 'user', contentType: 'user_files', contentSubtype: 'images', sortValue: 'date_added'},
-  course_images: {contextType: 'course', contentType: 'course_files', contentSubtype: 'images', sortValue: 'date_added'},
-  links: {contextType: 'course', contentType: 'links', contentSubtype: 'all', sortValue: 'date_added'},
-  // media: {contentType: 'files', contentSubtype: 'media', sortValue: 'date_added'}
+  user_images:      {contextType: 'user',   contentType: 'user_files',   contentSubtype: 'images',    sortValue: 'date_added'},
+  course_images:    {contextType: 'course', contentType: 'course_files', contentSubtype: 'images',    sortValue: 'date_added'},
+  user_media:       {contextType: 'user',   contentType: 'user_files',   contentSubtype: 'media',     sortValue: 'date_added'},
+  course_media:     {contextType: 'course', contentType: 'course_files', contentSubtype: 'media',     sortValue: 'date_added'},
+  links:            {contextType: 'course', contentType: 'links',        contentSubtype: 'all',       sortValue: 'date_added'}
 }
 
 /**

diff --git a/packages/canvas-rce/src/rce/plugins/shared/Filter.js b/packages/canvas-rce/src/rce/plugins/shared/Filter.js
@@ -123,11 +123,9 @@ export default function Filter(props) {
                 {formatMessage('Documents')}
               </option>
 
-              {/*
               <option value="media" icon={IconAttachMediaLine}>
                 {formatMessage('Media')}
               </option>
-              */}
 
               <option value="all">{formatMessage('All')}</option>
             </Select>

diff --git a/...e/src/rce/plugins/shared/FakeComponent.js → ...ce/plugins/shared/UnknownFileTypePanel.js b/...e/src/rce/plugins/shared/FakeComponent.js → ...ce/plugins/shared/UnknownFileTypePanel.js
@@ -17,11 +17,14 @@
  */
 
 import React from 'react'
+import {View} from '@instructure/ui-layout'
+import {Text} from '@instructure/ui-elements'
+import formatMessage from "../../../format-message";
 
-/**
- * TEMPORARY
- */
-
-export default function FakeComponent() {
-  return <div>This is fake and is only for demo now</div>
-}
+export default function UnknownFileTypePanel() {
+  return (
+    <View as="div" margin="medium">
+      <Text color="error">{formatMessage("Something went wrong and I don't know what to show you.")}</Text>
+    </View>
+  )
+}
diff --git a/packages/canvas-rce/src/rce/plugins/shared/__tests__/CanvasContentTray.test.js b/packages/canvas-rce/src/rce/plugins/shared/__tests__/CanvasContentTray.test.js
@@ -83,9 +83,9 @@ describe('RCE Plugins > CanvasContentTray', () => {
       expect(getTrayLabel()).toEqual('Course Images')
     })
 
-    it.skip('is labeled with "Media" when using the "media" content type', async () => {
-      await showTrayForPlugin('media')
-      expect(getTrayLabel()).toEqual('Media')
+    it('is labeled with "Course Media" when using the "media" content type', async () => {
+      await showTrayForPlugin('course_media')
+      expect(getTrayLabel()).toEqual('Course Media')
     })
 
     it('is labeled with "Course Documents" when using the "course_documents" content type', async () => {
@@ -99,8 +99,8 @@ describe('RCE Plugins > CanvasContentTray', () => {
       expect(getTrayLabel()).toEqual('User Images')
     })
 
-    it.skip('is labeled with "User Media" when using the "user_media" content type', async () => {
-      await showTrayForPlugin('media')
+    it('is labeled with "User Media" when using the "user_media" content type', async () => {
+      await showTrayForPlugin('user_media')
       expect(getTrayLabel()).toEqual('User Media')
     })
 

diff --git a/packages/canvas-rce/src/rce/plugins/shared/__tests__/Filter.test.js b/packages/canvas-rce/src/rce/plugins/shared/__tests__/Filter.test.js
@@ -181,7 +181,7 @@ describe('RCE Plugins > Filter', () => {
       expect(currentFilterSettings.contentSubtype).toEqual('documents')
     })
 
-    it.skip('sets content subtype to "media" when "Media" is selected', () => {
+    it('sets content subtype to "media" when "Media" is selected', () => {
       selectContentSubtype('Media')
       expect(currentFilterSettings.contentSubtype).toEqual('media')
     })
@@ -192,13 +192,15 @@ describe('RCE Plugins > Filter', () => {
       expect(currentFilterSettings.contentSubtype).toEqual('all')
     })
 
-    it.skip('does not change content type when changed', () => {
+    it('does not change content type when changed', () => {
+      expect(currentFilterSettings.contentType).toEqual('user_files')
       selectContentSubtype('Media')
-      expect(currentFilterSettings.contentType).toEqual('files')
+      expect(currentFilterSettings.contentType).toEqual('user_files')
     })
 
-    it.skip('does not change sort value when changed', () => {
+    it('does not change sort value when changed', () => {
       selectSortBy('Date Published')
+      expect(currentFilterSettings.sortValue).toEqual('date_published')
       selectContentSubtype('Media')
       expect(currentFilterSettings.sortValue).toEqual('date_published')
     })

diff --git a/spec/selenium/rcs/rce_next_spec.rb b/spec/selenium/rcs/rce_next_spec.rb
@@ -483,6 +483,7 @@ def create_wiki_page_with_content(page_title)
     end
 
     it "should open upload media modal when clicking upload option" do
+      skip('Unskip after adding upload option back COREFE-268')
       visit_front_page_edit(@course)
 
       click_more_toolbar_button