add deleted tab in fms

smartcontractkit · Mar 3, 2023 · c91c2a5 · c91c2a5
1 parent ffd9ff4
commit c91c2a5
Show file tree

Hide file tree

Showing 14 changed files with 303 additions and 91 deletions.
diff --git a/.changeset/twelve-chefs-juggle.md b/.changeset/twelve-chefs-juggle.md
@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': patch
+---
+
+Allow job deletion requests to be sent from FMS
diff --git a/src/screens/FeedsManager/ApprovedTable.tsx b/src/screens/FeedsManager/ApprovedTable.tsx
@@ -33,8 +33,8 @@ export const ApprovedTable = withStyles(tableStyles)(
         </TableHead>
 
         <TableBody>
-          {proposals?.map((proposal, idx) => (
-            <TableRow key={idx} className={classes.row} hover>
+          {proposals?.map((proposal) => (
+            <TableRow key={proposal.id} className={classes.row} hover>
               <TableCell className={classes.cell} component="th" scope="row">
                 <Link
                   className={classes.link}

diff --git a/src/screens/FeedsManager/InactiveTable.tsx b/src/screens/FeedsManager/InactiveTable.tsx
@@ -32,8 +32,8 @@ export const InactiveTable = withStyles(tableStyles)(
         </TableHead>
 
         <TableBody>
-          {proposals?.map((proposal, idx) => (
-            <TableRow key={idx} className={classes.row} hover>
+          {proposals?.map((proposal) => (
+            <TableRow key={proposal.id} className={classes.row} hover>
               <TableCell className={classes.cell} component="th" scope="row">
                 <Link
                   className={classes.link}

diff --git a/src/screens/FeedsManager/JobProposalsCard.test.tsx b/src/screens/FeedsManager/JobProposalsCard.test.tsx
@@ -8,6 +8,7 @@ import {
   buildApprovedJobProposal,
   buildCancelledJobProposal,
   buildRejectedJobProposal,
+  buildDeletedJobProposal,
 } from 'support/factories/gql/fetchFeedsManagersWithProposals'
 import { JobProposalsCard } from './JobProposalsCard'
 
@@ -30,19 +31,22 @@ describe('JobProposalsCard', () => {
       buildApprovedJobProposal({ pendingUpdate: true }),
       buildRejectedJobProposal({ pendingUpdate: true }),
       buildCancelledJobProposal({ pendingUpdate: true }),
+      buildDeletedJobProposal({ pendingUpdate: true }),
+      buildDeletedJobProposal({ pendingUpdate: false }),
     ]
 
     renderWithRouter(<JobProposalsCard proposals={proposals} />)
 
-    expect(getByTestId('updates-badge')).toHaveTextContent('3')
+    expect(getByTestId('updates-badge')).toHaveTextContent('4')
     expect(getByTestId('approved-badge')).toHaveTextContent('1')
     expect(getByTestId('rejected-badge')).toHaveTextContent('1')
     expect(getByTestId('cancelled-badge')).toHaveTextContent('1')
+    expect(getByTestId('deleted-badge')).toHaveTextContent('1')
 
     userEvent.click(getByRole('tab', { name: /updates/i }))
 
     const rows = await findAllByRole('row')
-    expect(rows).toHaveLength(4)
+    expect(rows).toHaveLength(5)
   })
 
   it('renders the approved job proposals', async () => {
@@ -77,4 +81,15 @@ describe('JobProposalsCard', () => {
     const rows = await findAllByRole('row')
     expect(rows).toHaveLength(2)
   })
+
+  it('renders the deleted job proposals', async () => {
+    const proposals = buildJobProposals()
+
+    renderWithRouter(<JobProposalsCard proposals={proposals} />)
+
+    userEvent.click(getByRole('tab', { name: /deleted/i }))
+
+    const rows = await findAllByRole('row')
+    expect(rows).toHaveLength(2)
+  })
 })
diff --git a/src/screens/FeedsManager/JobProposalsCard.tsx b/src/screens/FeedsManager/JobProposalsCard.tsx
@@ -23,6 +23,7 @@ const tabToStatus: { [key: number]: string } = {
   2: 'APPROVED',
   3: 'REJECTED',
   4: 'CANCELLED',
+  5: 'DELETED',
 }
 
 const styles = (theme: Theme) => {
@@ -84,13 +85,15 @@ export const JobProposalsCard = withStyles(styles)(
       APPROVED: number
       REJECTED: number
       CANCELLED: number
+      DELETED: number
     } = React.useMemo(() => {
       const tabBadgeCounts = {
         PENDING: 0,
         UPDATES: 0,
         APPROVED: 0,
         REJECTED: 0,
         CANCELLED: 0,
+        DELETED: 0,
       }
 
       proposals.forEach((p) => {
@@ -111,6 +114,10 @@ export const JobProposalsCard = withStyles(styles)(
             case 'REJECTED':
               tabBadgeCounts['REJECTED']++
 
+              break
+            case 'DELETED':
+              tabBadgeCounts['DELETED']++
+
               break
             default:
               break
@@ -158,6 +165,8 @@ export const JobProposalsCard = withStyles(styles)(
           return <InactiveTable proposals={proposals} />
         case 'APPROVED':
           return <ApprovedTable proposals={proposals} />
+        case 'DELETED':
+          return <InactiveTable proposals={proposals} />
         default:
           return null
       }
@@ -239,6 +248,18 @@ export const JobProposalsCard = withStyles(styles)(
                 </Badge>
               }
             />
+            <Tab
+              label={
+                <Badge
+                  color="primary"
+                  badgeContent={tabBadgeCounts.DELETED}
+                  className={classes.badge}
+                  data-testid="deleted-badge"
+                >
+                  Deleted
+                </Badge>
+              }
+            />
           </Tabs>
 
           {renderTable(filteredProposals)}

diff --git a/src/screens/FeedsManager/PendingTable.tsx b/src/screens/FeedsManager/PendingTable.tsx
@@ -29,8 +29,8 @@ export const PendingTable = withStyles(tableStyles)(
         </TableHead>
 
         <TableBody>
-          {proposals?.map((proposal, idx) => (
-            <TableRow key={idx} className={classes.row} hover>
+          {proposals?.map((proposal) => (
+            <TableRow key={proposal.id} className={classes.row} hover>
               <TableCell className={classes.cell} component="th" scope="row">
                 <Link
                   className={classes.link}

diff --git a/src/screens/FeedsManager/SupportedChainsCard.tsx b/src/screens/FeedsManager/SupportedChainsCard.tsx
@@ -348,9 +348,9 @@ export const SupportedChainsCard = withStyles(styles)(
           }
         />
 
-        {cfgs.map((cfg, idx) => (
+        {cfgs.map((cfg) => (
           <ExpansionPanel
-            key={idx}
+            key={cfg.id}
             defaultExpanded={false}
             classes={{
               root: classes.panel,
@@ -463,26 +463,6 @@ const OCRJobTypeRow = withStyles(styles)(
       return null
     }
 
-    const renderBootstrap = () => (
-      <Grid item xs={12} sm={1} md={5}>
-        <DetailsCardItemTitle title="Multiaddr" />
-        <DetailsCardItemValue value={cfg.multiaddr} />
-      </Grid>
-    )
-
-    const renderOracle = () => (
-      <>
-        <Grid item xs={12} sm={1} md={5}>
-          <DetailsCardItemTitle title="P2P Peer ID" />
-          <DetailsCardItemValue value={cfg.p2pPeerID} />
-        </Grid>
-        <Grid item xs={12} sm={1} md={5}>
-          <DetailsCardItemTitle title="OCR Key ID" />
-          <DetailsCardItemValue value={cfg.keyBundleID} />
-        </Grid>
-      </>
-    )
-
     return (
       <>
         <Grid item xs={12} sm={1} md={2}>
@@ -494,7 +474,7 @@ const OCRJobTypeRow = withStyles(styles)(
           </div>
         </Grid>
 
-        {cfg.isBootstrap ? renderBootstrap() : renderOracle()}
+        {cfg.isBootstrap ? renderBootstrap(cfg) : renderOracle(cfg)}
       </>
     )
   },
@@ -510,26 +490,6 @@ const OCR2JobTypeRow = withStyles(styles)(
       return null
     }
 
-    const renderBootstrap = () => (
-      <Grid item xs={12} sm={1} md={5}>
-        <DetailsCardItemTitle title="Multiaddr" />
-        <DetailsCardItemValue value={cfg.multiaddr} />
-      </Grid>
-    )
-
-    const renderOracle = () => (
-      <>
-        <Grid item xs={12} sm={1} md={5}>
-          <DetailsCardItemTitle title="P2P Peer ID" />
-          <DetailsCardItemValue value={cfg.p2pPeerID} />
-        </Grid>
-        <Grid item xs={12} sm={1} md={5}>
-          <DetailsCardItemTitle title="OCR Key ID" />
-          <DetailsCardItemValue value={cfg.keyBundleID} />
-        </Grid>
-      </>
-    )
-
     return (
       <>
         <Grid item xs={12} sm={1} md={2}>
@@ -541,8 +501,36 @@ const OCR2JobTypeRow = withStyles(styles)(
           </div>
         </Grid>
 
-        {cfg.isBootstrap ? renderBootstrap() : renderOracle()}
+        {cfg.isBootstrap ? renderBootstrap(cfg) : renderOracle(cfg)}
       </>
     )
   },
 )
+
+const renderBootstrap = (
+  cfg:
+    | FeedsManager_ChainConfigFields['ocr2JobConfig']
+    | FeedsManager_ChainConfigFields['ocr1JobConfig'],
+) => (
+  <Grid item xs={12} sm={1} md={5}>
+    <DetailsCardItemTitle title="Multiaddr" />
+    <DetailsCardItemValue value={cfg.multiaddr} />
+  </Grid>
+)
+
+const renderOracle = (
+  cfg:
+    | FeedsManager_ChainConfigFields['ocr2JobConfig']
+    | FeedsManager_ChainConfigFields['ocr1JobConfig'],
+) => (
+  <>
+    <Grid item xs={12} sm={1} md={5}>
+      <DetailsCardItemTitle title="P2P Peer ID" />
+      <DetailsCardItemValue value={cfg.p2pPeerID} />
+    </Grid>
+    <Grid item xs={12} sm={1} md={5}>
+      <DetailsCardItemTitle title="OCR Key ID" />
+      <DetailsCardItemValue value={cfg.keyBundleID} />
+    </Grid>
+  </>
+)
diff --git a/src/screens/FeedsManager/UpdatesTable.tsx b/src/screens/FeedsManager/UpdatesTable.tsx
@@ -31,8 +31,8 @@ export const UpdatesTable = withStyles(tableStyles)(
         </TableHead>
 
         <TableBody>
-          {proposals?.map((proposal, idx) => (
-            <TableRow key={idx} className={classes.row} hover>
+          {proposals?.map((proposal) => (
+            <TableRow key={proposal.id} className={classes.row} hover>
               <TableCell className={classes.cell} component="th" scope="row">
                 <Link
                   className={classes.link}

diff --git a/src/screens/JobProposal/JobProposalView.test.tsx b/src/screens/JobProposal/JobProposalView.test.tsx
@@ -177,4 +177,26 @@ describe('JobProposalView', () => {
       expect(queryByText(/edit/i)).toBeNull()
     })
   })
+
+  describe('deleted proposal', () => {
+    let proposal: JobProposalPayloadFields
+
+    beforeEach(() => {
+      proposal = buildJobProposal({
+        status: 'DELETED',
+        specs: [buildJobProposalSpec({ status: 'APPROVED' })],
+      })
+    })
+
+    it('renders a rejected job proposal', async () => {
+      renderComponent(proposal)
+
+      expect(queryByText('Deleted')).toBeInTheDocument()
+
+      expect(getByTestId('codeblock')).toHaveTextContent(
+        proposal.specs[0].definition,
+      )
+      expect(queryByText(/edit/i)).toBeNull()
+    })
+  })
 })
diff --git a/src/screens/JobProposal/JobProposalView.tsx b/src/screens/JobProposal/JobProposalView.tsx
@@ -22,6 +22,7 @@ export const JOB_PROPOSAL_PAYLOAD_FIELDS = gql`
       ...JobProposal_SpecsFields
     }
     status
+    pendingUpdate
   }
 `
 
@@ -59,6 +60,7 @@ export const JobProposalView: React.FC<Props> = ({
       <Grid container spacing={32}>
         <Grid item xs={12}>
           <SpecsView
+            proposal={proposal}
             specs={proposal.specs}
             onReject={onReject}
             onApprove={onApprove}