From 1879ab240e30edca98f18b1d29fb910fb78e07db Mon Sep 17 00:00:00 2001
From: Charley Kline <ckline@instructure.com>
Date: Sun, 18 Sep 2022 16:57:45 -0500
Subject: [PATCH] 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 <svc.cloudjenkins@instructure.com>
Reviewed-by: August Thornton <august@instructure.com>
QA-Review: August Thornton <august@instructure.com>
Product-Review: August Thornton <august@instructure.com>
---
 .../developer_keys_v2/react/ActionButtons.js  | 58 +++++++++++--------
 .../react/__tests__/ActionButtons.test.js     |  2 +-
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/ui/features/developer_keys_v2/react/ActionButtons.js b/ui/features/developer_keys_v2/react/ActionButtons.js
index f8433e258e323..a0eae1362ea4c 100644
--- 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
index 3fcef4b22090b..b0d810d82cc9e 100644
--- 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.'
   )