handle Select deprecation in announcements

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

Test Plan:
* as a teacher, create some announcements in a course
* as a user, navigate to a course's announcement page
* in the top left, confirm the announcement filter:
** defaults to 'All'
** shows 'All' and 'Unread' in the dropdown
** filters only unread announcements when 'Unread' is selected
** shows all announcements when 'All' is selected

fixes COMMS-2237

Change-Id: Id2d53d12497797cb2e862d46a79ed32d1095c3bf
Reviewed-on: https://gerrit.instructure.com/202481
Tested-by: Jenkins
Reviewed-by: Landon Gilbert-Bland <lbland@instructure.com>
QA-Review: Steven Burnett <sburnett@instructure.com>
Product-Review: Steven Burnett <sburnett@instructure.com>

app/jsx/announcements/components/IndexHeader.js

@@ -16,30 +16,30 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import I18n from 'i18n!announcements_v2'
+import {bindActionCreators} from 'redux'
-import React, {Component} from 'react'
+import {bool, func, number, string} from 'prop-types'
-import {string, func, bool, number} from 'prop-types'
 import {connect} from 'react-redux'
 import {debounce} from 'lodash'
-import {bindActionCreators} from 'redux'
+import I18n from 'i18n!announcements_v2'
+import React, {Component} from 'react'
 
 import Button from '@instructure/ui-buttons/lib/components/Button'
-import TextInput from '@instructure/ui-forms/lib/components/TextInput'
+import FormField from '@instructure/ui-form-field/lib/components/FormField'
-import Select from '@instructure/ui-core/lib/components/Select'
 import Grid, {GridCol, GridRow} from '@instructure/ui-layout/lib/components/Grid'
-import View from '@instructure/ui-layout/lib/components/View'
+import IconLock from '@instructure/ui-icons/lib/Line/IconLock'
-import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
-import PresentationContent from '@instructure/ui-a11y/lib/components/PresentationContent'
 import IconPlus from '@instructure/ui-icons/lib/Line/IconPlus'
 import IconSearchLine from '@instructure/ui-icons/lib/Line/IconSearch'
 import IconTrash from '@instructure/ui-icons/lib/Line/IconTrash'
 import IconUnlock from '@instructure/ui-icons/lib/Line/IconUnlock'
-import IconLock from '@instructure/ui-icons/lib/Line/IconLock'
+import PresentationContent from '@instructure/ui-a11y/lib/components/PresentationContent'
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
+import TextInput from '@instructure/ui-forms/lib/components/TextInput'
+import View from '@instructure/ui-layout/lib/components/View'
 
-import select from '../../shared/select'
-import propTypes from '../propTypes'
 import actions from '../actions'
 import ExternalFeedsTray from './ExternalFeedsTray'
+import propTypes from '../propTypes'
+import select from '../../shared/select'
 import {showConfirmDelete} from './ConfirmDeleteModal'
 
 // Delay the search so as not to overzealously read out the number
@@ -114,18 +114,25 @@ export default class IndexHeader extends Component {
           <Grid>
             <GridRow hAlign="space-between">
               <GridCol width={2}>
-                <Select
+                <FormField
-                  name="filter-dropdown"
+                  id="announcement-filter"
-                  onChange={e => this.props.searchAnnouncements({filter: e.target.value})}
-                  size="medium"
                   label={<ScreenReaderContent>{I18n.t('Announcement Filter')}</ScreenReaderContent>}
                 >
-                  {Object.keys(filters).map(filter => (
+                  <select
-                    <option key={filter} value={filter}>
+                    name="filter-dropdown"
-                      {filters[filter]}
+                    onChange={e => this.props.searchAnnouncements({filter: e.target.value})}
-                    </option>
+                    style={{
-                  ))}
+                      margin: '0',
-                </Select>
+                      width: '100%'
+                    }}
+                  >
+                    {Object.keys(filters).map(filter => (
+                      <option key={filter} value={filter}>
+                        {filters[filter]}
+                      </option>
+                    ))}
+                  </select>
+                </FormField>
               </GridCol>
               <GridCol width={4}>
                 <TextInput
@@ -190,9 +197,7 @@ export default class IndexHeader extends Component {
                 )}
                 {this.props.permissions.create && (
                   <Button
-                    href={`/${this.props.contextType}s/${
+                    href={`/${this.props.contextType}s/${this.props.contextId}/discussion_topics/new?is_announcement=true`}
-                      this.props.contextId
-                    }/discussion_topics/new?is_announcement=true`}
                     variant="primary"
                     id="add_announcement"
                   >

spec/javascripts/jsx/announcements/components/IndexHeaderSpec.js

@@ -95,7 +95,7 @@ QUnit.module('"Announcement Filter" select', () => {
     const props = makeProps()
     props.searchAnnouncements = spy
     const wrapper = shallow(<IndexHeader {...props} />)
-    const onChange = wrapper.find('Select').prop('onChange')
+    const onChange = wrapper.find('select').prop('onChange')
     onChange({target: {value: 'unread'}})
     strictEqual(spy.callCount, 1)
   })
@@ -105,7 +105,7 @@ QUnit.module('"Announcement Filter" select', () => {
     const props = makeProps()
     props.searchAnnouncements = spy
     const wrapper = shallow(<IndexHeader {...props} />)
-    const onChange = wrapper.find('Select').prop('onChange')
+    const onChange = wrapper.find('select').prop('onChange')
     onChange({target: {value: 'unread'}})
     const searchOptions = spy.lastCall.args[0]
     deepEqual(searchOptions, {filter: 'unread'})