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>

app/jsx/developer_keys/ActionButtons.js

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

app/jsx/developer_keys/AdminTable.js

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

app/jsx/developer_keys/App.js

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

app/jsx/developer_keys/DeveloperKey.js

@@ -24,12 +24,12 @@ import I18n from 'i18n!react_developer_keys'
 import React from 'react'
 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 Popover, { PopoverTrigger, PopoverContent } from '@instructure/ui-overlays/lib/components/Popover'
-import Image from '@instructure/ui-core/lib/components/Image'
-import Link from '@instructure/ui-core/lib/components/Link'
-import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent'
+import Image from '@instructure/ui-elements/lib/components/Img'
+import Link from '@instructure/ui-elements/lib/components/Link'
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
 import View from '@instructure/ui-layout/lib/components/View'
 
 import DeveloperKeyActionButtons from './ActionButtons'

app/jsx/developer_keys/InheritanceStateControl.js

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

app/jsx/developer_keys/NewKeyForm.js

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

app/jsx/developer_keys/NewKeyModal.js

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

app/jsx/developer_keys/Scope.js

@@ -17,9 +17,9 @@
  */
 import PropTypes from 'prop-types'
 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 ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent'
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
 import DeveloperKeyScopesMethod from './ScopesMethod'
 
 const DeveloperKeyScope = props => {

app/jsx/developer_keys/Scopes.js

@@ -20,16 +20,16 @@ import I18n from 'i18n!react_developer_keys'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Billboard from '@instructure/ui-core/lib/components/Billboard'
-import Checkbox from '@instructure/ui-core/lib/components/Checkbox'
+import Billboard from '@instructure/ui-billboard/lib/components/Billboard'
+import Checkbox from '@instructure/ui-forms/lib/components/Checkbox'
 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 IconSearchLine from 'instructure-icons/lib/Line/IconSearchLine'
-import ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent'
-import Spinner from '@instructure/ui-core/lib/components/Spinner'
-import Text from '@instructure/ui-core/lib/components/Text'
-import TextInput from '@instructure/ui-core/lib/components/TextInput'
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
+import Spinner from '@instructure/ui-elements/lib/components/Spinner'
+import Text from '@instructure/ui-elements/lib/components/Text'
+import TextInput from '@instructure/ui-forms/lib/components/TextInput'
 import View from '@instructure/ui-layout/lib/components/View'
 
 import DeveloperKeyScopesList from './ScopesList'

app/jsx/developer_keys/ScopesGroup.js

@@ -18,10 +18,10 @@
 import I18n from 'i18n!react_developer_keys'
 import PropTypes from 'prop-types'
 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 ScreenReaderContent from '@instructure/ui-core/lib/components/ScreenReaderContent'
-import Text from '@instructure/ui-core/lib/components/Text'
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
+import Text from '@instructure/ui-elements/lib/components/Text'
 import ToggleDetails from '@instructure/ui-toggle-details/lib/components/ToggleDetails'
 import DeveloperKeyScopesMethod from './ScopesMethod'
 import DeveloperKeyScope from './Scope'

app/jsx/developer_keys/ScopesList.js

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

app/jsx/developer_keys/ScopesMethod.js

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types'
 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 {
   methodColorMap() {

spec/javascripts/jsx/developer_keys/AppSpec.js

@@ -19,7 +19,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 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 DeveloperKeysApp from 'jsx/developer_keys/App';

spec/javascripts/jsx/developer_keys/DeveloperKeySpec.js

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

spec/javascripts/jsx/developer_keys/NewKeyModalSpec.js

@@ -21,11 +21,7 @@ import {mount, shallow} from 'enzyme'
 import DeveloperKeyModal from 'jsx/developer_keys/NewKeyModal'
 import $ from '../../../../app/coffeescripts/jquery.rails_flash_notifications'
 
-QUnit.module('NewKeyModal', {
-  teardown() {
-    $('#fixtures').empty()
-  }
-})
+QUnit.module('NewKeyModal')
 
 const selectedScopes = [
   "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[notes]'), developerKey.notes)
   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', () => {
@@ -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[notes]'), developerKey.notes)
   equal(sentFormData.get('developer_key[require_scopes]'), 'false')
+
+  wrapper.unmount()
 })
 
 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()
   const [[sentFormData]] = createOrEditSpy.args
   deepEqual(sentFormData.getAll('developer_key[scopes][]'), selectedScopes)
+
+  wrapper.unmount()
 })
 
 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()
   ok(flashStub.calledWith('At least one scope must be selected.'))
   flashStub.restore()
+
+  wrapper.unmount()
 })

spec/selenium/admin/account_admin_developer_keys_rewrite_spec.rb

@@ -116,7 +116,7 @@ describe 'Developer Keys' do
       expect(key.icon_url).to eq "/images/add.png"
     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)
       root_developer_key
       get "/accounts/#{Account.default.id}/developer_keys"
@@ -130,10 +130,14 @@ describe 'Developer Keys' do
       expect(Account.default.developer_keys.count).to eq 1
       key = Account.default.developer_keys.last
       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
-      driver.switch_to.alert.accept
-      driver.switch_to.default_content
+      accept_alert
       expect(f("table[data-automation='devKeyAdminTable']")).not_to contain_css("tbody tr")
       expect(Account.default.developer_keys.nondeleted.count).to eq 0
     end
@@ -290,14 +294,14 @@ describe 'Developer Keys' do
       it "does not have enforce scopes toggle activated on initial dev key creation" do
         get "/accounts/#{Account.default.id}/developer_keys"
         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.')")
       end
 
       it "enforce scopes toggle allows scope creation" do
         expand_scope_group_by_filter('assignment_groups_api', Account.default.id)
         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
         wait_for_ajaximations
         expect(DeveloperKey.last.require_scopes).to eq true