Cc/collections limited (#1055)

determine ResourcePickerDialog tabs from site config

Motivation: We want to show collection tabs only in ocw-www for now, and resource/page tabs only on course sites for now.

**Why only link collections in ocw-www?** Because linking to collections in `ocw-www` sites is the immediate need and ... right now there are some mismatches between `ocw-course` and `ocw-www` configurations which would make linking to other things (pages, resources) a bit annoying. For example, in courses, pages have `type=page`, but in www they have `type=pages`. And in courses, resource types are determined by `resourcename` but in `www` they are determined by `filename`.

localdev/configs/ocw-course-site-config.yml

@@ -14,7 +14,11 @@ collections:
       - label: Body
         name: body
         widget: markdown
-        attach: resource
+        link:
+          - resource
+          - page
+        embed:
+          - resource
 
   - category: Content
     folder: content/video_galleries

localdev/configs/ocw-www.yml

@@ -14,6 +14,9 @@ collections:
       - label: Body
         name: body
         widget: markdown
+        link:
+          - course_collections
+          - resource_collections
 
   - category: Content
     folder: content/resource_collections

static/js/components/widgets/MarkdownEditor.test.tsx

@@ -21,7 +21,8 @@ jest.mock("@ckeditor/ckeditor5-react", () => ({
   CKEditor: () => <div />
 }))
 
-const render = (props = {}) => shallow(<MarkdownEditor {...props} />)
+const render = (props = {}) =>
+  shallow(<MarkdownEditor link={[]} embed={[]} {...props} />)
 
 describe("MarkdownEditor", () => {
   let sandbox: SinonSandbox
@@ -49,7 +50,8 @@ describe("MarkdownEditor", () => {
         const wrapper = render({
           minimal,
           value,
-          attach: "attach"
+          embed: ["resource"],
+          link:  ["page"]
         })
         const ckWrapper = wrapper.find("CKEditor")
         expect(ckWrapper.prop("editor")).toBe(ClassicEditor)
@@ -61,17 +63,19 @@ describe("MarkdownEditor", () => {
     })
   })
 
-  it("should render ResourceEmbedField if attach is provided", () => {
-    const wrapper = render({ attach: "foo" })
-    const diaglogWrapper = wrapper.find("ResourcePickerDialog")
-    expect(diaglogWrapper.length).toBe(1)
-  })
-
-  it("should not render ResourceEmbedField if attach is missing", () => {
-    const wrapper = render()
-    const diaglogWrapper = wrapper.find("ResourcePickerDialog")
-    expect(diaglogWrapper.length).toBe(0)
-  })
+  it.each([
+    { link: [], embed: [], shouldExist: false },
+    { link: ["page"], embed: [], shouldExist: true },
+    { link: [], embed: ["resource"], shouldExist: true },
+    { link: ["page"], embed: ["resource"], shouldExist: true }
+  ])(
+    "should render ResourcePickerDialog iff link or embed are nonempty",
+    ({ link, embed, shouldExist }) => {
+      const wrapper = render({ link, embed })
+      const resourcePicker = wrapper.find("ResourcePickerDialog")
+      expect(resourcePicker.exists()).toBe(shouldExist)
+    }
+  )
 
   it("should render resources with using EmbeddedResource", () => {
     const wrapper = render()
@@ -88,30 +92,43 @@ describe("MarkdownEditor", () => {
     ).toEqual("resource-uuid")
   })
 
-  //
-  ;[true, false].forEach(hasAttach => {
-    it(`${
-      hasAttach ? "should" : "shouldn't"
-    } have an add resource button since attach ${
-      hasAttach ? "was" : "wasn't"
-    } set`, () => {
-      const wrapper = render(hasAttach ? { attach: "resource" } : {})
+  it.each([
+    { embed: [], hasTool: false },
+    { embed: ["resource"], hasTool: true }
+  ])(
+    'should show "add resource" iff embed is nonempty. Case: $embed',
+    ({ embed, hasTool }) => {
+      const wrapper = render({ embed })
       const editorConfig = wrapper.find("CKEditor").prop("config")
       // @ts-ignore
       expect(editorConfig.toolbar.items.includes(ADD_RESOURCE_EMBED)).toBe(
-        hasAttach
+        hasTool
       )
+    }
+  )
+
+  it.each([
+    { link: [], hasTool: false },
+    { link: ["page"], hasTool: true }
+  ])(
+    'should show "add link" iff link is nonempty. Case: $link',
+    ({ link, hasTool }) => {
+      const wrapper = render({ link })
+      const editorConfig = wrapper.find("CKEditor").prop("config")
       // @ts-ignore
       expect(editorConfig.toolbar.items.includes(ADD_RESOURCE_LINK)).toBe(
-        hasAttach
+        hasTool
       )
-    })
-  })
+    }
+  )
 
   //
   ;[RESOURCE_EMBED, RESOURCE_LINK].forEach(resourceNodeType => {
     it(`should open the resource picker for ${resourceNodeType}`, () => {
-      const wrapper = render({ attach: "resource" })
+      const wrapper = render({
+        embed: ["resource"],
+        link:  ["resource", "page"]
+      })
       const editor = wrapper.find("CKEditor").prop("config")
       // @ts-ignore
       editor[CKEDITOR_RESOURCE_UTILS].openResourcePicker(resourceNodeType)

static/js/components/widgets/MarkdownEditor.tsx

@@ -26,7 +26,8 @@ export interface Props {
   onChange?: (event: { target: { value: string; name: string } }) => void
   children?: React.ReactNode
   minimal?: boolean
-  attach?: string
+  embed: string[]
+  link: string[]
 }
 
 type RenderQueueEntry = [string, HTMLElement]
@@ -37,7 +38,7 @@ type RenderQueueEntry = [string, HTMLElement]
  * pass minimal: true to get a minimal version.
  */
 export default function MarkdownEditor(props: Props): JSX.Element {
-  const { attach, value, name, onChange, minimal } = props
+  const { link, embed, value, name, onChange, minimal } = props
 
   const editor = useRef<editor.Editor>()
   const setEditorRef = useCallback(editorInstance => {
@@ -85,8 +86,6 @@ export default function MarkdownEditor(props: Props): JSX.Element {
     [setResourcePickerMode, setIsResourcePickerOpen]
   )
 
-  const hasAttach = attach && attach.length > 0
-
   const editorConfig = useMemo(() => {
     if (minimal) {
       return MinimalEditorConfig
@@ -102,15 +101,19 @@ export default function MarkdownEditor(props: Props): JSX.Element {
         },
         toolbar: {
           ...FullEditorConfig.toolbar,
-          items: FullEditorConfig.toolbar.items.filter(item =>
-            hasAttach ?
-              true :
-              item !== ADD_RESOURCE_LINK && item !== ADD_RESOURCE_EMBED
-          )
+          items: FullEditorConfig.toolbar.items.filter(item => {
+            if (item === ADD_RESOURCE_LINK) {
+              return link.length > 0
+            }
+            if (item === ADD_RESOURCE_EMBED) {
+              return embed.length > 0
+            }
+            return true
+          })
         }
       }
     }
-  }, [minimal, renderResource, openResourcePicker, hasAttach])
+  }, [minimal, renderResource, openResourcePicker, link, embed])
 
   const onChangeCB = useCallback(
     (_event: any, editor: any) => {
@@ -145,14 +148,15 @@ export default function MarkdownEditor(props: Props): JSX.Element {
         onReady={setEditorRef}
         onChange={onChangeCB}
       />
-      {hasAttach ? (
+      {(link.length > 0 || embed.length > 0) && (
         <ResourcePickerDialog
           isOpen={isResourcePickerOpen}
           mode={resourcePickerMode}
+          contentNames={resourcePickerMode === RESOURCE_LINK ? link : embed}
           closeDialog={closeResourcePicker}
           insertEmbed={addResourceEmbed}
         />
-      ) : null}
+      )}
       {renderQueue.map(([uuid, el], idx) => (
         <EmbeddedResource key={`${uuid}_${idx}`} uuid={uuid} el={el} />
       ))}