From eb94ded90a298001c0793972f00341ae58c94a84 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 13 Apr 2021 02:05:00 +0200
Subject: [PATCH] more help items and small linout (#519)

* more help items and small linout

* fixed clicking the steps links clearing the form

* fixed validation when jumping pages

* changed help text

* Update src/clients/help.json

Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>

Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>
---
 src/clients/add/CapabilityConfig.tsx | 16 +++++++++++++
 src/clients/add/NewClientForm.tsx    | 34 +++++++++++++++++++++-------
 src/clients/help.json                |  2 ++
 src/clients/messages.json            |  2 +-
 4 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/clients/add/CapabilityConfig.tsx b/src/clients/add/CapabilityConfig.tsx
index df46404bcd..7f1f5521d7 100644
--- a/src/clients/add/CapabilityConfig.tsx
+++ b/src/clients/add/CapabilityConfig.tsx
@@ -37,6 +37,13 @@ export const CapabilityConfig = ({
               hasNoPaddingTop
               label={t("clientAuthentication")}
               fieldId="kc-authentication"
+              labelIcon={
+                <HelpItem
+                  helpText="clients-help:authentication"
+                  forLabel={t("authentication")}
+                  forID="kc-authentication"
+                />
+              }
             >
               <Controller
                 name="publicClient"
@@ -59,6 +66,13 @@ export const CapabilityConfig = ({
               hasNoPaddingTop
               label={t("clientAuthorization")}
               fieldId="kc-authorization"
+              labelIcon={
+                <HelpItem
+                  helpText="clients-help:authorization"
+                  forLabel={t("authorization")}
+                  forID="kc-authorization"
+                />
+              }
             >
               <Controller
                 name="authorizationServicesEnabled"
@@ -206,6 +220,7 @@ export const CapabilityConfig = ({
               }
               label={t("encryptAssertions")}
               fieldId="kc-encrypt"
+              hasNoPaddingTop
             >
               <Controller
                 name="attributes.saml_encrypt"
@@ -233,6 +248,7 @@ export const CapabilityConfig = ({
               }
               label={t("clientSignature")}
               fieldId="kc-client-signature"
+              hasNoPaddingTop
             >
               <Controller
                 name="attributes.saml_client_signature"
diff --git a/src/clients/add/NewClientForm.tsx b/src/clients/add/NewClientForm.tsx
index b4a6b7e486..d840706d75 100644
--- a/src/clients/add/NewClientForm.tsx
+++ b/src/clients/add/NewClientForm.tsx
@@ -7,6 +7,7 @@ import {
   WizardFooter,
   WizardContextConsumer,
   Button,
+  WizardStepFunctionType,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
@@ -51,6 +52,27 @@ export const NewClientForm = () => {
     }
   };
 
+  const forward = async (onNext: () => void) => {
+    if (await methods.trigger()) {
+      setClient({ ...client, ...methods.getValues() });
+      setShowCapabilityConfig(true);
+      onNext();
+    }
+  };
+
+  const back = () => {
+    setClient({ ...client, ...methods.getValues() });
+    methods.reset({ ...client, ...methods.getValues() });
+  };
+
+  const onGoToStep = (newStep: { id?: string | number }) => {
+    if (newStep.id === "generalSettings") {
+      back();
+    } else {
+      forward(() => {});
+    }
+  };
+
   const Footer = () => (
     <WizardFooter>
       <WizardContextConsumer>
@@ -60,12 +82,8 @@ export const NewClientForm = () => {
               <Button
                 variant="primary"
                 type="submit"
-                onClick={async () => {
-                  if (await methods.trigger()) {
-                    setClient({ ...client, ...methods.getValues() });
-                    setShowCapabilityConfig(true);
-                    onNext();
-                  }
+                onClick={() => {
+                  forward(onNext);
                 }}
               >
                 {activeStep.name === t("capabilityConfig")
@@ -75,8 +93,7 @@ export const NewClientForm = () => {
               <Button
                 variant="secondary"
                 onClick={() => {
-                  setClient({ ...client, ...methods.getValues() });
-                  methods.reset({ ...client, ...methods.getValues() });
+                  back();
                   onBack();
                 }}
                 isDisabled={activeStep.name === t("generalSettings")}
@@ -126,6 +143,7 @@ export const NewClientForm = () => {
             ]}
             footer={<Footer />}
             onSave={save}
+            onGoToStep={onGoToStep}
           />
         </FormProvider>
       </PageSection>
diff --git a/src/clients/help.json b/src/clients/help.json
index 7b4f4091f6..b2d84c3b75 100644
--- a/src/clients/help.json
+++ b/src/clients/help.json
@@ -2,6 +2,8 @@
   "clients-help": {
     "clientType": "'OpenID connect' allows Clients to verify the identity of the End-User based on the authentication performed by an Authorization Server.'SAML' enables web-based authentication and authorization scenarios including cross-domain single sign-on (SSO) and uses security tokens containing assertions to pass information.",
     "serviceAccount": "Allows you to authenticate this client to Keycloak and retrieve access token dedicated to this client. In terms of OAuth2 specification, this enables support of 'Client Credentials Grant' for this client.",
+    "authentication": "This defines the type of the OIDC client. When it's ON, the OIDC type is set to confidential access type. When it's OFF, it is set to public access type",
+    "authorization": "Enable/Disable fine-grained authorization support for a client",
     "directAccess": "This enables support for Direct Access Grants, which means that client has access to username/password of user and exchange it directly with Keycloak server for access token. In terms of OAuth2 specification, this enables support of 'Resource Owner Password Credentials Grant' for this client.",
     "standardFlow": "This enables standard OpenID Connect redirect based authentication with authorization code. In terms of OpenID Connect or OAuth2 specifications, this enables support of 'Authorization Code Flow' for this client.",
     "implicitFlow": "This enables support for OpenID Connect redirect based authentication without authorization code. In terms of OpenID Connect or OAuth2 specifications, this enables support of 'Implicit Flow' for this client.",
diff --git a/src/clients/messages.json b/src/clients/messages.json
index 47e0bdabe2..2a9c7d9fab 100644
--- a/src/clients/messages.json
+++ b/src/clients/messages.json
@@ -1,7 +1,7 @@
 {
   "clients": {
     "clientType": "Client type",
-    "clientAuthorization": "Client authorization",
+    "clientAuthorization": "Authorization",
     "implicitFlow": "Implicit flow",
     "createClient": "Create client",
     "importClient": "Import client",