[OPCORE-858]: feat: Enable JD new home page and route changes

.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>