feat: Enable JD new home page and route changes

Hook up the job distributor new hoome page with the new route. update existing route to include manager id as we now support more than 1 job distributor.

Update logic in components related to hardcoding of reading the first manager returned from graphql

JIRA: https://smartcontract-it.atlassian.net/browse/OPCORE-858

.changeset/forty-doors-whisper.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+Enable job distributor new home page and route changes

src/hooks/queries/useFeedsManagersWithProposalsQuery.ts → src/hooks/queries/useFeedsManagerWithProposalsQuery.ts

@@ -65,7 +65,7 @@ export const FEEDS_MANAGER__JOB_PROPOSAL_FIELDS = gql`
   }
 `
 
-export const FEEDS_MANAGERS_PAYLOAD__RESULTS_FIELDS = gql`
+export const FEEDS_MANAGER_PAYLOAD__RESULTS_FIELDS = gql`
   ${FEEDS_MANAGER_FIELDS}
   ${FEEDS_MANAGER__JOB_PROPOSAL_FIELDS}
   fragment FeedsManagerPayload_ResultsFields on FeedsManager {
@@ -76,22 +76,27 @@ export const FEEDS_MANAGERS_PAYLOAD__RESULTS_FIELDS = gql`
   }
 `
 
-export const FEEDS_MANAGERS_WITH_PROPOSALS_QUERY = gql`
-  ${FEEDS_MANAGERS_PAYLOAD__RESULTS_FIELDS}
-  query FetchFeedManagersWithProposals {
-    feedsManagers {
-      results {
-        ...FeedsManagerPayload_ResultsFields
+export const FEEDS_MANAGER_WITH_PROPOSALS_QUERY = gql`
+  ${FEEDS_MANAGER_PAYLOAD__RESULTS_FIELDS}
+  query FetchFeedManagerWithProposals($id: ID!) {
+    feedsManager(id: $id) {
+      ...FeedsManagerPayload_ResultsFields
+      ... on NotFoundError {
+        message
+        code
       }
     }
   }
 `
 
-export const useFeedsManagersWithProposalsQuery = (
-  opts: QueryHookOptions = {},
+export const useFeedsManagerWithProposalsQuery = (
+  opts: QueryHookOptions<
+    FetchFeedManagerWithProposals,
+    FetchFeedManagerWithProposalsVariables
+  > = {},
 ) => {
-  return useQuery<FetchFeedManagersWithProposals>(
-    FEEDS_MANAGERS_WITH_PROPOSALS_QUERY,
-    opts,
-  )
+  return useQuery<
+    FetchFeedManagerWithProposals,
+    FetchFeedManagerWithProposalsVariables
+  >(FEEDS_MANAGER_WITH_PROPOSALS_QUERY, opts)
 }

src/pages/feeds_manager/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { Route, useRouteMatch } from 'react-router-dom'
+import { Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import Content from 'components/Content'
+import { JobDistributorsScreen } from 'src/screens/JobDistributors/JobDistributorsScreen'
 import { EditFeedsManagerScreen } from '../../screens/EditFeedsManager/EditFeedsManagerScreen'
 import { FeedsManagerScreen } from '../../screens/FeedsManager/FeedsManagerScreen'
 import { NewFeedsManagerScreen } from '../../screens/NewFeedsManager/NewFeedsManagerScreen'
@@ -11,17 +12,23 @@ export const FeedsManagerPage = function () {
 
   return (
     <Content>
-      <Route exact path={`${path}/new`}>
-        <NewFeedsManagerScreen />
-      </Route>
+      <Switch>
+        <Route exact path={path}>
+          <JobDistributorsScreen />
+        </Route>
 
-      <Route exact path={path}>
-        <FeedsManagerScreen />
-      </Route>
+        <Route exact path={`${path}/new`}>
+          <NewFeedsManagerScreen />
+        </Route>
 
-      <Route exact path={`${path}/edit`}>
-        <EditFeedsManagerScreen />
-      </Route>
+        <Route exact path={`${path}/:id`}>
+          <FeedsManagerScreen />
+        </Route>
+
+        <Route exact path={`${path}/:id/edit`}>
+          <EditFeedsManagerScreen />
+        </Route>
+      </Switch>
     </Content>
   )
 }

src/screens/EditFeedsManager/EditFeedsManagerScreen.test.tsx

@@ -1,42 +1,40 @@
 import * as React from 'react'
 
+import { MockedProvider, MockedResponse } from '@apollo/client/testing'
+import userEvent from '@testing-library/user-event'
+import { GraphQLError } from 'graphql'
 import { Route } from 'react-router-dom'
 import {
   renderWithRouter,
   screen,
   waitForElementToBeRemoved,
 } from 'support/test-utils'
-import userEvent from '@testing-library/user-event'
-import { MockedProvider, MockedResponse } from '@apollo/client/testing'
 
+import Notifications from 'pages/Notifications'
+import { FEEDS_MANAGERS_QUERY } from 'src/hooks/queries/useFeedsManagersQuery'
 import { buildFeedsManager } from 'support/factories/gql/fetchFeedsManagers'
 import {
-  UPDATE_FEEDS_MANAGER_MUTATION,
   EditFeedsManagerScreen,
+  UPDATE_FEEDS_MANAGER_MUTATION,
 } from './EditFeedsManagerScreen'
-import { FEEDS_MANAGERS_QUERY } from 'src/hooks/queries/useFeedsManagersQuery'
-import Notifications from 'pages/Notifications'
-import { GraphQLError } from 'graphql'
 
 const { findByText, findByTestId, getByRole, queryByRole } = screen
 
 function renderComponent(mocks: MockedResponse[]) {
   renderWithRouter(
     <>
       <Notifications />
-      <Route exact path="/">
+      <Route exact path="/job_distributors/:id/edit">
         <MockedProvider mocks={mocks} addTypename={false}>
           <EditFeedsManagerScreen />
         </MockedProvider>
       </Route>
 
-      <Route exact path="/job_distributors/new">
-        New Redirect Success
-      </Route>
       <Route exact path="/job_distributors">
         Root Redirect Success
       </Route>
     </>,
+    { initialEntries: ['/job_distributors/1/edit'] },
   )
 }
 
@@ -85,7 +83,7 @@ describe('EditFeedsManagerScreen', () => {
 
     await waitForElementToBeRemoved(() => queryByRole('progressbar'))
 
-    expect(await findByText('New Redirect Success')).toBeInTheDocument()
+    expect(await findByText('Root Redirect Success')).toBeInTheDocument()
   })
 
   it('submits the form', async () => {
@@ -129,24 +127,6 @@ describe('EditFeedsManagerScreen', () => {
           },
         },
       },
-      {
-        request: {
-          query: FEEDS_MANAGERS_QUERY,
-        },
-        result: {
-          data: {
-            feedsManagers: {
-              results: [
-                buildFeedsManager({
-                  name: 'updated',
-                  uri: 'localhost:80812',
-                  publicKey: '22222',
-                }),
-              ],
-            },
-          },
-        },
-      },
     ]
 
     renderComponent(mocks)
@@ -263,18 +243,6 @@ describe('EditFeedsManagerScreen', () => {
           },
         },
       },
-      {
-        request: {
-          query: FEEDS_MANAGERS_QUERY,
-        },
-        result: {
-          data: {
-            feedsManagers: {
-              results: [mgr],
-            },
-          },
-        },
-      },
     ]
 
     renderComponent(mocks)

src/screens/EditFeedsManager/EditFeedsManagerScreen.tsx

@@ -1,21 +1,18 @@
 import React from 'react'
 
-import { useMutation, gql } from '@apollo/client'
+import { gql, useMutation } from '@apollo/client'
 import { FormikHelpers } from 'formik'
 import { useDispatch } from 'react-redux'
-import { Redirect, useLocation, useHistory } from 'react-router-dom'
+import { Redirect, useHistory, useParams } from 'react-router-dom'
 
-import { notifySuccessMsg, notifyErrorMsg } from 'actionCreators'
-import { EditFeedsManagerView } from './EditFeedsManagerView'
-import { GraphqlErrorHandler } from 'src/components/ErrorHandler/GraphqlErrorHandler'
-import { FormValues } from 'components/Form/FeedsManagerForm'
-import { parseInputErrors } from 'src/utils/inputErrors'
+import { notifyErrorMsg, notifySuccessMsg } from 'actionCreators'
 import { Loading } from 'components/Feedback/Loading'
-import {
-  useFeedsManagersQuery,
-  FEEDS_MANAGERS_QUERY,
-} from 'src/hooks/queries/useFeedsManagersQuery'
+import { FormValues } from 'components/Form/FeedsManagerForm'
+import { GraphqlErrorHandler } from 'src/components/ErrorHandler/GraphqlErrorHandler'
+import { useFeedsManagersQuery } from 'src/hooks/queries/useFeedsManagersQuery'
 import { useMutationErrorHandler } from 'src/hooks/useMutationErrorHandler'
+import { parseInputErrors } from 'src/utils/inputErrors'
+import { EditFeedsManagerView } from './EditFeedsManagerView'
 
 export const UPDATE_FEEDS_MANAGER_MUTATION = gql`
   mutation UpdateFeedsManager($id: ID!, $input: UpdateFeedsManagerInput!) {
@@ -45,18 +42,20 @@ export const UPDATE_FEEDS_MANAGER_MUTATION = gql`
   }
 `
 
+interface RouteParams {
+  id: string
+}
+
 export const EditFeedsManagerScreen: React.FC = () => {
+  const { id } = useParams<RouteParams>()
   const history = useHistory()
-  const location = useLocation()
   const dispatch = useDispatch()
   const { handleMutationError } = useMutationErrorHandler()
   const { data, loading, error } = useFeedsManagersQuery()
   const [updateFeedsManager] = useMutation<
     UpdateFeedsManager,
     UpdateFeedsManagerVariables
-  >(UPDATE_FEEDS_MANAGER_MUTATION, {
-    refetchQueries: [FEEDS_MANAGERS_QUERY],
-  })
+  >(UPDATE_FEEDS_MANAGER_MUTATION)
 
   if (loading) {
     return <Loading />
@@ -66,19 +65,13 @@ export const EditFeedsManagerScreen: React.FC = () => {
     return <GraphqlErrorHandler error={error} />
   }
 
-  // We currently only support a single feeds manager, but plan to support more
-  // in the future.
-  const manager =
-    data != undefined && data.feedsManagers.results[0]
-      ? data.feedsManagers.results[0]
-      : undefined
+  const manager = data?.feedsManagers.results.filter((x) => x.id === id)[0]
 
   if (!manager) {
     return (
       <Redirect
         to={{
-          pathname: '/job_distributors/new',
-          state: { from: location },
+          pathname: '/job_distributors',
         }}
       />
     )

src/screens/EditFeedsManager/EditFeedsManagerView.tsx

@@ -11,7 +11,7 @@ import {
 } from 'components/Form/FeedsManagerForm'
 
 type Props = {
-  data: FetchFeedsManagers['feedsManagers']['results'][number]
+  data: FetchFeedsManagersPayload_ResultsFields
 } & Pick<FormProps, 'onSubmit'>
 
 export const EditFeedsManagerView: React.FC<Props> = ({ data, onSubmit }) => {

src/screens/FeedsManager/FeedsManagerCard.test.tsx

@@ -16,7 +16,9 @@ function renderComponent(manager: FeedsManagerFields) {
       <Route path="/">
         <FeedsManagerCard manager={manager} />
       </Route>
-      <Route path="/job_distributors/edit">Redirect Success</Route>
+      <Route path={`/job_distributors/${manager.id}/edit`}>
+        Redirect Success
+      </Route>
     </>,
   )
 }

src/screens/FeedsManager/FeedsManagerCard.tsx

@@ -45,7 +45,7 @@ export const FeedsManagerCard = ({ manager }: Props) => {
             open={Boolean(anchorEl)}
             onClose={handleClose}
           >
-            <MenuItemLink to="/job_distributors/edit">
+            <MenuItemLink to={`/job_distributors/${manager.id}/edit`}>
               <ListItemIcon>
                 <EditIcon />
               </ListItemIcon>