diff --git a/.changeset/nervous-cups-invite.md b/.changeset/nervous-cups-invite.md new file mode 100644 index 0000000..f2ff562 --- /dev/null +++ b/.changeset/nervous-cups-invite.md @@ -0,0 +1,5 @@ +--- +'@smartcontractkit/operator-ui': minor +--- + +chainconfig: attach chain type label to key bundle id in UI diff --git a/src/components/Form/ChainConfigurationForm.test.tsx b/src/components/Form/ChainConfigurationForm.test.tsx index 23857e4..643f562 100644 --- a/src/components/Form/ChainConfigurationForm.test.tsx +++ b/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 />, ) diff --git a/src/components/Form/ChainConfigurationForm.tsx b/src/components/Form/ChainConfigurationForm.tsx index 71eab03..1fb71c1 100644 --- a/src/components/Form/ChainConfigurationForm.tsx +++ b/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 ( - {ocr2Keys.map((key) => ( + {sortedOcr2Keys.map((key) => ( - {key.id} + {key.id} ({key.chainType}) ))}