fix(chain): peerId is introduced for bootstrap

Add a new field for peerID in the chain config form when it is running as bootstrap node for OCR2 When `Is this node running as a bootstrap peer?` is selected, peerId is now available as a field.
smartcontractkit · Sep 16, 2024 · be9296b · be9296b
1 parent f55d4fd
commit be9296b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 34 deletions.
diff --git a/.changeset/cyan-kids-boil.md b/.changeset/cyan-kids-boil.md
@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+Peer ID field is introduced when Node is running as bootstrap peer
diff --git a/src/components/Form/ChainConfigurationForm.test.tsx b/src/components/Form/ChainConfigurationForm.test.tsx
@@ -180,5 +180,9 @@ describe('ChainConfigurationForm', () => {
     expect(await findByTestId('ocr2Multiaddr-helper-text')).toHaveTextContent(
       'Required',
     )
+
+    expect(
+      await findByTestId('ocr2P2PPeerID-helper-text'),
+    ).not.toHaveTextContent('Required')
   })
 })
diff --git a/src/components/Form/ChainConfigurationForm.tsx b/src/components/Form/ChainConfigurationForm.tsx
@@ -459,6 +459,28 @@ export const ChainConfigurationForm = withStyles(styles)(
                             />
                           </Grid>
 
+                          <Grid item xs={12} md={6}>
+                            <Field
+                              component={TextField}
+                              id="ocr2P2PPeerID"
+                              name="ocr2P2PPeerID"
+                              label="Peer ID"
+                              select
+                              required={!values.ocr2IsBootstrap}
+                              fullWidth
+                              helperText="The Peer ID used for this chain"
+                              FormHelperTextProps={{
+                                'data-testid': 'ocr2P2PPeerID-helper-text',
+                              }}
+                            >
+                              {p2pKeys.map((key) => (
+                                <MenuItem key={key.peerID} value={key.peerID}>
+                                  {key.peerID}
+                                </MenuItem>
+                              ))}
+                            </Field>
+                          </Grid>
+
                           {values.ocr2IsBootstrap ? (
                             <Grid item xs={12}>
                               <Field
@@ -476,31 +498,6 @@ export const ChainConfigurationForm = withStyles(styles)(
                             </Grid>
                           ) : (
                             <>
-                              <Grid item xs={12} md={6}>
-                                <Field
-                                  component={TextField}
-                                  id="ocr2P2PPeerID"
-                                  name="ocr2P2PPeerID"
-                                  label="Peer ID"
-                                  select
-                                  required
-                                  fullWidth
-                                  helperText="The Peer ID used for this chain"
-                                  FormHelperTextProps={{
-                                    'data-testid': 'ocr2P2PPeerID-helper-text',
-                                  }}
-                                >
-                                  {p2pKeys.map((key) => (
-                                    <MenuItem
-                                      key={key.peerID}
-                                      value={key.peerID}
-                                    >
-                                      {key.peerID}
-                                    </MenuItem>
-                                  ))}
-                                </Field>
-                              </Grid>
-
                               <Grid item xs={12} md={6}>
                                 <Field
                                   component={TextField}

diff --git a/src/screens/FeedsManager/SupportedChainsCard.tsx b/src/screens/FeedsManager/SupportedChainsCard.tsx
@@ -146,10 +146,19 @@ const renderBootstrap = (
     | FeedsManager_ChainConfigFields['ocr2JobConfig']
     | FeedsManager_ChainConfigFields['ocr1JobConfig'],
 ) => (
-  <Grid item xs={12} sm={1} md={5}>
-    <DetailsCardItemTitle title="Multiaddr" />
-    <DetailsCardItemValue value={cfg.multiaddr} />
-  </Grid>
+  <>
+    <Grid item xs={12} md={5}>
+      <DetailsCardItemTitle title="Multiaddr" />
+      <DetailsCardItemValue value={cfg.multiaddr} />
+    </Grid>
+
+    {cfg.__typename === 'OCR2JobConfig' && (
+      <Grid item xs={12} md={5}>
+        <DetailsCardItemTitle title="P2P Peer ID" />
+        <DetailsCardItemValue value={cfg.p2pPeerID} />
+      </Grid>
+    )}
+  </>
 )
 
 const renderOracle = (
@@ -158,11 +167,11 @@ const renderOracle = (
     | FeedsManager_ChainConfigFields['ocr1JobConfig'],
 ) => (
   <>
-    <Grid item xs={12} sm={1} md={5}>
+    <Grid item xs={12} md={5}>
       <DetailsCardItemTitle title="P2P Peer ID" />
       <DetailsCardItemValue value={cfg.p2pPeerID} />
     </Grid>
-    <Grid item xs={12} sm={1} md={5}>
+    <Grid item xs={12} md={5}>
       <DetailsCardItemTitle title="OCR Key ID" />
       <DetailsCardItemValue value={cfg.keyBundleID} />
     </Grid>
@@ -196,7 +205,7 @@ const FluxMonitorJobTypeRow = withStyles(styles)(
     }
 
     return (
-      <Grid item xs={12} sm={1} md={12}>
+      <Grid item xs={12} md={12}>
         <div className={classes.jobTypeContainer}>
           <DetailsCardItemTitle title="Job Type" />
           <DetailsCardItemValue value="Flux Monitor" />
@@ -218,7 +227,7 @@ const OCRJobTypeRow = withStyles(styles)(
 
     return (
       <>
-        <Grid item xs={12} sm={1} md={2}>
+        <Grid item xs={12} md={2}>
           <div className={classes.jobTypeContainer}>
             <DetailsCardItemTitle title="Job Type" />
             <DetailsCardItemValue
@@ -245,7 +254,7 @@ const OCR2JobTypeRow = withStyles(styles)(
 
     return (
       <>
-        <Grid item xs={12} sm={1} md={2}>
+        <Grid item xs={12} md={2}>
           <div className={classes.jobTypeContainer}>
             <DetailsCardItemTitle title="Job Type" />
             <DetailsCardItemValue