added initial access token tab

src/clients/ClientsSection.tsx

@@ -8,6 +8,8 @@ import {
   ButtonVariant,
   PageSection,
   ToolbarItem,
+  Tab,
+  TabTitleText,
 } from "@patternfly/react-core";
 
 import { ViewHeader } from "../components/view-header/ViewHeader";
@@ -18,6 +20,8 @@ import { useAlerts } from "../components/alert/Alerts";
 import ClientRepresentation from "keycloak-admin/lib/defs/clientRepresentation";
 import { formattedLinkTableCell } from "../components/external-link/FormattedLink";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
+import { InitialAccessTokenList } from "./InitialAccessTokenList";
 
 export const ClientsSection = () => {
   const { t } = useTranslation("clients");
@@ -82,8 +86,23 @@ export const ClientsSection = () => {
       <ViewHeader
         titleKey="clients:clientList"
         subKey="clients:clientsExplain"
+        divider={false}
       />
       <PageSection variant="light" className="pf-u-p-0">
+        <KeycloakTabs
+          isBox
+          inset={{
+            default: "insetNone",
+            md: "insetSm",
+            xl: "inset2xl",
+            "2xl": "insetLg",
+          }}
+        >
+          <Tab
+            data-testid="list"
+            eventKey="list"
+            title={<TabTitleText>{t("clientsList")}</TabTitleText>}
+          >
             <DeleteConfirm />
             <KeycloakDataTable
               key={key}
@@ -157,6 +176,15 @@ export const ClientsSection = () => {
                 },
               ]}
             />
+          </Tab>
+          <Tab
+            data-testid="initialAccessToken"
+            eventKey="initialAccessToken"
+            title={<TabTitleText>{t("initialAccessToken")}</TabTitleText>}
+          >
+            <InitialAccessTokenList />
+          </Tab>
+        </KeycloakTabs>
       </PageSection>
     </>
   );

src/clients/InitialAccessTokenList.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+import { useAdminClient } from "../context/auth/AdminClient";
+
+export const InitialAccessTokenList = () => {
+  const adminClient = useAdminClient();
+  return <h1>Hello</h1>;
+};

src/clients/messages.json

@@ -52,6 +52,8 @@
     "noGeneratedAccessToken": "No generated access token",
     "generatedAccessTokenIsDisabled": "Generated access token is disabled when no user is selected",
     "clientList": "Clients",
+    "clientsList": "Clients list",
+    "initialAccessToken": "Initial access token",
     "clientSettings": "Client details",
     "selectEncryptionType": "Select Encryption type",
     "generalSettings": "General Settings",

src/components/view-header/ViewHeader.tsx

@@ -36,6 +36,7 @@ export type ViewHeaderProps = {
   lowerDropdownMenuTitle?: any;
   isEnabled?: boolean;
   onToggle?: (value: boolean) => void;
+  divider?: boolean;
 };
 
 export const ViewHeader = ({
@@ -51,6 +52,7 @@ export const ViewHeader = ({
   lowerDropdownItems,
   isEnabled = true,
   onToggle,
+  divider = true,
 }: ViewHeaderProps) => {
   const { t } = useTranslation();
   const { enabled } = useContext(HelpContext);

src/route-config.ts

@@ -48,6 +48,12 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: t("clients:clientList"),
     access: "query-clients",
   },
+  {
+    path: "/:realm/clients/:tab?",
+    component: ClientsSection,
+    breadcrumb: null,
+    access: "query-clients",
+  },
   {
     path: "/:realm/clients/add-client",
     component: NewClientForm,