diff --git a/.flowconfig b/.flowconfig
index d99ac06fb5..581524fbcf 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -12,6 +12,7 @@
 [lints]
 
 [options]
+module.system.node.resolve_dirname=node_modules
 module.name_mapper.extension='scss' -> 'empty/object'
 module.system=haste
 module.name_mapper='\(Applications\|Dashboard\|LoginPage\|Navigation\|Onboarding\|Policies\|services\|Stats\|Types\|Users\|utilities\|NewService\)\(.*\)$' -> '<PROJECT_ROOT>/app/javascript/src/\1/\2'
diff --git a/app/assets/stylesheets/provider/_forms.scss b/app/assets/stylesheets/provider/_forms.scss
index 7317af1371..53d1863e75 100644
--- a/app/assets/stylesheets/provider/_forms.scss
+++ b/app/assets/stylesheets/provider/_forms.scss
@@ -1,3 +1,5 @@
+$fieldset-margin-bottom: line-height-times(1.5);
+
 form.formtastic ol, form.formtastic ul {
   list-style: none;
 }
@@ -310,7 +312,7 @@ form.formtastic {
     position: relative;
     padding: line-height-times(1) 0 0 0;
     border-top: $border-width solid $border-color;
-    margin-bottom: line-height-times(1.5);
+    margin-bottom: $fieldset-margin-bottom;
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
@@ -533,10 +535,14 @@ li.hidden {
   display: none;
 }
 
-.errorMessage {
-  color: $error-color;
-}
+#new_service_wrapper {
+  .errorMessage {
+    color: $error-color;
+    margin-bottom: line-height-times(1/2);
+    margin-top: -#{$fieldset-margin-bottom};
+  }
 
-.new-service-source-input {
-  padding-left: line-height-times(5 / 10);
+  .new-service-source-input {
+    padding: 0 line-height-times(5 / 10);
+  }
 }
diff --git a/app/controllers/provider/admin/service_discovery/cluster_projects_controller.rb b/app/controllers/provider/admin/service_discovery/cluster_projects_controller.rb
index 110b659bee..479fb505ce 100644
--- a/app/controllers/provider/admin/service_discovery/cluster_projects_controller.rb
+++ b/app/controllers/provider/admin/service_discovery/cluster_projects_controller.rb
@@ -2,6 +2,7 @@
 
 class Provider::Admin::ServiceDiscovery::ClusterProjectsController < Provider::Admin::ServiceDiscovery::ClusterBaseController
   def index
-    render json: { projects: cluster.projects_with_discoverables.map(&:to_json) }
+    render json: cluster.projects_with_discoverables.map(&:name)
+                                                    .to_json
   end
 end
diff --git a/app/controllers/provider/admin/service_discovery/cluster_services_controller.rb b/app/controllers/provider/admin/service_discovery/cluster_services_controller.rb
index f69f23b2f5..d6d515f2b1 100644
--- a/app/controllers/provider/admin/service_discovery/cluster_services_controller.rb
+++ b/app/controllers/provider/admin/service_discovery/cluster_services_controller.rb
@@ -2,13 +2,20 @@
 
 class Provider::Admin::ServiceDiscovery::ClusterServicesController < Provider::Admin::ServiceDiscovery::ClusterBaseController
   def index
-    render json: { services: cluster.discoverable_services(namespace: params.require(:namespace_id)).map(&:to_json) }
+    render json: cluster.discoverable_services(namespace: namespace_id).map(&:name)
+                                                                       .to_json
   end
 
   def show
-    cluster_service = cluster.find_discoverable_service_by(namespace: params.require(:namespace_id), name: params[:id])
+    cluster_service = cluster.find_discoverable_service_by(namespace: namespace_id, name: params[:id])
     render json: cluster_service.to_json
   rescue ::ServiceDiscovery::ClusterClient::ResourceNotFound => exception
     render_error exception.message, status: :not_found
   end
+
+  private
+
+  def namespace_id
+    params.require(:namespace_id)
+  end
 end
diff --git a/app/javascript/src/NewService/components/FormElements/ErrorMessage.jsx b/app/javascript/src/NewService/components/FormElements/ErrorMessage.jsx
index b6261419b6..1ce26b6e49 100644
--- a/app/javascript/src/NewService/components/FormElements/ErrorMessage.jsx
+++ b/app/javascript/src/NewService/components/FormElements/ErrorMessage.jsx
@@ -4,9 +4,11 @@ import React from 'react'
 
 const ErrorMessage = ({fetchErrorMessage}: {
   fetchErrorMessage: string
-}) => <p className='errorMessage'>
-  {`Sorry, your request has failed with the error: ${fetchErrorMessage}`}
-</p>
+}) => (
+  <p className='errorMessage'>
+    {`Sorry, your request has failed with the error: ${fetchErrorMessage}`}
+  </p>
+)
 
 export {
   ErrorMessage
diff --git a/app/javascript/src/NewService/components/FormElements/Select.jsx b/app/javascript/src/NewService/components/FormElements/Select.jsx
index 808ff034f6..4105a01b56 100644
--- a/app/javascript/src/NewService/components/FormElements/Select.jsx
+++ b/app/javascript/src/NewService/components/FormElements/Select.jsx
@@ -2,34 +2,29 @@
 
 import React from 'react'
 
-type Option = {
-  metadata: {
-    name: string
-  }
-}
-
 type Props = {
   name: string,
   id: string,
+  disabled?: boolean,
   onChange?: (event: SyntheticEvent<HTMLSelectElement>) => void,
-  options: Array<Option>
+  options: Array<string>
 }
 
 const Options = ({options}) => {
-  return options.map(option => {
-    const { name } = option.metadata
-    return <option key={name} value={name}>{name}</option>
+  return options.map((option) => {
+    return <option key={option} value={option}>{option}</option>
   })
 }
 
-const Select = ({name, id, onChange, options}: Props) =>
+const Select = ({name, id, disabled, onChange, options}: Props) =>
   <select
     required="required"
     name={name}
     id={id}
+    disabled={disabled}
     onChange={onChange}
   >
-    {<Options options={options}/>}
+    <Options options={options}/>
   </select>
 
 export {Select}
diff --git a/app/javascript/src/NewService/components/FormElements/ServiceDiscoveryListItems.jsx b/app/javascript/src/NewService/components/FormElements/ServiceDiscoveryListItems.jsx
index 5f447e00ba..7194f0f219 100644
--- a/app/javascript/src/NewService/components/FormElements/ServiceDiscoveryListItems.jsx
+++ b/app/javascript/src/NewService/components/FormElements/ServiceDiscoveryListItems.jsx
@@ -1,27 +1,53 @@
 // @flow
 
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import {Label, Select} from 'NewService/components/FormElements'
+import {fetchData} from 'utilities/utils'
+import {BASE_PATH} from 'NewService'
 
 type Props = {
-  fetchServices: (namespace: string) => Promise<void>,
   projects: string[],
-  services: string[]
+  onError: (err: string) => void
 }
 
 const ServiceDiscoveryListItems = (props: Props) => {
-  const {fetchServices, projects, services} = props
+  const { projects, onError } = props
+
+  const [services, setServices] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (projects && projects.length) {
+      fetchServices(projects[0])
+    }
+  }, [projects])
+
+  const fetchServices = async (namespace: string) => {
+    setLoading(true)
+    setServices([])
+
+    try {
+      const services = await fetchData<string[]>(`${BASE_PATH}/namespaces/${namespace}/services.json`)
+      setServices(services)
+    } catch (error) {
+      onError(error.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return (
     <React.Fragment>
       <li id="service_name_input" className="string required">
         <Label
-          htmlFor='namespace'
+          htmlFor='service_namespace'
           label='Namespace'
         />
         <Select
+          disabled={loading}
           name='service[namespace]'
           id='service_namespace'
-          onChange={(e) => fetchServices(e.currentTarget.value)}
+          onChange={e => { fetchServices(e.currentTarget.value) }}
           options={projects}
         />
       </li>
@@ -31,6 +57,7 @@ const ServiceDiscoveryListItems = (props: Props) => {
           label='Name'
         />
         <Select
+          disabled={loading}
           name='service[name]'
           id='service_name'
           options={services}
diff --git a/app/javascript/src/NewService/components/FormElements/index.jsx b/app/javascript/src/NewService/components/FormElements/index.jsx
index 5999e6c080..74811b0200 100644
--- a/app/javascript/src/NewService/components/FormElements/index.jsx
+++ b/app/javascript/src/NewService/components/FormElements/index.jsx
@@ -1,3 +1,5 @@
+// @flow
+
 export {FormWrapper} from 'NewService/components/FormElements/FormWrapper'
 export {HiddenServiceDiscoveryInput} from 'NewService/components/FormElements/HiddenServiceDiscoveryInput'
 export {Label} from 'NewService/components/FormElements/Label'
diff --git a/app/javascript/src/NewService/components/NewServiceForm.jsx b/app/javascript/src/NewService/components/NewServiceForm.jsx
index 253f3ef77a..7408d8caa1 100644
--- a/app/javascript/src/NewService/components/NewServiceForm.jsx
+++ b/app/javascript/src/NewService/components/NewServiceForm.jsx
@@ -18,14 +18,15 @@ const NewServiceForm = (props: Props) => {
     providerAdminServiceDiscoveryServicesPath, adminServicesPath} = props
 
   const [formMode, setFormMode] = useState('manual')
+  const [loadingProjects, setLoadingProjects] = useState(false)
 
-  const handleFormsVisibility = (event: SyntheticEvent<HTMLSelectElement>) => {
+  const handleFormsVisibility = (event: SyntheticEvent<HTMLInputElement>) => {
     setFormMode(event.currentTarget.value)
   }
 
   const formToRender = () => formMode === 'manual' || !isServiceDiscoveryAccessible
     ? <ServiceManualForm formActionPath={adminServicesPath}/>
-    : <ServiceDiscoveryForm formActionPath={providerAdminServiceDiscoveryServicesPath}/>
+    : <ServiceDiscoveryForm formActionPath={providerAdminServiceDiscoveryServicesPath} setLoadingProjects={setLoadingProjects} />
 
   return (
     <React.Fragment>
@@ -35,6 +36,7 @@ const NewServiceForm = (props: Props) => {
           isServiceDiscoveryUsable={isServiceDiscoveryUsable}
           serviceDiscoveryAuthenticateUrl={serviceDiscoveryAuthenticateUrl}
           handleFormsVisibility={handleFormsVisibility}
+          loadingProjects={loadingProjects}
         />
       }
       {formToRender()}
diff --git a/app/javascript/src/NewService/components/ServiceDiscoveryForm.jsx b/app/javascript/src/NewService/components/ServiceDiscoveryForm.jsx
index 855b1b0626..bea1b32cdc 100644
--- a/app/javascript/src/NewService/components/ServiceDiscoveryForm.jsx
+++ b/app/javascript/src/NewService/components/ServiceDiscoveryForm.jsx
@@ -1,47 +1,43 @@
 // @flow
 
-import React from 'react'
-import {useState, useEffect} from 'react'
+import React, {useEffect} from 'react'
 
 import {FormWrapper, ErrorMessage,
   ServiceDiscoveryListItems} from 'NewService/components/FormElements'
 import {fetchData} from 'utilities/utils'
-import type {FormProps} from 'NewService/types'
 
-const BASE_PATH = '/p/admin/service_discovery'
-const PROJECTS_PATH = `${BASE_PATH}/projects.json`
+import {PROJECTS_PATH} from 'NewService'
 
-const ServiceDiscoveryForm = ({formActionPath}: {formActionPath: string}) => {
-  const [projects, setProjects] = useState([])
-  const [services, setServices] = useState([])
-  const [fetchErrorMessage, setFetchErrorMessage] = useState('')
+type Props = {
+  formActionPath: string,
+  setLoadingProjects: boolean => void
+}
+
+const ServiceDiscoveryForm = ({formActionPath, setLoadingProjects}: Props) => {
+  // Don't use named imports so that useState can be mocked in specs
+  const [projects, setProjects] = React.useState([])
+  const [fetchErrorMessage, setFetchErrorMessage] = React.useState('')
 
   const fetchProjects = async () => {
-    try {
-      const data = await fetchData(PROJECTS_PATH)
-      setProjects(data['projects'])
-      fetchServices(data.projects[0].metadata.name)
-    } catch (error) {
-      setFetchErrorMessage(error.message)
-    }
-  }
+    setLoadingProjects(true)
 
-  const fetchServices = async (namespace: string) => {
     try {
-      const data = await fetchData(`${BASE_PATH}/namespaces/${namespace}/services.json`)
-      setServices(data['services'])
+      const projects = await fetchData<string[]>(PROJECTS_PATH)
+      setProjects(projects)
     } catch (error) {
       setFetchErrorMessage(error.message)
+    } finally {
+      setLoadingProjects(false)
     }
   }
 
-  const listItemsProps = {fetchServices, projects, services}
+  const listItemsProps = {projects, onError: setFetchErrorMessage}
 
   useEffect(() => {
     fetchProjects()
   }, [])
 
-  const formProps: FormProps = {
+  const formProps = {
     id: 'service_source',
     formActionPath,
     hasHiddenServiceDiscoveryInput: true,
diff --git a/app/javascript/src/NewService/components/ServiceSourceForm.jsx b/app/javascript/src/NewService/components/ServiceSourceForm.jsx
index 88e4f58c99..7327c1c2c6 100644
--- a/app/javascript/src/NewService/components/ServiceSourceForm.jsx
+++ b/app/javascript/src/NewService/components/ServiceSourceForm.jsx
@@ -5,12 +5,13 @@ import React from 'react'
 type Props = {
   isServiceDiscoveryUsable: boolean,
   serviceDiscoveryAuthenticateUrl: string,
-  handleFormsVisibility: (event: SyntheticEvent<HTMLInputElement>) => void
+  handleFormsVisibility: (event: SyntheticEvent<HTMLInputElement>) => void,
+  loadingProjects: boolean
 }
 
 const ServiceSourceForm = (props: Props) => {
   const {isServiceDiscoveryUsable, serviceDiscoveryAuthenticateUrl,
-    handleFormsVisibility} = props
+    handleFormsVisibility, loadingProjects} = props
   const classNameDisabled = isServiceDiscoveryUsable ? '' : 'disabled'
   return (
     <form className="formtastic" id="new_service_source">
@@ -18,16 +19,31 @@ const ServiceSourceForm = (props: Props) => {
         <ol>
           <li className="radio">
             <label htmlFor="source_manual">
-              <input type="radio" name="source" id="source_manual" value="manual" defaultChecked="defaultChecked" onChange={handleFormsVisibility}/>
+              <input
+                type="radio"
+                name="source"
+                id="source_manual"
+                value="manual"
+                disabled={loadingProjects}
+                defaultChecked="defaultChecked"
+                onChange={handleFormsVisibility}
+              />
               <span className="new-service-source-input">Define manually</span>
             </label>
           </li>
           <li className="radio">
-            <label htmlFor="source_discover"
-              className={classNameDisabled}>
-              <input type="radio" name="source" id="source_discover" value="discover" disabled={!isServiceDiscoveryUsable} onChange={handleFormsVisibility}/>
+            <label htmlFor="source_discover" className={classNameDisabled}>
+              <input
+                type="radio"
+                name="source"
+                id="source_discover"
+                value="discover"
+                disabled={!isServiceDiscoveryUsable || loadingProjects}
+                onChange={handleFormsVisibility}
+              />
               <span className="new-service-source-input">Import from OpenShift</span>
-              { isServiceDiscoveryUsable ||
+              {loadingProjects && <i className="fa fa-spinner fa-spin" />}
+              {isServiceDiscoveryUsable ||
                 <a href={serviceDiscoveryAuthenticateUrl}>
                   {' (Authenticate to enable this option)'}
                 </a>
diff --git a/app/javascript/src/NewService/index.jsx b/app/javascript/src/NewService/index.jsx
index c357adaf6f..85abfdaa94 100644
--- a/app/javascript/src/NewService/index.jsx
+++ b/app/javascript/src/NewService/index.jsx
@@ -1,4 +1,9 @@
+// @flow
+
 export {NewServiceForm, NewServiceFormWrapper} from 'NewService/components/NewServiceForm'
 export {ServiceSourceForm} from 'NewService/components/ServiceSourceForm'
 export {ServiceDiscoveryForm} from 'NewService/components/ServiceDiscoveryForm'
 export {ServiceManualForm} from 'NewService/components/ServiceManualForm'
+
+export const BASE_PATH = '/p/admin/service_discovery'
+export const PROJECTS_PATH = `${BASE_PATH}/projects.json`
diff --git a/app/javascript/src/Types/libs/libdefs.js b/app/javascript/src/Types/libs/libdefs.js
index 0363668333..6c26d54a68 100644
--- a/app/javascript/src/Types/libs/libdefs.js
+++ b/app/javascript/src/Types/libs/libdefs.js
@@ -9,7 +9,22 @@ declare var module: {
 
 // TODO: remove these module declarations when not failing
 declare module 'whatwg-fetch' {
-  declare module.exports: fetch
+  declare type Options = {
+    method?: string,
+    body?: string,
+    headers?: Object,
+    credentials?: 'omit' | 'same-origin' | 'include'
+  }
+  declare type Response = {
+    status: number,
+    statusText: string,
+    ok: boolean,
+    headers: any,
+    url: string,
+    text: () => Promise<string>,
+    json: () => Promise<Object>
+  }
+  declare export function fetch (url: string, options: ?Options): Promise<Response>
 }
 
 declare module 'core-js/fn/symbol' {
diff --git a/app/javascript/src/utilities/utils.js b/app/javascript/src/utilities/utils.js
index 9d9f505e26..cbb9112b2b 100644
--- a/app/javascript/src/utilities/utils.js
+++ b/app/javascript/src/utilities/utils.js
@@ -26,15 +26,15 @@ function CSRFToken ({win = window}: {win?: Window}) {
   }
 }
 
-const fetchData = (url: string) => {
+const fetchData = <T>(url: string): Promise<T> => {
   return fetchPolyfill(url)
-    .then((response) => {
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(response.statusText)
+      }
+
       return response.json()
     })
-    .then(data => data)
-    .catch(error => {
-      console.error(error)
-    })
 }
 
 export {
diff --git a/app/views/api/services/new.html.slim b/app/views/api/services/new.html.slim
index 9be7318b1c..73722e9ce5 100644
--- a/app/views/api/services/new.html.slim
+++ b/app/views/api/services/new.html.slim
@@ -1,6 +1,7 @@
 = javascript_pack_tag 'new_service'
-#new_service_wrapper data-new-service-data={isServiceDiscoveryAccessible: service_discovery_accessible?,
-isServiceDiscoveryUsable: service_discovery_usable?,
-serviceDiscoveryAuthenticateUrl: service_discovery_presenter.authorize_url,
-providerAdminServiceDiscoveryServicesPath: provider_admin_service_discovery_services_path,
-adminServicesPath: admin_services_path}.to_json
+
+#new_service_wrapper data-new-service-data={ isServiceDiscoveryAccessible: service_discovery_accessible?,
+                                             isServiceDiscoveryUsable: service_discovery_usable?,
+                                             serviceDiscoveryAuthenticateUrl: service_discovery_presenter.authorize_url,
+                                             providerAdminServiceDiscoveryServicesPath: provider_admin_service_discovery_services_path,
+                                             adminServicesPath: admin_services_path }.to_json
diff --git a/spec/javascripts/NewService/NewServiceForm.spec.jsx b/spec/javascripts/NewService/NewServiceForm.spec.jsx
index 0eb48007c1..3d19723c7b 100644
--- a/spec/javascripts/NewService/NewServiceForm.spec.jsx
+++ b/spec/javascripts/NewService/NewServiceForm.spec.jsx
@@ -1,8 +1,14 @@
+// @flow
+
 import React from 'react'
 import Enzyme, {mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
-import {NewServiceForm} from 'NewService'
+import {NewServiceForm, ServiceManualForm, ServiceDiscoveryForm} from 'NewService'
+
+import * as utils from 'utilities/utils'
+jest.spyOn(utils, 'CSRFToken')
+  .mockImplementation(() => '')
 
 Enzyme.configure({adapter: new Adapter()})
 
@@ -13,10 +19,6 @@ const props = {
   providerAdminServiceDiscoveryServicesPath: 'my-path',
   adminServicesPath: 'my-other-path'
 }
-const discoveryNotUsableProps = {
-  ...props,
-  isServiceDiscoveryUsable: false
-}
 
 it('should render itself', () => {
   const wrapper = mount(<NewServiceForm {...props}/>)
@@ -24,40 +26,19 @@ it('should render itself', () => {
   expect(wrapper.find(`input[name='source']`).length).toEqual(2)
 })
 
-it('should render new Service Manual form', () => {
+it('should render the correct form depending on which mode is selected', () => {
   const wrapper = mount(<NewServiceForm {...props}/>)
-  expect(wrapper.find('#new_service').exists()).toEqual(true)
-  expect(wrapper.find('#service_discovery').exists()).toEqual(false)
-})
+  const clickEvent = value => ({ currentTarget: { value } })
 
-// TODO: remove `skip` when this is merged: https://github.com/airbnb/enzyme/pull/2008
-it.skip('should render new Service Discovery form when click on input', () => {
-  const wrapper = mount(<NewServiceForm {...props}/>)
-  wrapper.find('#source_discover').simulate('click')
+  wrapper.find('input#source_discover').props().onChange(clickEvent(''))
   wrapper.update()
-  expect(wrapper.find('#new_service').exists()).toEqual(false)
-  expect(wrapper.find('#service_discovery').exists()).toEqual(true)
-})
+  expect(wrapper.find(ServiceManualForm).exists()).toEqual(false)
+  expect(wrapper.find(ServiceDiscoveryForm).exists()).toEqual(true)
 
-it('should render `Import from OpenShift` input enabled when Service Discovery is usable', () => {
-  const wrapper = mount(<NewServiceForm {...props}/>)
-  expect(wrapper.props().isServiceDiscoveryUsable).toEqual(true)
-  expect(wrapper.find('#source_discover').props().disabled).toEqual(false)
-  expect(wrapper.find('#source_discover + span').text()).toEqual('Import from OpenShift')
-})
-
-it('should render `Import from OpenShift` input disabled when Service Discovery is not usable', () => {
-  const wrapper = mount(<NewServiceForm {...discoveryNotUsableProps}/>)
-  expect(wrapper.props().isServiceDiscoveryUsable).toEqual(false)
-  expect(wrapper.find('#source_discover').props().disabled).toEqual(true)
-})
-
-it('should render `(Authenticate to enable this option)` link when Service Discovery is not usable', () => {
-  const wrapper = mount(<NewServiceForm {...discoveryNotUsableProps}/>)
-  const link = wrapper.find(`label[htmlFor='source_discover'] a`)
-  expect(link.exists()).toEqual(true)
-  expect(link.text()).toEqual(' (Authenticate to enable this option)')
-  expect(link.props().href).toEqual('authenticate-url')
+  wrapper.find('input#source_manual').props().onChange(clickEvent('manual'))
+  wrapper.update()
+  expect(wrapper.find(ServiceManualForm).exists()).toEqual(true)
+  expect(wrapper.find(ServiceDiscoveryForm).exists()).toEqual(false)
 })
 
 describe('when Service Discovery is not accessible', () => {
diff --git a/spec/javascripts/NewService/ServiceDiscoveryForm.spec.jsx b/spec/javascripts/NewService/ServiceDiscoveryForm.spec.jsx
index 4711bb1e62..b3ea919185 100644
--- a/spec/javascripts/NewService/ServiceDiscoveryForm.spec.jsx
+++ b/spec/javascripts/NewService/ServiceDiscoveryForm.spec.jsx
@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react'
 import Enzyme, {shallow, mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
@@ -6,10 +8,15 @@ import {ServiceDiscoveryForm} from 'NewService'
 import {FormWrapper, ErrorMessage,
   ServiceDiscoveryListItems} from 'NewService/components/FormElements'
 
+import * as utils from 'utilities/utils'
+jest.spyOn(utils, 'CSRFToken')
+  .mockImplementation(() => '')
+
 Enzyme.configure({adapter: new Adapter()})
 
 const props = {
-  formActionPath: 'action-path'
+  formActionPath: 'action-path',
+  setLoadingProjects: () => {}
 }
 
 it('should render itself', () => {
@@ -19,11 +26,6 @@ it('should render itself', () => {
   expect(form.props().formActionPath).toEqual('action-path')
 })
 
-it('should not render `ErrorMessage` child by default', () => {
-  const wrapper = shallow(<ServiceDiscoveryForm {...props}/>)
-  expect(wrapper.find(ErrorMessage).exists()).toEqual(false)
-})
-
 it('should render `FormWrapper` child', () => {
   const wrapper = mount(<ServiceDiscoveryForm {...props}/>)
   expect(wrapper.find(FormWrapper).exists()).toEqual(true)
@@ -33,3 +35,40 @@ it('should render `ServiceDiscoveryListItems` child', () => {
   const wrapper = mount(<ServiceDiscoveryForm {...props}/>)
   expect(wrapper.find(ServiceDiscoveryListItems).exists()).toEqual(true)
 })
+
+describe('fetchProjects', () => {
+  const fetch = jest.spyOn(utils, 'fetchData')
+
+  afterEach(() => {
+    fetch.mockClear()
+  })
+
+  it('should render an error when fetching projects is unsuccessful', done => {
+    const msg = 'Something went wrong'
+    fetch.mockImplementation(url => { throw new Error(msg) })
+
+    const wrapper = mount(<ServiceDiscoveryForm {...props}/>)
+
+    expect(wrapper.find(ErrorMessage).exists()).toBe(true)
+    expect(wrapper.find(ErrorMessage).text()).toContain(msg)
+
+    setImmediate(done)
+  })
+
+  it('should fetch projects when first redendered', done => {
+    const projects = [{ name: 'project_00' }]
+    fetch.mockImplementation(url => projects)
+
+    const setState = jest.fn(val => {
+      expect(val).toEqual(projects)
+      done()
+    })
+    const useState = jest.spyOn(React, 'useState')
+      .mockImplementationOnce(init => [init, setState])
+
+    mount(<ServiceDiscoveryForm {...props}/>)
+
+    expect(useState).toHaveBeenCalled()
+    expect(fetch).toHaveBeenCalled()
+  })
+})
diff --git a/spec/javascripts/NewService/ServiceManualForm.spec.jsx b/spec/javascripts/NewService/ServiceManualForm.spec.jsx
index 79a691476f..bb9fc3f787 100644
--- a/spec/javascripts/NewService/ServiceManualForm.spec.jsx
+++ b/spec/javascripts/NewService/ServiceManualForm.spec.jsx
@@ -5,6 +5,10 @@ import Adapter from 'enzyme-adapter-react-16'
 import {ServiceManualForm} from 'NewService'
 import {FormWrapper, ServiceManualListItems} from 'NewService/components/FormElements'
 
+import * as utils from 'utilities/utils'
+jest.spyOn(utils, 'CSRFToken')
+  .mockImplementation(() => '')
+
 Enzyme.configure({adapter: new Adapter()})
 
 const props = {
diff --git a/spec/javascripts/NewService/ServiceSourceForm.spec.jsx b/spec/javascripts/NewService/ServiceSourceForm.spec.jsx
index 45513a9277..2094fba237 100644
--- a/spec/javascripts/NewService/ServiceSourceForm.spec.jsx
+++ b/spec/javascripts/NewService/ServiceSourceForm.spec.jsx
@@ -1,31 +1,70 @@
+// @flow
+
 import React from 'react'
-import Enzyme, {shallow} from 'enzyme'
+import { act } from 'react-dom/test-utils'
+import Enzyme, {mount, shallow} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import {ServiceSourceForm} from 'NewService'
 
 Enzyme.configure({adapter: new Adapter()})
 
+const serviceDiscoveryAuthenticateUrl = 'my-url'
 const props = {
   isServiceDiscoveryUsable: true,
-  serviceDiscoveryAuthenticateUrl: 'my-url',
-  handleFormsVisibility: jest.fn()
+  serviceDiscoveryAuthenticateUrl,
+  handleFormsVisibility: () => {},
+  loadingProjects: false
 }
 
 it('should render itself', () => {
-  const wrapper = shallow(<ServiceSourceForm {...props}/>)
-  expect(wrapper.find('#new_service_source').exists()).toEqual(true)
+  const wrapper = mount(<ServiceSourceForm {...props} />)
+  expect(wrapper.find(ServiceSourceForm).exists()).toEqual(true)
+})
+
+it('should render all possible sources for the new service', () => {
+  const wrapper = shallow(<ServiceSourceForm {...props} />)
+
+  const manual = wrapper.find('[htmlFor="source_manual"]')
+  expect(manual.exists()).toBe(true)
+  expect(manual.find('input').prop('type')).toBe('radio')
+  expect(manual.text()).toBe('Define manually')
+
+  const discovery = wrapper.find('[htmlFor="source_discover"]')
+  expect(discovery.exists()).toBe(true)
+  expect(discovery.find('input').prop('type')).toBe('radio')
+  expect(discovery.text()).toBe('Import from OpenShift')
 })
 
-it('should call `handleFormsVisibility`', () => {
-  const wrapper = shallow(<ServiceSourceForm {...props}/>)
+it('should call `handleFormsVisibility` when changing the source', () => {
+  const wrapper = shallow(<ServiceSourceForm {...props} />)
+  const handleFormsVisibility = jest.fn()
+  wrapper.setProps({ handleFormsVisibility })
+
   wrapper.find('#source_discover').simulate('change')
-  expect(props.handleFormsVisibility).toHaveBeenCalled()
+  expect(handleFormsVisibility).toHaveBeenCalled()
 })
 
-it('should render `Import from OpenShift` input disabled when Service Discovery is not usable', () => {
-  const propsNotUsable = {...props, isServiceDiscoveryUsable: false}
-  const wrapper = shallow(<ServiceSourceForm {...propsNotUsable}/>)
-  expect(wrapper.find('#source_discover + span').text()).toEqual('Import from OpenShift')
-  expect(wrapper.find('#source_discover').props().disabled).toEqual(true)
+it('should render a spinner when loading projects', () => {
+  const wrapper = shallow(<ServiceSourceForm {...props} />)
+
+  wrapper.setProps({ loadingProjects: true })
+  expect(wrapper.find('.fa-spinner').exists()).toBe(true)
+
+  wrapper.setProps({ loadingProjects: false })
+  expect(wrapper.find('.fa-spinner').exists()).toBe(false)
+})
+
+it('should render a link to authenticate when Service Discovery is not usable', () => {
+  const wrapper = shallow(<ServiceSourceForm {...props} />)
+
+  act(() => {
+    wrapper.setProps({ isServiceDiscoveryUsable: false })
+  })
+  expect(wrapper.find(`a[href="${serviceDiscoveryAuthenticateUrl}"]`).exists()).toBe(true)
+
+  act(() => {
+    wrapper.setProps({ isServiceDiscoveryUsable: true })
+  })
+  expect(wrapper.find(`a[href="${serviceDiscoveryAuthenticateUrl}"]`).exists()).toBe(false)
 })
diff --git a/spec/javascripts/NewService/formElements/FormWrapper.spec.jsx b/spec/javascripts/NewService/formElements/FormWrapper.spec.jsx
index 25cc911ca3..a89474278c 100644
--- a/spec/javascripts/NewService/formElements/FormWrapper.spec.jsx
+++ b/spec/javascripts/NewService/formElements/FormWrapper.spec.jsx
@@ -1,38 +1,51 @@
+// @flow
+
 import React from 'react'
-import Enzyme, {mount} from 'enzyme'
+import Enzyme, {shallow} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import {FormWrapper} from 'NewService/components/FormElements'
 import {HiddenServiceDiscoveryInput} from 'NewService/components/FormElements'
-import {CSRFToken} from 'utilities/utils'
 
 Enzyme.configure({adapter: new Adapter()})
 
+const submitText = 'Add API'
 const props = {
   id: 'form-id',
   formActionPath: 'my-path',
   hasHiddenServiceDiscoveryInput: true,
-  submitText: 'Add API'
+  submitText
 }
 
 it('should render itself', () => {
-  const wrapper = mount(<FormWrapper {...props}/>)
+  const wrapper = shallow(<FormWrapper {...props}/>)
   expect(wrapper.find('#form-id').exists()).toEqual(true)
 })
 
+it('should render an empty input', () => {
+  const wrapper = shallow(<FormWrapper {...props}/>)
+  const input = wrapper.find(`input[name="utf8"][type='hidden']`)
+  expect(input.exists()).toBe(true)
+})
+
 it('should render submit button with proper text', () => {
-  const wrapper = mount(<FormWrapper {...props}/>)
-  expect(wrapper.find(`input[type='submit']`).props().value).toEqual('Add API')
-  expect(wrapper.find(HiddenServiceDiscoveryInput).exists()).toEqual(true)
-  expect(wrapper.find(CSRFToken).exists()).toEqual(true)
+  const wrapper = shallow(<FormWrapper {...props}/>)
+  const button = wrapper.find(`input[type='submit']`)
+  expect(button.exists()).toBe(true)
+  expect(button.prop('value')).toEqual(submitText)
 })
 
-it('should render `HiddenServiceDiscoveryInput` child', () => {
-  const wrapper = mount(<FormWrapper {...props}/>)
+it('should render a hidden input for service discovery when required', () => {
+  const wrapper = shallow(<FormWrapper {...props}/>)
+
+  wrapper.setProps({ hasHiddenServiceDiscoveryInput: false })
+  expect(wrapper.find(HiddenServiceDiscoveryInput).exists()).toEqual(false)
+
+  wrapper.setProps({ hasHiddenServiceDiscoveryInput: true })
   expect(wrapper.find(HiddenServiceDiscoveryInput).exists()).toEqual(true)
 })
 
 it('should render `CSRFToken` child', () => {
-  const wrapper = mount(<FormWrapper {...props}/>)
-  expect(wrapper.find(CSRFToken).exists()).toEqual(true)
+  const wrapper = shallow(<FormWrapper {...props}/>)
+  expect(wrapper.find('CSRFToken').exists()).toEqual(true)
 })
diff --git a/spec/javascripts/NewService/formElements/Select.spec.jsx b/spec/javascripts/NewService/formElements/Select.spec.jsx
index fe8ca49120..7ac84fdb4b 100644
--- a/spec/javascripts/NewService/formElements/Select.spec.jsx
+++ b/spec/javascripts/NewService/formElements/Select.spec.jsx
@@ -1,32 +1,41 @@
+// @flow
+
 import React from 'react'
-import Enzyme, {mount} from 'enzyme'
+import Enzyme, {mount, shallow} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import {Select} from 'NewService/components/FormElements'
 
 Enzyme.configure({adapter: new Adapter()})
 
+const options = ['project_01', 'project_02']
 const props = {
   name: 'my-select',
   id: 'select-id',
-  onChange: jest.fn(),
-  options: [
-    {metadata: {name: 'one'}},
-    {metadata: {name: 'two'}}
-  ]
+  options
 }
 
 it('should render itself properly', () => {
   const wrapper = mount(<Select {...props}/>)
-  expect(wrapper.find('select').exists()).toEqual(true)
-  expect(wrapper.find('select').props().name).toEqual('my-select')
-  expect(wrapper.find('select').props().id).toEqual('select-id')
-  expect(wrapper.find('select').props().onChange).toEqual(props.onChange)
+  expect(wrapper.find(Select).exists()).toEqual(true)
 })
 
-it('should render with proper options', () => {
+it('should render a select with options', () => {
   const wrapper = mount(<Select {...props}/>)
-  expect(wrapper.find('option').length).toEqual(2)
-  expect(wrapper.find('option').first().props().value).toEqual('one')
-  expect(wrapper.find('option').last().props().value).toEqual('two')
+  expect(wrapper.find('select').exists()).toEqual(true)
+
+  for (let option of options) {
+    expect(wrapper.exists(`option[value="${option}"]`)).toEqual(true)
+  }
+})
+
+it('should call onChange when an option is selected', () => {
+  const option = 'foo'
+  const onChange = jest.fn()
+  const wrapper = shallow(<Select {...props}/>)
+
+  wrapper.setProps({ onChange })
+  wrapper.find('select').simulate('change', option)
+
+  expect(onChange).toHaveBeenCalledWith(option)
 })
diff --git a/spec/javascripts/NewService/formElements/ServiceDiscoveryListItems.spec.jsx b/spec/javascripts/NewService/formElements/ServiceDiscoveryListItems.spec.jsx
index b10ae678ad..df5085363f 100644
--- a/spec/javascripts/NewService/formElements/ServiceDiscoveryListItems.spec.jsx
+++ b/spec/javascripts/NewService/formElements/ServiceDiscoveryListItems.spec.jsx
@@ -1,29 +1,76 @@
+// @flow
+
 import React from 'react'
-import Enzyme, {shallow} from 'enzyme'
+import {act} from 'react-dom/test-utils'
+import Enzyme, {mount, shallow, render} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import {ServiceDiscoveryListItems} from 'NewService/components/FormElements'
-import {Label, Select} from 'NewService/components/FormElements'
+import * as utils from 'utilities/utils'
+import { BASE_PATH } from 'NewService'
 
 Enzyme.configure({adapter: new Adapter()})
 
-const props = {
-  fetchServices: jest.fn(),
-  projects: ['one', 'two'],
-  services: ['three', 'four']
-}
+const projects = ['project_00', 'project_01']
+const onError = jest.fn()
+const props = { projects, onError }
 
 it('should render itself', () => {
   const wrapper = shallow(<ServiceDiscoveryListItems {...props}/>)
   expect(wrapper.find('#service_name_input').exists()).toEqual(true)
 })
 
-it('should render two `Label` children', () => {
-  const wrapper = shallow(<ServiceDiscoveryListItems {...props}/>)
-  expect(wrapper.find(Label).length).toBe(2)
+it('should render a field to select a project', () => {
+  const wrapper = render(<ServiceDiscoveryListItems {...props}/>)
+
+  expect(wrapper.find('label[for="service_namespace"]')).toHaveLength(1)
+  expect(wrapper.find('select[id="service_namespace"][name="service[namespace]"]')).toHaveLength(1)
 })
 
-it('should render two `Select` children', () => {
-  const wrapper = shallow(<ServiceDiscoveryListItems {...props}/>)
-  expect(wrapper.find(Select).length).toBe(2)
+it('should render a field to select a service', () => {
+  const wrapper = render(<ServiceDiscoveryListItems {...props}/>)
+
+  expect(wrapper.find('label[for="service_name"]')).toHaveLength(1)
+  expect(wrapper.find('select[id="service_name"][name="service[name]"]')).toHaveLength(1)
+})
+
+describe('fetchServices', () => {
+  const fetch = jest.spyOn(utils, 'fetchData')
+
+  afterEach(() => {
+    fetch.mockClear()
+  })
+
+  it('should fetch services with a project is selected', () => {
+    const namespace = 'my-project'
+    const wrapper = mount(<ServiceDiscoveryListItems {...props}/>)
+
+    act(() => {
+      wrapper.find('select#service_namespace').prop('onChange')({ currentTarget: { value: namespace } })
+    })
+    expect(fetch).toHaveBeenLastCalledWith(`${BASE_PATH}/namespaces/${namespace}/services.json`)
+  })
+
+  it('should re fetch services when the list of projects is updated', () => {
+    const wrapper = mount(<ServiceDiscoveryListItems {...props}/>)
+
+    expect(fetch).toHaveBeenLastCalledWith(`${BASE_PATH}/namespaces/${projects[0]}/services.json`)
+
+    const newProject = 'project_03'
+    wrapper.setProps({ projects: [newProject] })
+
+    expect(fetch).toHaveBeenLastCalledWith(`${BASE_PATH}/namespaces/${newProject}/services.json`)
+  })
+
+  it('should disable the inputs while fetching services', () => {
+    fetch.mockImplementation(() => {
+      expect(wrapper.find('select').every(n => n.prop('disabled'))).toBe(true)
+    })
+
+    const wrapper = mount(<ServiceDiscoveryListItems {...props}/>)
+
+    act(() => {
+      wrapper.find('select#service_namespace').prop('onChange')({ currentTarget: { value: 'namespace' } })
+    })
+  })
 })
diff --git a/spec/javascripts/NewService/formElements/ServiceManualListItems.spec.jsx b/spec/javascripts/NewService/formElements/ServiceManualListItems.spec.jsx
index 4c043a3b8c..35b47934f2 100644
--- a/spec/javascripts/NewService/formElements/ServiceManualListItems.spec.jsx
+++ b/spec/javascripts/NewService/formElements/ServiceManualListItems.spec.jsx
@@ -1,14 +1,20 @@
 import React from 'react'
-import Enzyme, {shallow} from 'enzyme'
+import Enzyme, {mount, shallow} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import {ServiceManualListItems} from 'NewService/components/FormElements'
 
 Enzyme.configure({adapter: new Adapter()})
 
-it('should render properly', () => {
+it('should render itself', () => {
+  const wrapper = mount(<ServiceManualListItems/>)
+  expect(wrapper.find(ServiceManualListItems).exists()).toEqual(true)
+})
+
+it('should render all required forms', () => {
   const wrapper = shallow(<ServiceManualListItems/>)
-  expect(wrapper.find('#service_name_input').exists()).toEqual(true)
-  expect(wrapper.find('#service_system_name_input').exists()).toEqual(true)
-  expect(wrapper.find('#service_description_input').exists()).toEqual(true)
+
+  expect(wrapper.find('[id="service_name"][type="text"][name="service[name]"]').exists()).toBe(true)
+  expect(wrapper.find('[id="service_system_name"][type="text"][name="service[system_name]"]').exists()).toBe(true)
+  expect(wrapper.find('[id="service_description"][name="service[description]"]').exists()).toBe(true)
 })
diff --git a/spec/javascripts/Policies/components/PolicyList.spec.jsx b/spec/javascripts/Policies/components/PolicyList.spec.jsx
index 080e8b2312..861a9aec69 100644
--- a/spec/javascripts/Policies/components/PolicyList.spec.jsx
+++ b/spec/javascripts/Policies/components/PolicyList.spec.jsx
@@ -38,6 +38,5 @@ it('should navigate to the edit link', () => {
   const url = '/p/admin/registry/policies/answer-42/edit'
   navigateToEditPolicy(url, mockedWindow)
   expect(mockedWindow.location.href).toBe(url)
-  console.log(JSON.stringify(mockedWindow.history))
   expect(mockedWindow.history.pushState.mock.calls[0][2]).toBe(url)
 })