Restructure (#78)

* moved files into new structure

* translation files / namespace per "page"

fixes: #77

* renamed pages to sections

* moved save, delete and others to common bundle

package.json

@@ -22,7 +22,6 @@
     "@patternfly/react-table": "^4.15.5",
     "file-saver": "^2.0.2",
     "i18next": "^19.6.2",
-    "i18next-http-backend": "^1.0.18",
     "keycloak-js": "^11.0.0",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",

src/App.tsx

@@ -1,27 +1,26 @@
 import React from "react";
-import { Page, PageSection, Button } from "@patternfly/react-core";
+import { Page, PageSection } from "@patternfly/react-core";
 import { Header } from "./PageHeader";
 import { PageNav } from "./PageNav";
 
 import { Help } from "./components/help-enabler/HelpHeader";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { NewRealmForm } from "./forms/realm/NewRealmForm";
-import { NewClientForm } from "./forms/client/NewClientForm";
-import { ImportForm } from "./forms/client/ImportForm";
+import { NewRealmForm } from "./realm/add/NewRealmForm";
+import { NewClientForm } from "./clients/add/NewClientForm";
+import { ImportForm } from "./clients/import/ImportForm";
+import { ClientsSection } from "./clients/ClientsSection";
+import { ClientScopesSection } from "./client-scopes/ClientScopesSection";
+import { RealmRolesSection } from "./realm-roles/RealmRolesSection";
+import { UsersSection } from "./user/UsersSection";
+import { GroupsSection } from "./groups/GroupsSection";
+import { SessionsSection } from "./sessions/SessionsSection";
+import { EventsSection } from "./events/EventsSection";
+import { RealmSettingsSection } from "./realm-settings/RealmSettingsSection";
+import { AuthenticationSection } from "./authentication/AuthenticationSection";
+import { IdentityProvidersSection } from "./identity-providers/IdentityProvidersSection";
+import { UserFederationSection } from "./user-federation/UserFederationSection";
 
-import { ClientsPage } from "./page/ClientsPage";
-import { ClientScopesPage } from "./page/ClientScopesPage";
-import { RealmRolesPage } from "./page/RealmRolesPage";
-import { UsersPage } from "./page/UsersPage";
-import { GroupsPage } from "./page/GroupsPage";
-import { SessionsPage } from "./page/SessionsPage";
-import { EventsPage } from "./page/EventsPage";
-import { RealmSettingsPage } from "./page/RealmSettingsPage";
-import { AuthenticationPage } from "./page/AuthenticationPage";
-import { IdentityProvidersPage } from "./page/IdentityProvidersPage";
-import { UserFederationPage } from "./page/UserFederationPage";
-
-import { PageNotFoundPage } from "./page/PageNotFoundPage";
+import { PageNotFoundSection } from "./PageNotFoundSection";
 
 export const App = () => {
   return (
@@ -32,48 +31,48 @@ export const App = () => {
             <Switch>
               <Route exact path="/add-realm" component={NewRealmForm}></Route>
 
-              <Route exact path="/clients" component={ClientsPage}></Route>
+              <Route exact path="/clients" component={ClientsSection}></Route>
               <Route exact path="/add-client" component={NewClientForm}></Route>
               <Route exact path="/import-client" component={ImportForm}></Route>
 
               <Route
                 exact
                 path="/client-scopes"
-                component={ClientScopesPage}
+                component={ClientScopesSection}
               ></Route>
               <Route
                 exact
                 path="/realm-roles"
-                component={RealmRolesPage}
+                component={RealmRolesSection}
               ></Route>
-              <Route exact path="/users" component={UsersPage}></Route>
-              <Route exact path="/groups" component={GroupsPage}></Route>
-              <Route exact path="/sessions" component={SessionsPage}></Route>
-              <Route exact path="/events" component={EventsPage}></Route>
+              <Route exact path="/users" component={UsersSection}></Route>
+              <Route exact path="/groups" component={GroupsSection}></Route>
+              <Route exact path="/sessions" component={SessionsSection}></Route>
+              <Route exact path="/events" component={EventsSection}></Route>
 
               <Route
                 exact
                 path="/realm-settings"
-                component={RealmSettingsPage}
+                component={RealmSettingsSection}
               ></Route>
               <Route
                 exact
                 path="/authentication"
-                component={AuthenticationPage}
+                component={AuthenticationSection}
               ></Route>
               <Route
                 exact
                 path="/identity-providers"
-                component={IdentityProvidersPage}
+                component={IdentityProvidersSection}
               ></Route>
               <Route
                 exact
                 path="/user-federation"
-                component={UserFederationPage}
+                component={UserFederationSection}
               ></Route>
 
-              <Route exact path="/" component={ClientsPage} />
-              <Route component={PageNotFoundPage} />
+              <Route exact path="/" component={ClientsSection} />
+              <Route component={PageNotFoundSection} />
             </Switch>
           </PageSection>
         </Page>

src/PageNav.tsx

@@ -4,7 +4,7 @@ import { Nav, NavItem, NavGroup, PageSidebar } from "@patternfly/react-core";
 import { RealmSelector } from "./components/realm-selector/RealmSelector";
 import { DataLoader } from "./components/data-loader/DataLoader";
 import { HttpClientContext } from "./http-service/HttpClientContext";
-import { Realm } from "./models/Realm";
+import { Realm } from "./realm/models/Realm";
 
 export const PageNav: React.FunctionComponent = () => {
   const httpClient = useContext(HttpClientContext)!;

src/PageNotFoundSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const PageNotFoundPage = () => {
+export const PageNotFoundSection = () => {
   return <>Page Not Found</>;
 };

src/authentication/AuthenticationSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const AuthenticationPage = () => {
+export const AuthenticationSection = () => {
   return <>The Authentication Page</>;
 };

src/client-scopes/ClientScopesSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const ClientScopesPage = () => {
+export const ClientScopesSection = () => {
   return <>The Client Scopes Page</>;
 };

src/clients/ClientDescription.tsx

@@ -1,7 +1,8 @@
 import React, { FormEvent } from "react";
 import { FormGroup, TextInput } from "@patternfly/react-core";
 
-import { ClientRepresentation } from "../../model/client-model";
+import { ClientRepresentation } from "./models/client-model";
+import { useTranslation } from "react-i18next";
 
 type ClientDescriptionProps = {
   onChange: (value: string, event: FormEvent<HTMLInputElement>) => void;
@@ -12,9 +13,10 @@ export const ClientDescription = ({
   client,
   onChange,
 }: ClientDescriptionProps) => {
+  const { t } = useTranslation("clients");
   return (
     <>
-      <FormGroup label="Client ID" fieldId="kc-client-id">
+      <FormGroup label={t("Client ID")} fieldId="kc-client-id">
         <TextInput
           type="text"
           id="kc-client-id"
@@ -23,7 +25,7 @@ export const ClientDescription = ({
           onChange={onChange}
         />
       </FormGroup>
-      <FormGroup label="Name" fieldId="kc-name">
+      <FormGroup label={t("Name")} fieldId="kc-name">
         <TextInput
           type="text"
           id="kc-name"
@@ -32,7 +34,7 @@ export const ClientDescription = ({
           onChange={onChange}
         />
       </FormGroup>
-      <FormGroup label="Description" fieldId="kc-description">
+      <FormGroup label={t("Description")} fieldId="kc-description">
         <TextInput
           type="text"
           id="kc-description"

src/clients/ClientList.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Table,
   TableBody,
@@ -8,14 +9,13 @@ import {
   IFormatterValueType,
 } from "@patternfly/react-table";
 import { Badge, AlertVariant } from "@patternfly/react-core";
-import { saveAs } from "file-saver";
+import FileSaver from "file-saver";
 
 import { ExternalLink } from "../components/external-link/ExternalLink";
-import { ClientRepresentation } from "../model/client-model";
 import { HttpClientContext } from "../http-service/HttpClientContext";
 import { useAlerts } from "../components/alert/Alerts";
 import { AlertPanel } from "../components/alert/AlertPanel";
-import { useTranslation } from "react-i18next";
+import { ClientRepresentation } from "./models/client-model";
 
 type ClientListProps = {
   clients?: ClientRepresentation[];
@@ -30,8 +30,8 @@ const columns: (keyof ClientRepresentation)[] = [
 ];
 
 export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
+  const { t } = useTranslation("clients");
   const httpClient = useContext(HttpClientContext)!;
-  const { t } = useTranslation();
   const [add, alerts, hide] = useAlerts();
 
   const convertClientId = (clientId: string) =>
@@ -58,6 +58,7 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
     ) : undefined) as object;
   };
 
+  /* eslint-disable no-template-curly-in-string */
   const replaceBaseUrl = (r: ClientRepresentation) =>
     r.rootUrl &&
     r.rootUrl
@@ -91,7 +92,7 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
         rows={data}
         actions={[
           {
-            title: t("Export"),
+            title: t("common:Export"),
             onClick: (_, rowId) => {
               const clientCopy = JSON.parse(JSON.stringify(data[rowId].client));
               clientCopy.clientId = convertClientId(clientCopy.clientId);
@@ -103,7 +104,7 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
                 }
               }
 
-              saveAs(
+              FileSaver.saveAs(
                 new Blob([JSON.stringify(clientCopy, null, 2)], {
                   type: "application/json",
                 }),
@@ -112,7 +113,7 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
             },
           },
           {
-            title: t("Delete"),
+            title: t("common:Delete"),
             onClick: (_, rowId) => {
               try {
                 httpClient.doDelete(
@@ -128,7 +129,7 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
             },
           },
         ]}
-        aria-label="Client list"
+        aria-label={t("Client list")}
       >
         <TableHeader />
         <TableBody />

src/clients/ClientsSection.tsx

@@ -5,13 +5,13 @@ import { Button } from "@patternfly/react-core";
 
 import { DataLoader } from "../components/data-loader/DataLoader";
 import { TableToolbar } from "../components/table-toolbar/TableToolbar";
-import { ClientList } from "../clients/ClientList";
+import { ClientList } from "./ClientList";
 import { HttpClientContext } from "../http-service/HttpClientContext";
 import { KeycloakContext } from "../auth/KeycloakContext";
-import { ClientRepresentation } from "../model/client-model";
+import { ClientRepresentation } from "./models/client-model";
 
-export const ClientsPage = () => {
-  const { t } = useTranslation();
+export const ClientsSection = () => {
+  const { t } = useTranslation("clients");
   const history = useHistory();
   const [max, setMax] = useState(10);
   const [first, setFirst] = useState(0);

src/clients/__tests__/ClientList.test.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { render } from "@testing-library/react";
 
 import clientMock from "./mock-clients.json";
-import { ClientList } from "./ClientList";
 import { I18nextProvider } from "react-i18next";
-import { i18n } from "../i18n";
+import i18n from "../../i18n";
+import { ClientList } from "../ClientList";
 
 test("renders ClientList", () => {
   const { getByText } = render(

src/clients/add/NewClientForm.tsx

@@ -10,11 +10,13 @@ import {
 import { HttpClientContext } from "../../http-service/HttpClientContext";
 import { Step1 } from "./Step1";
 import { Step2 } from "./Step2";
-import { ClientRepresentation } from "../../model/client-model";
+import { ClientRepresentation } from "../models/client-model";
 import { AlertPanel } from "../../components/alert/AlertPanel";
 import { useAlerts } from "../../components/alert/Alerts";
+import { useTranslation } from "react-i18next";
 
 export const NewClientForm = () => {
+  const { t } = useTranslation("clients");
   const httpClient = useContext(HttpClientContext)!;
   const [client, setClient] = useState<ClientRepresentation>({
     protocol: "",
@@ -48,7 +50,7 @@ export const NewClientForm = () => {
     });
   };
 
-  const title = "Create client";
+  const title = t("Create client");
   return (
     <>
       <AlertPanel alerts={alerts} onCloseAlert={hide} />
@@ -64,16 +66,16 @@ export const NewClientForm = () => {
           mainAriaLabel={`${title} content`}
           steps={[
             {
-              name: "General Settings",
+              name: t("General Settings"),
               component: <Step1 onChange={handleInputChange} client={client} />,
             },
             {
-              name: "Capability config",
+              name: t("Capability config"),
               component: <Step2 onChange={handleInputChange} client={client} />,
-              nextButtonText: "Save",
+              nextButtonText: t("common:Save"),
             },
           ]}
-          onSave={save}
+          onSave={() => save()}
         />
       </PageSection>
     </>

src/clients/add/Step1.tsx

@@ -9,9 +9,9 @@ import {
 
 import { HttpClientContext } from "../../http-service/HttpClientContext";
 import { sortProvider } from "../../util";
-import { ServerInfoRepresentation } from "../../model/server-info";
-import { ClientRepresentation } from "../../model/client-model";
-import { ClientDescription } from "./ClientDescription";
+import { ServerInfoRepresentation } from "../models/server-info";
+import { ClientRepresentation } from "../models/client-model";
+import { ClientDescription } from "../ClientDescription";
 
 type Step1Props = {
   onChange: (value: string, event: FormEvent<HTMLInputElement>) => void;

src/clients/add/Step2.tsx

@@ -7,7 +7,7 @@ import {
   GridItem,
 } from "@patternfly/react-core";
 import React, { FormEvent } from "react";
-import { ClientRepresentation } from "../../model/client-model";
+import { ClientRepresentation } from "../models/client-model";
 
 type Step2Props = {
   onChange: (

src/clients/import/ImportForm.tsx

@@ -13,15 +13,15 @@ import {
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 
-import { ClientRepresentation } from "../../model/client-model";
-import { ClientDescription } from "./ClientDescription";
+import { ClientRepresentation } from "../models/client-model";
+import { ClientDescription } from "../ClientDescription";
 import { HttpClientContext } from "../../http-service/HttpClientContext";
 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
 import { useAlerts } from "../../components/alert/Alerts";
 import { AlertPanel } from "../../components/alert/AlertPanel";
 
 export const ImportForm = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation("clients");
   const httpClient = useContext(HttpClientContext)!;
 
   const [add, alerts, hide] = useAlerts();
@@ -84,10 +84,10 @@ export const ImportForm = () => {
             />
           </FormGroup>
           <ActionGroup>
-            <Button variant="primary" onClick={save}>
-              {t("Save")}
+            <Button variant="primary" onClick={() => save()}>
+              {t("common:Save")}
             </Button>
-            <Button variant="link">{t("Cancel")}</Button>
+            <Button variant="link">{t("common:Cancel")}</Button>
           </ActionGroup>
         </Form>
       </PageSection>

src/clients/messages.json

@@ -0,0 +1,15 @@
+{
+  "clients": {
+    "Create client": "Create client",
+    "Import client": "Import client",
+    "Client ID": "Client ID",
+    "Type": "Type",
+    "Home URL": "Home URL",
+    "Description": "Description",
+    "Client list": "Client list",
+    "General Settings": "General Settings",
+    "Capability config": "Capability config",
+    "Clients are applications and services that can request authentication of a user": "Clients are applications and services that can request authentication of a user",
+    "Name": "Name"
+  }
+}

src/common-messages.json

@@ -0,0 +1,19 @@
+{
+  "common": {
+    "fullName": "{{givenName}} {{familyName}}",
+    "unknownUser": "Anonymous",
+
+    "Save": "Save",
+    "Cancel": "Cancel",
+    "Delete": "Delete",
+    "Export": "Export",
+    "Resource file": "Resource file",
+
+    "Sign out": "Sign out",
+    "Manage account": "Manage account",
+    "Server info": "Server info",
+    "Help": "Help",
+    "Documentation": "Documentation",
+    "Enable help mode": "Enable help mode"
+  }
+}

src/components/alert/__tests__/Alerts.test.tsx

@@ -3,8 +3,8 @@ import { Button, AlertVariant } from "@patternfly/react-core";
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
 
-import { AlertPanel } from "./AlertPanel";
-import { useAlerts } from "./Alerts";
+import { AlertPanel } from "../AlertPanel";
+import { useAlerts } from "../Alerts";
 
 jest.useFakeTimers();
 

src/components/data-loader/__tests__/DataLoader.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DataLoader } from "./DataLoader";
+import { DataLoader } from "../DataLoader";
 import { act } from "@testing-library/react";
 import { render, unmountComponentAtNode } from "react-dom";
 

src/components/external-link/__tests__/ExternalLink.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { ExternalLink } from "./ExternalLink";
+import { ExternalLink } from "../ExternalLink";
 
 describe("<ExternalLink />", () => {
   it("render with link", () => {

src/components/help-enabler/HelpHeader.tsx

@@ -6,8 +6,6 @@ import {
   Split,
   SplitItem,
   Switch,
-  Text,
-  TextVariants,
 } from "@patternfly/react-core";
 import { Trans, useTranslation } from "react-i18next";
 import { HelpIcon, ExternalLinkAltIcon } from "@patternfly/react-icons";

src/components/help-enabler/__tests__/HelpHeader.test.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { render, act, fireEvent } from "@testing-library/react";
-import { HelpHeader, HelpContext } from "./HelpHeader";
+import { HelpHeader, HelpContext } from "../HelpHeader";
 
 describe("<HelpHeader />", () => {
   it("render", () => {

src/components/help-enabler/__tests__/HelpItem.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react";
 
-import { HelpItem } from "./HelpItem";
+import { HelpItem } from "../HelpItem";
 
 describe("<HelpItem />", () => {
   it("render", () => {

src/components/json-file-upload/__tests__/JsonFileUpload.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { mount } from "enzyme";
 
-import { JsonFileUpload } from "./JsonFileUpload";
+import { JsonFileUpload } from "../JsonFileUpload";
 
 describe("<JsonFileUpload />", () => {
   it("render", () => {

src/components/realm-selector/RealmSelector.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from "react";
 import { useHistory } from "react-router-dom";
-import { Realm } from "../../models/Realm";
+import { Realm } from "../../realm/models/Realm";
 
 import {
   Dropdown,

src/components/realm-selector/__tests__/RealmSelector.test.tsx

@@ -2,10 +2,7 @@ import React from "react";
 import { mount } from "enzyme";
 import { act } from "@testing-library/react";
 
-import { AlertPanel } from "../alert/AlertPanel";
-import { useAlerts } from "../alert/Alerts";
-
-import { RealmSelector } from "./RealmSelector";
+import { RealmSelector } from "../RealmSelector";
 
 it("renders realm selector", async () => {
   const wrapper = mount(

src/events/EventsSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const EventsPage = () => {
+export const EventsSection = () => {
   return <>The Events Page</>;
 };

src/groups/GroupsSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const GroupsPage = () => {
+export const GroupsSection = () => {
   return <>The Groups Page</>;
 };

src/help.json

@@ -1,7 +1,5 @@
 {
-  "en": {
-    "help": {
-      "storybook": "Sometimes you need some help and it's nice when the app does that"
-    }
+  "help": {
+    "storybook": "Sometimes you need some help and it's nice when the app does that"
   }
 }

src/i18n.ts

@@ -2,16 +2,19 @@ import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 // import backend from "i18next-http-backend";
 
-import messages from "./messages.json";
+import common from "./common-messages.json";
+import clients from "./clients/messages.json";
+import realm from "./realm/messages.json";
 import help from "./help.json";
 
 const initOptions = {
-  ns: ["messages", "help"],
-  defaultNS: "messages",
-  resources: { ...messages, ...help },
+  ns: ["common", "help", "clients", "realm"],
+  defaultNS: "common",
+  resources: {
+    en: { ...common, ...help, ...clients, ...realm },
+  },
   lng: "en",
   fallbackLng: "en",
-  saveMissing: true,
 
   interpolation: {
     escapeValue: false,
@@ -23,4 +26,4 @@ i18n
   // .use(backend)
   .init(initOptions);
 
-export { i18n, initOptions };
+export default i18n;

src/identity-providers/IdentityProvidersSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const IdentityProvidersPage = () => {
+export const IdentityProvidersSection = () => {
   return <>The Identity Providers Page</>;
 };

src/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDom from "react-dom";
-import { I18nextProvider } from "react-i18next";
-import { i18n } from "./i18n";
+import i18n from "./i18n";
 
 import { App } from "./App";
 import init from "./auth/keycloak";
@@ -10,16 +9,15 @@ import { KeycloakService } from "./auth/keycloak.service";
 import { HttpClientContext } from "./http-service/HttpClientContext";
 import { HttpClient } from "./http-service/http-client";
 
+console.info("supported languages", ...i18n.languages);
 init().then((keycloak) => {
   const keycloakService = new KeycloakService(keycloak);
   ReactDom.render(
-    <I18nextProvider i18n={i18n}>
-      <KeycloakContext.Provider value={keycloakService}>
-        <HttpClientContext.Provider value={new HttpClient(keycloakService)}>
-          <App />
-        </HttpClientContext.Provider>
-      </KeycloakContext.Provider>
-    </I18nextProvider>,
+    <KeycloakContext.Provider value={keycloakService}>
+      <HttpClientContext.Provider value={new HttpClient(keycloakService)}>
+        <App />
+      </HttpClientContext.Provider>
+    </KeycloakContext.Provider>,
     document.getElementById("app")
   );
 });

src/messages.json

@@ -1,24 +0,0 @@
-{
-  "en": {
-    "messages": {
-      "personalInfoHtmlTitle": "Personal Info",
-      "personalInfoIntroMessage": "Manage your basic information",
-      "Account Security": "Account Security",
-      "accountSecurityIntroMessage": "Control your password and account access",
-      "signingIn": "Signing In",
-      "device-activity": "Device Activity",
-      "applications": "Applications",
-      "applicationsIntroMessage": "Track and manage your app permission to access your account",
-      "fullName": "{{givenName}} {{familyName}}",
-      "unknownUser": "Anonymous",
-      "Keycloak Administration Console": "RH-SSO Administration Console",
-      "confirmImportClear": "If you clear this file, you need to click Browse button to re-import a valid file",
-
-      "********* MASTHEAD *********": "",
-      "Sign out": "Sign out",
-      "Manage account": "Manage account",
-      "Server info": "Server info",
-      "Help": "Help"
-    }
-  }
-}

src/realm-roles/RealmRolesSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const RealmRolesPage = () => {
+export const RealmRolesSection = () => {
   return <>The Realm Roles Page</>;
 };

src/realm-settings/RealmSettingsSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const RealmSettingsPage = () => {
+export const RealmSettingsSection = () => {
   return <>The Realm Settings Page</>;
 };

src/realm/add/NewRealmForm.tsx

@@ -12,12 +12,14 @@ import {
   Button,
   Divider,
 } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
 
 //type NewRealmFormProps = {
 //  realm: string;
 //};
 
 export const NewRealmForm = () => {
+  const { t } = useTranslation("realm");
   //({ realm }: NewRealmFormProps) => {
   return (
     <>
@@ -29,7 +31,7 @@ export const NewRealmForm = () => {
       <Divider />
       <PageSection variant="light">
         <Form isHorizontal>
-          <FormGroup label="Upload JSON file" fieldId="kc-realm-filename">
+          <FormGroup label={t("Upload JSON file")} fieldId="kc-realm-filename">
             <FileUpload
               id="simple-text-file"
               type="text"
@@ -41,7 +43,7 @@ export const NewRealmForm = () => {
               //   isLoading={isLoading}
             />
           </FormGroup>
-          <FormGroup label="Realm name" isRequired fieldId="kc-realm-name">
+          <FormGroup label={t("Realm name")} isRequired fieldId="kc-realm-name">
             <TextInput
               isRequired
               type="text"
@@ -51,19 +53,19 @@ export const NewRealmForm = () => {
               // onChange={this.handleTextInputChange2}
             />
           </FormGroup>
-          <FormGroup label="Enabled" fieldId="kc-realm-enabled-switch">
+          <FormGroup label={t("Enabled")} fieldId="kc-realm-enabled-switch">
             <Switch
               id="kc-realm-enabled-switch"
               name="kc-realm-enabled-switch"
-              label="On"
-              labelOff="Off"
+              label={t("On")}
+              labelOff={t("Off")}
               // isChecked={isChecked}
               // onChange={this.handleChange}
             />
           </FormGroup>
           <ActionGroup>
-            <Button variant="primary">Create</Button>
-            <Button variant="link">Cancel</Button>
+            <Button variant="primary">{t("Create")}</Button>
+            <Button variant="link">{t("Cancel")}</Button>
           </ActionGroup>
         </Form>
       </PageSection>

src/realm/messages.json

@@ -0,0 +1,11 @@
+{
+  "realm": {
+    "Upload JSON file":"Upload JSON file",
+    "Realm name":"Realm name",
+    "Enabled":"Enabled",
+    "On": "On",
+    "Off":"Off",
+    "Create":"Create",
+    "Cancel":"Cancel"
+  }
+}

src/sessions/SessionsSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const SessionsPage = () => {
+export const SessionsSection = () => {
   return <>The Sessions Page</>;
 };

src/stories/ClientList.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta } from "@storybook/react";
 
 import { ClientList } from "../clients/ClientList";
-import clientMock from "../clients/mock-clients.json";
+import clientMock from "../clients/__tests__/mock-clients.json";
 
 export default {
   title: "Client List",

src/stories/HelpSystem.stories.tsx

@@ -14,7 +14,7 @@ import {
   HelpHeader,
 } from "../components/help-enabler/HelpHeader";
 import { I18nextProvider } from "react-i18next";
-import { i18n } from "../i18n";
+import i18n from "../i18n";
 
 export default {
   title: "Help System Example",

src/stories/RealmForm.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { Page } from "@patternfly/react-core";
-import { NewRealmForm } from "../forms/realm/NewRealmForm";
+import { NewRealmForm } from "../realm/add/NewRealmForm";
 
 export default {
   title: "New reaml form",

src/user-federation/UserFederationSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const UserFederationPage = () => {
+export const UserFederationSection = () => {
   return <>The User Federation Page</>;
 };

src/user/UsersSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const UsersPage = () => {
+export const UsersSection = () => {
   return <>The Users Page</>;
 };

src/util.ts

@@ -1,4 +1,4 @@
-import { ProviderRepresentation } from "./model/server-info";
+import { ProviderRepresentation } from "./clients/models/server-info";
 
 export const sortProvider = (
   a: [string, ProviderRepresentation],

yarn.lock

@@ -10457,13 +10457,6 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-i18next-http-backend@^1.0.18:
-  version "1.0.18"
-  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-1.0.18.tgz#ec3627c6079366665bd265054edf1fe80614089b"
-  integrity sha512-YPkSyqJZk8UoJTdmbisx7cPtE+04eOJlShw//O8/sj78xwlgLtqJonOyS0o+Y0ruZgfyQFMSXCZ1M4s6gQYHBw==
-  dependencies:
-    node-fetch "2.6.0"
-
 i18next@^19.6.2:
   version "19.6.2"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.6.2.tgz#859aeba46db0c7cdfa8ae3de7c3a5cad3b0cec83"
@@ -13415,11 +13408,6 @@ node-dir@^0.1.10:
   dependencies:
     minimatch "^3.0.2"
 
-node-fetch@2.6.0, node-fetch@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
-  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
-
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -13428,6 +13416,11 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+node-fetch@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"