Fix InstUI 8 prop deprecations in features/developer_keys_v2

Closes FOO-3084 flag=none Following the InstUI 8 upgrade guide, this should clean up all the deprecated props and usages of InstUI components in the ui/features/developer_keys_v2 bundle. Test plan: * The developer keys edit page looks like it always did * Pay special attention to the action icons in each row Change-Id: I6a81c051d4765ea84508744488e8702bd9802f2e Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/301265 Tested-by: Service Cloud Jenkins <[email protected]> Reviewed-by: August Thornton <[email protected]> QA-Review: August Thornton <[email protected]> Product-Review: August Thornton <[email protected]>
CkReal · Sep 20, 2022 · 1879ab2 · 1879ab2
1 parent dcec20c
commit 1879ab2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 25 deletions.
diff --git a/ui/features/developer_keys_v2/react/ActionButtons.js b/ui/features/developer_keys_v2/react/ActionButtons.js
@@ -20,9 +20,8 @@ import {useScope as useI18nScope} from '@canvas/i18n'
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {Button} from '@instructure/ui-buttons'
+import {IconButton} from '@instructure/ui-buttons'
 import {Tooltip} from '@instructure/ui-tooltip'
-import {ScreenReaderContent} from '@instructure/ui-a11y-content'
 import {IconEditLine, IconEyeLine, IconOffLine, IconTrashLine} from '@instructure/ui-icons'
 
 const I18n = useI18nScope('react_developer_keys')
@@ -43,7 +42,7 @@ class DeveloperKeyActionButtons extends React.Component {
   deleteLinkHandler = event => {
     const {dispatch, deleteDeveloperKey, developerKey, onDelete} = this.props
     event.preventDefault()
-    const confirmResult = confirm(this.confirmationMessage(developerKey))
+    const confirmResult = window.confirm(this.confirmationMessage(developerKey))
     if (confirmResult) {
       onDelete(developerKey.id)
       dispatch(deleteDeveloperKey(developerKey))
@@ -93,24 +92,32 @@ class DeveloperKeyActionButtons extends React.Component {
     if (visible) {
       return (
         <Tooltip renderTip={I18n.t('Make key invisible')}>
-          <Button variant="icon" margin="0" size="small" onClick={this.makeInvisibleLinkHandler}>
-            <ScreenReaderContent>
-              {I18n.t('Make key %{developerName} invisible', {developerName})}
-            </ScreenReaderContent>
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            margin="0"
+            size="small"
+            onClick={this.makeInvisibleLinkHandler}
+            screenReaderLabel={I18n.t('Make key %{developerName} invisible', {developerName})}
+          >
             <IconEyeLine />
-          </Button>
+          </IconButton>
         </Tooltip>
       )
     }
 
     return (
       <Tooltip renderTip={I18n.t('Make key visible')}>
-        <Button variant="icon" margin="0" size="small" onClick={this.makeVisibleLinkHandler}>
-          <ScreenReaderContent>
-            {I18n.t('Make key %{developerName} visible', {developerName})}
-          </ScreenReaderContent>
+        <IconButton
+          withBackground={false}
+          withBorder={false}
+          screenReaderLabel={I18n.t('Make key %{developerName} visible', {developerName})}
+          margin="0"
+          size="small"
+          onClick={this.makeVisibleLinkHandler}
+        >
           <IconOffLine />
-        </Button>
+        </IconButton>
       </Tooltip>
     )
   }
@@ -120,12 +127,16 @@ class DeveloperKeyActionButtons extends React.Component {
 
     return (
       <Tooltip renderTip={I18n.t('Edit this key')}>
-        <Button variant="icon" margin="0" size="small" onClick={this.editLinkHandler}>
-          <ScreenReaderContent>
-            {I18n.t('Edit key %{developerName}', {developerName})}
-          </ScreenReaderContent>
+        <IconButton
+          withBackground={false}
+          withBorder={false}
+          screenReaderLabel={I18n.t('Edit key %{developerName}', {developerName})}
+          margin="0"
+          size="small"
+          onClick={this.editLinkHandler}
+        >
           <IconEditLine />
-        </Button>
+        </IconButton>
       </Tooltip>
     )
   }
@@ -138,18 +149,17 @@ class DeveloperKeyActionButtons extends React.Component {
         {this.renderEditButton()}
         {this.renderVisibilityIcon()}
         <Tooltip renderTip={I18n.t('Delete this key')}>
-          <Button
-            variant="icon"
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel={I18n.t('Delete key %{developerName}', {developerName})}
             margin="0"
             size="small"
             onClick={this.deleteLinkHandler}
             elementRef={this.refDeleteLink}
           >
-            <ScreenReaderContent>
-              {I18n.t('Delete key %{developerName}', {developerName})}
-            </ScreenReaderContent>
             <IconTrashLine />
-          </Button>
+          </IconButton>
         </Tooltip>
       </div>
     )

diff --git a/ui/features/developer_keys_v2/react/__tests__/ActionButtons.test.js b/ui/features/developer_keys_v2/react/__tests__/ActionButtons.test.js
@@ -94,7 +94,7 @@ it('warns the user when deleting a LTI key', () => {
   )
 
   window.confirm = jest.fn()
-  wrapper.find('Button').at(2).simulate('click')
+  wrapper.find('IconButton').at(2).simulate('click')
   expect(window.confirm).toHaveBeenCalledWith(
     'Are you sure you want to delete this developer key? This action will also delete all tools associated with the developer key in this context.'
   )