fixed create client scope header (#155)

src/client-scopes/ClientScopesSection.tsx

@@ -56,7 +56,11 @@ export const ClientScopesSection = () => {
             inputGroupPlaceholder={t("searchFor")}
             inputGroupOnChange={filterData}
             toolbarItem={
-              <Button onClick={() => history.push("/add-client-scopes")}>
+              <Button
+                onClick={() =>
+                  history.push("/client-scopes/add-client-scopes/")
+                }
+              >
                 {t("createClientScope")}
               </Button>
             }

src/client-scopes/add/NewClientScopeForm.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useState } from "react";
+import { useHistory } from "react-router-dom";
 import {
   ActionGroup,
   AlertVariant,
@@ -21,13 +22,15 @@ import { HttpClientContext } from "../../context/http-service/HttpClientContext"
 import { RealmContext } from "../../context/realm-context/RealmContext";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useLoginProviders } from "../../context/server-info/ServerInfoProvider";
+import { ViewHeader } from "../../components/view-header/ViewHeader";
 
 export const NewClientScopeForm = () => {
   const { t } = useTranslation("client-scopes");
   const helpText = useTranslation("client-scopes-help").t;
-  const { register, control, handleSubmit } = useForm<
+  const { register, control, handleSubmit, errors } = useForm<
     ClientScopeRepresentation
   >();
+  const history = useHistory();
 
   const httpClient = useContext(HttpClientContext)!;
   const { realm } = useContext(RealmContext);
@@ -58,156 +61,167 @@ export const NewClientScopeForm = () => {
   };
 
   return (
-    <PageSection variant="light">
+    <>
-      <Form isHorizontal onSubmit={handleSubmit(save)}>
+      <ViewHeader
-        <FormGroup
+        titleKey="client-scopes:createClientScope"
-          label={t("name")}
+        subKey="client-scopes:clientScopeExplain"
-          labelIcon={
+      />
-            <HelpItem
+
-              helpText={helpText("name")}
+      <PageSection variant="light">
-              forLabel={t("name")}
+        <Form isHorizontal onSubmit={handleSubmit(save)}>
-              forID="kc-name"
+          <FormGroup
-            />
+            label={t("name")}
-          }
+            labelIcon={
-          fieldId="kc-name"
+              <HelpItem
-          isRequired
+                helpText={helpText("name")}
-        >
+                forLabel={t("name")}
-          <TextInput
+                forID="kc-name"
-            ref={register({ required: true })}
-            type="text"
-            id="kc-name"
-            name="name"
-          />
-        </FormGroup>
-        <FormGroup
-          label={t("description")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("description")}
-              forLabel={t("description")}
-              forID="kc-description"
-            />
-          }
-          fieldId="kc-description"
-        >
-          <TextInput
-            ref={register}
-            type="text"
-            id="kc-description"
-            name="description"
-          />
-        </FormGroup>
-        <FormGroup
-          label={t("protocol")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("protocol")}
-              forLabel="protocol"
-              forID="kc-protocol"
-            />
-          }
-          fieldId="kc-protocol"
-        >
-          <Controller
-            name="protocol"
-            defaultValue=""
-            control={control}
-            render={({ onChange, value }) => (
-              <Select
-                toggleId="kc-protocol"
-                required
-                onToggle={() => isOpen(!open)}
-                onSelect={(_, value, isPlaceholder) => {
-                  onChange(isPlaceholder ? "" : (value as string));
-                  isOpen(false);
-                }}
-                selections={value}
-                variant={SelectVariant.single}
-                aria-label={t("selectEncryptionType")}
-                placeholderText={t("common:selectOne")}
-                isOpen={open}
-              >
-                {providers.map((option) => (
-                  <SelectOption
-                    selected={option === value}
-                    key={option}
-                    value={option}
-                  />
-                ))}
-              </Select>
-            )}
-          />
-        </FormGroup>
-        <FormGroup
-          hasNoPaddingTop
-          label={t("displayOnConsentScreen")}
-          labelIcon={
-            <HelpItem
-              helpText={helpText("displayOnConsentScreen")}
-              forLabel={t("displayOnConsentScreen")}
-              forID="kc-display.on.consent.screen"
-            />
-          }
-          fieldId="kc-display.on.consent.screen"
-        >
-          <Controller
-            name="attributes.display_on_consent_screen"
-            control={control}
-            defaultValue={false}
-            render={({ onChange, value }) => (
-              <Switch
-                id="kc-display.on.consent.screen"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                isChecked={value}
-                onChange={onChange}
               />
-            )}
+            }
-          />
+            fieldId="kc-name"
-        </FormGroup>
+            isRequired
-        <FormGroup
+            validated={errors.name ? "error" : "default"}
-          label={t("consentScreenText")}
+            helperTextInvalid={t("common:required")}
-          labelIcon={
+          >
-            <HelpItem
+            <TextInput
-              helpText={helpText("consentScreenText")}
+              ref={register({ required: true })}
-              forLabel={t("consentScreenText")}
+              type="text"
-              forID="kc-consent-screen-text"
+              id="kc-name"
+              name="name"
             />
-          }
+          </FormGroup>
-          fieldId="kc-consent-screen-text"
+          <FormGroup
-        >
+            label={t("description")}
-          <TextInput
+            labelIcon={
-            ref={register}
+              <HelpItem
-            type="text"
+                helpText={helpText("description")}
-            id="kc-consent-screen-text"
+                forLabel={t("description")}
-            name="attributes.consent_screen_text"
+                forID="kc-description"
-          />
+              />
-        </FormGroup>
+            }
-        <FormGroup
+            fieldId="kc-description"
-          label={t("guiOrder")}
+          >
-          labelIcon={
+            <TextInput
-            <HelpItem
+              ref={register}
-              helpText={helpText("guiOrder")}
+              type="text"
-              forLabel={t("guiOrder")}
+              id="kc-description"
-              forID="kc-gui-order"
+              name="description"
             />
-          }
+          </FormGroup>
-          fieldId="kc-gui-order"
+          <FormGroup
-        >
+            label={t("protocol")}
-          <TextInput
+            labelIcon={
-            ref={register}
+              <HelpItem
-            type="number"
+                helpText={helpText("protocol")}
-            id="kc-gui-order"
+                forLabel="protocol"
-            name="attributes.gui_order"
+                forID="kc-protocol"
-          />
+              />
-        </FormGroup>
+            }
-        <ActionGroup>
+            fieldId="kc-protocol"
-          <Button variant="primary" type="submit">
+          >
-            {t("common:save")}
+            <Controller
-          </Button>
+              name="protocol"
-          <Button variant="link">{t("common:cancel")}</Button>
+              defaultValue=""
-        </ActionGroup>
+              control={control}
-      </Form>
+              render={({ onChange, value }) => (
-    </PageSection>
+                <Select
+                  toggleId="kc-protocol"
+                  required
+                  onToggle={() => isOpen(!open)}
+                  onSelect={(_, value, isPlaceholder) => {
+                    onChange(isPlaceholder ? "" : (value as string));
+                    isOpen(false);
+                  }}
+                  selections={value}
+                  variant={SelectVariant.single}
+                  aria-label={t("selectEncryptionType")}
+                  placeholderText={t("common:selectOne")}
+                  isOpen={open}
+                >
+                  {providers.map((option) => (
+                    <SelectOption
+                      selected={option === value}
+                      key={option}
+                      value={option}
+                    />
+                  ))}
+                </Select>
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            hasNoPaddingTop
+            label={t("displayOnConsentScreen")}
+            labelIcon={
+              <HelpItem
+                helpText={helpText("displayOnConsentScreen")}
+                forLabel={t("displayOnConsentScreen")}
+                forID="kc-display.on.consent.screen"
+              />
+            }
+            fieldId="kc-display.on.consent.screen"
+          >
+            <Controller
+              name="attributes.display_on_consent_screen"
+              control={control}
+              defaultValue={false}
+              render={({ onChange, value }) => (
+                <Switch
+                  id="kc-display.on.consent.screen"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value}
+                  onChange={onChange}
+                />
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("consentScreenText")}
+            labelIcon={
+              <HelpItem
+                helpText={helpText("consentScreenText")}
+                forLabel={t("consentScreenText")}
+                forID="kc-consent-screen-text"
+              />
+            }
+            fieldId="kc-consent-screen-text"
+          >
+            <TextInput
+              ref={register}
+              type="text"
+              id="kc-consent-screen-text"
+              name="attributes.consent_screen_text"
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("guiOrder")}
+            labelIcon={
+              <HelpItem
+                helpText={helpText("guiOrder")}
+                forLabel={t("guiOrder")}
+                forID="kc-gui-order"
+              />
+            }
+            fieldId="kc-gui-order"
+          >
+            <TextInput
+              ref={register}
+              type="number"
+              id="kc-gui-order"
+              name="attributes.gui_order"
+            />
+          </FormGroup>
+          <ActionGroup>
+            <Button variant="primary" type="submit">
+              {t("common:save")}
+            </Button>
+            <Button variant="link" onClick={() => history.push("..")}>
+              {t("common:cancel")}
+            </Button>
+          </ActionGroup>
+        </Form>
+      </PageSection>
+    </>
   );
 };

src/route-config.ts

@@ -47,10 +47,10 @@ export const routes = (t: TFunction) => [
   {
     path: "/client-scopes",
     component: ClientScopesSection,
-    breadcrumb: t("clientScopeList"),
+    breadcrumb: t("client-scopes:clientScopeList"),
   },
   {
-    path: "/add-client-scopes",
+    path: "/client-scopes/add-client-scopes",
     component: NewClientScopeForm,
     breadcrumb: t("client-scopes:createClientScope"),
   },