[settings] Authentication Settings component

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

spec/javascripts/Settings/components/AuthenticationSettingsFieldset.spec.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { AuthenticationSettingsFieldset } from 'Settings/components/AuthenticationSettingsFieldset'
+import { AUTHENTICATION_SETTINGS_DEFAULTS } from 'Settings/defaults'
+
+function setup (customProps = {}) {
+  const props = {
+    ...AUTHENTICATION_SETTINGS_DEFAULTS,
+    ...{
+      isServiceMesh: false,
+      authenticationMethod: '1'
+    },
+    ...customProps
+  }
+
+  const view = shallow(<AuthenticationSettingsFieldset {...props} />)
+
+  return { view, props }
+}
+
+it('should render correctly', () => {
+  const { view } = setup()
+  expect(view).toMatchSnapshot()
+})
+
+it('should not render when Service Mesh is active', () => {
+  const customProps = { isServiceMesh: true }
+  const { view } = setup(customProps)
+  expect(view).toMatchSnapshot()
+})
+
+it('should render only OIDC when Service Mesh is active and Oidc method is selected', () => {
+  const customProps = { isServiceMesh: true, authenticationMethod: 'oidc' }
+  const { view } = setup(customProps)
+  expect(view).toMatchSnapshot()
+})

spec/javascripts/Settings/components/__snapshots__/AuthenticationSettingsFieldset.spec.jsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render when Service Mesh is active 1`] = `""`;
+
+exports[`should render correctly 1`] = `
+<FormFieldset
+  id="fieldset-AuthenticationSettings"
+>
+  <FormLegend>
+    Authentication Settings
+  </FormLegend>
+  <FormCollection
+    ItemComponent={[Function]}
+    collection={
+      Array [
+        undefined,
+      ]
+    }
+    legend="API KEY (USER_KEY) BASICS"
+  />
+</FormFieldset>
+`;
+
+exports[`should render only OIDC when Service Mesh is active and Oidc method is selected 1`] = `
+<FormFieldset
+  id="fieldset-AuthenticationSettings"
+>
+  <FormLegend>
+    Authentication Settings
+  </FormLegend>
+  <OidcFieldset
+    isServiceMesh={true}
+  />
+</FormFieldset>
+`;