[settings] OIDC Component

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

@@ -0,0 +1,53 @@
+// @flow
+
+import React, {useState} from 'react'
+import { FormFieldset, FormLegend } from 'Form'
+import { Checkbox } from '@patternfly/react-core'
+import { FormCollection, TypeItemCombo } from 'Settings/components/Common'
+import type { TypeItemProps, FieldGroupProps } from 'Settings/types'
+
+const Basics = (props: TypeItemProps) => (
+  <TypeItemCombo {...props} legend='OIDC BASICS' inputType='url' />
+)
+
+const JsonWebToken = (props: TypeItemProps) => (
+  <TypeItemCombo {...props} legend='JSON Web Token (JWT) Claim with ClientID' inputType='text' />
+)
+
+const FlowItem = ({name, label, checked}: FieldGroupProps) => {
+  const [ isChecked, setIsChecked ] = useState(checked)
+  const onChange = (check, _e) => setIsChecked(check)
+  return (
+    <Checkbox
+      id={`service_proxy_attributes_oidc_configuration_attributes_${name}_input`}
+      name={`service[proxy_attributes][oidc_configuration_attributes][${name}]`}
+      label={label}
+      isChecked={isChecked}
+      onChange={onChange}
+    />
+  )
+}
+
+const AuthorizationFlow = (props: {collection: FieldGroupProps[]}) => (
+  <FormCollection {...props} ItemComponent={FlowItem} legend='OIDC Authorization flow' />
+)
+
+type Props = {
+  isServiceMesh: boolean,
+  basicSettings: TypeItemProps,
+  jwtSettings: TypeItemProps,
+  flowSettings: FieldGroupProps[]
+}
+
+const OidcFieldset = ({isServiceMesh, basicSettings, jwtSettings, flowSettings}: Props) => (
+  <FormFieldset id='fieldset-Oidc'>
+    <FormLegend>OPENID CONNECT (OIDC)</FormLegend>
+    <Basics {...basicSettings} />
+    { !isServiceMesh && <AuthorizationFlow collection={flowSettings} /> }
+    { !isServiceMesh && <JsonWebToken {...jwtSettings} /> }
+  </FormFieldset>
+)
+
+export {
+  OidcFieldset
+}

spec/javascripts/Settings/components/OidcFieldset.spec.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { OidcFieldset } from 'Settings/components/OidcFieldset'
+import { OIDC_SETTINGS_DEFAULTS } from 'Settings/defaults'
+
+function setup (customProps = {}) {
+  const props = {
+    ...OIDC_SETTINGS_DEFAULTS,
+    isServiceMesh: false,
+    ...customProps
+  }
+
+  const view = shallow(<OidcFieldset {...props} />)
+
+  return { view, props }
+}
+
+it('should render correctly', () => {
+  const { view } = setup()
+  expect(view).toMatchSnapshot()
+})
+
+it('should render only Basics  when Service Mesh is active', () => {
+  const customProps = { isServiceMesh: true }
+  const { view } = setup(customProps)
+  expect(view).toMatchSnapshot()
+})

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

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<FormFieldset
+  id="fieldset-Oidc"
+>
+  <FormLegend>
+    OPENID CONNECT (OIDC)
+  </FormLegend>
+  <Basics
+    item={
+      Object {
+        "hint": "Location of your OpenID Provider. The format of this endpoint is determined on your OpenID Provider setup. A common guidance would be \\"https://CLIENT_ID:CLIENT_SECRET@HOST:PORT/auth/realms/REALM_NAME\\".",
+        "label": "OpenID Connect Issuer",
+        "name": "oidc_issuer_endpoint",
+        "placeholder": "https://sso.example.com/auth/realms/gateway",
+        "value": "",
+      }
+    }
+    type={
+      Object {
+        "catalog": Object {
+          "keycloak": "Red Hat Single Sign-On",
+          "rest": "REST API",
+        },
+        "label": "OpenID Connect Issuer Type",
+        "name": "oidc_issuer_type",
+        "value": "keycloak",
+      }
+    }
+  />
+  <AuthorizationFlow
+    collection={
+      Array [
+        Object {
+          "checked": false,
+          "label": "Service Accounts Flow",
+          "name": "service_accounts_enabled",
+        },
+        Object {
+          "checked": false,
+          "label": "Authorization Code Flow",
+          "name": "standard_flow_enabled",
+        },
+        Object {
+          "checked": false,
+          "label": "Implicit Flow",
+          "name": "implicit_flow_enabled",
+        },
+        Object {
+          "checked": false,
+          "label": "Direct Access Grant Flow",
+          "name": "direct_access_grants_enabled",
+        },
+      ]
+    }
+  />
+  <JsonWebToken
+    item={
+      Object {
+        "hint": "The Token Claim that contains the clientID. Defaults to \\"azp\\".",
+        "label": "ClientID Token Claim",
+        "name": "jwt_claim_with_client_id",
+        "placeholder": "azp",
+        "value": "azp",
+      }
+    }
+    type={
+      Object {
+        "catalog": Object {
+          "liquid": "liquid",
+          "plain": "plain",
+        },
+        "hint": "Process the ClientID Token Claim value as a string or as a liquid template. When set to \\"Liquid\\" you can define more complex rules. e.g. If \\"some_claim\\" is an array you can select the first value this like {{ some_claim | first }}.",
+        "label": "ClientID Token Claim Type",
+        "name": "jwt_claim_with_client_id_type",
+        "value": "plain",
+      }
+    }
+  />
+</FormFieldset>
+`;
+
+exports[`should render only Basics  when Service Mesh is active 1`] = `
+<FormFieldset
+  id="fieldset-Oidc"
+>
+  <FormLegend>
+    OPENID CONNECT (OIDC)
+  </FormLegend>
+  <Basics
+    item={
+      Object {
+        "hint": "Location of your OpenID Provider. The format of this endpoint is determined on your OpenID Provider setup. A common guidance would be \\"https://CLIENT_ID:CLIENT_SECRET@HOST:PORT/auth/realms/REALM_NAME\\".",
+        "label": "OpenID Connect Issuer",
+        "name": "oidc_issuer_endpoint",
+        "placeholder": "https://sso.example.com/auth/realms/gateway",
+        "value": "",
+      }
+    }
+    type={
+      Object {
+        "catalog": Object {
+          "keycloak": "Red Hat Single Sign-On",
+          "rest": "REST API",
+        },
+        "label": "OpenID Connect Issuer Type",
+        "name": "oidc_issuer_type",
+        "value": "keycloak",
+      }
+    }
+  />
+</FormFieldset>
+`;