Use id instead of itemKey and selectedID instead of selectedKey

ui/src/reusable_ui/components/dropdowns/Dropdown.tsx

@@ -25,7 +25,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   children: JSX.Element[]
   onChange: (value: any) => void
-  selectedKey: string
+  selectedID: string
   buttonColor?: ComponentColor
   buttonSize?: ComponentSize
   menuColor?: DropdownMenuColors
@@ -109,7 +109,7 @@ class Dropdown extends Component<Props, State> {
 
   private get button(): JSX.Element {
     const {
-      selectedKey,
+      selectedID,
       disabled,
       buttonColor,
       buttonSize,
@@ -118,9 +118,7 @@ class Dropdown extends Component<Props, State> {
     } = this.props
     const {expanded} = this.state
 
-    const selectedChild = children.find(
-      child => child.props.itemKey === selectedKey
-    )
+    const selectedChild = children.find(child => child.props.id === selectedID)
 
     return (
       <DropdownButton
@@ -137,7 +135,7 @@ class Dropdown extends Component<Props, State> {
   }
 
   private get menuItems(): JSX.Element {
-    const {selectedKey, maxMenuHeight, menuColor, children} = this.props
+    const {selectedID, maxMenuHeight, menuColor, children} = this.props
     const {expanded} = this.state
 
     if (expanded) {
@@ -158,8 +156,8 @@ class Dropdown extends Component<Props, State> {
                     return (
                       <DropdownItem
                         {...child.props}
-                        key={child.props.itemKey}
-                        selected={child.props.itemKey === selectedKey}
+                        key={child.props.id}
+                        selected={child.props.id === selectedID}
                         onClick={this.handleItemClick}
                       >
                         {child.props.children}
@@ -168,10 +166,7 @@ class Dropdown extends Component<Props, State> {
                   }
 
                   return (
-                    <DropdownDivider
-                      {...child.props}
-                      key={child.props.itemKey}
-                    />
+                    <DropdownDivider {...child.props} key={child.props.id} />
                   )
                 } else {
                   throw new Error(

ui/src/reusable_ui/components/dropdowns/DropdownDivider.tsx

@@ -9,7 +9,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
   children?: DropdownChild
-  itemKey: string
+  id: string
   text?: string
 }
 

ui/src/reusable_ui/components/dropdowns/DropdownItem.tsx

@@ -8,7 +8,7 @@ import {DropdownChild} from 'src/reusable_ui/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  itemKey: string
+  id: string
   children: DropdownChild
   value: any
   selected?: boolean

ui/src/reusable_ui/components/dropdowns/test/Dropdown.test.tsx

@@ -8,7 +8,7 @@ describe('Dropdown', () => {
 
   const wrapperSetup = (override = {}) => {
     const props = {
-      selectedKey: 'jimmy',
+      selectedID: 'jimmy',
       onChange: () => {},
       children: null,
       ...override,
@@ -19,7 +19,7 @@ describe('Dropdown', () => {
 
   const childSetup = (override = {}) => {
     const props = {
-      itemKey: 'jimmy',
+      id: 'jimmy',
       value: 'jimmy',
       children: 'jimmy',
       ...override,
@@ -31,9 +31,9 @@ describe('Dropdown', () => {
   const childA = childSetup()
 
   const childB = childSetup({
-    children: 'johnny',
-    itemKey: 'johnny',
+    id: 'johnny',
     value: 'johnny',
+    children: 'johnny',
   })
 
   const children = [childA, childB]
@@ -41,7 +41,7 @@ describe('Dropdown', () => {
   describe('collapsed', () => {
     beforeEach(() => {
       wrapper = wrapperSetup({
-        selectedKey: 'johnny',
+        selectedID: 'johnny',
         children,
       })
     })
@@ -54,7 +54,7 @@ describe('Dropdown', () => {
   describe('expanded', () => {
     beforeEach(() => {
       wrapper = wrapperSetup({
-        selectedKey: 'johnny',
+        selectedID: 'johnny',
         children,
       })
 
@@ -65,14 +65,14 @@ describe('Dropdown', () => {
       expect(wrapper.find(Dropdown.Item)).toHaveLength(2)
     })
 
-    it('can set the selectedKey', () => {
+    it('can set the selectedID', () => {
       const actualProps = wrapper
         .find(Dropdown.Item)
         .find({selected: true})
         .props()
 
       const expectedProps = expect.objectContaining({
-        itemKey: 'johnny',
+        id: 'johnny',
         value: 'johnny',
       })