[OPCORE-858]: fix(NewFeedsManagerScreen): no longer redirect

.changeset/chilly-garlics-remember.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+stop redirect to /job_distributors/ when there are registered job distributors

src/screens/NewFeedsManager/NewFeedsManagerScreen.test.tsx

@@ -1,24 +1,20 @@
 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 { renderWithRouter, screen } from 'support/test-utils'
 
-import { buildFeedsManager } from 'support/factories/gql/fetchFeedsManagers'
+import Notifications from 'pages/Notifications'
 import { FEEDS_MANAGERS_QUERY } from 'src/hooks/queries/useFeedsManagersQuery'
+import { buildFeedsManager } from 'support/factories/gql/fetchFeedsManagers'
 import {
   CREATE_FEEDS_MANAGER_MUTATION,
   NewFeedsManagerScreen,
 } from './NewFeedsManagerScreen'
-import Notifications from 'pages/Notifications'
 
-const { findByTestId, findByText, getByRole } = screen
+const { findByTestId, findByText, getByRole, getByText, getByTestId } = screen
 
 function renderComponent(mocks: MockedResponse[]) {
   renderWithRouter(
@@ -37,66 +33,14 @@ function renderComponent(mocks: MockedResponse[]) {
 
 describe('NewFeedsManagerScreen', () => {
   it('renders the page', async () => {
-    const mocks: MockedResponse[] = [
-      {
-        request: {
-          query: FEEDS_MANAGERS_QUERY,
-        },
-        result: {
-          data: {
-            feedsManagers: {
-              results: [],
-            },
-          },
-        },
-      },
-    ]
-
-    renderComponent(mocks)
-
-    await waitForElementToBeRemoved(() => screen.queryByRole('progressbar'))
+    renderComponent([])
 
-    expect(await findByText('Register Job Distributor')).toBeInTheDocument()
-    expect(await findByTestId('feeds-manager-form')).toBeInTheDocument()
-  })
-
-  it('redirects when a manager exists', async () => {
-    const mocks: MockedResponse[] = [
-      {
-        request: {
-          query: FEEDS_MANAGERS_QUERY,
-        },
-        result: {
-          data: {
-            feedsManagers: {
-              results: [buildFeedsManager()],
-            },
-          },
-        },
-      },
-    ]
-
-    renderComponent(mocks)
-
-    await waitForElementToBeRemoved(() => screen.queryByRole('progressbar'))
-
-    expect(await findByText('Redirect Success')).toBeInTheDocument()
+    expect(getByText('Register Job Distributor')).toBeInTheDocument()
+    expect(getByTestId('feeds-manager-form')).toBeInTheDocument()
   })
 
   it('submits the form', async () => {
     const mocks: MockedResponse[] = [
-      {
-        request: {
-          query: FEEDS_MANAGERS_QUERY,
-        },
-        result: {
-          data: {
-            feedsManagers: {
-              results: [],
-            },
-          },
-        },
-      },
       {
         request: {
           query: CREATE_FEEDS_MANAGER_MUTATION,
@@ -133,9 +77,10 @@ describe('NewFeedsManagerScreen', () => {
 
     renderComponent(mocks)
 
-    await waitForElementToBeRemoved(() => screen.queryByRole('progressbar'))
-
-    // Note: The name input has a default value so we don't have to set it
+    userEvent.type(
+      getByRole('textbox', { name: 'Name *' }),
+      'Chainlink Feeds Manager',
+    )
     userEvent.type(getByRole('textbox', { name: 'URI *' }), 'localhost:8080')
     userEvent.type(getByRole('textbox', { name: 'Public Key *' }), '1111')
 
@@ -147,18 +92,6 @@ describe('NewFeedsManagerScreen', () => {
 
   it('handles input errors', async () => {
     const mocks: MockedResponse[] = [
-      {
-        request: {
-          query: FEEDS_MANAGERS_QUERY,
-        },
-        result: {
-          data: {
-            feedsManagers: {
-              results: [],
-            },
-          },
-        },
-      },
       {
         request: {
           query: CREATE_FEEDS_MANAGER_MUTATION,
@@ -201,9 +134,10 @@ describe('NewFeedsManagerScreen', () => {
 
     renderComponent(mocks)
 
-    await waitForElementToBeRemoved(() => screen.queryByRole('progressbar'))
-
-    // Note: The name input has a default value so we don't have to set it
+    userEvent.type(
+      getByRole('textbox', { name: 'Name *' }),
+      'Chainlink Feeds Manager',
+    )
     userEvent.type(getByRole('textbox', { name: 'URI *' }), 'localhost:8080')
     userEvent.type(getByRole('textbox', { name: 'Public Key *' }), '1111')
 
@@ -215,37 +149,8 @@ describe('NewFeedsManagerScreen', () => {
     )
   })
 
-  it('renders query GQL errors', async () => {
-    const mocks: MockedResponse[] = [
-      {
-        request: {
-          query: FEEDS_MANAGERS_QUERY,
-        },
-        result: {
-          errors: [new GraphQLError('Error!')],
-        },
-      },
-    ]
-
-    renderComponent(mocks)
-
-    expect(await findByText('Error: Error!')).toBeInTheDocument()
-  })
-
   it('renders mutation GQL errors', async () => {
     const mocks: MockedResponse[] = [
-      {
-        request: {
-          query: FEEDS_MANAGERS_QUERY,
-        },
-        result: {
-          data: {
-            feedsManagers: {
-              results: [],
-            },
-          },
-        },
-      },
       {
         request: {
           query: CREATE_FEEDS_MANAGER_MUTATION,
@@ -265,8 +170,10 @@ describe('NewFeedsManagerScreen', () => {
 
     renderComponent(mocks)
 
-    await waitForElementToBeRemoved(() => screen.queryByRole('progressbar'))
-
+    userEvent.type(
+      getByRole('textbox', { name: 'Name *' }),
+      'Chainlink Feeds Manager',
+    )
     userEvent.type(getByRole('textbox', { name: 'URI *' }), 'localhost:8080')
     userEvent.type(getByRole('textbox', { name: 'Public Key *' }), '1111')
 

src/screens/NewFeedsManager/NewFeedsManagerScreen.tsx

@@ -1,21 +1,16 @@
 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, useHistory, useLocation } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 
-import { notifySuccessMsg, notifyErrorMsg } from 'actionCreators'
-import { GraphqlErrorHandler } from 'src/components/ErrorHandler/GraphqlErrorHandler'
+import { notifyErrorMsg, notifySuccessMsg } from 'actionCreators'
 import { FormValues } from 'components/Form/FeedsManagerForm'
+import { FEEDS_MANAGERS_QUERY } from 'src/hooks/queries/useFeedsManagersQuery'
+import { useMutationErrorHandler } from 'src/hooks/useMutationErrorHandler'
 import { parseInputErrors } from 'src/utils/inputErrors'
-import { Loading } from 'src/components/Feedback/Loading'
 import { NewFeedsManagerView } from './NewFeedsManagerView'
-import {
-  FEEDS_MANAGERS_QUERY,
-  useFeedsManagersQuery,
-} from 'src/hooks/queries/useFeedsManagersQuery'
-import { useMutationErrorHandler } from 'src/hooks/useMutationErrorHandler'
 
 export const CREATE_FEEDS_MANAGER_MUTATION = gql`
   mutation CreateFeedsManager($input: CreateFeedsManagerInput!) {
@@ -34,6 +29,10 @@ export const CREATE_FEEDS_MANAGER_MUTATION = gql`
         message
         code
       }
+      ... on DuplicateFeedsManagerError {
+        message
+        code
+      }
       ... on NotFoundError {
         message
         code
@@ -51,32 +50,15 @@ export const CREATE_FEEDS_MANAGER_MUTATION = gql`
 
 export const NewFeedsManagerScreen: React.FC = () => {
   const history = useHistory()
-  const location = useLocation()
   const dispatch = useDispatch()
   const { handleMutationError } = useMutationErrorHandler()
-  const { data, loading, error } = useFeedsManagersQuery()
   const [createFeedsManager] = useMutation<
     CreateFeedsManager,
     CreateFeedsManagerVariables
   >(CREATE_FEEDS_MANAGER_MUTATION, {
-    refetchQueries: [FEEDS_MANAGERS_QUERY],
+    refetchQueries: [{ query: FEEDS_MANAGERS_QUERY }],
   })
 
-  if (loading) {
-    return <Loading />
-  }
-
-  if (error) {
-    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 handleSubmit = async (
     values: FormValues,
     { setErrors }: FormikHelpers<FormValues>,
@@ -94,7 +76,9 @@ export const NewFeedsManagerScreen: React.FC = () => {
           dispatch(notifySuccessMsg('Job Distributor Created'))
 
           break
+        // todo: remove SingleFeedsManagerError once multi feeds manager support is released
         case 'SingleFeedsManagerError':
+        case 'DuplicateFeedsManagerError':
         case 'NotFoundError':
           dispatch(notifyErrorMsg(payload.message))
 
@@ -111,16 +95,5 @@ export const NewFeedsManagerScreen: React.FC = () => {
     }
   }
 
-  if (manager) {
-    return (
-      <Redirect
-        to={{
-          pathname: '/job_distributors',
-          state: { from: location },
-        }}
-      />
-    )
-  }
-
   return <NewFeedsManagerView onSubmit={handleSubmit} />
 }

src/screens/NewFeedsManager/NewFeedsManagerView.test.tsx

@@ -14,7 +14,7 @@ describe('NewFeedsManagerView', () => {
 
     expect(getByText('Register Job Distributor')).toBeInTheDocument()
     expect(getByTestId('feeds-manager-form')).toHaveFormValues({
-      name: 'Chainlink Feeds Manager',
+      name: '',
       uri: '',
       publicKey: '',
     })

src/screens/NewFeedsManager/NewFeedsManagerView.tsx

@@ -11,7 +11,7 @@ import {
 } from 'components/Form/FeedsManagerForm'
 
 const initialValues = {
-  name: 'Chainlink Feeds Manager',
+  name: '',
   uri: '',
   publicKey: '',
 }