fix some instUI <Spinner renderTitle deprecations

Closes: COREFE-300

Change-Id: I385db25ca389cdbbd31d917087bcbdcf7ea59b3c
Reviewed-on: https://gerrit.instructure.com/209732
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Ryan Shaw 2019-09-16 15:19:06 -06:00
parent d2f167b18a
commit 96981b5480
59 changed files with 71 additions and 65 deletions

View File

@ -100,7 +100,7 @@ export default class CalendarEvent extends Backbone.Model {
showSpinner() {
ReactDOM.render(
<div>
<Spinner title={I18n.t('Loading')} size="medium" />
<Spinner renderTitle={I18n.t('Loading')} size="medium" />
</div>
,
this.view.el

View File

@ -92,7 +92,7 @@ export default class SearchMessage extends Component {
aria-label={I18n.t('Page %{pageNum}', {pageNum: pageNumber})}
>
{isCurrent && this.state.pageBecomingCurrent ? (
<Spinner size="x-small" title={I18n.t('Loading...')} />
<Spinner size="x-small" renderTitle={I18n.t('Loading...')} />
) : (
I18n.n(pageNumber)
)}

View File

@ -115,7 +115,7 @@ export class SecurityPanel extends Component {
<Grid.Col>
{!this.props.whitelistsHaveLoaded ? (
<View as="div" margin="large" padding="large" textAlign="center">
<Spinner size="large" title={I18n.t('Loading')} />
<Spinner size="large" renderTitle={I18n.t('Loading')} />
</View>
) : (
<ConnectedWhitelist

View File

@ -170,7 +170,7 @@ export default class ActAsModal extends React.Component {
<Modal.Body>
{this.state.isLoading ?
<div className="ActAs__loading">
<Spinner title={I18n.t('Loading')} />
<Spinner renderTitle={I18n.t('Loading')} />
</div>
:
<div className="ActAs__body">

View File

@ -242,7 +242,7 @@ export default class AddPeople extends React.Component {
switch (currentPage) {
case RESULTPENDING:
currentPanel = <Spinner size="medium" title={I18n.t('Loading')} />
currentPanel = <Spinner size="medium" renderTitle={I18n.t('Loading')} />
panelLabel = I18n.t('loading')
break
case APIERROR:

View File

@ -104,7 +104,7 @@ export default class AnnouncementsIndex extends Component {
if (condition) {
return (
<div style={{textAlign: 'center'}}>
<Spinner size="small" title={title} />
<Spinner size="small" renderTitle={title} />
<Text size="small" as="p">
{title}
</Text>

View File

@ -126,7 +126,7 @@ export default class RSSFeedList extends React.Component {
if (!this.props.hasLoadedFeed) {
return (
<div style={{textAlign: 'center'}}>
<Spinner size="small" title={I18n.t('Adding RSS Feed')} />
<Spinner size="small" renderTitle={I18n.t('Adding RSS Feed')} />
</div>
)
} else {

View File

@ -47,7 +47,8 @@ function startedButton(props) {
return (
<Button {...buttonProps(props)} variant="light">
<Spinner size="x-small" title={title} /> <PresentationContent>{title}</PresentationContent>
<Spinner size="x-small" renderTitle={title} />{' '}
<PresentationContent>{title}</PresentationContent>
</Button>
)
}

View File

@ -89,7 +89,7 @@ class Layout extends Component {
students={this.props.students}
/>
) : (
<Spinner title={I18n.t('Students are loading')} />
<Spinner renderTitle={I18n.t('Students are loading')} />
)}
</View>
</div>

View File

@ -35,7 +35,8 @@ function startedButton(props) {
return (
<Button {...props} variant="light">
<Spinner size="x-small" title={title} /> <PresentationContent>{title}</PresentationContent>
<Spinner size="x-small" renderTitle={title} />{' '}
<PresentationContent>{title}</PresentationContent>
</Button>
)
}

View File

@ -45,7 +45,8 @@ function startedButton(props) {
return (
<Button {...props} variant="light">
<Spinner size="x-small" title={title} /> <PresentationContent>{title}</PresentationContent>
<Spinner size="x-small" renderTitle={title} />{' '}
<PresentationContent>{title}</PresentationContent>
</Button>
)
}

View File

@ -39,7 +39,7 @@ function LoggedOutTabs(props) {
<div>
<Tabs onRequestTabChange={handleTabChange} variant="default">
{/* Always attempt 1, cause there is no submission for logged out users */}
<Tabs.Panel title={I18n.t('Attempt 1')} selected={selectedTabIndex === 0}>
<Tabs.Panel renderTitle={I18n.t('Attempt 1')} selected={selectedTabIndex === 0}>
<Flex as="header" alignItems="center" justifyItems="center" direction="column">
<Flex.Item>
<LoginActionPrompt />
@ -47,7 +47,7 @@ function LoggedOutTabs(props) {
</Flex>
</Tabs.Panel>
<Tabs.Panel title={I18n.t('Rubric')} selected={selectedTabIndex === 1}>
<Tabs.Panel renderTitle={I18n.t('Rubric')} selected={selectedTabIndex === 1}>
<Flex as="header" alignItems="center" justifyItems="center" direction="column">
<Flex.Item>
<Text>{`TODO: Input Rubric Content Here... ${props.assignment.title}`}</Text>

View File

@ -89,7 +89,7 @@ export default class ConfirmDialog extends React.Component {
renderBusyMaskBody() {
if (this.props.busyMaskBody) return this.props.busyMaskBody()
return <Spinner size="small" title={this.props.spinnerLabel} />
return <Spinner size="small" renderTitle={this.props.spinnerLabel} />
}
renderButton = (buttonProps, index) => {

View File

@ -38,7 +38,7 @@ export default function StudentSearchQuery({variables, children}) {
if (loading) {
return (
<View as="div" textAlign="center" padding="large 0">
<Spinner size="large" title={I18n.t('Loading...')} />
<Spinner size="large" renderTitle={I18n.t('Loading...')} />
</View>
)
} else if (error) {

View File

@ -38,7 +38,7 @@ export default function TeacherQuery({assignmentLid}) {
if (loading) {
return (
<View as="div" textAlign="center" padding="large 0">
<Spinner size="large" title={I18n.t('Loading...')} />
<Spinner size="large" renderTitle={I18n.t('Loading...')} />
</View>
)
} else if (error) {

View File

@ -438,7 +438,7 @@ export default class TeacherView extends React.Component {
</Mutation>
<Portal open={this.state.isSaving}>
<Mask fullscreen>
<Spinner size="large" title={I18n.t('Saving assignment')} />
<Spinner size="large" renderTitle={I18n.t('Saving assignment')} />
</Mask>
</Portal>
</div>

View File

@ -176,7 +176,7 @@ const AuditLogResults = ({assetString, startDate, endDate, pageSize}) => {
return <p>{I18n.t('Something went wrong.')}</p>
}
if (loading || !data) {
return <Spinner title={I18n.t('Loading...')} />
return <Spinner renderTitle={I18n.t('Loading...')} />
}
const {nodes: logEntries, pageInfo} = data.auditLogs.mutationLogs

View File

@ -285,7 +285,7 @@ export default class AssociationsTable extends React.Component {
const title = I18n.t('Loading Associations')
return (
<div className="bca__overlay">
<Spinner title={title} />
<Spinner renderTitle={title} />
<Text as="p">{title}</Text>
</div>
)

View File

@ -114,7 +114,7 @@ export default class BlueprintAssociations extends React.Component {
return (
<div className="bca__overlay">
<div className="bca__overlay__save-wrapper">
<Spinner title={title} />
<Spinner renderTitle={title} />
<Text as="p">{title}</Text>
</div>
</div>

View File

@ -47,7 +47,7 @@ export default class ChildChangeLog extends Component {
const title = I18n.t('Loading Change Log')
return (
<div className="bcc__change-log__loading" style={{textAlign: 'center'}}>
<Spinner title={title} />
<Spinner renderTitle={title} />
<PresentationContent>
<Text as="p">{title}</Text>
</PresentationContent>

View File

@ -146,7 +146,7 @@ export default class CoursePicker extends React.Component {
onToggle={this.onToggleCoursePicker}
>
{this.props.isLoadingCourses && (<div className="bca-course-picker__loading">
<Spinner title={I18n.t('Loading Courses')} />
<Spinner renderTitle={I18n.t('Loading Courses')} />
</div>)}
<CoursePickerTable
courses={this.props.courses}

View File

@ -295,7 +295,7 @@ export default class CourseSidebar extends Component {
renderSpinner (title) {
return (
<div style={{textAlign: 'center'}}>
<Spinner size="small" title={title} />
<Spinner size="small" renderTitle={title} />
<Text size="small" as="p">{title}</Text>
</div>
)

View File

@ -80,7 +80,7 @@ export default class SyncHistory extends Component {
const title = I18n.t('Loading Sync History')
return (
<div style={{textAlign: 'center'}}>
<Spinner title={title} />
<Spinner renderTitle={title} />
<Text as="p">{title}</Text>
</div>
)

View File

@ -56,7 +56,7 @@ if (document.getElementById('tab-security')) {
padding="large"
textAlign="center"
>
<Spinner size="large" title={I18n.t('Loading')} />
<Spinner size="large" renderTitle={I18n.t('Loading')} />
</View>, document.getElementById('tab-security'))
}

View File

@ -26,7 +26,7 @@ import AnnouncementRow from '../shared/components/AnnouncementRow'
if (ENV.SHOW_ANNOUNCEMENTS) {
const container = document.querySelector('#announcements_on_home_page')
ReactDOM.render(<Spinner title={I18n.t('Loading Announcements')} size="small" />, container)
ReactDOM.render(<Spinner renderTitle={I18n.t('Loading Announcements')} size="small" />, container)
const url = '/api/v1/announcements'

View File

@ -40,7 +40,7 @@ import BarGraph from './breakdown-graph-bar'
if (this.props.isLoading) {
return (
<div className='crs-breakdown-graph__loading'>
<Spinner title={I18n.t('Loading')} size='small' />
<Spinner renderTitle={I18n.t('Loading')} size='small' />
<p>{I18n.t('Loading Data..')}</p>
</div>
)

View File

@ -157,7 +157,7 @@ export default class StudentDetailsView extends React.Component {
if (this.props.isLoading) {
return (
<div className="crs-student-details__loading">
<Spinner title={I18n.t('Loading')} size="small" />
<Spinner renderTitle={I18n.t('Loading')} size="small" />
<p>{I18n.t('Loading Data..')}</p>
</div>
)

View File

@ -209,7 +209,7 @@ export default class StudentContextTray extends React.Component {
>
{loading ? (
<div className='StudentContextTray__Spinner'>
<Spinner title={I18n.t('Loading')}
<Spinner renderTitle={I18n.t('Loading')}
size='large'
/>
</div>

View File

@ -106,7 +106,7 @@ export default class CSPSelectionBox extends Component {
return (
<div>
{this.state.loading ? (
<Spinner title={I18n.t('Loading')} size="x-small" />
<Spinner renderTitle={I18n.t('Loading')} size="x-small" />
) : this.props.canManage ? (
checkbox
) : (

View File

@ -44,7 +44,7 @@ export class RetrievingContent extends React.Component {
<div>
<Flex justifyItems="center" margin="x-large 0 large 0">
<Flex.Item>
<Spinner title={message} size="large" />
<Spinner renderTitle={message} size="large" />
</Flex.Item>
</Flex>
<Flex justifyItems="center" margin="0 0 large">

View File

@ -151,7 +151,7 @@ class DeveloperKeysApp extends React.Component {
padding="large"
textAlign="center"
>
{listDeveloperKeysPending ? <Spinner title={I18n.t('Loading')} /> : null}
{listDeveloperKeysPending ? <Spinner renderTitle={I18n.t('Loading')} /> : null}
{this.showMoreButton()}
</View>
</TabList.Panel>
@ -177,7 +177,7 @@ class DeveloperKeysApp extends React.Component {
padding="large"
textAlign="center"
>
{listInheritedDeveloperKeysPending ? <Spinner title={I18n.t('Loading')} /> : null}
{listInheritedDeveloperKeysPending ? <Spinner renderTitle={I18n.t('Loading')} /> : null}
{this.showMoreInheritedButton()}
</View>
</TabList.Panel>

View File

@ -267,7 +267,7 @@ export default class DeveloperKeyModal extends React.Component {
<Modal.Body>
{this.isSaving
? <View as="div" textAlign="center">
<Spinner title={I18n.t('Creating Key')} margin="0 0 0 medium" />
<Spinner renderTitle={I18n.t('Creating Key')} margin="0 0 0 medium" />
</View>
: <NewKeyForm
ref={this.setNewFormRef}

View File

@ -51,7 +51,7 @@ export default class Scopes extends React.Component {
<Grid.Row hAlign="space-around">
<Grid.Col width={2}>
<span id="scopes-loading-spinner">
<Spinner title={I18n.t('Loading Available Scopes')} />
<Spinner renderTitle={I18n.t('Loading Available Scopes')} />
</span>
</Grid.Col>
</Grid.Row>

View File

@ -143,7 +143,7 @@ export default class DiscussionSettings extends Component {
className="discussion-settings-v2-spinner-container"
tabIndex="-1"
>
<Spinner title={I18n.t('Saving')} size="small" />
<Spinner renderTitle={I18n.t('Saving')} size="small" />
</div>
)
}

View File

@ -105,7 +105,7 @@ export default class DiscussionsIndex extends Component {
renderSpinner(title) {
return (
<div className="discussions-v2__spinnerWrapper">
<Spinner size="large" title={title} />
<Spinner size="large" renderTitle={title} />
<Text size="small" as="p">
{title}
</Text>

View File

@ -102,7 +102,7 @@ export default class FeatureFlags extends React.Component {
</Button>
<View as="div" width="80%">
{this.state.isLoading ? <Spinner title={I18n.t("Loading features")} /> : (
{this.state.isLoading ? <Spinner renderTitle={I18n.t("Loading features")} /> : (
<Table caption={I18n.t('Feature Preview')} margin="medium 0 0">
<Head>
<Row>

View File

@ -146,7 +146,7 @@ class SearchResultsComponent extends Component {
if (this.props.requestingResults) {
$.screenReaderFlashMessage(I18n.t('Loading more gradebook history results.'))
return <Spinner size="small" title={I18n.t('Loading Results')} />
return <Spinner size="small" renderTitle={I18n.t('Loading Results')} />
}
if (this.noResultsFound()) {

View File

@ -217,7 +217,7 @@ class LatePoliciesTabPanel extends React.Component {
if (!this.props.latePolicy.data) {
return (
<div id="LatePoliciesTabPanel__Container-noContent">
<Spinner title={I18n.t('Loading')} size="large" margin="small" />
<Spinner renderTitle={I18n.t('Loading')} size="large" margin="small" />
</div>
)
}

View File

@ -198,7 +198,7 @@ export default class SubmissionTray extends React.Component {
return (
<div style={{textAlign: 'center'}}>
<Spinner title={I18n.t('Loading comments')} size="large" />
<Spinner renderTitle={I18n.t('Loading comments')} size="large" />
</div>
)
}

View File

@ -42,7 +42,7 @@ export default function FormContent({
if (hidingGrades) {
return (
<View as="div" textAlign="center" padding="large">
<Spinner title={I18n.t('Hiding grades')} size="large" />
<Spinner renderTitle={I18n.t('Hiding grades')} size="large" />
</View>
)
}

View File

@ -46,7 +46,7 @@ export default function FormContent({
if (postingGrades) {
return (
<View as="div" textAlign="center" padding="large">
<Spinner title={I18n.t('Posting grades')} size="large" />
<Spinner renderTitle={I18n.t('Posting grades')} size="large" />
</View>
)
}

View File

@ -73,7 +73,7 @@ export default function HelpLinks({links, hasLoaded, onClick}) {
.filter(Boolean)
) : (
<List.Item>
<Spinner size="small" title={I18n.t('Loading')} />
<Spinner size="small" renderTitle={I18n.t('Loading')} />
</List.Item>
)}
</List>

View File

@ -27,7 +27,7 @@ export default function ModuleDuplicationSpinner(_props) {
<Grid startAt="medium" vAlign="middle" rowSpacing="none" colSpacing="none">
<Grid.Row vAlign="middle" rowSpacing="none">
<Grid.Col hAlign='center' textAlign='center'>
<Spinner title={I18n.t('Duplicating Module')}/>
<Spinner renderTitle={I18n.t('Duplicating Module')}/>
</Grid.Col>
</Grid.Row>
<Grid.Row>

View File

@ -156,7 +156,7 @@ export default class MobileGlobalMenu extends React.Component {
))
) : (
<List.Item>
<Spinner margin="auto" size="small" title={I18n.t('Loading')} />
<Spinner margin="auto" size="small" renderTitle={I18n.t('Loading')} />
</List.Item>
)}
<List.Item>
@ -214,7 +214,7 @@ export default class MobileGlobalMenu extends React.Component {
])
) : (
<List.Item>
<Spinner size="small" title={I18n.t('Loading')} />
<Spinner size="small" renderTitle={I18n.t('Loading')} />
</List.Item>
)}
</List>
@ -263,7 +263,7 @@ export default class MobileGlobalMenu extends React.Component {
])
) : (
<List.Item>
<Spinner size="small" title={I18n.t('Loading')} />
<Spinner size="small" renderTitle={I18n.t('Loading')} />
</List.Item>
)}
</List>
@ -310,7 +310,7 @@ export default class MobileGlobalMenu extends React.Component {
])
) : (
<List.Item>
<Spinner size="small" title={I18n.t('Loading')} />
<Spinner size="small" renderTitle={I18n.t('Loading')} />
</List.Item>
)}
</List>

View File

@ -45,7 +45,7 @@ export default function CoursesTray({courses, hasLoaded}) {
])
) : (
<List.Item>
<Spinner size="small" title={I18n.t('Loading')} />
<Spinner size="small" renderTitle={I18n.t('Loading')} />
</List.Item>
)}
</List>

View File

@ -43,7 +43,7 @@ export default function GroupsTray({groups, hasLoaded}) {
])
) : (
<List.Item>
<Spinner size="small" title={I18n.t('Loading')} />
<Spinner size="small" renderTitle={I18n.t('Loading')} />
</List.Item>
)}
</List>

View File

@ -20,8 +20,8 @@ exports[`renders the component 1`] = `
>
<Spinner
as="div"
renderTitle="Loading outcome results"
size="large"
title="Loading outcome results"
variant="default"
/>
</FlexItem>

View File

@ -109,7 +109,7 @@ class IndividualStudentMastery extends React.Component {
renderLoading () {
return (
<Flex justifyItems="center" alignItems="center" padding="medium">
<Flex.Item><Spinner size="large" title={I18n.t('Loading outcome results')} /></Flex.Item>
<Flex.Item><Spinner size="large" renderTitle={I18n.t('Loading outcome results')} /></Flex.Item>
</Flex>
)
}

View File

@ -187,7 +187,7 @@ export default class AddTray extends Component {
renderLoadingIndicator() {
return (
<View display="block" margin="auto">
<Spinner size="large" title={I18n.t('Saving New Role')} />
<Spinner size="large" renderTitle={I18n.t('Saving New Role')} />
</View>
)
}

View File

@ -115,7 +115,7 @@ export default class GeneratePairingCode extends Component {
<div className='pairing-code'>
{this.state.gettingPairingCode
? <div>
<Spinner margin='0 small 0 0' size='x-small' title={I18n.t('Generating pairing code')} />
<Spinner margin='0 small 0 0' size='x-small' renderTitle={I18n.t('Generating pairing code')} />
<PresentationContent>
{I18n.t('Generating pairing code...')}
</PresentationContent>

View File

@ -264,7 +264,7 @@ export default class ProficiencyTable extends React.Component {
renderSpinner() {
return (
<div style={{textAlign: 'center'}}>
<Spinner title={I18n.t('Loading')} size="large" margin="0 0 0 medium" />
<Spinner renderTitle={I18n.t('Loading')} size="large" margin="0 0 0 medium" />
</div>
)
}

View File

@ -11,8 +11,8 @@ exports[`default proficiency renders the ProficiencyRating component 1`] = `
<Spinner
as="div"
margin="0 0 0 medium"
renderTitle="Loading"
size="large"
title="Loading"
variant="default"
/>
</div>

View File

@ -169,7 +169,7 @@ export default class FlashAlert extends React.Component {
<Transition transitionOnMount in={this.state.isOpen} type='fade'>
<Alert
variant={this.props.variant}
closeButtonLabel={I18n.t('Close')}
renderCloseButtonLabel={I18n.t('Close')}
onDismiss={this.closeAlert}
margin="small auto"
timeout={this.props.timeout}

View File

@ -132,7 +132,9 @@ class GenericErrorPage extends React.Component {
handleSubmitErrorReport={this.handleSubmitErrorReport}
/>
)}
{this.state.submitLoading && <Spinner title={I18n.t('Loading')} margin="0 0 0 medium" />}
{this.state.submitLoading && (
<Spinner renderTitle={I18n.t('Loading')} margin="0 0 0 medium" />
)}
{this.state.commentPosted && this.state.commentPostError && (
<View display="block" data-test-id="generic-error-comments-submitted">
<Text color="error" margin="x-small">

View File

@ -357,7 +357,7 @@ class FileBrowser extends React.Component {
renderMask () {
if (this.state.uploading) {
return <Mask><Spinner className="file-browser__uploading" title={I18n.t('File uploading')} /></Mask>
return <Mask><Spinner className="file-browser__uploading" renderTitle={I18n.t('File uploading')} /></Mask>
} else {
return null
}
@ -365,7 +365,7 @@ class FileBrowser extends React.Component {
renderLoading () {
if (this.state.loadingCount > 0) {
return <Spinner className="file-browser__loading" title={I18n.t('Loading folders')} size="small" />
return <Spinner className="file-browser__loading" renderTitle={I18n.t('Loading folders')} size="small" />
} else {
return null
}

View File

@ -41,8 +41,8 @@ exports[`FileBrowser renders 1`] = `
<Spinner
as="div"
className="file-browser__loading"
renderTitle="Loading folders"
size="small"
title="Loading folders"
variant="default"
/>
</div>

View File

@ -126,7 +126,7 @@ export default class AssessmentAuditTray extends Component {
</View>
</>
) : (
<Spinner title={I18n.t('Loading assessment audit trail')} />
<Spinner renderTitle={I18n.t('Loading assessment audit trail')} />
)}
</View>
</Tray>

View File

@ -106,7 +106,7 @@ import Errors from '../webzip_export/components/Errors'
const webzipInProgress = this.getExportsInProgress()
const finishedExports = this.getFinishedExports()
if (!this.state.loaded) {
app = <Spinner size="small" title={I18n.t('Loading')} />
app = <Spinner size="small" renderTitle={I18n.t('Loading')} />
} else if (this.state.errors.length > 0) {
app = <Errors errors={this.state.errors} />
} else if (finishedExports.length > 0 || !webzipInProgress) {

View File

@ -29,7 +29,8 @@ const consoleMessagesToIgnore = {
// /Please update the following components/, // Uncomment this if all the react 16.9 deprecations are cluttering up the console and you want to focus on something else
// '@instructure/ui-select' itself generates this warning, we assume they will figure it out themselves
/\[Options\] is experimental and its API could change significantly in a future release[\s\S]*\(created by Selectable\)/,
/is experimental and its API could change significantly in a future release/,
'Warning: [Focusable] Exactly one focusable child is required (0 found).',
// React 16.9+ generates these deprecation warnings but it doesn't do any good to hear about the ones for instUI. We can't do anything about them in this repo
// Put any others we can't control here.