[settings] New integration settings component

.flowconfig

@@ -15,4 +15,4 @@
 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'
+module.name_mapper='\(Applications\|Form\|Settings\|Dashboard\|LoginPage\|Navigation\|Onboarding\|Policies\|services\|Stats\|Types\|Users\|utilities\|NewService\)\(.*\)$' -> '<PROJECT_ROOT>/app/javascript/src/\1/\2'

app/javascript/packs/settingsPageStyles.js

@@ -0,0 +1 @@
+import 'patternflyStyles/settingsPage'

app/javascript/src/Form/FormFieldset.jsx

@@ -2,34 +2,23 @@
 // TODO: Replace this component when patternfly-react implements it.
 
 import * as React from 'react'
+// $FlowFixMe Flow has troubles with @patternfly modules
 import { FormContext } from '@patternfly/react-core/dist/js/components/Form/FormContext'
-// $FlowFixMe
+// $FlowFixMe Flow has troubles with @patternfly modules
 import styles from '@patternfly/react-styles/css/components/Form/form'
-// $FlowFixMe
+// $FlowFixMe Flow has troubles with @patternfly modules
 import { css, getModifier } from '@patternfly/react-styles'
 
 type Props = {
   children?: React.Node,
   className?: string,
-  label?: React.Node,
-  isRequired?: boolean,
-  isValid?: boolean,
-  isInline?: boolean,
-  helperText?: React.Node,
-  helperTextInvalid?: React.Node,
-  fieldId: string
+  isInline?: boolean
 }
 
 const FormFieldset = ({
   children,
   className = '',
-  label,
-  isRequired = false,
-  isValid = true,
   isInline = false,
-  helperText,
-  helperTextInvalid,
-  fieldId,
   ...props
 }: Props) => (
   <FormContext.Consumer>
@@ -38,26 +27,7 @@ const FormFieldset = ({
         {...props}
         className={css(styles.formFieldset, isInline ? getModifier(styles, 'inline', className) : className)}
       >
-        {label && (
-          <label className={css(styles.formLabel)} htmlFor={fieldId}>
-            <span className={css(styles.formLabelText)}>{label}</span>
-            {isRequired && (
-              <span className={css(styles.formLabelRequired)} aria-hidden="true">
-                {'*'}
-              </span>
-            )}
-          </label>
-        )}
         {isHorizontal ? <div className={css(styles.formHorizontalGroup)}>{children}</div> : children}
-        {((isValid && helperText) || (!isValid && helperTextInvalid)) && (
-          <div
-            className={css(styles.formHelperText, !isValid ? getModifier(styles, 'error') : '')}
-            id={`${fieldId}-helper`}
-            aria-live="polite"
-          >
-            {isValid ? helperText : helperTextInvalid}
-          </div>
-        )}
       </fieldset>
     )}
   </FormContext.Consumer>

app/javascript/src/Form/index.jsx

@@ -0,0 +1,4 @@
+// @flow
+
+export * from 'Form/FormFieldset'
+export * from 'Form/FormLegend'

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

@@ -0,0 +1,47 @@
+// @flow
+
+import * as React from 'react'
+import { FormFieldset, FormLegend } from 'Form'
+import { FormCollection, TextInputGroup } from 'Settings/components/Common'
+import { OidcFieldset } from 'Settings/components/OidcFieldset'
+import type { FieldGroupProps, TypeItemProps } from 'Settings/types'
+
+const OIDC_AUTH_METHOD = 'oidc'
+const API_KEY_METHOD = '1'
+const APP_ID_KEY_METHOD = '2'
+
+type Props = {
+  isServiceMesh: boolean,
+  authenticationMethod: string,
+  apiKeySettings: FieldGroupProps,
+  appIdKeyPairSettings: FieldGroupProps[],
+  oidcSettings: {
+    basicSettings: TypeItemProps,
+    flowSettings: FieldGroupProps[],
+    jwtSettings: TypeItemProps
+  }
+}
+
+const AuthenticationSettingsFieldset = ({
+  isServiceMesh,
+  authenticationMethod,
+  apiKeySettings,
+  appIdKeyPairSettings,
+  oidcSettings
+}: Props) => {
+  const isOidc = authenticationMethod === OIDC_AUTH_METHOD
+  const isApiKey = authenticationMethod === API_KEY_METHOD
+  const isAppIdKey = authenticationMethod === APP_ID_KEY_METHOD
+  return (
+    (!isServiceMesh || isOidc) && <FormFieldset id='fieldset-AuthenticationSettings'>
+      <FormLegend>Authentication Settings</FormLegend>
+      { isApiKey && <FormCollection collection={[apiKeySettings]} ItemComponent={TextInputGroup} legend='API KEY (USER_KEY) BASICS' /> }
+      { isAppIdKey && <FormCollection collection={appIdKeyPairSettings} ItemComponent={TextInputGroup} legend='APP_ID AND APP_KEY PAIR BASICS' /> }
+      { isOidc && <OidcFieldset {...oidcSettings} isServiceMesh={isServiceMesh} /> }
+    </FormFieldset>
+  )
+}
+
+export {
+  AuthenticationSettingsFieldset
+}

app/javascript/src/Settings/components/Common/FormCollection.jsx

@@ -0,0 +1,24 @@
+// @flow
+
+import * as React from 'react'
+import { FormFieldset, FormLegend } from 'Form'
+import type { FieldGroupProps } from 'Settings/types'
+
+type Props = {
+  collection: FieldGroupProps[],
+  ItemComponent: (FieldGroupProps) => React.Element<empty>,
+  legend: string
+}
+
+const FormCollection = ({collection, ItemComponent, legend}: Props) => {
+  return (
+    <FormFieldset id={`fieldset-${legend.replace(/\s+/g, '')}`}>
+      <FormLegend>{legend}</FormLegend>
+      { collection.map(itemProps => <ItemComponent {...itemProps} key={itemProps.name} />) }
+    </FormFieldset>
+  )
+}
+
+export {
+  FormCollection
+}

app/javascript/src/Settings/components/Common/RadioFieldset.jsx

@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from 'react'
+import { useState } from 'react'
+import { FormFieldset, FormLegend } from 'Form'
+import { Radio } from '@patternfly/react-core'
+import type { FieldGroupProps, FieldCatalogProps } from 'Settings/types'
+
+type CheckEvent = SyntheticEvent<HTMLButtonElement>
+
+type Props = FieldGroupProps & FieldCatalogProps
+
+const useSelectedOnChange = (value, onChange) => (
+  typeof onChange === 'function'
+    ? [value, onChange]
+    : useState(value).map(x => typeof x === 'function' ? (_c, e: CheckEvent) => x(e.currentTarget.value) : x)
+)
+
+const RadioFieldset = ({
+  children,
+  legend,
+  name,
+  value,
+  catalog,
+  onChange,
+  ...props
+}: Props) => {
+  const [selectedOnChange, setSelectedOnChange] = useSelectedOnChange(value, onChange)
+  return (
+    <FormFieldset id={`fieldset-${name}`} {...props} >
+      <FormLegend>{legend}</FormLegend>
+      {Object.keys(catalog).map(key => (
+        <Radio
+          key={key}
+          value={key}
+          isChecked={selectedOnChange === key}
+          name={`service[${name}]`}
+          onChange={setSelectedOnChange}
+          label={catalog[key]}
+          id={`service_method_${name}_${key}`}
+        />
+      ))}
+      {children}
+    </FormFieldset>
+  )
+}
+
+export {
+  RadioFieldset
+}

app/javascript/src/Settings/components/Common/SelectGroup.jsx

@@ -0,0 +1,44 @@
+// @flow
+
+import * as React from 'react'
+import { useState } from 'react'
+import { FormGroup, Select, SelectOption } from '@patternfly/react-core'
+import type { FieldGroupProps, FieldCatalogProps } from 'Settings/types'
+
+type Props = FieldGroupProps & FieldCatalogProps
+
+const SelectGroup = ({
+  label,
+  name,
+  hint,
+  value,
+  catalog
+}: Props) => {
+  const [ selectedValue, setSelectedValue ] = useState(value)
+  const [ isExpanded, setIsExpanded ] = useState(false)
+  const onSelect = (_e, selection) => {
+    setIsExpanded(false)
+    setSelectedValue(selection.key)
+  }
+
+  return (
+    <FormGroup label={label} fieldId={`service_proxy_attributes_${name}_select`} helperText={hint}>
+      <input name={`service[proxy_attributes][${name}]`} type='hidden' value={selectedValue} />
+      <Select
+        selections={catalog[selectedValue]}
+        onToggle={setIsExpanded}
+        onSelect={onSelect}
+        isExpanded={isExpanded}
+        id={`service_proxy_attributes_${name}_select`}
+      >
+        {Object.keys(catalog).map(key => (
+          <SelectOption key={catalog[key]} value={{ key, toString: () => catalog[key] }} />
+        ))}
+      </Select>
+    </FormGroup>
+  )
+}
+
+export {
+  SelectGroup
+}

app/javascript/src/Settings/components/Common/TextInputGroup.jsx

@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react'
+import { useState } from 'react'
+import { FormGroup, TextInput } from '@patternfly/react-core'
+import type { FieldGroupProps } from 'Settings/types'
+
+const TextInputGroup = ({
+  defaultValue,
+  placeholder,
+  label,
+  name,
+  hint,
+  value,
+  isDefaultValue = false,
+  readOnly = false,
+  inputType = 'text'
+}: FieldGroupProps) => {
+  const [ inputValue, setInputValue ] = useState(value)
+  const onChange = (value, _e) => setInputValue(value)
+  return (
+    <FormGroup label={label} fieldId={`service_proxy_attributes_${name}_input`} helperText={hint}>
+      <TextInput
+        id={`service_proxy_attributes_${name}_input`}
+        name={`service[proxy_attributes][${name}]`}
+        placeholder={placeholder}
+        value={isDefaultValue ? defaultValue : inputValue}
+        type={inputType}
+        onChange={onChange}
+        isReadOnly={readOnly}
+      />
+    </FormGroup>
+  )
+}
+
+export {
+  TextInputGroup
+}

app/javascript/src/Settings/components/Common/TypeItemCombo.jsx

@@ -0,0 +1,26 @@
+// @flow
+
+import * as React from 'react'
+import { FormFieldset, FormLegend } from 'Form'
+import { TextInputGroup, SelectGroup } from 'Settings/components/Common'
+import type { FieldGroupProps, FieldCatalogProps } from 'Settings/types'
+
+type Props = {
+  type: FieldCatalogProps & FieldGroupProps,
+  item: FieldGroupProps,
+  legend: string
+}
+
+const TypeItemCombo = ({ type, item, legend }: Props) => {
+  return (
+    <FormFieldset id={`fieldset-${legend.replace(/\s+/g, '')}`}>
+      <FormLegend>{legend}</FormLegend>
+      <SelectGroup {...type} />
+      <TextInputGroup {...item} />
+    </FormFieldset>
+  )
+}
+
+export {
+  TypeItemCombo
+}

app/javascript/src/Settings/components/Common/index.jsx

@@ -0,0 +1,7 @@
+// @flow
+
+export * from 'Settings/components/Common/FormCollection'
+export * from 'Settings/components/Common/SelectGroup'
+export * from 'Settings/components/Common/TextInputGroup'
+export * from 'Settings/components/Common/RadioFieldset'
+export * from 'Settings/components/Common/TypeItemCombo'

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
+}