ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Ryan Norton 2019-07-24 11:13:47 -06:00
parent 41486011f9
commit 8216b049fb
2 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/jsx/announcements/components/IndexHeader.js
View File

@ -16,30 +16,30 @@
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import I18n from 'i18n!announcements_v2'
import React, {Component} from 'react'
import {string, func, bool, number} from 'prop-types'
import {bindActionCreators} from 'redux'
import {bool, func, number, string} 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 Select from '@instructure/ui-core/lib/components/Select'
import FormField from '@instructure/ui-form-field/lib/components/FormField'
import Grid, {GridCol, GridRow} from '@instructure/ui-layout/lib/components/Grid'
import View from '@instructure/ui-layout/lib/components/View'
import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import PresentationContent from '@instructure/ui-a11y/lib/components/PresentationContent'
import IconLock from '@instructure/ui-icons/lib/Line/IconLock'
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
name="filter-dropdown"
onChange={e => this.props.searchAnnouncements({filter: e.target.value})}
size="medium"
<FormField
id="announcement-filter"
label={<ScreenReaderContent>{I18n.t('Announcement Filter')}</ScreenReaderContent>}
>
{Object.keys(filters).map(filter => (
<option key={filter} value={filter}>
{filters[filter]}
</option>
))}
</Select>
<select
name="filter-dropdown"
onChange={e => this.props.searchAnnouncements({filter: e.target.value})}
style={{
margin: '0',
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/${
this.props.contextId
}/discussion_topics/new?is_announcement=true`}
href={`/${this.props.contextType}s/${this.props.contextId}/discussion_topics/new?is_announcement=true`}
variant="primary"
id="add_announcement"
>

4
spec/javascripts/jsx/announcements/components/IndexHeaderSpec.js
View File

@ -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'})