Handle multi-color SVG click in B&I

closes MAT-169
flag=rce_buttons_and_icons

Test Plan
1. Re-build canvas-rce and Canvas webpack
2. Navigate to an RCE and open the tray to
   create a new button and icon
3. Scroll to the image section and choose
   "Multi Color Image"
4. Select a multi-color image and verify
   the image preview is populated with the
   chosen image

Change-Id: Id50bcff94dcecf9ea87d55a534ca27ec51da90c4
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/284608
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Gonzalo Penaranda <gonzalo.penaranda@instructure.com>
QA-Review: Gonzalo Penaranda <gonzalo.penaranda@instructure.com>
Product-Review: David Lyons <lyons@instructure.com>

packages/canvas-rce/src/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageSection/MultiColor/index.js

@@ -20,9 +20,27 @@ import React from 'react'
 
 import SVGList from '../SVGList'
 import {TYPE} from '../SVGList'
+import {actions} from '../../../../reducers/imageSection'
 
-const MultiColor = () => {
-  return <SVGList type={TYPE.Multicolor} />
+import {convertFileToBase64} from '../../../../svg/utils'
+
+const MultiColor = ({dispatch}) => {
+  const onSelect = svg => {
+    dispatch({...actions.START_LOADING})
+    dispatch({...actions.SET_IMAGE_NAME, payload: svg.label})
+
+    convertFileToBase64(
+      new Blob([svg.source], {
+        type: 'image/svg+xml'
+      })
+    ).then(base64Image => {
+      dispatch({...actions.SET_IMAGE, payload: base64Image})
+      dispatch({...actions.STOP_LOADING})
+      dispatch({...actions.CLEAR_MODE})
+    })
+  }
+
+  return <SVGList type={TYPE.Multicolor} onSelect={onSelect} />
 }
 
 export default MultiColor

packages/canvas-rce/src/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageSection/SVGList.js

@@ -25,6 +25,7 @@ import {View} from '@instructure/ui-view'
 
 import SVGThumbnail from './SVGThumbnail'
 import MultiColorSVG from './MultiColor/svg'
+import {IconAnalyticsLine} from '@instructure/ui-icons'
 
 export const TYPE = {
   Multicolor: 'multicolor'
@@ -38,7 +39,7 @@ export function svgSourceFor(type) {
       }
 }
 
-const SVGList = ({type}) => {
+const SVGList = ({type, onSelect}) => {
   const svgSourceList = svgSourceFor(type)
 
   return (
@@ -52,7 +53,11 @@ const SVGList = ({type}) => {
     >
       {Object.keys(svgSourceList).map(iconName => (
         <Flex.Item key={iconName} as="div" margin="xx-small xx-small small xx-small" size="4rem">
-          <Link draggable={false} onClick={() => {}} title={svgSourceList[iconName].label}>
+          <Link
+            draggable={false}
+            onClick={() => onSelect(svgSourceList[iconName])}
+            title={svgSourceList[iconName].label}
+          >
             <View
               as="div"
               borderRadius="medium"
@@ -70,7 +75,8 @@ const SVGList = ({type}) => {
 }
 
 SVGList.propTypes = {
-  type: PropTypes.oneOf(Object.values(TYPE))
+  type: PropTypes.oneOf(Object.values(TYPE)).isRequired,
+  onSelect: PropTypes.func.isRequired
 }
 
 export default SVGList

packages/canvas-rce/src/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageSection/__tests__/SVGList.test.js

@@ -17,15 +17,17 @@
  */
 
 import React from 'react'
-import {render} from '@testing-library/react'
+import {fireEvent, render} from '@testing-library/react'
 
 import SVGList, {TYPE} from '../SVGList'
 import MultiColorSVG from '../MultiColor/svg'
 
 describe('SVGList', () => {
-  let type
+  let type, onSelect
 
-  const subject = () => render(<SVGList type={type} />)
+  beforeEach(() => (onSelect = () => {}))
+
+  const subject = () => render(<SVGList type={type} onSelect={onSelect} />)
 
   describe('when "type" is "multicolor"', () => {
     beforeEach(() => (type = TYPE.Multicolor))
@@ -43,4 +45,23 @@ describe('SVGList', () => {
       })
     })
   })
+
+  describe('when an entry is clicked', () => {
+    beforeEach(() => {
+      type = TYPE.Multicolor
+      onSelect = jest.fn()
+    })
+
+    afterEach(() => jest.clearAllMocks())
+
+    it('calls the "onSelect" handler with the selected icon', () => {
+      const {getByTitle} = subject()
+      fireEvent.click(getByTitle('Art Icon'))
+      expect(onSelect).toHaveBeenCalledWith(
+        expect.objectContaining({
+          label: 'Art Icon'
+        })
+      )
+    })
+  })
 })

packages/canvas-rce/src/rce/plugins/shared/PreviewIcon.js

@@ -32,7 +32,7 @@ const PreviewIcon = ({color, testId, variant, image, loading}) => {
     if (!!image) {
       return {
         backgroundImage: `url(${image})`,
-        backgroundSize: 'cover',
+        backgroundSize: 'contain',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
         borderRadius: '8px'