THREESCALE-2286: Refactor Service Discovery into a React component

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