From f0558d847b31d6633071de80dce237271cf86b5c Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 29 Mar 2021 12:00:56 +0200
Subject: [PATCH] changed to be progressive added help to type and made
 `openid-connect` the default

fixes: #446
---
 src/clients/add/GeneralSettings.tsx | 21 ++++++++++++---------
 src/clients/add/NewClientForm.tsx   | 20 +++++++++++++++-----
 src/clients/help.json               |  1 +
 src/clients/messages.json           |  1 +
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/clients/add/GeneralSettings.tsx b/src/clients/add/GeneralSettings.tsx
index faefd76e17..d2fcca0c66 100644
--- a/src/clients/add/GeneralSettings.tsx
+++ b/src/clients/add/GeneralSettings.tsx
@@ -11,9 +11,10 @@ import { Controller, useFormContext } from "react-hook-form";
 import { useLoginProviders } from "../../context/server-info/ServerInfoProvider";
 import { ClientDescription } from "../ClientDescription";
 import { FormAccess } from "../../components/form-access/FormAccess";
+import { HelpItem } from "../../components/help-enabler/HelpItem";
 
 export const GeneralSettings = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation("clients");
   const { errors, control } = useFormContext();
 
   const providers = useLoginProviders();
@@ -22,30 +23,32 @@ export const GeneralSettings = () => {
   return (
     <FormAccess isHorizontal role="manage-clients">
       <FormGroup
-        label="Client Type"
+        label={t("clientType")}
         fieldId="kc-type"
-        isRequired
-        helperTextInvalid={t("common:required")}
         validated={errors.protocol ? "error" : "default"}
+        labelIcon={
+          <HelpItem
+            helpText="clients-help:clientType"
+            forLabel={t("clientType")}
+            forID="kc-type"
+          />
+        }
       >
         <Controller
           name="protocol"
           defaultValue=""
           control={control}
-          rules={{ required: true }}
           render={({ onChange, value }) => (
             <Select
               id="kc-type"
-              required
               onToggle={() => isOpen(!open)}
-              onSelect={(_, value, isPlaceholder) => {
-                onChange(isPlaceholder ? "" : (value as string));
+              onSelect={(_, value) => {
+                onChange(value as string);
                 isOpen(false);
               }}
               selections={value}
               variant={SelectVariant.single}
               aria-label={t("selectEncryptionType")}
-              placeholderText={t("common:selectOne")}
               isOpen={open}
             >
               {providers.map((option) => (
diff --git a/src/clients/add/NewClientForm.tsx b/src/clients/add/NewClientForm.tsx
index e6b7ef4434..f1b9072409 100644
--- a/src/clients/add/NewClientForm.tsx
+++ b/src/clients/add/NewClientForm.tsx
@@ -25,8 +25,9 @@ export const NewClientForm = () => {
   const adminClient = useAdminClient();
   const history = useHistory();
 
+  const [showCapabilityConfig, setShowCapabilityConfig] = useState(false);
   const [client, setClient] = useState<ClientRepresentation>({
-    protocol: "",
+    protocol: "openid-connect",
     clientId: "",
     name: "",
     description: "",
@@ -62,6 +63,7 @@ export const NewClientForm = () => {
                 onClick={async () => {
                   if (await methods.trigger()) {
                     setClient({ ...client, ...methods.getValues() });
+                    setShowCapabilityConfig(true);
                     onNext();
                   }
                 }}
@@ -106,13 +108,21 @@ export const NewClientForm = () => {
             mainAriaLabel={`${title} content`}
             steps={[
               {
+                id: "generalSettings",
                 name: t("generalSettings"),
                 component: <GeneralSettings />,
               },
-              {
-                name: t("capabilityConfig"),
-                component: <CapabilityConfig protocol={client.protocol} />,
-              },
+              ...(showCapabilityConfig
+                ? [
+                    {
+                      id: "capabilityConfig",
+                      name: t("capabilityConfig"),
+                      component: (
+                        <CapabilityConfig protocol={client.protocol} />
+                      ),
+                    },
+                  ]
+                : []),
             ]}
             footer={<Footer />}
             onSave={save}
diff --git a/src/clients/help.json b/src/clients/help.json
index d0ed756f2d..319dbfc79e 100644
--- a/src/clients/help.json
+++ b/src/clients/help.json
@@ -1,5 +1,6 @@
 {
   "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.",
     "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.",
diff --git a/src/clients/messages.json b/src/clients/messages.json
index 7216957d20..d6619fb25f 100644
--- a/src/clients/messages.json
+++ b/src/clients/messages.json
@@ -1,5 +1,6 @@
 {
   "clients": {
+    "clientType": "Client type",
     "clientAuthorization": "Client authorization",
     "implicitFlow": "Implicit flow",
     "createClient": "Create client",