Update selected panel on UploadMedia prop change

closes MAT-780
flag=none

Test Plan:
- Validate the enhanced student submission view
  allows recording and uploading media
- Validate clicking tabs on the canvas-media upload
  modal switches them as expected

Change-Id: I95a49a2df8e5a74d2012c915d1f132e94d1970d2
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/287374
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Dustin Cowles <dustin.cowles@instructure.com>
QA-Review: Dustin Cowles <dustin.cowles@instructure.com>
Product-Review: Weston Dransfield <wdransfield@instructure.com>

packages/canvas-media/src/UploadMedia.js

@@ -18,6 +18,7 @@
 import {arrayOf, bool, func, instanceOf, shape, string} from 'prop-types'
 import React, {Suspense} from 'react'
 import ReactDOM from 'react-dom'
+import {isEqual} from 'lodash'
 
 import {Button, CloseButton} from '@instructure/ui-buttons'
 import {Heading} from '@instructure/ui-heading'
@@ -27,11 +28,14 @@ import {px} from '@instructure/ui-utils'
 import {ProgressBar} from '@instructure/ui-progress'
 import {Text} from '@instructure/ui-text'
 
+import {
+  RCS_MAX_BODY_SIZE,
+  RCS_REQUEST_SIZE_BUFFER
+} from '@instructure/canvas-rce/src/rce/plugins/shared/Upload/constants'
 import {ACCEPTED_FILE_TYPES} from './acceptedMediaFileTypes'
 import LoadingIndicator from './shared/LoadingIndicator'
 import saveMediaRecording, {saveClosedCaptions} from './saveMediaRecording'
 import translationShape from './translationShape'
-import {RCS_MAX_BODY_SIZE, RCS_REQUEST_SIZE_BUFFER} from '@instructure/canvas-rce/src/rce/plugins/shared/Upload/constants'
 
 const ComputerPanel = React.lazy(() => import('./ComputerPanel'))
 const MediaRecorder = React.lazy(() => import('./MediaRecorder'))
@@ -77,12 +81,8 @@ export default class UploadMedia extends React.Component {
   constructor(props) {
     super(props)
 
-    let defaultSelectedPanel = -1
-    if (props.tabs.upload) {
-      defaultSelectedPanel = 0
-    } else if (props.tabs.record) {
-      defaultSelectedPanel = 1
-    }
+    let defaultSelectedPanel = this.inferSelectedPanel(props.tabs)
+
     if (props.computerFile) {
       props.computerFile.title = props.computerFile.name
     }
@@ -101,6 +101,18 @@ export default class UploadMedia extends React.Component {
     this.modalBodyRef = React.createRef()
   }
 
+  inferSelectedPanel = tabs => {
+    let selectedPanel = -1
+
+    if (tabs.upload) {
+      selectedPanel = 0
+    } else if (tabs.record) {
+      selectedPanel = 1
+    }
+
+    return selectedPanel
+  }
+
   isReady = () => {
     if (this.props.disableSubmitWhileUploading && this.state.uploading) {
       return false
@@ -179,8 +191,20 @@ export default class UploadMedia extends React.Component {
     this.setBodySize(this.state)
   }
 
-  componentDidUpdate(_prevProps, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     this.setBodySize(prevState)
+
+    // If the specified tabs have not changed, don't attempt
+    // to set the selected panel state (this would trigger
+    // and endless loop).
+    if (isEqual(prevProps.tabs, this.props.tabs)) return
+
+    if (prevState.selectedPanel === -1) {
+      // The tabs prop has changed and the selectedPanel was
+      // never set in the constructor. Attempt to infer the
+      // selected panel based on the new tabs list
+      this.setState({selectedPanel: this.inferSelectedPanel(this.props.tabs)})
+    }
   }
 
   setBodySize(state) {

packages/canvas-media/src/__tests__/UploadMedia.test.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import {render, fireEvent} from '@testing-library/react'
 import UploadMedia from '../index'
 
@@ -78,6 +78,54 @@ describe('Upload Media', () => {
     })
   })
 
+  describe('when the tabs prop changes', () => {
+    it('recomputes the selected panel', () => {
+      const setStateSpy = jest.spyOn(UploadMedia.prototype, 'setState')
+
+      // Initial render with no tabs
+      const {rerender} = render(
+        <UploadMedia
+          rcsConfig={{
+            contextType: 'course',
+            contextId: '17',
+            origin: 'http://host:port',
+            jwt: 'whocares'
+          }}
+          open
+          liveRegion={() => null}
+          onStartUpload={() => {}}
+          onComplete={() => {}}
+          onDismiss={() => {}}
+          tabs={{record: false, upload: false}}
+          uploadMediaTranslations={uploadMediaTranslations}
+        />
+      )
+
+      // rerender, setting the record tab to true
+      const container = rerender(
+        <UploadMedia
+          rcsConfig={{
+            contextType: 'course',
+            contextId: '17',
+            origin: 'http://host:port',
+            jwt: 'whocares'
+          }}
+          open
+          liveRegion={() => null}
+          onStartUpload={() => {}}
+          onComplete={() => {}}
+          onDismiss={() => {}}
+          tabs={{record: false, upload: true}}
+          uploadMediaTranslations={uploadMediaTranslations}
+        />
+      )
+
+      expect(setStateSpy).toHaveBeenCalledWith({selectedPanel: 0})
+
+      setStateSpy.mockRestore()
+    })
+  })
+
   describe('only enable Submit button when ready', () => {
     let computerFile