added initial access token tab
This commit is contained in:
parent
7c816736d2
commit
b4a73f86c1
5 changed files with 115 additions and 69 deletions
|
@ -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,81 +86,105 @@ export const ClientsSection = () => {
|
|||
<ViewHeader
|
||||
titleKey="clients:clientList"
|
||||
subKey="clients:clientsExplain"
|
||||
divider={false}
|
||||
/>
|
||||
<PageSection variant="light" className="pf-u-p-0">
|
||||
<DeleteConfirm />
|
||||
<KeycloakDataTable
|
||||
key={key}
|
||||
loader={loader}
|
||||
isPaginated
|
||||
ariaLabelKey="clients:clientList"
|
||||
searchPlaceholderKey="clients:searchForClient"
|
||||
toolbarItem={
|
||||
<>
|
||||
<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}
|
||||
loader={loader}
|
||||
isPaginated
|
||||
ariaLabelKey="clients:clientList"
|
||||
searchPlaceholderKey="clients:searchForClient"
|
||||
toolbarItem={
|
||||
<>
|
||||
<ToolbarItem>
|
||||
<Button onClick={() => history.push(`${url}/add-client`)}>
|
||||
{t("createClient")}
|
||||
</Button>
|
||||
<Button onClick={() => history.push(`${url}/add-client`)}>
|
||||
{t("createClient")}
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Button
|
||||
onClick={() => history.push(`${url}/import-client`)}
|
||||
variant="link"
|
||||
>
|
||||
{t("importClient")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => history.push(`${url}/import-client`)}
|
||||
variant="link"
|
||||
>
|
||||
{t("importClient")}
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
</>
|
||||
}
|
||||
actions={[
|
||||
{
|
||||
title: t("common:export"),
|
||||
onRowClick: (client) => {
|
||||
exportClient(client);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("common:delete"),
|
||||
onRowClick: (client) => {
|
||||
setSelectedClient(client);
|
||||
toggleDeleteDialog();
|
||||
},
|
||||
},
|
||||
]}
|
||||
columns={[
|
||||
{
|
||||
name: "clientId",
|
||||
displayKey: "clients:clientID",
|
||||
cellRenderer: ClientDetailLink,
|
||||
},
|
||||
{ name: "protocol", displayKey: "common:type" },
|
||||
{
|
||||
name: "description",
|
||||
displayKey: "common:description",
|
||||
cellFormatters: [emptyFormatter()],
|
||||
},
|
||||
{
|
||||
name: "baseUrl",
|
||||
displayKey: "clients:homeURL",
|
||||
cellFormatters: [formattedLinkTableCell(), emptyFormatter()],
|
||||
cellRenderer: (client) => {
|
||||
if (client.rootUrl) {
|
||||
if (
|
||||
!client.rootUrl.startsWith("http") ||
|
||||
client.rootUrl.indexOf("$") !== -1
|
||||
) {
|
||||
client.rootUrl =
|
||||
client.rootUrl
|
||||
.replace("${authBaseUrl}", baseUrl)
|
||||
.replace("${authAdminUrl}", baseUrl) +
|
||||
(client.baseUrl ? client.baseUrl.substr(1) : "");
|
||||
}
|
||||
}
|
||||
return client.rootUrl;
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
actions={[
|
||||
{
|
||||
title: t("common:export"),
|
||||
onRowClick: (client) => {
|
||||
exportClient(client);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("common:delete"),
|
||||
onRowClick: (client) => {
|
||||
setSelectedClient(client);
|
||||
toggleDeleteDialog();
|
||||
},
|
||||
},
|
||||
]}
|
||||
columns={[
|
||||
{
|
||||
name: "clientId",
|
||||
displayKey: "clients:clientID",
|
||||
cellRenderer: ClientDetailLink,
|
||||
},
|
||||
{ name: "protocol", displayKey: "common:type" },
|
||||
{
|
||||
name: "description",
|
||||
displayKey: "common:description",
|
||||
cellFormatters: [emptyFormatter()],
|
||||
},
|
||||
{
|
||||
name: "baseUrl",
|
||||
displayKey: "clients:homeURL",
|
||||
cellFormatters: [formattedLinkTableCell(), emptyFormatter()],
|
||||
cellRenderer: (client) => {
|
||||
if (client.rootUrl) {
|
||||
if (
|
||||
!client.rootUrl.startsWith("http") ||
|
||||
client.rootUrl.indexOf("$") !== -1
|
||||
) {
|
||||
client.rootUrl =
|
||||
client.rootUrl
|
||||
.replace("${authBaseUrl}", baseUrl)
|
||||
.replace("${authAdminUrl}", baseUrl) +
|
||||
(client.baseUrl ? client.baseUrl.substr(1) : "");
|
||||
}
|
||||
}
|
||||
return client.rootUrl;
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Tab>
|
||||
<Tab
|
||||
data-testid="initialAccessToken"
|
||||
eventKey="initialAccessToken"
|
||||
title={<TabTitleText>{t("initialAccessToken")}</TabTitleText>}
|
||||
>
|
||||
<InitialAccessTokenList />
|
||||
</Tab>
|
||||
</KeycloakTabs>
|
||||
</PageSection>
|
||||
</>
|
||||
);
|
||||
|
|
8
src/clients/InitialAccessTokenList.tsx
Normal file
8
src/clients/InitialAccessTokenList.tsx
Normal file
|
@ -0,0 +1,8 @@
|
|||
import React from "react";
|
||||
|
||||
import { useAdminClient } from "../context/auth/AdminClient";
|
||||
|
||||
export const InitialAccessTokenList = () => {
|
||||
const adminClient = useAdminClient();
|
||||
return <h1>Hello</h1>;
|
||||
};
|
|
@ -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",
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue