Adding new service discovery react components with flow types

.flowconfig

@@ -13,4 +13,4 @@
 [options]
 module.name_mapper.extension='scss' -> 'empty/object'
 module.system=haste
-module.name_mapper='\(Applications\|Dashboard\|Navigation\|Onboarding\|Policies\|services\|Stats\|Types\|Users\|utilities\)\(.*\)$' -> '<PROJECT_ROOT>/app/javascript/src/\1/\2'
+module.name_mapper='\(Applications\|Dashboard\|Navigation\|Onboarding\|Policies\|services\|Stats\|Types\|Users\|utilities\|NewService\)\(.*\)$' -> '<PROJECT_ROOT>/app/javascript/src/\1/\2'

app/assets/stylesheets/provider/_forms.scss

@@ -529,3 +529,11 @@ form.formtastic fieldset > ol > li fieldset legend.label label {
 li.hidden {
   display: none;
 }
+
+.errorMessage {
+  color: $error-color;
+}
+
+.new-service-source-input {
+  padding-left: line-height-times(5 / 10);
+}

app/javascript/packs/new_service.js

@@ -0,0 +1,9 @@
+import {NewServiceFormWrapper} from 'NewService'
+import {safeFromJsonString} from 'utilities/json-utils'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const newServiceWrapper = document.getElementById('new_service_wrapper')
+  const newServiceFormProps = safeFromJsonString(newServiceWrapper.dataset.newServiceData)
+
+  NewServiceFormWrapper(newServiceFormProps, 'new_service_wrapper')
+})

app/javascript/src/NewService/components/FormElements/ErrorMessage.jsx

@@ -0,0 +1,13 @@
+// @flow
+
+import React from 'react'
+
+const ErrorMessage = ({fetchErrorMessage}: {
+  fetchErrorMessage: string
+}) => <p className='errorMessage'>
+  {`Sorry, your request has failed with the error: ${fetchErrorMessage}`}
+</p>
+
+export {
+  ErrorMessage
+}

app/javascript/src/NewService/components/FormElements/FormWrapper.jsx

@@ -0,0 +1,38 @@
+// @flow
+
+import React from 'react'
+import type {FormProps} from 'NewService/types'
+import {CSRFToken} from 'utilities/utils'
+import {HiddenServiceDiscoveryInput} from 'NewService/components/FormElements'
+
+const FormWrapper = (props: FormProps) => {
+  const {id, formActionPath, hasHiddenServiceDiscoveryInput, submitText} = props
+  return (
+    <form
+      className='formtastic service'
+      id={id}
+      action={formActionPath}
+      acceptCharset="UTF-8"
+      method="post"
+    >
+      <input name="utf8" type="hidden" value="✓"/>
+      <CSRFToken />
+      {hasHiddenServiceDiscoveryInput && <HiddenServiceDiscoveryInput />}
+      <fieldset className="inputs" name="Service">
+        <legend><span>Service</span></legend>
+        <ol>
+          {props.children}
+        </ol>
+      </fieldset>
+      <fieldset className="buttons">
+        <input
+          type="submit"
+          name="commit"
+          value={submitText}
+          className="important-button create"/>
+      </fieldset>
+    </form>
+  )
+}
+
+export {FormWrapper}

app/javascript/src/NewService/components/FormElements/HiddenServiceDiscoveryInput.jsx

@@ -0,0 +1,13 @@
+// @flow
+
+import React from 'react'
+
+const HiddenServiceDiscoveryInput = () =>
+  <input
+    value='discover'
+    type='hidden'
+    name='service[source]'
+    id='service_source'
+  />
+
+export {HiddenServiceDiscoveryInput}

app/javascript/src/NewService/components/FormElements/Label.jsx

@@ -0,0 +1,17 @@
+// @flow
+
+import React from 'react'
+
+type Props = {
+  htmlFor: string,
+  label: string,
+  required?: boolean
+}
+const Label = (props: Props) => {
+  const {htmlFor, label, required} = props
+  return <label htmlFor={htmlFor}>{label}
+    {required && <abbr title="required">*</abbr>}
+  </label>
+}
+
+export {Label}

app/javascript/src/NewService/components/FormElements/Select.jsx

@@ -0,0 +1,35 @@
+// @flow
+
+import React from 'react'
+
+type Option = {
+  metadata: {
+    name: string
+  }
+}
+
+type Props = {
+  name: string,
+  id: string,
+  onChange?: (event: SyntheticEvent<HTMLSelectElement>) => void,
+  options: Array<Option>
+}
+
+const Options = ({options}) => {
+  return options.map(option => {
+    const { name } = option.metadata
+    return <option key={name} value={name}>{name}</option>
+  })
+}
+
+const Select = ({name, id, onChange, options}: Props) =>
+  <select
+    required="required"
+    name={name}
+    id={id}
+    onChange={onChange}
+  >
+    {<Options options={options}/>}
+  </select>
+
+export {Select}

app/javascript/src/NewService/components/FormElements/ServiceDiscoveryListItems.jsx

@@ -0,0 +1,43 @@
+// @flow
+
+import React from 'react'
+import {Label, Select} from 'NewService/components/FormElements'
+
+type Props = {
+  fetchServices: (namespace: string) => Promise<void>,
+  projects: string[],
+  services: string[]
+}
+
+const ServiceDiscoveryListItems = (props: Props) => {
+  const {fetchServices, projects, services} = props
+  return (
+    <React.Fragment>
+      <li id="service_name_input" className="string required">
+        <Label
+          htmlFor='namespace'
+          label='Namespace'
+        />
+        <Select
+          name='service[namespace]'
+          id='service_namespace'
+          onChange={(e) => fetchServices(e.currentTarget.value)}
+          options={projects}
+        />
+      </li>
+      <li>
+        <Label
+          htmlFor='service_name'
+          label='Name'
+        />
+        <Select
+          name='service[name]'
+          id='service_name'
+          options={services}
+        />
+      </li>
+    </React.Fragment>
+  )
+}
+
+export {ServiceDiscoveryListItems}

app/javascript/src/NewService/components/FormElements/ServiceManualListItems.jsx

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react'
+import {Label} from 'NewService/components/FormElements'
+
+const ServiceManualListItems = () =>
+  <React.Fragment>
+    <li id="service_name_input" className="string required">
+      <Label
+        htmlFor='service_name'
+        label='Name'
+        required
+      />
+      <input maxLength="255" id="service_name" type="text" name="service[name]" autoFocus="autoFocus"/>
+    </li>
+    <li id="service_system_name_input" className="string required">
+      <Label
+        htmlFor='service_system_name'
+        label='System name'
+        required
+      />
+      <input maxLength="255" id="service_system_name" type="text" name="service[system_name]"/>
+      <p className="inline-hints">
+        Only ASCII letters, numbers, dashes and underscores are allowed.
+      </p>
+    </li>
+    <li id="service_description_input" className="text optional">
+      <Label
+        htmlFor='service_description'
+        label='Description'
+      />
+      <textarea rows="3" id="service_description" name="service[description]"></textarea>
+    </li>
+  </React.Fragment>
+
+export {ServiceManualListItems}

app/javascript/src/NewService/components/FormElements/index.jsx

@@ -0,0 +1,7 @@
+export {FormWrapper} from 'NewService/components/FormElements/FormWrapper'
+export {HiddenServiceDiscoveryInput} from 'NewService/components/FormElements/HiddenServiceDiscoveryInput'
+export {Label} from 'NewService/components/FormElements/Label'
+export {Select} from 'NewService/components/FormElements/Select'
+export {ErrorMessage} from 'NewService/components/FormElements/ErrorMessage'
+export {ServiceDiscoveryListItems} from 'NewService/components/FormElements/ServiceDiscoveryListItems'
+export {ServiceManualListItems} from 'NewService/components/FormElements/ServiceManualListItems'

app/javascript/src/NewService/components/NewServiceForm.jsx

@@ -0,0 +1,45 @@
+// @flow
+
+import React, {useState} from 'react'
+
+import {ServiceSourceForm, ServiceDiscoveryForm, ServiceManualForm} from 'NewService'
+import {createReactWrapper} from 'utilities/createReactWrapper'
+
+type Props = {
+  isServiceDiscoveryUsable: boolean,
+  serviceDiscoveryAuthenticateUrl: string,
+  providerAdminServiceDiscoveryServicesPath: string,
+  adminServicesPath: string
+}
+
+const NewServiceForm = (props: Props) => {
+  const {isServiceDiscoveryUsable, serviceDiscoveryAuthenticateUrl,
+    providerAdminServiceDiscoveryServicesPath, adminServicesPath} = props
+
+  const [formMode, setFormMode] = useState('manual')
+
+  const handleFormsVisibility = (event: SyntheticEvent<HTMLSelectElement>) => {
+    setFormMode(event.currentTarget.value)
+  }
+
+  const formToRender = () => formMode === 'manual'
+    ? <ServiceManualForm formActionPath={adminServicesPath}/>
+    : <ServiceDiscoveryForm formActionPath={providerAdminServiceDiscoveryServicesPath}/>
+
+  return (
+    <React.Fragment>
+      <h1>New API</h1>
+      <ServiceSourceForm
+        isServiceDiscoveryUsable={isServiceDiscoveryUsable}
+        serviceDiscoveryAuthenticateUrl={serviceDiscoveryAuthenticateUrl}
+        handleFormsVisibility={handleFormsVisibility}
+      />
+      {formToRender()}
+    </React.Fragment>
+  )
+}
+
+const NewServiceFormWrapper = (props: Props, containerId: string) =>
+  createReactWrapper(<NewServiceForm {...props} />, containerId)
+
+export {NewServiceForm, NewServiceFormWrapper}

app/javascript/src/NewService/components/ServiceDiscoveryForm.jsx

@@ -0,0 +1,63 @@
+// @flow
+
+import React from 'react'
+import {useState, 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`
+
+const ServiceDiscoveryForm = ({formActionPath}: {formActionPath: string}) => {
+  const [projects, setProjects] = useState([])
+  const [services, setServices] = useState([])
+  const [fetchErrorMessage, setFetchErrorMessage] = 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)
+    }
+  }
+
+  const fetchServices = async (namespace: string) => {
+    try {
+      const data = await fetchData(`${BASE_PATH}/namespaces/${namespace}/services.json`)
+      setServices(data['services'])
+    } catch (error) {
+      setFetchErrorMessage(error.message)
+    }
+  }
+
+  const listItemsProps = {fetchServices, projects, services}
+
+  useEffect(() => {
+    fetchProjects()
+  }, [])
+
+  const formProps: FormProps = {
+    id: 'service_source',
+    formActionPath,
+    hasHiddenServiceDiscoveryInput: true,
+    submitText: 'Create Service'
+  }
+
+  return (
+    <React.Fragment>
+      {fetchErrorMessage && <ErrorMessage fetchErrorMessage={fetchErrorMessage}/>}
+      <FormWrapper {...formProps}>
+        <ServiceDiscoveryListItems {...listItemsProps}/>
+      </FormWrapper>
+    </React.Fragment>
+  )
+}
+
+export {
+  ServiceDiscoveryForm
+}

app/javascript/src/NewService/components/ServiceManualForm.jsx

@@ -0,0 +1,23 @@
+// @flow
+
+import React from 'react'
+import {FormWrapper, ServiceManualListItems} from 'NewService/components/FormElements'
+import type {FormProps} from 'NewService/types'
+
+const ServiceManualForm = ({formActionPath}: {formActionPath: string}) => {
+  const formProps: FormProps = {
+    id: 'new_service',
+    formActionPath,
+    submitText: 'Add API'
+  }
+
+  return (
+    <FormWrapper {...formProps}>
+      <ServiceManualListItems/>
+    </FormWrapper>
+  )
+}
+
+export {
+  ServiceManualForm
+}