Support images in PreviewIcon

Refs MAT-423
flag=none

Test Plan:
- Observe new test passing
- Verify the icon continues to show colors
  and "empty" state as before

Future commits will set the image in the preview
icon

Change-Id: I2ecfb6f2193e2e3d5e017c3e4c31794a55b50e2c
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/276865
Reviewed-by: Juan Chavez <juan.chavez@instructure.com>
QA-Review: Juan Chavez <juan.chavez@instructure.com>
Product-Review: Weston Dransfield <wdransfield@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>

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

@@ -26,11 +26,6 @@ const Course = () => {
   const storeProps = useStoreProps()
   const {files, bookmark, isLoading, hasMore} = storeProps.images[storeProps.contextType]
 
-  const fetchInitial = () => {
-    setIsLoading(true)
-    storeProps.fetchInitialImages()
-  }
-
   return (
     <View>
       <ImageList
@@ -49,9 +44,8 @@ const Course = () => {
           sort: 'date_added',
           order: 'desc'
         }}
-        onImageEmbed={(a, b, c) => {
-          // TODO: in next commit, handle image selection
-          console.log('Selected Image', a)
+        onImageEmbed={(file) => {
+          // TODO: Set current image
         }}
       />
     </View>

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

@@ -49,7 +49,7 @@ export const ImageSection = () => {
             <Flex.Item shouldGrow>
               <Flex>
                 <Flex.Item margin="0 small 0 0">
-                  <PreviewIcon variant="large" testId="selected-image-preview" />
+                  <PreviewIcon variant="large" testId="selected-image-preview" image={state.currentImage}/>
                 </Flex.Item>
                 <Flex.Item>
                   <Text>{!state.currentImage && formatMessage('None Selected')}</Text>

packages/canvas-rce/src/rce/plugins/instructure_buttons/reducers/imageSection.js

@@ -20,7 +20,7 @@ import formatMessage from '../../../../format-message'
 
 export const initialState = {
   mode: 'course', // TODO: Update to 'upload' once we support it
-  currentImage: null
+  currentImage: ''
 }
 
 export const modes = {

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

@@ -19,27 +19,41 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const PreviewIcon = ({color, testId, variant}) => {
+const PreviewIcon = ({color, testId, variant, image}) => {
   const variantSettings = PreviewIcon.variants[variant]
 
+  const background = () => {
+    if (!!image) {
+      return {
+        backgroundImage: `url(${image})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center'
+      }
+    }
+
+    return {
+      background: color ||
+      `
+        linear-gradient(
+          135deg,
+          rgba(255,255,255,1) ${variantSettings.gradientOne}, rgba(255,0,0,1) ${variantSettings.gradientOne},
+          rgba(255,0,0,1) ${variantSettings.gradientTwo}, rgba(255,255,255,1) ${variantSettings.gradientTwo}
+        )
+      `
+    }
+  }
+
   return (
     <span
       data-testid={testId}
       style={{
-        background:
-          color ||
-          `
-            linear-gradient(
-              135deg,
-              rgba(255,255,255,1) ${variantSettings.gradientOne}, rgba(255,0,0,1) ${variantSettings.gradientOne},
-              rgba(255,0,0,1) ${variantSettings.gradientTwo}, rgba(255,255,255,1) ${variantSettings.gradientTwo}
-            )
-          `,
         border: '1px solid #73818C',
         borderRadius: '3px',
         display: 'block',
         height: variantSettings.width,
-        width: variantSettings.width
+        width: variantSettings.width,
+        ...background()
       }}
     />
   )
@@ -61,13 +75,15 @@ PreviewIcon.variants = {
 PreviewIcon.propTypes = {
   color: PropTypes.string,
   testId: PropTypes.string,
-  variant: PropTypes.string
+  variant: PropTypes.string,
+  image: PropTypes.string
 }
 
 PreviewIcon.defaultProps = {
   variant: 'small',
   color: null,
-  testId: null
+  testId: null,
+  image: ''
 }
 
 export default PreviewIcon

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

@@ -36,6 +36,21 @@ describe('PreviewIcon()', () => {
     expect(getByTestId('preview-icon')).toHaveStyle('height: 25px')
   })
 
+  describe('when an image data URL is provided', () => {
+    beforeEach(() => {
+      props = {
+        testId: 'preview-icon',
+        image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAQ9CAYAAABwXXr6AAABdGlDQ1BpY2...'
+      }
+    })
+
+    it('uses the image in the preview', () => {
+      const {getByTestId} = subject(props)
+
+      expect(getByTestId('preview-icon')).toHaveStyle(`backgroundImage: url(${props.image})`)
+    })
+  })
+
   describe('when a color is provided', () => {
     beforeEach(() => {
       props = {