Addes "use grpc transport" checkbox to bridge pages (view/add/edit)

.changeset/legal-cameras-lose.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+New checkbox to use gRPC transport for External Adapters

src/components/Form/BridgeForm.test.tsx

@@ -15,6 +15,7 @@ describe('BridgeForm', () => {
       url: '',
       minimumContractPayment: '0',
       confirmations: 0,
+      useConnectionManager: false,
     }
 
     render(
@@ -38,6 +39,7 @@ describe('BridgeForm', () => {
       url: '',
       minimumContractPayment: '0',
       confirmations: 0,
+      useConnectionManager: false,
     }
 
     render(
@@ -59,6 +61,7 @@ describe('BridgeForm', () => {
       url: '',
       minimumContractPayment: '0',
       confirmations: 0,
+      useConnectionManager: false,
     }
 
     render(
@@ -92,9 +95,45 @@ describe('BridgeForm', () => {
           url: 'https://www.test.com',
           minimumContractPayment: '1',
           confirmations: 2,
+          useConnectionManager: false,
         },
         expect.anything(),
       ),
     )
   })
+
+  it('submits useConnectionManager when checked', async () => {
+    const handleSubmit = jest.fn()
+    const initialValues: FormValues = {
+      name: '',
+      url: '',
+      minimumContractPayment: '0',
+      confirmations: 0,
+      useConnectionManager: false,
+    }
+
+    render(
+      <BridgeForm
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+        submitButtonText="Submit"
+      />,
+    )
+
+    userEvent.type(getByRole('textbox', { name: /name */i }), 'bridge1')
+    userEvent.type(
+      getByRole('textbox', { name: /bridge url */i }),
+      'https://www.test.com',
+    )
+    userEvent.click(getByRole('checkbox', { name: /use grpc transport/i }))
+
+    userEvent.click(getByRole('button', { name: /submit/i }))
+
+    await waitFor(() =>
+      expect(handleSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({ useConnectionManager: true }),
+        expect.anything(),
+      ),
+    )
+  })
 })

src/components/Form/BridgeForm.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 
 import { Field, Form, Formik, FormikHelpers } from 'formik'
-import { FormikTextField as TextField } from './FormikFields'
+import {
+  FormikTextField as TextField,
+  FormikCheckboxWithLabel as CheckboxWithLabel,
+} from './FormikFields'
 import * as Yup from 'yup'
 
 import Button from '@mui/material/Button'
@@ -12,6 +15,7 @@
   minimumContractPayment: string
   confirmations: number
   url: string
+  useConnectionManager: boolean
 }
 
 const ValidationSchema = Yup.object().shape({
@@ -42,83 +46,95 @@
       onSubmit={onSubmit}
     >
       {({ isSubmitting }) => (
         <>
           <Form data-testid="bridge-form" noValidate>
             <Grid container spacing={2}>
               <Grid item xs={12} md={7}>
                 <Field
                   component={TextField}
                   id="name"
                   name="name"
                   label="Name"
                   disabled={nameDisabled}
                   required
                   fullWidth
                   FormHelperTextProps={{ 'data-testid': 'name-helper-text' }}
                 />
               </Grid>
 
               <Grid item xs={12} md={7}>
                 <Field
                   component={TextField}
                   id="url"
                   name="url"
                   label="Bridge URL"
                   placeholder="https://"
                   required
                   fullWidth
                   FormHelperTextProps={{ 'data-testid': 'url-helper-text' }}
                 />
               </Grid>
 
               <Grid item xs={12} md={7}>
                 <Grid container spacing={2}>
                   <Grid item xs={7}>
                     <Field
                       component={TextField}
                       id="minimumContractPayment"
                       name="minimumContractPayment"
                       label="Minimum Contract Payment"
                       placeholder="0"
                       fullWidth
                       inputProps={{ min: 0 }}
                       FormHelperTextProps={{
                         'data-testid': 'minimumContractPayment-helper-text',
                       }}
                     />
                   </Grid>
                   <Grid item xs={7}>
                     <Field
                       component={TextField}
                       id="confirmations"
                       name="confirmations"
                       label="Confirmations"
                       placeholder="0"
                       type="number"
                       fullWidth
                       inputProps={{ min: 0 }}
                       FormHelperTextProps={{
                         'data-testid': 'confirmations-helper-text',
                       }}
                     />
                   </Grid>
                 </Grid>
               </Grid>
 
+              <Grid item xs={12} md={7}>
+                <Field
+                  component={CheckboxWithLabel}
+                  name="useConnectionManager"
+                  type="checkbox"
+                  data-testid="useConnectionManager"
+                  Label={{
+                    label: 'Use gRPC transport',
+                  }}
+                />
+              </Grid>
+
               <Grid item xs={12} md={7}>
                 <Button
                   variant="contained"
                   color="primary"
                   type="submit"
                   disabled={isSubmitting}
                   size="large"
                 >
                   {submitButtonText}
                 </Button>
               </Grid>
             </Grid>
           </Form>
         </>
       )}
     </Formik>
   )

src/screens/Bridge/BridgeCard.test.tsx

@@ -37,6 +37,7 @@ describe('BridgeCard', () => {
     expect(queryByText(bridge.outgoingToken)).toBeInTheDocument()
     expect(queryByText(bridge.confirmations)).toBeInTheDocument()
     expect(queryByText(bridge.minimumContractPayment)).toBeInTheDocument()
+    expect(queryByText('Use gRPC transport')).toBeInTheDocument()
   })
 
   it('calls delete', () => {

src/screens/Bridge/BridgeCard.tsx

@@ -91,6 +91,13 @@ export const BridgeCard: React.FC<Props> = ({ bridge, onDelete }) => {
           <DetailsCardItemTitle title="Min. Contract Payment" />
           <DetailsCardItemValue value={bridge.minimumContractPayment} />
         </Grid>
+
+        <Grid item xs={12} sm={4} md={3}>
+          <DetailsCardItemTitle title="Use gRPC transport" />
+          <DetailsCardItemValue
+            value={bridge.useConnectionManager ? 'Yes' : 'No'}
+          />
+        </Grid>
       </Grid>
     </DetailsCard>
   )

src/screens/Bridge/BridgeView.tsx

@@ -17,6 +17,7 @@ export const BRIDGE_PAYLOAD_FIELDS = gql`
     confirmations
     outgoingToken
     minimumContractPayment
+    useConnectionManager
   }
 `
 

src/screens/Bridges/BridgeRow.test.tsx

@@ -36,6 +36,15 @@ describe('BridgeRow', () => {
     expect(queryByText('http://bridge.com')).toBeInTheDocument()
     expect(queryByText('1')).toBeInTheDocument()
     expect(queryByText('0')).toBeInTheDocument()
+    expect(queryByText('No')).toBeInTheDocument()
+  })
+
+  it('renders gRPC transport as Yes when enabled', () => {
+    const bridge = buildBridge({ useConnectionManager: true })
+
+    renderComponent(bridge)
+
+    expect(queryByText('Yes')).toBeInTheDocument()
   })
 
   it('links to the row details', async () => {

src/screens/Bridges/BridgeRow.tsx

@@ -33,6 +33,11 @@ export const BridgeRow = withStyles(tableStyles)(({
       <TableCell>
         <Typography variant="body1">{bridge.minimumContractPayment}</Typography>
       </TableCell>
+      <TableCell>
+        <Typography variant="body1">
+          {bridge.useConnectionManager ? 'Yes' : 'No'}
+        </Typography>
+      </TableCell>
     </TableRow>
   )
 })

src/screens/Bridges/BridgesView.test.tsx

@@ -40,6 +40,7 @@ describe('BridgesView', () => {
     expect(queryByText('URL')).toBeInTheDocument()
     expect(queryByText('Default Confirmations')).toBeInTheDocument()
     expect(queryByText('Minimum Contract Payment')).toBeInTheDocument()
+    expect(queryByText('Use gRPC transport')).toBeInTheDocument()
 
     expect(queryByText('bridge-api1')).toBeInTheDocument()
     expect(queryByText('http://bridge1.com')).toBeInTheDocument()

src/screens/Bridges/BridgesView.tsx

@@ -24,6 +24,7 @@ export const BRIDGES_PAYLOAD__RESULTS_FIELDS = gql`
     url
     confirmations
     minimumContractPayment
+    useConnectionManager
   }
 `
 
@@ -69,6 +70,7 @@ export const BridgesView: React.FC<Props> = ({
                   <TableCell>URL</TableCell>
                   <TableCell>Default Confirmations</TableCell>
                   <TableCell>Minimum Contract Payment</TableCell>
+                  <TableCell>Use gRPC transport</TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>

src/screens/EditBridge/EditBridgeScreen.test.tsx

@@ -58,6 +58,7 @@ describe('EditBridgeScreen', () => {
               url: 'https://www.test.com',
               minimumContractPayment: '1',
               confirmations: 10,
+              useConnectionManager: false,
             },
           },
         },
@@ -138,6 +139,7 @@ describe('EditBridgeScreen', () => {
               url: bridge.url,
               minimumContractPayment: bridge.minimumContractPayment,
               confirmations: bridge.confirmations,
+              useConnectionManager: bridge.useConnectionManager,
             },
           },
         },
@@ -177,6 +179,7 @@ describe('EditBridgeScreen', () => {
               url: bridge.url,
               minimumContractPayment: bridge.minimumContractPayment,
               confirmations: bridge.confirmations,
+              useConnectionManager: bridge.useConnectionManager,
             },
           },
         },

src/screens/EditBridge/EditBridgeView.test.tsx

@@ -38,6 +38,7 @@ describe('EditBridgeView', () => {
       url: 'http://bridge.com',
       minimumContractPayment: '0',
       confirmations: 1,
+      useConnectionManager: false,
     })
   })
 

src/screens/EditBridge/EditBridgeView.tsx

@@ -20,6 +20,7 @@ export const EditBridgeView: React.FC<Props> = ({ bridge, onSubmit }) => {
     url: bridge.url,
     minimumContractPayment: bridge.minimumContractPayment,
     confirmations: bridge.confirmations,
+    useConnectionManager: bridge.useConnectionManager,
   }
 
   return (

src/screens/NewBridge/NewBridgeScreen.test.tsx

@@ -37,6 +37,7 @@ describe('NewBridgeScreen', () => {
               url: 'https://www.test.com',
               minimumContractPayment: '0',
               confirmations: 0,
+              useConnectionManager: false,
             },
           },
         },
@@ -84,6 +85,7 @@ describe('NewBridgeScreen', () => {
               url: 'https://www.test.com',
               minimumContractPayment: '0',
               confirmations: 0,
+              useConnectionManager: false,
             },
           },
         },

src/screens/NewBridge/NewBridgeView.test.tsx

@@ -18,6 +18,7 @@ describe('NewBridgeView', () => {
       url: '',
       minimumContractPayment: '0',
       confirmations: 0,
+      useConnectionManager: false,
     })
   })
 })

src/screens/NewBridge/NewBridgeView.tsx

@@ -13,6 +13,7 @@ const initialValues = {
   url: '',
   minimumContractPayment: '0',
   confirmations: 0,
+  useConnectionManager: false,
 }
 
 type Props = Pick<FormProps, 'onSubmit'>

support/factories/gql/fetchBridge.ts

@@ -10,6 +10,7 @@ export function buildBridgePayloadFields(
     confirmations: 1,
     minimumContractPayment: '0',
     outgoingToken: 'outgoing1',
+    useConnectionManager: false,
     ...overrides,
   }
 }

support/factories/gql/fetchBridges.ts

@@ -9,6 +9,7 @@ export function buildBridge(
     url: 'http://bridge.com',
     confirmations: 1,
     minimumContractPayment: '0',
+    useConnectionManager: false,
     ...overrides,
   }
 }