add revoked jobs tab to feeds manager (#31)

Author: eutopian

.changeset/shiny-lobsters-check.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': patch
+---
+
+Add revoked jobs tab in feeds manager

src/screens/FeedsManager/JobProposalsCard.test.tsx

@@ -9,6 +9,7 @@ import {
   buildCancelledJobProposal,
   buildRejectedJobProposal,
   buildDeletedJobProposal,
+  buildRevokedJobProposal,
 } from 'support/factories/gql/fetchFeedsManagersWithProposals'
 import { JobProposalsCard } from './JobProposalsCard'
 
@@ -33,6 +34,7 @@ describe('JobProposalsCard', () => {
       buildCancelledJobProposal({ pendingUpdate: true }),
       buildDeletedJobProposal({ pendingUpdate: true }),
       buildDeletedJobProposal({ pendingUpdate: false }),
+      buildRevokedJobProposal({ pendingUpdate: false }),
     ]
 
     renderWithRouter(<JobProposalsCard proposals={proposals} />)
@@ -92,4 +94,15 @@ describe('JobProposalsCard', () => {
     const rows = await findAllByRole('row')
     expect(rows).toHaveLength(2)
   })
+
+  it('renders the revoked job proposals', async () => {
+    const proposals = buildJobProposals()
+
+    renderWithRouter(<JobProposalsCard proposals={proposals} />)
+
+    userEvent.click(getByRole('tab', { name: /revoked/i }))
+
+    const rows = await findAllByRole('row')
+    expect(rows).toHaveLength(2)
+  })
 })

src/screens/FeedsManager/JobProposalsCard.tsx

@@ -24,6 +24,7 @@ const tabToStatus: { [key: number]: string } = {
   3: 'REJECTED',
   4: 'CANCELLED',
   5: 'DELETED',
+  6: 'REVOKED',
 }
 
 const styles = (theme: Theme) => {
@@ -86,6 +87,7 @@ export const JobProposalsCard = withStyles(styles)(
       REJECTED: number
       CANCELLED: number
       DELETED: number
+      REVOKED: number
     } = React.useMemo(() => {
       const tabBadgeCounts = {
         PENDING: 0,
@@ -94,6 +96,7 @@ export const JobProposalsCard = withStyles(styles)(
         REJECTED: 0,
         CANCELLED: 0,
         DELETED: 0,
+        REVOKED: 0,
       }
 
       proposals.forEach((p) => {
@@ -118,6 +121,10 @@ export const JobProposalsCard = withStyles(styles)(
             case 'DELETED':
               tabBadgeCounts['DELETED']++
 
+              break
+            case 'REVOKED':
+              tabBadgeCounts['REVOKED']++
+
               break
             default:
               break
@@ -167,6 +174,8 @@ export const JobProposalsCard = withStyles(styles)(
           return <ApprovedTable proposals={proposals} />
         case 'DELETED':
           return <InactiveTable proposals={proposals} />
+        case 'REVOKED':
+          return <InactiveTable proposals={proposals} />
         default:
           return null
       }
@@ -260,6 +269,18 @@ export const JobProposalsCard = withStyles(styles)(
                 </Badge>
               }
             />
+            <Tab
+              label={
+                <Badge
+                  color="primary"
+                  badgeContent={tabBadgeCounts.REVOKED}
+                  className={classes.badge}
+                  data-testid="revoked-badge"
+                >
+                  Revoked
+                </Badge>
+              }
+            />
           </Tabs>
 
           {renderTable(filteredProposals)}

src/screens/JobProposal/SpecsView.test.tsx

@@ -242,4 +242,22 @@ describe('SpecsView', () => {
       expect(queryByText('Cancel')).not.toBeInTheDocument()
     })
   })
+
+  describe('revoked proposal with pending spec', () => {
+    let specs: ReadonlyArray<JobProposal_SpecsFields>
+    let proposal: JobProposalPayloadFields
+
+    beforeEach(() => {
+      proposal = buildJobProposal({ status: 'REVOKED' })
+      specs = [buildJobProposalSpec({ status: 'PENDING' })]
+    })
+
+    it('renders a revoked job proposal', async () => {
+      renderComponent(specs, proposal)
+
+      expect(getByTestId('codeblock')).toHaveTextContent(specs[0].definition)
+      expect(queryByText(/edit/i)).toBeNull()
+      expect(queryByText('Cancel')).not.toBeInTheDocument()
+    })
+  })
 })

src/screens/JobProposal/SpecsView.tsx

@@ -141,15 +141,17 @@ export const SpecsView = withStyles(styles)(
                 Reject
               </Button>
 
-              {latestSpec.id === specID && proposal.status !== 'DELETED' && (
-                <Button
-                  variant="contained"
-                  color="primary"
-                  onClick={() => openConfirmationDialog('approve', specID)}
-                >
-                  Approve
-                </Button>
-              )}
+              {latestSpec.id === specID &&
+                proposal.status !== 'DELETED' &&
+                proposal.status !== 'REVOKED' && (
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={() => openConfirmationDialog('approve', specID)}
+                  >
+                    Approve
+                  </Button>
+                )}
 
               {latestSpec.id === specID &&
                 proposal.status === 'DELETED' &&
@@ -190,7 +192,11 @@ export const SpecsView = withStyles(styles)(
             </>
           )
         case 'CANCELLED':
-          if (latestSpec.id === specID && proposal.status !== 'DELETED') {
+          if (
+            latestSpec.id === specID &&
+            proposal.status !== 'DELETED' &&
+            proposal.status !== 'REVOKED'
+          ) {
             return (
               <Button
                 variant="contained"
@@ -237,7 +243,8 @@ export const SpecsView = withStyles(styles)(
                   {idx === 0 &&
                     (spec.status === 'PENDING' ||
                       spec.status === 'CANCELLED') &&
-                    proposal.status !== 'DELETED' && (
+                    proposal.status !== 'DELETED' &&
+                    proposal.status !== 'REVOKED' && (
                       <Button
                         variant="contained"
                         onClick={() => setIsEditing(true)}

support/factories/gql/fetchFeedsManagersWithProposals.ts

@@ -126,6 +126,25 @@ export function buildDeletedJobProposal(
   }
 }
 
+// buildRevokedJobProposal builds an cancelled job proposal.
+export function buildRevokedJobProposal(
+  overrides?: Partial<FeedsManager_JobProposalsFields>,
+): FeedsManager_JobProposalsFields {
+  const minuteAgo = isoDate(Date.now() - MINUTE_MS)
+
+  return {
+    id: '400',
+    remoteUUID: '00000000-0000-0000-0000-000000000004',
+    status: 'REVOKED',
+    pendingUpdate: false,
+    latestSpec: {
+      createdAt: minuteAgo,
+      version: 1,
+    },
+    ...overrides,
+  }
+}
+
 // buildJobProposals builds a list of job proposals each containing a different
 // status for a FetchFeedsManagersWithProposals query
 export function buildJobProposals(): FeedsManager_JobProposalsFields[] {
@@ -135,5 +154,6 @@ export function buildJobProposals(): FeedsManager_JobProposalsFields[] {
     buildRejectedJobProposal(),
     buildCancelledJobProposal(),
     buildDeletedJobProposal(),
+    buildRevokedJobProposal(),
   ]
 }