[settings] Settings Form component

app/javascript/src/Settings/components/Form.jsx

@@ -0,0 +1,58 @@
+// @flow
+
+import * as React from 'react'
+import { useState } from 'react'
+import { FormFieldset, FormLegend } from 'Form'
+import { FormCollection, TextInputGroup, RadioFieldset } from 'Settings/components/Common'
+import { AuthenticationSettingsFieldset } from 'Settings/components/AuthenticationSettingsFieldset'
+import type { SettingsProps as Props } from 'Settings/types'
+
+const SERVICE_MESH_INTEGRATION = 'service_mesh_istio'
+const PROXY_HOSTED_INTEGRATION = 'hosted'
+
+const Form = ({
+  isProxyCustomUrlActive,
+  integrationMethod,
+  authenticationMethod,
+  proxyEndpoints,
+  authenticationSettings,
+  credentialsLocation,
+  security,
+  gatewayResponse
+}: Props) => {
+  const [ selectedIntegrationMethod, setSelectedIntegrationMethod ] = useState(integrationMethod.value)
+  const [ selectedAuthenticationMethod, setSelectedAuthenticationMethod ] = useState(authenticationMethod.value)
+  const onChange = (setState) => (_checked, e) => setState(e.currentTarget.value)
+  const isServiceMesh = selectedIntegrationMethod === SERVICE_MESH_INTEGRATION
+  const isProxyHosted = selectedIntegrationMethod === PROXY_HOSTED_INTEGRATION
+  const isProxyUrlsReadOnly = !isProxyCustomUrlActive && isProxyHosted
+  const customProxyEndpoints = proxyEndpoints.map(endpoint =>
+    ({ ...endpoint, readOnly: isProxyUrlsReadOnly, isDefaultValue: isProxyUrlsReadOnly }))
+
+  return (
+    <React.Fragment>
+      <RadioFieldset {...integrationMethod} onChange={onChange(setSelectedIntegrationMethod)} value={selectedIntegrationMethod} legend='Integration' />
+      { !isServiceMesh && <FormCollection collection={customProxyEndpoints} ItemComponent={TextInputGroup} legend='API gateway' /> }
+      <RadioFieldset {...authenticationMethod} onChange={onChange(setSelectedAuthenticationMethod)} value={selectedAuthenticationMethod} legend='Authentication' />
+      <AuthenticationSettingsFieldset
+        isServiceMesh={isServiceMesh}
+        authenticationMethod={selectedAuthenticationMethod}
+        {...authenticationSettings}
+      />
+      { !isServiceMesh && <React.Fragment>
+        <RadioFieldset {...credentialsLocation} legend='Credentials Location' />
+        <FormCollection collection={security} ItemComponent={TextInputGroup} legend='Security' />
+        <FormFieldset id='fieldset-GatewayResponse'>
+          <FormLegend>Gateway Response</FormLegend>
+          {gatewayResponse.map(settings => (
+            <FormCollection key={settings.legend} collection={settings.collection} ItemComponent={TextInputGroup} legend={settings.legend} />
+          ))}
+        </FormFieldset>
+      </React.Fragment> }
+    </React.Fragment>
+  )
+}
+
+export {
+  Form
+}

app/javascript/src/Settings/index.jsx

@@ -0,0 +1,21 @@
+// @flow
+
+import * as React from 'react'
+import { createReactWrapper } from 'utilities/createReactWrapper'
+import { Form } from 'Settings/components/Form'
+import { SETTINGS_DEFAULT } from 'Settings/defaults'
+import type { SettingsProps } from 'Settings/types'
+
+type Props = {
+  settings: SettingsProps,
+  elementId: string
+}
+
+const initSettings = ({
+  settings = SETTINGS_DEFAULT,
+  elementId
+}: Props) => createReactWrapper(<Form {...settings} />, elementId)
+
+export {
+  initSettings
+}

spec/javascripts/Settings/components/Form.spec.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { Form } from 'Settings/components/Form'
+import {
+  SETTINGS_DEFAULT,
+  INTEGRATION_METHOD_DEFAULTS
+} from 'Settings/defaults'
+
+function setup (customProps = {}) {
+  const props = {
+    ...SETTINGS_DEFAULT,
+    ...customProps
+  }
+
+  const view = shallow(<Form {...props} />)
+
+  return { view, props }
+}
+
+it('should render correctly', () => {
+  const { view } = setup()
+  expect(view).toMatchSnapshot()
+})
+
+it('should not render Auth Settings, Security, Credential Locations and API Gateway when Istio is selected', () => {
+  const customProps = { integrationMethod: {...INTEGRATION_METHOD_DEFAULTS, value: 'service_mesh_istio'} }
+  const { view } = setup(customProps)
+  expect(view).toMatchSnapshot()
+})