fix(chainconfig): attach label to key bundle id

For the ocr2 keybundle id select box, it lists all the keys based on the ID and it's hard to tell which one we want. Adding the key type (aptos, evm etc) to the values in the selectbox, something like "0xaaabbbccc (aptos)" so it can be easily identified now that we support more than EVM chain.

JIRA: https://smartcontract-it.atlassian.net/browse/DPA-1321

Author: graham-chainlink

.changeset/nervous-cups-invite.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+chainconfig: attach chain type label to key bundle id in UI

src/components/Form/ChainConfigurationForm.test.tsx

@@ -333,6 +333,36 @@ describe('ChainConfigurationForm', () => {
   })
 })
 
+test('should be able to select OCR2 Job Type with Key Bundle ID', async () => {
+  const handleSubmit = jest.fn()
+  const initialValues = emptyFormValues()
+  initialValues.chainType = ChainTypes.EVM
+
+  const { container } = renderChainConfigurationForm(
+    initialValues,
+    handleSubmit,
+    [],
+    {
+      aptosKeys: {
+        results: [],
+      },
+      solanaKeys: {
+        results: [],
+      },
+    },
+  )
+
+  const ocr2CheckBox = screen.getByText(/ocr2/i)
+  userEvent.click(ocr2CheckBox)
+
+  const keyBundleId2 = container.querySelector('#select-ocr2KeyBundleID')
+  expect(keyBundleId2).toBeInTheDocument()
+  // workaround ts lint warning - require check for null
+  keyBundleId2 && userEvent.click(keyBundleId2)
+  userEvent.click(getByRole('option', { name: 'ocr2_key_bundle_id (EVM)' }))
+  await screen.findByRole('button', { name: 'ocr2_key_bundle_id (EVM)' })
+})
+
 function emptyFormValues(): FormValues {
   return {
     chainID: '',
@@ -407,7 +437,15 @@ function renderChainConfigurationForm(
       chains={chains}
       p2pKeys={[]}
       ocrKeys={[]}
-      ocr2Keys={[]}
+      ocr2Keys={[
+        {
+          id: 'ocr2_key_bundle_id',
+          chainType: 'EVM',
+          offChainPublicKey: 'ocr2_public_key',
+          onChainPublicKey: 'ocr2_on_chain_public_key',
+          configPublicKey: 'ocr2_config_public_key',
+        },
+      ]}
       showSubmit
     />,
   )

src/components/Form/ChainConfigurationForm.tsx

@@ -228,6 +228,12 @@ export const ChainConfigurationForm = withStyles(styles)(
     ocr2Keys = [],
     showSubmit = false,
   }: Props) => {
+    const sortedOcr2Keys = [...ocr2Keys].sort((a, b) => {
+      if (a.chainType === b.chainType) {
+        return a.id.localeCompare(b.id)
+      }
+      return a.chainType?.localeCompare(b.chainType ?? '') ?? 0
+    })
     return (
       <Formik
         innerRef={innerRef}
@@ -573,9 +579,9 @@ export const ChainConfigurationForm = withStyles(styles)(
                                       'ocr2KeyBundleID-helper-text',
                                   }}
                                 >
-                                  {ocr2Keys.map((key) => (
+                                  {sortedOcr2Keys.map((key) => (
                                     <MenuItem key={key.id} value={key.id}>
-                                      {key.id}
+                                      {key.id} ({key.chainType})
                                     </MenuItem>
                                   ))}
                                 </Field>