replace Select with select in ePortfolios

as part of the instUI upgrade we are removing the Select
component in favor of select

Test Plan:
* Navigate to http://localhost:3000/dashboard/eportfolios
* Click 'Create an ePortfolio' and then 'Make ePortfolio'
* In the top right, click 'Organize/Manage Pages'
** Add another page of any name
* Click on the gear next to one of the pages and select
   'Move To'
* Confirm that the modal that opens has:
** All of the pages available for selection in the dropdown
** 'Place "<page name>" before:' as a label
** Allows you to select and move pages successfully

fixes COMMS-2234

Change-Id: I89b135496979c3b8eb6c62e85305ab2b82c4032e
Reviewed-on: https://gerrit.instructure.com/202186
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
QA-Review: Michelle Simmons <misimmons@instructure.com>
Product-Review: Ryan Norton <rnorton@instructure.com>

app/jsx/eportfolios/MoveToDialog.js

@@ -16,12 +16,12 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react'
-import PropTypes from 'prop-types'
+import Button from '@instructure/ui-buttons/lib/components/Button'
+import FormField from '@instructure/ui-form-field/lib/components/FormField'
 import I18n from 'i18n!eportfolio'
 import Modal, {ModalBody, ModalFooter} from '../shared/components/InstuiModal'
-import Button from '@instructure/ui-buttons/lib/components/Button'
-import Select from '@instructure/ui-core/lib/components/Select'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 class MoveToDialog extends React.Component {
   static propTypes = {
@@ -73,8 +73,8 @@ class MoveToDialog extends React.Component {
     })
 
     return (
-      <div>
-        <Select id="MoveToDialog__select" ref="select" label={selectLabel}>
+      <FormField id="MoveToDialog__formfield" label={selectLabel}>
+        <select id="MoveToDialog__select" ref="select">
           {this.props.destinations.map(dest => (
             <option key={dest.id} value={dest.id}>
               {dest.label}
@@ -83,8 +83,8 @@ class MoveToDialog extends React.Component {
           <option key="move-to-dialog_at-the-bottom" value="">
             {I18n.t('-- At the bottom --')}
           </option>
-        </Select>
-      </div>
+        </select>
+      </FormField>
     )
   }
 

app/jsx/eportfolios/__tests__/MoveToDialog.test.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2019 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import MoveToDialog from '../MoveToDialog'
+import React from 'react'
+import {render} from '@testing-library/react'
+
+describe('MoveToDialog', () => {
+  const props = {
+    header: 'This is a dialog',
+    source: { label: 'foo', id: '0' },
+    destinations: [{ label: 'bar', id: '1' }, { label: 'baz', id: '2' }],
+  }
+
+  it('renders the prop header', () => {
+    const {getByText} = render(<MoveToDialog {...props} />)
+    expect(getByText('This is a dialog')).toBeInTheDocument()
+  })
+
+  it('identifies the page that is currently selected', () => {
+    const {getByText} = render(<MoveToDialog {...props} />)
+    expect(getByText('Place "foo" before:')).toBeInTheDocument()
+  })
+
+  it('includes all destinations in select', () => {
+    const {getByText} = render(<MoveToDialog {...props} />)
+    const select = document.body.querySelector('select')
+
+    expect(select).toBeInTheDocument()
+    expect(select).toContainElement(getByText('bar'))
+    expect(select).toContainElement(getByText('baz'))
+  })
+
+  it('includes "at the bottom" in select', () => {
+    const {getByText} = render(<MoveToDialog {...props} />)
+    const select = document.body.querySelector('select')
+
+    expect(select).toBeInTheDocument()
+    expect(select).toContainElement(getByText('-- At the bottom --'))
+  })
+})

spec/javascripts/jsx/eportfolios/MoveToDialogSpec.js

@@ -58,19 +58,6 @@ QUnit.module('MoveToDialog', {
   }
 })
 
-test('includes all destinations in select', () => {
-  const dialog = mountDialog()
-  const options = TestUtils.scryRenderedDOMComponentsWithTag(dialog.refs.select, 'option')
-  ok( options.find((opt) => (opt.label === 'bar')) )
-  ok( options.find((opt) => (opt.label === 'baz')) )
-})
-
-test('includes "at the bottom" in select', () => {
-  const dialog = mountDialog()
-  const options = TestUtils.scryRenderedDOMComponentsWithTag(dialog.refs.select, 'option')
-  ok( options.find((opt) => (opt.label === '-- At the bottom --')) )
-})
-
 test('calls onMove with a destination id when selected', (assert) => {
   const done = assert.async()
   const dialog = mountDialog({