Add visual indicator of LTI Key

closes PLAT-4255

Test Plan:
 n/a

Change-Id: I42cecd3bd0e7970ab63857064178e705fd81c45f
Reviewed-on: https://gerrit.instructure.com/185209
Tested-by: Jenkins
Reviewed-by: Weston Dransfield <wdransfield@instructure.com>
QA-Review: Weston Dransfield <wdransfield@instructure.com>
Product-Review: Jesse Poulos <jpoulos@instructure.com>

app/jsx/developer_keys/AdminTable.js

@@ -97,6 +97,7 @@ class DeveloperKeysTable extends React.Component {
             {!inherited && <th scope="col">{I18n.t('Owner Email')}</th> }
             <th scope="col">{I18n.t('Details')}</th>
             {!inherited && <th scope="col">{I18n.t('Stats')}</th>}
+            <th scope="col">{I18n.t('Type')}</th>
             <th scope="col">{I18n.t('State')}</th>
             {!inherited &&  <th scope="col">{I18n.t('Actions')}</th>}
           </tr>

app/jsx/developer_keys/DeveloperKey.js

@@ -26,11 +26,13 @@ import PropTypes from 'prop-types'
 import Button from '@instructure/ui-buttons/lib/components/Button'
 import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton'
 import Flex, { FlexItem } from '@instructure/ui-layout/lib/components/Flex'
+import IconLti from '@instructure/ui-icons/lib/Line/IconLti'
 import Popover, { PopoverTrigger, PopoverContent } from '@instructure/ui-overlays/lib/components/Popover'
 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 { Tooltip } from '@instructure/ui-overlays'
 
 import DeveloperKeyActionButtons from './ActionButtons'
 import DeveloperKeyStateControl from './InheritanceStateControl'
@@ -143,7 +145,7 @@ class DeveloperKey extends React.Component {
         <td>
           <Flex>
             {this.makeImage(developerKey)}
-            <FlexItem shrink="true">
+            <FlexItem shrink>
             {this.getToolName(developerKey)}
             </FlexItem>
           </Flex>
@@ -225,7 +227,18 @@ class DeveloperKey extends React.Component {
             </div>
           </td>
         }
-
+        <td>
+          {developerKey.is_lti_key
+            ?  <Tooltip
+                tip={I18n.t("Developer key is an external tool.")}
+                on={['click', 'hover', 'focus']}
+              >
+                <Button variant="icon" icon={IconLti}>
+                  <ScreenReaderContent>{I18n.t("Toggle ToolTip")}</ScreenReaderContent>
+                </Button>
+              </Tooltip>
+            : null}
+        </td>
         <td>
           <DeveloperKeyStateControl
             ref={this.refToggleGroup}

lib/api/v1/developer_key.rb

@@ -48,7 +48,6 @@ module Api::V1::DeveloperKey
         hash['access_token_count'] = key.access_token_count
         hash['last_used_at'] = key.last_used_at
         hash['vendor_code'] = key.vendor_code
-        hash['is_lti_key'] = key.public_jwk.present?
       end
 
       if account_binding.present?
@@ -59,6 +58,7 @@ module Api::V1::DeveloperKey
         hash['account_name'] = key.account_name
         hash['visible'] = key.visible
       end
+      hash['is_lti_key'] = key.public_jwk.present?
       hash['id'] = key.global_id
     end
   end

spec/apis/v1/developer_keys_spec.rb

@@ -74,7 +74,7 @@ describe DeveloperKeysController, type: :request do
       d.update! visible: true
       get "/api/v1/accounts/#{a.id}/developer_keys", params: { inherited: true }
       expect(json_parse.first.keys).to match_array(
-        %w[name created_at icon_url workflow_state id developer_key_account_binding]
+        %w[name created_at icon_url workflow_state id developer_key_account_binding is_lti_key]
       )
     end
 

spec/javascripts/jsx/developer_keys/AdminTableSpec.js

@@ -90,7 +90,7 @@ test('does render the "Owner Email" heading if not inherited', () => {
 
 test('does not render the "Stats" heading if inherited', () => {
   const node = componentNode(devKeyList(), true)
-  notOk(node.querySelectorAll('th')[3])
+  notOk(node.querySelectorAll('th')[4])
 })
 
 test('does render the "Stats" heading if not inherited', () => {