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,6 +61,12 @@ export const NewClientScopeForm = () => {
   };
 
   return (
+    <>
+      <ViewHeader
+        titleKey="client-scopes:createClientScope"
+        subKey="client-scopes:clientScopeExplain"
+      />
+
       <PageSection variant="light">
         <Form isHorizontal onSubmit={handleSubmit(save)}>
           <FormGroup
@@ -71,6 +80,8 @@ export const NewClientScopeForm = () => {
             }
             fieldId="kc-name"
             isRequired
+            validated={errors.name ? "error" : "default"}
+            helperTextInvalid={t("common:required")}
           >
             <TextInput
               ref={register({ required: true })}
@@ -205,9 +216,12 @@ export const NewClientScopeForm = () => {
             <Button variant="primary" type="submit">
               {t("common:save")}
             </Button>
-          <Button variant="link">{t("common:cancel")}</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"),
   },