instUI5 upgrade: developer keys

refs: CORE-1437

This commit just upgrades these components to use instUI 5 instead of
getting them from ui-core in instUI 4.

It is mostly just path renaming.

Test plan:
* verify these components still work as they used to and tests pass

Change-Id: I115b77336bb70f2bebc8feb380d72530366c1ea7
Reviewed-on: https://gerrit.instructure.com/151776
Tested-by: Jenkins
Reviewed-by: Ryan Shaw <ryan@instructure.com>
QA-Review: August Thornton <august@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Reviewed-by: August Thornton <august@instructure.com>
This commit is contained in:
Ryan Shaw 2018-05-29 14:39:05 -06:00 committed by Weston Dransfield
parent cb503daf6c
commit 9e30db867c
16 changed files with 68 additions and 66 deletions

View File

@ -20,9 +20,9 @@ import I18n from 'i18n!react_developer_keys'
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Button from '@instructure/ui-core/lib/components/Button' import Button from '@instructure/ui-buttons/lib/components/Button'
import Tooltip from '@instructure/ui-core/lib/components/Tooltip' import Tooltip from '@instructure/ui-overlays/lib/components/Tooltip'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import IconEditLine from '@instructure/ui-icons/lib/Line/IconEdit' import IconEditLine from '@instructure/ui-icons/lib/Line/IconEdit'
import IconEyeLine from '@instructure/ui-icons/lib/Line/IconEye' import IconEyeLine from '@instructure/ui-icons/lib/Line/IconEye'
import IconOffLine from '@instructure/ui-icons/lib/Line/IconOff' import IconOffLine from '@instructure/ui-icons/lib/Line/IconOff'

View File

@ -16,8 +16,8 @@
* with this program. If not, see <http://www.gnu.org/licenses/>. * with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
import Table from '@instructure/ui-core/lib/components/Table' import Table from '@instructure/ui-elements/lib/components/Table'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import I18n from 'i18n!react_developer_keys' import I18n from 'i18n!react_developer_keys'

View File

@ -16,11 +16,11 @@
* with this program. If not, see <http://www.gnu.org/licenses/>. * with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
import Button from '@instructure/ui-core/lib/components/Button' import Button from '@instructure/ui-buttons/lib/components/Button'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import Heading from '@instructure/ui-core/lib/components/Heading' import Heading from '@instructure/ui-elements/lib/components/Heading'
import Spinner from '@instructure/ui-core/lib/components/Spinner' import Spinner from '@instructure/ui-elements/lib/components/Spinner'
import TabList, {TabPanel} from '@instructure/ui-core/lib/components/TabList' import TabList, {TabPanel} from '@instructure/ui-tabs/lib/components/TabList'
import IconPlusLine from '@instructure/ui-icons/lib/Line/IconPlus' import IconPlusLine from '@instructure/ui-icons/lib/Line/IconPlus'

View File

@ -24,12 +24,12 @@ import I18n from 'i18n!react_developer_keys'
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Button from '@instructure/ui-core/lib/components/Button' import Button from '@instructure/ui-buttons/lib/components/Button'
import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton' import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton'
import Popover, { PopoverTrigger, PopoverContent } from '@instructure/ui-overlays/lib/components/Popover' import Popover, { PopoverTrigger, PopoverContent } from '@instructure/ui-overlays/lib/components/Popover'
import Image from '@instructure/ui-core/lib/components/Image' import Image from '@instructure/ui-elements/lib/components/Img'
import Link from '@instructure/ui-core/lib/components/Link' import Link from '@instructure/ui-elements/lib/components/Link'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import View from '@instructure/ui-layout/lib/components/View' import View from '@instructure/ui-layout/lib/components/View'
import DeveloperKeyActionButtons from './ActionButtons' import DeveloperKeyActionButtons from './ActionButtons'

View File

@ -19,9 +19,9 @@
import I18n from 'i18n!react_developer_keys' import I18n from 'i18n!react_developer_keys'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import RadioInputGroup from '@instructure/ui-core/lib/components/RadioInputGroup' import RadioInputGroup from '@instructure/ui-forms/lib/components/RadioInputGroup'
import RadioInput from '@instructure/ui-core/lib/components/RadioInput' import RadioInput from '@instructure/ui-forms/lib/components/RadioInput'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
export default class DeveloperKeyStateControl extends React.Component { export default class DeveloperKeyStateControl extends React.Component {
setBindingState = newValue => { setBindingState = newValue => {
@ -79,7 +79,7 @@ export default class DeveloperKeyStateControl extends React.Component {
description={ description={
<ScreenReaderContent>{I18n.t('Key state for the current account')}</ScreenReaderContent> <ScreenReaderContent>{I18n.t('Key state for the current account')}</ScreenReaderContent>
} }
onChange={this.setBindingState} onChange={(e, val) => this.setBindingState(val)}
disabled={this.disabled()} disabled={this.disabled()}
name={this.props.developerKey.id} name={this.props.developerKey.id}
> >

View File

@ -16,13 +16,12 @@
* with this program. If not, see <http://www.gnu.org/licenses/>. * with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
import FormFieldGroup from '@instructure/ui-core/lib/components/FormFieldGroup' import FormFieldGroup from '@instructure/ui-forms/lib/components/FormFieldGroup'
import Grid, {GridCol, GridRow} from '@instructure/ui-core/lib/components/Grid' import Grid, {GridCol, GridRow} from '@instructure/ui-layout/lib/components/Grid'
import I18n from 'i18n!react_developer_keys' import I18n from 'i18n!react_developer_keys'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import TextArea from '@instructure/ui-core/lib/components/TextArea' import TextArea from '@instructure/ui-forms/lib/components/TextArea'
import TextInput from '@instructure/ui-core/lib/components/TextInput' import TextInput from '@instructure/ui-forms/lib/components/TextInput'
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'

View File

@ -18,10 +18,11 @@
import I18n from 'i18n!react_developer_keys' import I18n from 'i18n!react_developer_keys'
import $ from 'jquery' import $ from 'jquery'
import Button from '@instructure/ui-core/lib/components/Button' import Button from '@instructure/ui-buttons/lib/components/Button'
import Heading from '@instructure/ui-core/lib/components/Heading' import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton'
import Modal, {ModalHeader, ModalBody, ModalFooter} from '@instructure/ui-core/lib/components/Modal' import Heading from '@instructure/ui-elements/lib/components/Heading'
import Spinner from '@instructure/ui-core/lib/components/Spinner' import Modal, {ModalHeader, ModalBody, ModalFooter} from '@instructure/ui-overlays/lib/components/Modal'
import Spinner from '@instructure/ui-elements/lib/components/Spinner'
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import DeveloperKeyFormFields from './NewKeyForm' import DeveloperKeyFormFields from './NewKeyForm'
@ -127,12 +128,11 @@ export default class DeveloperKeyModal extends React.Component {
onDismiss={this.closeModal} onDismiss={this.closeModal}
size="fullscreen" size="fullscreen"
label={this.modalTitle()} label={this.modalTitle()}
shouldCloseOnOverlayClick
closeButtonLabel={I18n.t('Cancel')}
applicationElement={() => [this.modalContainer]}
mountNode={this.props.mountNode}
> >
<ModalHeader> <ModalHeader>
<CloseButton placement="end" onClick={this.closeModal}>
{I18n.t('Cancel')}
</CloseButton>
<Heading>{I18n.t('Key Settings')}</Heading> <Heading>{I18n.t('Key Settings')}</Heading>
</ModalHeader> </ModalHeader>
<ModalBody>{this.modalBody()}</ModalBody> <ModalBody>{this.modalBody()}</ModalBody>
@ -177,11 +177,6 @@ DeveloperKeyModal.propTypes = {
contextId: PropTypes.string.isRequired contextId: PropTypes.string.isRequired
}) })
}).isRequired, }).isRequired,
mountNode: PropTypes.func,
selectedScopes: PropTypes.arrayOf(PropTypes.string).isRequired selectedScopes: PropTypes.arrayOf(PropTypes.string).isRequired
} }
DeveloperKeyModal.defaultProps = {
mountNode: () => document.body
}

View File

@ -17,9 +17,9 @@
*/ */
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import Checkbox from '@instructure/ui-core/lib/components/Checkbox' import Checkbox from '@instructure/ui-forms/lib/components/Checkbox'
import Flex, {FlexItem} from '@instructure/ui-layout/lib/components/Flex' import Flex, {FlexItem} from '@instructure/ui-layout/lib/components/Flex'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import DeveloperKeyScopesMethod from './ScopesMethod' import DeveloperKeyScopesMethod from './ScopesMethod'
const DeveloperKeyScope = props => { const DeveloperKeyScope = props => {

View File

@ -20,16 +20,16 @@ import I18n from 'i18n!react_developer_keys'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import Billboard from '@instructure/ui-core/lib/components/Billboard' import Billboard from '@instructure/ui-billboard/lib/components/Billboard'
import Checkbox from '@instructure/ui-core/lib/components/Checkbox' import Checkbox from '@instructure/ui-forms/lib/components/Checkbox'
import Flex, { FlexItem } from '@instructure/ui-layout/lib/components/Flex' import Flex, { FlexItem } from '@instructure/ui-layout/lib/components/Flex'
import Grid, {GridCol, GridRow} from '@instructure/ui-core/lib/components/Grid' import Grid, {GridCol, GridRow} from '@instructure/ui-layout/lib/components/Grid'
import IconWarning from 'instructure-icons/lib/Line/IconWarningLine' import IconWarning from 'instructure-icons/lib/Line/IconWarningLine'
import IconSearchLine from 'instructure-icons/lib/Line/IconSearchLine' import IconSearchLine from 'instructure-icons/lib/Line/IconSearchLine'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import Spinner from '@instructure/ui-core/lib/components/Spinner' import Spinner from '@instructure/ui-elements/lib/components/Spinner'
import Text from '@instructure/ui-core/lib/components/Text' import Text from '@instructure/ui-elements/lib/components/Text'
import TextInput from '@instructure/ui-core/lib/components/TextInput' import TextInput from '@instructure/ui-forms/lib/components/TextInput'
import View from '@instructure/ui-layout/lib/components/View' import View from '@instructure/ui-layout/lib/components/View'
import DeveloperKeyScopesList from './ScopesList' import DeveloperKeyScopesList from './ScopesList'

View File

@ -18,10 +18,10 @@
import I18n from 'i18n!react_developer_keys' import I18n from 'i18n!react_developer_keys'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import Checkbox from '@instructure/ui-core/lib/components/Checkbox' import Checkbox from '@instructure/ui-forms/lib/components/Checkbox'
import Flex, {FlexItem} from '@instructure/ui-layout/lib/components/Flex' import Flex, {FlexItem} from '@instructure/ui-layout/lib/components/Flex'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import Text from '@instructure/ui-core/lib/components/Text' import Text from '@instructure/ui-elements/lib/components/Text'
import ToggleDetails from '@instructure/ui-toggle-details/lib/components/ToggleDetails' import ToggleDetails from '@instructure/ui-toggle-details/lib/components/ToggleDetails'
import DeveloperKeyScopesMethod from './ScopesMethod' import DeveloperKeyScopesMethod from './ScopesMethod'
import DeveloperKeyScope from './Scope' import DeveloperKeyScope from './Scope'

View File

@ -20,9 +20,9 @@ import LazyLoad from 'react-lazy-load'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import Flex, {FlexItem} from '@instructure/ui-layout/lib/components/Flex' import Flex, {FlexItem} from '@instructure/ui-layout/lib/components/Flex'
import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent' import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
import Text from '@instructure/ui-core/lib/components/Text' import Text from '@instructure/ui-elements/lib/components/Text'
import Checkbox from '@instructure/ui-core/lib/components/Checkbox' import Checkbox from '@instructure/ui-forms/lib/components/Checkbox'
import View from '@instructure/ui-layout/lib/components/View' import View from '@instructure/ui-layout/lib/components/View'
import DeveloperKeyScopesGroup from './ScopesGroup' import DeveloperKeyScopesGroup from './ScopesGroup'
import DeveloperKeyScopesMethod from './ScopesMethod' import DeveloperKeyScopesMethod from './ScopesMethod'

View File

@ -17,7 +17,7 @@
*/ */
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import Pill from '@instructure/ui-core/lib/components/Pill' import Pill from '@instructure/ui-elements/lib/components/Pill'
export default class ScopesMethod extends React.Component { export default class ScopesMethod extends React.Component {
methodColorMap() { methodColorMap() {

View File

@ -19,7 +19,7 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils' import TestUtils from 'react-addons-test-utils'
import Spinner from '@instructure/ui-core/lib/components/Spinner' import Spinner from '@instructure/ui-elements/lib/components/Spinner'
import {mount} from 'enzyme' import {mount} from 'enzyme'
import DeveloperKeysApp from 'jsx/developer_keys/App'; import DeveloperKeysApp from 'jsx/developer_keys/App';

View File

@ -19,8 +19,8 @@
import React from 'react' import React from 'react'
import TestUtils from 'react-addons-test-utils' import TestUtils from 'react-addons-test-utils'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import Image from '@instructure/ui-core/lib/components/Image' import Image from '@instructure/ui-elements/lib/components/Img'
import Link from '@instructure/ui-core/lib/components/Link' import Link from '@instructure/ui-elements/lib/components/Link'
import DeveloperKey from 'jsx/developer_keys/DeveloperKey'; import DeveloperKey from 'jsx/developer_keys/DeveloperKey';

View File

@ -21,11 +21,7 @@ import {mount, shallow} from 'enzyme'
import DeveloperKeyModal from 'jsx/developer_keys/NewKeyModal' import DeveloperKeyModal from 'jsx/developer_keys/NewKeyModal'
import $ from '../../../../app/coffeescripts/jquery.rails_flash_notifications' import $ from '../../../../app/coffeescripts/jquery.rails_flash_notifications'
QUnit.module('NewKeyModal', { QUnit.module('NewKeyModal')
teardown() {
$('#fixtures').empty()
}
})
const selectedScopes = [ const selectedScopes = [
"url:POST|/api/v1/accounts/:account_id/account_notifications", "url:POST|/api/v1/accounts/:account_id/account_notifications",
@ -351,6 +347,8 @@ test('it sends the contents of the form saving', () => {
equal(sentFormData.get('developer_key[icon_url]'), developerKey.icon_url) equal(sentFormData.get('developer_key[icon_url]'), developerKey.icon_url)
equal(sentFormData.get('developer_key[notes]'), developerKey.notes) equal(sentFormData.get('developer_key[notes]'), developerKey.notes)
equal(sentFormData.get('developer_key[require_scopes]'), 'true') equal(sentFormData.get('developer_key[require_scopes]'), 'true')
wrapper.unmount()
}) })
test('sends form content without scopes and require_scopes set to false when not require_scopes', () => { test('sends form content without scopes and require_scopes set to false when not require_scopes', () => {
@ -390,6 +388,8 @@ test('sends form content without scopes and require_scopes set to false when not
equal(sentFormData.get('developer_key[icon_url]'), developerKey.icon_url) equal(sentFormData.get('developer_key[icon_url]'), developerKey.icon_url)
equal(sentFormData.get('developer_key[notes]'), developerKey.notes) equal(sentFormData.get('developer_key[notes]'), developerKey.notes)
equal(sentFormData.get('developer_key[require_scopes]'), 'false') equal(sentFormData.get('developer_key[require_scopes]'), 'false')
wrapper.unmount()
}) })
test('it adds each selected scope to the form data', () => { test('it adds each selected scope to the form data', () => {
@ -415,6 +415,8 @@ test('it adds each selected scope to the form data', () => {
wrapper.node.submitForm() wrapper.node.submitForm()
const [[sentFormData]] = createOrEditSpy.args const [[sentFormData]] = createOrEditSpy.args
deepEqual(sentFormData.getAll('developer_key[scopes][]'), selectedScopes) deepEqual(sentFormData.getAll('developer_key[scopes][]'), selectedScopes)
wrapper.unmount()
}) })
test('flashes an error if no scopes are selected', () => { test('flashes an error if no scopes are selected', () => {
@ -441,4 +443,6 @@ test('flashes an error if no scopes are selected', () => {
wrapper.node.submitForm() wrapper.node.submitForm()
ok(flashStub.calledWith('At least one scope must be selected.')) ok(flashStub.calledWith('At least one scope must be selected.'))
flashStub.restore() flashStub.restore()
wrapper.unmount()
}) })

View File

@ -116,7 +116,7 @@ describe 'Developer Keys' do
expect(key.icon_url).to eq "/images/add.png" expect(key.icon_url).to eq "/images/add.png"
end end
it "allows deletion through 'delete this key button'", test_id: 344079 do it "allows editing a developer key", test_id: 3469349 do
skip_if_safari(:alert) skip_if_safari(:alert)
root_developer_key root_developer_key
get "/accounts/#{Account.default.id}/developer_keys" get "/accounts/#{Account.default.id}/developer_keys"
@ -130,10 +130,14 @@ describe 'Developer Keys' do
expect(Account.default.developer_keys.count).to eq 1 expect(Account.default.developer_keys.count).to eq 1
key = Account.default.developer_keys.last key = Account.default.developer_keys.last
expect(key.icon_url).to eq nil expect(key.icon_url).to eq nil
end
it "allows deletion through 'delete this key button'", test_id: 344079 do
skip_if_safari(:alert)
root_developer_key
get "/accounts/#{Account.default.id}/developer_keys"
fj("table[data-automation='devKeyAdminTable'] tbody tr.key button:has(svg[name='IconTrash'])").click fj("table[data-automation='devKeyAdminTable'] tbody tr.key button:has(svg[name='IconTrash'])").click
driver.switch_to.alert.accept accept_alert
driver.switch_to.default_content
expect(f("table[data-automation='devKeyAdminTable']")).not_to contain_css("tbody tr") expect(f("table[data-automation='devKeyAdminTable']")).not_to contain_css("tbody tr")
expect(Account.default.developer_keys.nondeleted.count).to eq 0 expect(Account.default.developer_keys.nondeleted.count).to eq 0
end end
@ -290,14 +294,14 @@ describe 'Developer Keys' do
it "does not have enforce scopes toggle activated on initial dev key creation" do it "does not have enforce scopes toggle activated on initial dev key creation" do
get "/accounts/#{Account.default.id}/developer_keys" get "/accounts/#{Account.default.id}/developer_keys"
find_button("Developer Key").click find_button("Developer Key").click
expect(f("span[data-automation='enforce_scopes']")).to contain_css("svg[name='IconXSolid']") expect(f("span[data-automation='enforce_scopes']")).to contain_css("svg[name='IconX']")
expect(f("form")).to contain_jqcss("h2:contains('When scope enforcement is disabled, tokens have access to all endpoints available to the authorizing user.')") expect(f("form")).to contain_jqcss("h2:contains('When scope enforcement is disabled, tokens have access to all endpoints available to the authorizing user.')")
end end
it "enforce scopes toggle allows scope creation" do it "enforce scopes toggle allows scope creation" do
expand_scope_group_by_filter('assignment_groups_api', Account.default.id) expand_scope_group_by_filter('assignment_groups_api', Account.default.id)
click_scope_group_checkbox click_scope_group_checkbox
expect(f("span[data-automation='enforce_scopes']")).to contain_css("svg[name='IconCheckSolid']") expect(f("span[data-automation='enforce_scopes']")).to contain_css("svg[name='IconCheck']")
find_button("Save Key").click find_button("Save Key").click
wait_for_ajaximations wait_for_ajaximations
expect(DeveloperKey.last.require_scopes).to eq true expect(DeveloperKey.last.require_scopes).to eq true