首页改为“领域运营工作台”，非 master 领域也有完整管理首页。
根据权限展示用户、客户端、组、领域设置、认证、事件等业务入口。 新增安全配置概览：领域状态、注册、邮箱验证、暴力破解保护。 侧栏增加领域上下文、状态和业务分组。 重构通用页面标题组件，统一标题、说明、状态、开关和操作区。 增加统一工作区容器，并优化表格、表单及详情页布局。 补充简体中文、繁体中文和英文文案。
This commit is contained in:
+6
-6
@@ -4,12 +4,17 @@
|
||||
# account/KcAccountUi.tsx
|
||||
# account/KcContext.ts
|
||||
# account/KcPage.tsx
|
||||
# admin/App.tsx
|
||||
# admin/index.css
|
||||
# admin/KcAdminUi.tsx
|
||||
# admin/page-nav.css
|
||||
# admin/PageNav.tsx
|
||||
# account/assets/logo.svg
|
||||
# account/personal-info/PersonalInfo.tsx
|
||||
# account/root/PageNav.tsx
|
||||
# admin/assets/logo.svg
|
||||
# admin/dashboard/dashboard.css
|
||||
# admin/dashboard/Dashboard.tsx
|
||||
# admin/i18n/messages_en.properties
|
||||
# admin/i18n/messages_zh_Hans.properties
|
||||
# admin/i18n/messages_zh_Hant.properties
|
||||
@@ -18,6 +23,7 @@
|
||||
# email/messages/messages_zh_CN.properties
|
||||
# email/messages/messages_zh_TW.properties
|
||||
# account/components/page/Page.tsx
|
||||
# admin/components/view-header/ViewHeader.tsx
|
||||
# === Owned files end =====
|
||||
|
||||
# === @keycloakify/email-native v260007.0.0 ===
|
||||
@@ -83,7 +89,6 @@
|
||||
|
||||
# === @keycloakify/keycloak-admin-ui v260700.0.2 ===
|
||||
/admin/admin-client.tsx
|
||||
/admin/App.tsx
|
||||
/admin/banners.module.css
|
||||
/admin/Banners.tsx
|
||||
/admin/colorScheme.ts
|
||||
@@ -94,10 +99,8 @@
|
||||
/admin/i18next.d.ts
|
||||
/admin/KcContext.ts
|
||||
/admin/KcPage.tsx
|
||||
/admin/page-nav.css
|
||||
/admin/PageHeader.tsx
|
||||
/admin/PageHeaderClearCachesModal.tsx
|
||||
/admin/PageNav.tsx
|
||||
/admin/PageNotFoundSection.tsx
|
||||
/admin/Root.tsx
|
||||
/admin/routes.tsx
|
||||
@@ -134,8 +137,6 @@
|
||||
/admin/clients/utils.ts
|
||||
/admin/components/SwitchControl.tsx
|
||||
/admin/context/RecentRealms.tsx
|
||||
/admin/dashboard/dashboard.css
|
||||
/admin/dashboard/Dashboard.tsx
|
||||
/admin/dashboard/ProviderInfo.tsx
|
||||
/admin/dashboard/routes.ts
|
||||
/admin/events/AdminEvents.tsx
|
||||
@@ -522,7 +523,6 @@
|
||||
/admin/components/users/UserDataTableAttributeSearchForm.tsx
|
||||
/admin/components/users/UserDataTableToolbarItems.tsx
|
||||
/admin/components/users/UserSelect.tsx
|
||||
/admin/components/view-header/ViewHeader.tsx
|
||||
/admin/components/wizard-section-header/wizard-section-header.css
|
||||
/admin/components/wizard-section-header/WizardSectionHeader.tsx
|
||||
/admin/context/access/Access.tsx
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* This file has been claimed for ownership from @keycloakify/keycloak-admin-ui version 260700.0.2.
|
||||
* To relinquish ownership and restore this file to its original content, run the following command:
|
||||
*
|
||||
* $ npx keycloakify own --path "admin/App.tsx" --revert
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
// @ts-nocheck
|
||||
|
||||
import { SessionExpirationWarningOverlay } from "../shared/SessionExpirationWarningOverlay";
|
||||
import {
|
||||
ErrorBoundaryFallback,
|
||||
ErrorBoundaryProvider,
|
||||
KeycloakSpinner,
|
||||
mainPageContentId
|
||||
} from "../shared/keycloak-ui-shared";
|
||||
import { Flex, FlexItem, Page } from "../shared/@patternfly/react-core";
|
||||
import { PropsWithChildren, Suspense, useEffect } from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { AdminClientProvider } from "./admin-client";
|
||||
import { Header } from "./PageHeader";
|
||||
import { PageNav } from "./PageNav";
|
||||
import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs";
|
||||
import { ErrorRenderer } from "./components/error/ErrorRenderer";
|
||||
import { RecentRealmsProvider } from "./context/RecentRealms";
|
||||
import { AccessContextProvider } from "./context/access/Access";
|
||||
import { RealmContextProvider } from "./context/realm-context/RealmContext";
|
||||
import { ServerInfoProvider } from "./context/server-info/ServerInfoProvider";
|
||||
import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
|
||||
import { SubGroups } from "./groups/SubGroupsContext";
|
||||
import { AuthWall } from "./root/AuthWall";
|
||||
import { Banners } from "./Banners";
|
||||
|
||||
export const AppContexts = ({ children }: PropsWithChildren) => (
|
||||
<ErrorBoundaryProvider>
|
||||
<ErrorBoundaryFallback fallback={ErrorRenderer}>
|
||||
<ServerInfoProvider>
|
||||
<RealmContextProvider>
|
||||
<WhoAmIContextProvider>
|
||||
<RecentRealmsProvider>
|
||||
<AccessContextProvider>
|
||||
<SubGroups>{children}</SubGroups>
|
||||
</AccessContextProvider>
|
||||
</RecentRealmsProvider>
|
||||
</WhoAmIContextProvider>
|
||||
</RealmContextProvider>
|
||||
</ServerInfoProvider>
|
||||
</ErrorBoundaryFallback>
|
||||
</ErrorBoundaryProvider>
|
||||
);
|
||||
|
||||
export const App = () => {
|
||||
const hrefEndsWithHashSlash = location.href.endsWith("#/");
|
||||
useEffect(() => {
|
||||
if (!hrefEndsWithHashSlash) return;
|
||||
history.replaceState(null, "", location.pathname);
|
||||
}, [hrefEndsWithHashSlash, location.pathname]);
|
||||
|
||||
return (
|
||||
<AdminClientProvider>
|
||||
<AppContexts>
|
||||
<Flex
|
||||
direction={{ default: "column" }}
|
||||
flexWrap={{ default: "nowrap" }}
|
||||
spaceItems={{ default: "spaceItemsNone" }}
|
||||
style={{ height: "100%" }}
|
||||
>
|
||||
<FlexItem>
|
||||
<Banners />
|
||||
</FlexItem>
|
||||
<FlexItem grow={{ default: "grow" }} style={{ minHeight: 0 }}>
|
||||
<Page
|
||||
header={<Header />}
|
||||
isManagedSidebar
|
||||
sidebar={<PageNav />}
|
||||
breadcrumb={<PageBreadCrumbs />}
|
||||
mainContainerId={mainPageContentId}
|
||||
>
|
||||
<ErrorBoundaryFallback fallback={ErrorRenderer}>
|
||||
<Suspense fallback={<KeycloakSpinner />}>
|
||||
<AuthWall>
|
||||
<div className="admin-workspace-route">
|
||||
<Outlet />
|
||||
</div>
|
||||
</AuthWall>
|
||||
</Suspense>
|
||||
</ErrorBoundaryFallback>
|
||||
</Page>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
<SessionExpirationWarningOverlay warnUserSecondsBeforeAutoLogout={45} />
|
||||
</AppContexts>
|
||||
</AdminClientProvider>
|
||||
);
|
||||
};
|
||||
@@ -17,6 +17,7 @@ import { getKcContext } from "./KcContext";
|
||||
|
||||
import "./index.css";
|
||||
import "../console-ui.css";
|
||||
import "./workspace.css";
|
||||
|
||||
const { kcContext } = getKcContext();
|
||||
|
||||
|
||||
@@ -0,0 +1,233 @@
|
||||
/**
|
||||
* This file has been claimed for ownership from @keycloakify/keycloak-admin-ui version 260700.0.2.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
// @ts-nocheck
|
||||
|
||||
import { useEnvironment } from "../shared/keycloak-ui-shared";
|
||||
import {
|
||||
Label,
|
||||
Nav,
|
||||
NavGroup,
|
||||
PageSidebar,
|
||||
PageSidebarBody
|
||||
} from "../shared/@patternfly/react-core";
|
||||
import { FormEvent } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import { useAccess } from "./context/access/Access";
|
||||
import { useRealm } from "./context/realm-context/RealmContext";
|
||||
import { useServerInfo } from "./context/server-info/ServerInfoProvider";
|
||||
import type { Environment } from "./environment-types";
|
||||
import { toPage } from "./page/routes";
|
||||
import { routes } from "./routes";
|
||||
import { resolveDisplayName } from "./util";
|
||||
import useIsFeatureEnabled, { Feature } from "./utils/useIsFeatureEnabled";
|
||||
|
||||
import "./page-nav.css";
|
||||
|
||||
type LeftNavProps = {
|
||||
title: string;
|
||||
path: string;
|
||||
code: string;
|
||||
id?: string;
|
||||
};
|
||||
|
||||
const LeftNav = ({ title, path, code, id }: LeftNavProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { hasAccess } = useAccess();
|
||||
const { realm } = useRealm();
|
||||
const encodedRealm = encodeURIComponent(realm);
|
||||
const route = routes.find(
|
||||
route => route.path.replace(/\/:.+?(\?|(?:(?!\/).)*|$)/g, "") === (id || path)
|
||||
);
|
||||
|
||||
const accessAllowed =
|
||||
route &&
|
||||
(route.handle.access instanceof Array
|
||||
? hasAccess(...route.handle.access)
|
||||
: hasAccess(route.handle.access));
|
||||
|
||||
if (!accessAllowed) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const name = "nav-item" + (path || "-overview").replace("/", "-");
|
||||
return (
|
||||
<li>
|
||||
<NavLink
|
||||
id={name}
|
||||
data-testid={name}
|
||||
to={`/${encodedRealm}${path}`}
|
||||
className={({ isActive }) =>
|
||||
`pf-v5-c-nav__link${isActive ? " pf-m-current" : ""}`
|
||||
}
|
||||
>
|
||||
<span className="admin-nav-code" aria-hidden="true">
|
||||
{code}
|
||||
</span>
|
||||
<span>{t(title)}</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export const PageNav = () => {
|
||||
const { t } = useTranslation();
|
||||
const { environment } = useEnvironment<Environment>();
|
||||
const { hasSomeAccess } = useAccess();
|
||||
const { componentTypes } = useServerInfo();
|
||||
const isFeatureEnabled = useIsFeatureEnabled();
|
||||
const pages = componentTypes?.["org.keycloak.services.ui.extend.UiPageProvider"];
|
||||
const navigate = useNavigate();
|
||||
const { realm, realmRepresentation } = useRealm();
|
||||
|
||||
type SelectedItem = {
|
||||
groupId: number | string;
|
||||
itemId: number | string;
|
||||
to: string;
|
||||
event: FormEvent<HTMLInputElement>;
|
||||
};
|
||||
|
||||
const onSelect = (item: SelectedItem) => {
|
||||
navigate(item.to);
|
||||
item.event.preventDefault();
|
||||
};
|
||||
|
||||
const showManage = hasSomeAccess(
|
||||
"view-realm",
|
||||
"query-groups",
|
||||
"query-users",
|
||||
"query-clients",
|
||||
"query-organizations",
|
||||
"view-events"
|
||||
);
|
||||
const showConfigure = hasSomeAccess(
|
||||
"view-realm",
|
||||
"query-clients",
|
||||
"view-identity-providers"
|
||||
);
|
||||
const showWorkflows =
|
||||
hasSomeAccess("realm-admin", "admin") && isFeatureEnabled(Feature.Workflows);
|
||||
const showManageRealm = environment.masterRealm === environment.realm;
|
||||
const realmName = resolveDisplayName(t, realmRepresentation.displayName, realm);
|
||||
|
||||
return (
|
||||
<PageSidebar className="keycloak__page_nav__nav">
|
||||
<PageSidebarBody>
|
||||
<div className="admin-nav-context">
|
||||
<span className="admin-nav-context__eyebrow">
|
||||
{t("adminWorkspaceRealmEyebrow")}
|
||||
</span>
|
||||
<strong data-testid="currentRealm">{realmName}</strong>
|
||||
<div className="admin-nav-context__meta">
|
||||
<span
|
||||
className={`admin-nav-status${
|
||||
realmRepresentation.enabled === false
|
||||
? " is-disabled"
|
||||
: ""
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{realmRepresentation.enabled === false
|
||||
? t("disabled")
|
||||
: t("enabled")}
|
||||
</div>
|
||||
</div>
|
||||
<Nav onSelect={(_event, item) => onSelect(item as SelectedItem)}>
|
||||
<NavGroup>
|
||||
<LeftNav
|
||||
title="adminWorkspaceOverview"
|
||||
path=""
|
||||
id="/"
|
||||
code="OVR"
|
||||
/>
|
||||
</NavGroup>
|
||||
{showManageRealm && (
|
||||
<NavGroup>
|
||||
<LeftNav title="manageRealms" path="/realms" code="RLM" />
|
||||
</NavGroup>
|
||||
)}
|
||||
{showManage && (
|
||||
<NavGroup aria-label={t("manage")} title={t("manage")}>
|
||||
{isFeatureEnabled(Feature.Organizations) &&
|
||||
realmRepresentation.organizationsEnabled && (
|
||||
<LeftNav
|
||||
title="organizations"
|
||||
path="/organizations"
|
||||
code="ORG"
|
||||
/>
|
||||
)}
|
||||
<LeftNav title="clients" path="/clients" code="APP" />
|
||||
<LeftNav
|
||||
title="clientScopes"
|
||||
path="/client-scopes"
|
||||
code="SCP"
|
||||
/>
|
||||
<LeftNav title="realmRoles" path="/roles" code="ROL" />
|
||||
<LeftNav title="users" path="/users" code="USR" />
|
||||
<LeftNav title="groups" path="/groups" code="GRP" />
|
||||
<LeftNav title="sessions" path="/sessions" code="SES" />
|
||||
<LeftNav title="events" path="/events" code="EVT" />
|
||||
</NavGroup>
|
||||
)}
|
||||
{showConfigure && (
|
||||
<NavGroup aria-label={t("configure")} title={t("configure")}>
|
||||
<LeftNav
|
||||
title="realmSettings"
|
||||
path="/realm-settings"
|
||||
code="CFG"
|
||||
/>
|
||||
<LeftNav
|
||||
title="authentication"
|
||||
path="/authentication"
|
||||
code="AUTH"
|
||||
/>
|
||||
{isFeatureEnabled(Feature.AdminFineGrainedAuthzV2) &&
|
||||
realmRepresentation.adminPermissionsEnabled && (
|
||||
<LeftNav
|
||||
title="permissions"
|
||||
path="/permissions"
|
||||
code="POL"
|
||||
/>
|
||||
)}
|
||||
<LeftNav
|
||||
title="identityProviders"
|
||||
path="/identity-providers"
|
||||
code="IDP"
|
||||
/>
|
||||
<LeftNav
|
||||
title="userFederation"
|
||||
path="/user-federation"
|
||||
code="DIR"
|
||||
/>
|
||||
{showWorkflows && (
|
||||
<LeftNav
|
||||
title="workflows"
|
||||
path="/workflows"
|
||||
code="FLOW"
|
||||
/>
|
||||
)}
|
||||
{isFeatureEnabled(Feature.DeclarativeUI) &&
|
||||
pages?.map(page => (
|
||||
<LeftNav
|
||||
key={page.id}
|
||||
title={page.id}
|
||||
path={toPage({ providerId: page.id }).pathname!}
|
||||
id="/page-section"
|
||||
code="EXT"
|
||||
/>
|
||||
))}
|
||||
</NavGroup>
|
||||
)}
|
||||
</Nav>
|
||||
<div className="admin-nav-footer">
|
||||
<span>{t("adminWorkspaceConsoleLabel")}</span>
|
||||
<Label color="blue">{t("currentRealm")}</Label>
|
||||
</div>
|
||||
</PageSidebarBody>
|
||||
</PageSidebar>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,219 @@
|
||||
/**
|
||||
* This file has been claimed for ownership from @keycloakify/keycloak-admin-ui version 260700.0.2.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
// @ts-nocheck
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Divider,
|
||||
Dropdown,
|
||||
DropdownList,
|
||||
MenuToggle,
|
||||
PageSection,
|
||||
Switch
|
||||
} from "../../../shared/@patternfly/react-core";
|
||||
import { Fragment, ReactElement, ReactNode, isValidElement, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { HelpItem, useHelp } from "../../../shared/keycloak-ui-shared";
|
||||
import { FormattedLink } from "../external-link/FormattedLink";
|
||||
import "../../help-urls";
|
||||
|
||||
export type ViewHeaderProps = {
|
||||
titleKey: string;
|
||||
className?: string;
|
||||
badges?: ViewHeaderBadge[];
|
||||
isDropdownDisabled?: boolean;
|
||||
subKey?: string | ReactNode;
|
||||
actionsDropdownId?: string;
|
||||
helpUrl?: string | undefined;
|
||||
dropdownItems?: ReactElement[];
|
||||
lowerDropdownItems?: any;
|
||||
lowerDropdownMenuTitle?: any;
|
||||
lowerButton?: any;
|
||||
isEnabled?: boolean;
|
||||
onToggle?: (value: boolean) => void;
|
||||
divider?: boolean;
|
||||
helpTextKey?: string;
|
||||
isReadOnly?: boolean;
|
||||
actionDropdownTitle?: string;
|
||||
noTranslate?: boolean;
|
||||
};
|
||||
|
||||
export type ViewHeaderBadge = {
|
||||
id?: string;
|
||||
text?: string | ReactNode;
|
||||
readonly?: boolean;
|
||||
};
|
||||
|
||||
export const ViewHeader = ({
|
||||
actionsDropdownId,
|
||||
className,
|
||||
titleKey,
|
||||
badges,
|
||||
isDropdownDisabled,
|
||||
subKey,
|
||||
helpUrl,
|
||||
dropdownItems,
|
||||
lowerDropdownMenuTitle,
|
||||
lowerDropdownItems,
|
||||
lowerButton,
|
||||
isEnabled = true,
|
||||
onToggle,
|
||||
divider = true,
|
||||
helpTextKey,
|
||||
isReadOnly = false,
|
||||
actionDropdownTitle = "action",
|
||||
noTranslate = false
|
||||
}: ViewHeaderProps) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { enabled } = useHelp();
|
||||
const [isDropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [isLowerDropdownOpen, setIsLowerDropdownOpen] = useState(false);
|
||||
const toKey = (value: string) => value.replace(/\s/g, "-");
|
||||
const title = noTranslate || !i18n.exists(titleKey) ? titleKey : t(titleKey);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageSection variant="light" className="admin-view-header">
|
||||
<div className="admin-view-header__layout">
|
||||
<div className="admin-view-header__copy">
|
||||
<span className="admin-view-header__eyebrow">
|
||||
{t("adminWorkspaceSectionEyebrow")}
|
||||
</span>
|
||||
<div className="admin-view-header__title-row">
|
||||
<h1 className={className} data-testid="view-header">
|
||||
{title}
|
||||
</h1>
|
||||
{badges?.length ? (
|
||||
<div className="admin-view-header__badges">
|
||||
{badges.map((badge, index) => (
|
||||
<Fragment key={badge.id ?? index}>
|
||||
{isValidElement(badge.text) ? (
|
||||
badge.text
|
||||
) : (
|
||||
<Badge
|
||||
data-testid={badge.id}
|
||||
isRead={badge.readonly}
|
||||
>
|
||||
{badge.text}
|
||||
</Badge>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{enabled && (subKey || helpUrl) && (
|
||||
<p
|
||||
id="view-header-subkey"
|
||||
className="admin-view-header__description"
|
||||
>
|
||||
{isValidElement(subKey)
|
||||
? subKey
|
||||
: subKey
|
||||
? t(subKey as string)
|
||||
: ""}
|
||||
{helpUrl && (
|
||||
<FormattedLink
|
||||
title={t("learnMore")}
|
||||
href={helpUrl}
|
||||
isInline
|
||||
className="pf-v5-u-ml-md"
|
||||
/>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{(onToggle || dropdownItems) && (
|
||||
<div className="admin-view-header__actions">
|
||||
{onToggle && (
|
||||
<div className="admin-view-header__switch">
|
||||
<Switch
|
||||
id={`${toKey(titleKey)}-switch`}
|
||||
data-testid={`${titleKey}-switch`}
|
||||
label={t("enabled")}
|
||||
labelOff={t("disabled")}
|
||||
isDisabled={isReadOnly}
|
||||
isChecked={isEnabled}
|
||||
aria-label={t("enabled")}
|
||||
onChange={(_event, value) => onToggle(value)}
|
||||
/>
|
||||
{helpTextKey && (
|
||||
<HelpItem
|
||||
helpText={t(helpTextKey)}
|
||||
fieldLabelId={`${toKey(titleKey)}-switch`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{dropdownItems && (
|
||||
<Dropdown
|
||||
popperProps={{ position: "right" }}
|
||||
onOpenChange={setDropdownOpen}
|
||||
toggle={ref => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
isDisabled={isDropdownDisabled}
|
||||
id={actionsDropdownId}
|
||||
onClick={() =>
|
||||
setDropdownOpen(value => !value)
|
||||
}
|
||||
data-testid="action-dropdown"
|
||||
variant="primary"
|
||||
>
|
||||
{t(actionDropdownTitle)}
|
||||
</MenuToggle>
|
||||
)}
|
||||
isOpen={isDropdownOpen}
|
||||
>
|
||||
<DropdownList>{dropdownItems}</DropdownList>
|
||||
</Dropdown>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(lowerDropdownItems || lowerButton) && (
|
||||
<div className="admin-view-header__lower-actions">
|
||||
{lowerDropdownItems && (
|
||||
<Dropdown
|
||||
className="keycloak__user-federation__dropdown"
|
||||
onOpenChange={setIsLowerDropdownOpen}
|
||||
toggle={ref => (
|
||||
<MenuToggle
|
||||
ref={ref}
|
||||
onClick={() =>
|
||||
setIsLowerDropdownOpen(value => !value)
|
||||
}
|
||||
variant="primary"
|
||||
id="ufToggleId"
|
||||
>
|
||||
{t(lowerDropdownMenuTitle)}
|
||||
</MenuToggle>
|
||||
)}
|
||||
isOpen={isLowerDropdownOpen}
|
||||
>
|
||||
<DropdownList>{lowerDropdownItems}</DropdownList>
|
||||
</Dropdown>
|
||||
)}
|
||||
{lowerButton && (
|
||||
<Button
|
||||
variant={lowerButton.variant}
|
||||
onClick={lowerButton.onClick}
|
||||
data-testid="viewHeader-lower-btn"
|
||||
>
|
||||
{lowerButton.lowerButtonTitle}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</PageSection>
|
||||
{divider && (
|
||||
<Divider component="div" className="admin-view-header__divider" />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,428 @@
|
||||
/**
|
||||
* This file has been claimed for ownership from @keycloakify/keycloak-admin-ui version 260700.0.2.
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
// @ts-nocheck
|
||||
|
||||
import FeatureRepresentation, {
|
||||
FeatureType
|
||||
} from "@keycloak/keycloak-admin-client/lib/defs/featureRepresentation";
|
||||
import {
|
||||
HelpItem,
|
||||
KeycloakSpinner,
|
||||
useEnvironment
|
||||
} from "../../shared/keycloak-ui-shared";
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
CardTitle,
|
||||
DescriptionList,
|
||||
DescriptionListDescription,
|
||||
DescriptionListGroup,
|
||||
DescriptionListTerm,
|
||||
Grid,
|
||||
GridItem,
|
||||
Label,
|
||||
List,
|
||||
ListItem,
|
||||
ListVariant,
|
||||
PageSection,
|
||||
Tab,
|
||||
TabTitleText
|
||||
} from "../../shared/@patternfly/react-core";
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { RoutableTabs, useRoutableTab } from "../components/routable-tabs/RoutableTabs";
|
||||
import { useAccess } from "../context/access/Access";
|
||||
import { useRealm } from "../context/realm-context/RealmContext";
|
||||
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
|
||||
import type { Environment } from "../environment-types";
|
||||
import helpUrls from "../help-urls";
|
||||
import { resolveDisplayName } from "../util";
|
||||
import useLocaleSort, { mapByKey } from "../utils/useLocaleSort";
|
||||
import { ProviderInfo } from "./ProviderInfo";
|
||||
import { DashboardTab, toDashboard } from "./routes/Dashboard";
|
||||
|
||||
import "./dashboard.css";
|
||||
|
||||
type WorkspaceLink = {
|
||||
titleKey: string;
|
||||
descriptionKey: string;
|
||||
path: string;
|
||||
code: string;
|
||||
tone: "blue" | "green" | "amber" | "coral";
|
||||
access: string[];
|
||||
};
|
||||
|
||||
const workspaceLinks: WorkspaceLink[] = [
|
||||
{
|
||||
titleKey: "users",
|
||||
descriptionKey: "adminWorkspaceUsersDescription",
|
||||
path: "/users",
|
||||
code: "USR",
|
||||
tone: "blue",
|
||||
access: ["query-users", "view-users", "manage-users"]
|
||||
},
|
||||
{
|
||||
titleKey: "clients",
|
||||
descriptionKey: "adminWorkspaceClientsDescription",
|
||||
path: "/clients",
|
||||
code: "APP",
|
||||
tone: "green",
|
||||
access: ["query-clients", "view-clients", "manage-clients"]
|
||||
},
|
||||
{
|
||||
titleKey: "groups",
|
||||
descriptionKey: "adminWorkspaceGroupsDescription",
|
||||
path: "/groups",
|
||||
code: "GRP",
|
||||
tone: "amber",
|
||||
access: ["query-groups", "view-users", "manage-users"]
|
||||
},
|
||||
{
|
||||
titleKey: "realmSettings",
|
||||
descriptionKey: "adminWorkspaceRealmSettingsDescription",
|
||||
path: "/realm-settings",
|
||||
code: "CFG",
|
||||
tone: "coral",
|
||||
access: ["view-realm", "manage-realm"]
|
||||
},
|
||||
{
|
||||
titleKey: "authentication",
|
||||
descriptionKey: "adminWorkspaceAuthenticationDescription",
|
||||
path: "/authentication",
|
||||
code: "AUTH",
|
||||
tone: "blue",
|
||||
access: ["view-realm", "manage-realm"]
|
||||
},
|
||||
{
|
||||
titleKey: "events",
|
||||
descriptionKey: "adminWorkspaceEventsDescription",
|
||||
path: "/events",
|
||||
code: "EVT",
|
||||
tone: "green",
|
||||
access: ["view-events", "manage-events"]
|
||||
}
|
||||
];
|
||||
|
||||
const BooleanStatus = ({ value }: { value?: boolean }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<span className={`admin-dashboard-status${value ? " is-positive" : ""}`}>
|
||||
<i aria-hidden="true" />
|
||||
{value ? t("enabled") : t("disabled")}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const OperationsOverview = () => {
|
||||
const { t } = useTranslation();
|
||||
const { realm, realmRepresentation: realmInfo } = useRealm();
|
||||
const { hasSomeAccess } = useAccess();
|
||||
const encodedRealm = encodeURIComponent(realm);
|
||||
const realmDisplayName = resolveDisplayName(t, realmInfo.displayName, realm);
|
||||
const availableLinks = workspaceLinks.filter(link => hasSomeAccess(...link.access));
|
||||
|
||||
const postureItems = [
|
||||
{
|
||||
label: t("adminWorkspaceRealmStatus"),
|
||||
value: <BooleanStatus value={realmInfo.enabled !== false} />
|
||||
},
|
||||
{
|
||||
label: t("userRegistration"),
|
||||
value: <BooleanStatus value={realmInfo.registrationAllowed === true} />
|
||||
},
|
||||
{
|
||||
label: t("verifyEmail"),
|
||||
value: <BooleanStatus value={realmInfo.verifyEmail === true} />
|
||||
},
|
||||
{
|
||||
label: t("bruteForceDetection"),
|
||||
value: <BooleanStatus value={realmInfo.bruteForceProtected === true} />
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="admin-dashboard-overview">
|
||||
<section className="admin-dashboard-hero">
|
||||
<div className="admin-dashboard-hero__copy">
|
||||
<span className="admin-dashboard-eyebrow">
|
||||
{t("adminWorkspaceRealmEyebrow")}
|
||||
</span>
|
||||
<h1>{realmDisplayName}</h1>
|
||||
<p>{t("adminWorkspaceOverviewDescription")}</p>
|
||||
<div className="admin-dashboard-hero__meta">
|
||||
<span>{t("realmName")}</span>
|
||||
<strong>{realm}</strong>
|
||||
<BooleanStatus value={realmInfo.enabled !== false} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-dashboard-hero__signal" aria-hidden="true">
|
||||
<span>IDENTITY</span>
|
||||
<i />
|
||||
<strong>{availableLinks.length}</strong>
|
||||
<small>{t("adminWorkspaceAvailableAreas")}</small>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="admin-dashboard-layout">
|
||||
<section
|
||||
className="admin-dashboard-primary"
|
||||
aria-labelledby="workspace-title"
|
||||
>
|
||||
<header className="admin-dashboard-section-header">
|
||||
<div>
|
||||
<span>{t("adminWorkspaceOperateEyebrow")}</span>
|
||||
<h2 id="workspace-title">{t("adminWorkspaceManageTitle")}</h2>
|
||||
</div>
|
||||
<p>{t("adminWorkspaceManageDescription")}</p>
|
||||
</header>
|
||||
<div className="admin-dashboard-link-grid">
|
||||
{availableLinks.map(link => (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={`/${encodedRealm}${link.path}`}
|
||||
className={`admin-dashboard-link-card is-${link.tone}`}
|
||||
>
|
||||
<span className="admin-dashboard-link-card__code">
|
||||
{link.code}
|
||||
</span>
|
||||
<span className="admin-dashboard-link-card__copy">
|
||||
<strong>{t(link.titleKey)}</strong>
|
||||
<small>{t(link.descriptionKey)}</small>
|
||||
</span>
|
||||
<span
|
||||
className="admin-dashboard-link-card__arrow"
|
||||
aria-hidden="true"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="admin-dashboard-aside">
|
||||
<section className="admin-dashboard-posture">
|
||||
<header>
|
||||
<span>{t("adminWorkspacePostureEyebrow")}</span>
|
||||
<h2>{t("adminWorkspacePostureTitle")}</h2>
|
||||
</header>
|
||||
<dl>
|
||||
{postureItems.map(item => (
|
||||
<div key={item.label}>
|
||||
<dt>{item.label}</dt>
|
||||
<dd>{item.value}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
{hasSomeAccess("view-realm", "manage-realm") && (
|
||||
<Link
|
||||
className="admin-dashboard-text-link"
|
||||
to={`/${encodedRealm}/realm-settings`}
|
||||
>
|
||||
{t("adminWorkspaceReviewSettings")} <span>→</span>
|
||||
</Link>
|
||||
)}
|
||||
</section>
|
||||
<section className="admin-dashboard-guide">
|
||||
<span>{t("adminWorkspaceHelpEyebrow")}</span>
|
||||
<h2>{t("adminWorkspaceHelpTitle")}</h2>
|
||||
<p>{t("adminWorkspaceHelpDescription")}</p>
|
||||
<a href={helpUrls.documentation} target="_blank" rel="noreferrer">
|
||||
{t("viewDocumentation")} <span>↗</span>
|
||||
</a>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type FeatureItemProps = { feature: FeatureRepresentation };
|
||||
|
||||
const FeatureItem = ({ feature }: FeatureItemProps) => {
|
||||
const { t } = useTranslation();
|
||||
const color =
|
||||
feature.type === FeatureType.Default ||
|
||||
feature.type === FeatureType.DisabledByDefault
|
||||
? "green"
|
||||
: feature.type === FeatureType.Preview ||
|
||||
feature.type === FeatureType.PreviewDisabledByDefault
|
||||
? "blue"
|
||||
: feature.type === FeatureType.Experimental
|
||||
? "orange"
|
||||
: "grey";
|
||||
return (
|
||||
<ListItem className="pf-v5-u-mb-sm">
|
||||
{feature.name}
|
||||
<Label color={color}>{t(feature.type.toLowerCase())}</Label>
|
||||
{feature.deprecated && feature.type !== FeatureType.Deprecated && (
|
||||
<>
|
||||
<Label color="grey">{t("deprecated")}</Label>
|
||||
</>
|
||||
)}
|
||||
</ListItem>
|
||||
);
|
||||
};
|
||||
|
||||
const ServerInformation = () => {
|
||||
const { t } = useTranslation();
|
||||
const serverInfo = useServerInfo();
|
||||
const localeSort = useLocaleSort();
|
||||
const sortedFeatures = useMemo(
|
||||
() => localeSort(serverInfo.features ?? [], mapByKey("name")),
|
||||
[serverInfo.features]
|
||||
);
|
||||
const enabledFeatures = sortedFeatures.filter(feature => feature.enabled);
|
||||
const disabledFeatures = sortedFeatures.filter(feature => !feature.enabled);
|
||||
|
||||
if (Object.keys(serverInfo).length === 0) {
|
||||
return <KeycloakSpinner />;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageSection variant="light" className="admin-dashboard-technical">
|
||||
<Grid hasGutter>
|
||||
<GridItem lg={4} sm={12}>
|
||||
<Card className="keycloak__dashboard_card">
|
||||
<CardTitle>{t("serverInfo")}</CardTitle>
|
||||
<CardBody>
|
||||
<DescriptionList>
|
||||
<DescriptionListGroup>
|
||||
<DescriptionListTerm>
|
||||
{t("version")}
|
||||
</DescriptionListTerm>
|
||||
<DescriptionListDescription>
|
||||
{serverInfo.systemInfo?.version}
|
||||
</DescriptionListDescription>
|
||||
</DescriptionListGroup>
|
||||
<DescriptionListGroup>
|
||||
<DescriptionListTerm>
|
||||
{t("processorCount")}
|
||||
</DescriptionListTerm>
|
||||
<DescriptionListDescription>
|
||||
{serverInfo.cpuInfo?.processorCount}
|
||||
</DescriptionListDescription>
|
||||
</DescriptionListGroup>
|
||||
<DescriptionListGroup>
|
||||
<DescriptionListTerm>
|
||||
{t("usedMemory")}
|
||||
</DescriptionListTerm>
|
||||
<DescriptionListDescription>
|
||||
{serverInfo.memoryInfo?.usedFormated} /{" "}
|
||||
{serverInfo.memoryInfo?.totalFormated}
|
||||
</DescriptionListDescription>
|
||||
</DescriptionListGroup>
|
||||
</DescriptionList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
<GridItem lg={8} sm={12}>
|
||||
<Card className="keycloak__dashboard_card">
|
||||
<CardTitle>{t("profile")}</CardTitle>
|
||||
<CardBody>
|
||||
<DescriptionList>
|
||||
<DescriptionListGroup>
|
||||
<DescriptionListTerm>
|
||||
{t("enabledFeatures")}{" "}
|
||||
<HelpItem
|
||||
fieldLabelId="enabledFeatures"
|
||||
helpText={t("infoEnabledFeatures")}
|
||||
/>
|
||||
</DescriptionListTerm>
|
||||
<DescriptionListDescription>
|
||||
<List variant={ListVariant.inline}>
|
||||
{enabledFeatures.map(feature => (
|
||||
<FeatureItem
|
||||
key={feature.name}
|
||||
feature={feature}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</DescriptionListDescription>
|
||||
</DescriptionListGroup>
|
||||
<DescriptionListGroup>
|
||||
<DescriptionListTerm>
|
||||
{t("disabledFeatures")}{" "}
|
||||
<HelpItem
|
||||
fieldLabelId="disabledFeatures"
|
||||
helpText={t("infoDisabledFeatures")}
|
||||
/>
|
||||
</DescriptionListTerm>
|
||||
<DescriptionListDescription>
|
||||
<List variant={ListVariant.inline}>
|
||||
{disabledFeatures.map(feature => (
|
||||
<FeatureItem
|
||||
key={feature.name}
|
||||
feature={feature}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</DescriptionListDescription>
|
||||
</DescriptionListGroup>
|
||||
</DescriptionList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</PageSection>
|
||||
);
|
||||
};
|
||||
|
||||
const MasterDashboard = () => {
|
||||
const { t } = useTranslation();
|
||||
const { realm } = useRealm();
|
||||
const useTab = (tab: DashboardTab) => useRoutableTab(toDashboard({ realm, tab }));
|
||||
const welcomeTab = useTab("welcome");
|
||||
const infoTab = useTab("info");
|
||||
const providersTab = useTab("providers");
|
||||
|
||||
return (
|
||||
<RoutableTabs
|
||||
data-testid="dashboard-tabs"
|
||||
defaultLocation={toDashboard({ realm, tab: "welcome" })}
|
||||
isBox
|
||||
mountOnEnter
|
||||
className="admin-dashboard-tabs"
|
||||
>
|
||||
<Tab
|
||||
id="welcome"
|
||||
data-testid="welcomeTab"
|
||||
title={<TabTitleText>{t("adminWorkspaceOverview")}</TabTitleText>}
|
||||
{...welcomeTab}
|
||||
>
|
||||
<OperationsOverview />
|
||||
</Tab>
|
||||
<Tab
|
||||
id="info"
|
||||
data-testid="infoTab"
|
||||
title={<TabTitleText>{t("serverInfo")}</TabTitleText>}
|
||||
{...infoTab}
|
||||
>
|
||||
<ServerInformation />
|
||||
</Tab>
|
||||
<Tab
|
||||
id="providers"
|
||||
data-testid="providersTab"
|
||||
title={<TabTitleText>{t("providerInfo")}</TabTitleText>}
|
||||
{...providersTab}
|
||||
>
|
||||
<ProviderInfo />
|
||||
</Tab>
|
||||
</RoutableTabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default function DashboardSection() {
|
||||
const { realm } = useRealm();
|
||||
const { environment } = useEnvironment<Environment>();
|
||||
return realm === environment.masterRealm ? (
|
||||
<MasterDashboard />
|
||||
) : (
|
||||
<OperationsOverview />
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
.admin-dashboard-overview {
|
||||
padding: clamp(1.25rem, 3vw, 3rem) clamp(1.25rem, 3.2vw, 3.75rem) 5rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-overview > * {
|
||||
width: 100%;
|
||||
max-width: 1380px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.55fr);
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
min-height: 260px;
|
||||
border: 1px solid var(--console-line);
|
||||
border-radius: 20px;
|
||||
color: #f7fbff;
|
||||
background: linear-gradient(135deg, #193a5b, #245a89 58%, #277e78);
|
||||
box-shadow: 0 24px 52px rgba(23, 50, 77, 0.16);
|
||||
}
|
||||
|
||||
.admin-dashboard-hero::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
content: "";
|
||||
mask-image: linear-gradient(90deg, transparent, #000 65%);
|
||||
}
|
||||
|
||||
.admin-dashboard-hero::after {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 5px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--console-teal) 0 34%,
|
||||
var(--console-amber) 34% 67%,
|
||||
var(--console-coral) 67%
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: clamp(1.7rem, 4vw, 3.25rem);
|
||||
}
|
||||
|
||||
.admin-dashboard-eyebrow,
|
||||
.admin-dashboard-section-header span,
|
||||
.admin-dashboard-posture header span,
|
||||
.admin-dashboard-guide > span {
|
||||
display: block;
|
||||
margin-bottom: 0.55rem;
|
||||
color: var(--console-primary-deep);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.admin-dashboard-eyebrow {
|
||||
color: #92e3cf;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero h1 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-size: clamp(2.4rem, 5vw, 4.8rem);
|
||||
font-weight: 740;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__copy > p {
|
||||
max-width: 60ch;
|
||||
margin: 1.25rem 0 1.6rem;
|
||||
color: rgba(235, 246, 255, 0.78);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.65rem 0.9rem;
|
||||
color: rgba(235, 246, 255, 0.62);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__meta strong {
|
||||
color: #ffffff;
|
||||
font-family: "Cascadia Code", Consolas, monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero .admin-dashboard-status {
|
||||
color: rgba(235, 246, 255, 0.82);
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__signal {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: end;
|
||||
padding: clamp(1.5rem, 3vw, 2.5rem);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.13);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__signal > span {
|
||||
color: rgba(235, 246, 255, 0.48);
|
||||
font-size: 0.64rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__signal i {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 0.75rem 0 1rem;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38));
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__signal strong {
|
||||
color: #ffffff;
|
||||
font-size: clamp(3.5rem, 7vw, 6.5rem);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.08em;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__signal small {
|
||||
margin-top: 0.75rem;
|
||||
color: rgba(235, 246, 255, 0.66);
|
||||
}
|
||||
|
||||
.admin-dashboard-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
|
||||
align-items: start;
|
||||
gap: clamp(1.25rem, 2.5vw, 2.25rem);
|
||||
margin-top: clamp(1.5rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
.admin-dashboard-primary,
|
||||
.admin-dashboard-posture,
|
||||
.admin-dashboard-guide {
|
||||
border: 1px solid var(--console-line);
|
||||
border-radius: var(--console-radius);
|
||||
background: var(--console-surface);
|
||||
box-shadow: var(--console-shadow);
|
||||
}
|
||||
|
||||
.admin-dashboard-primary {
|
||||
padding: clamp(1.25rem, 2.5vw, 2rem);
|
||||
}
|
||||
|
||||
.admin-dashboard-section-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
|
||||
align-items: end;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.25rem;
|
||||
border-bottom: 1px solid var(--console-line);
|
||||
}
|
||||
|
||||
.admin-dashboard-section-header h2,
|
||||
.admin-dashboard-posture h2,
|
||||
.admin-dashboard-guide h2 {
|
||||
margin: 0;
|
||||
color: var(--console-ink);
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.admin-dashboard-section-header p,
|
||||
.admin-dashboard-guide p {
|
||||
margin: 0;
|
||||
color: var(--console-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.admin-dashboard-link-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card {
|
||||
display: grid;
|
||||
grid-template-columns: 3.1rem minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
min-height: 104px;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--console-line);
|
||||
border-radius: 12px;
|
||||
color: var(--console-ink);
|
||||
background: var(--console-surface-soft);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
border-color 150ms ease,
|
||||
box-shadow 150ms ease,
|
||||
transform 150ms ease;
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card:hover {
|
||||
border-color: color-mix(in srgb, var(--card-tone) 45%, var(--console-line));
|
||||
color: var(--console-ink);
|
||||
box-shadow: 0 12px 28px rgba(23, 50, 77, 0.09);
|
||||
text-decoration: none;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card.is-blue {
|
||||
--card-tone: var(--console-primary);
|
||||
}
|
||||
.admin-dashboard-link-card.is-green {
|
||||
--card-tone: var(--console-teal);
|
||||
}
|
||||
.admin-dashboard-link-card.is-amber {
|
||||
--card-tone: var(--console-amber);
|
||||
}
|
||||
.admin-dashboard-link-card.is-coral {
|
||||
--card-tone: var(--console-coral);
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card__code {
|
||||
display: grid;
|
||||
width: 3.1rem;
|
||||
height: 3.1rem;
|
||||
border-radius: 11px;
|
||||
color: color-mix(in srgb, var(--card-tone) 86%, var(--console-ink));
|
||||
background: color-mix(in srgb, var(--card-tone) 13%, var(--console-surface));
|
||||
font-family: "Cascadia Code", Consolas, monospace;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card__copy {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card__copy strong {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card__copy small {
|
||||
color: var(--console-muted);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card__arrow {
|
||||
color: var(--card-tone);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-aside {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-posture,
|
||||
.admin-dashboard-guide {
|
||||
padding: 1.35rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-posture dl {
|
||||
margin: 1.1rem 0 0;
|
||||
}
|
||||
|
||||
.admin-dashboard-posture dl > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 0;
|
||||
border-top: 1px solid var(--console-line);
|
||||
}
|
||||
|
||||
.admin-dashboard-posture dt {
|
||||
color: var(--console-muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-posture dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-dashboard-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.42rem;
|
||||
color: var(--console-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-dashboard-status i {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--console-coral);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--console-coral) 12%, transparent);
|
||||
}
|
||||
|
||||
.admin-dashboard-status.is-positive i {
|
||||
background: var(--console-teal);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--console-teal) 12%, transparent);
|
||||
}
|
||||
|
||||
.admin-dashboard-text-link,
|
||||
.admin-dashboard-guide a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--console-line);
|
||||
color: var(--console-primary-deep);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.admin-dashboard-guide {
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
color-mix(in srgb, var(--console-primary) 8%, var(--console-surface)),
|
||||
var(--console-surface)
|
||||
);
|
||||
}
|
||||
|
||||
.admin-dashboard-guide p {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-tabs > .pf-v5-c-tabs {
|
||||
padding-inline: clamp(1.25rem, 3.2vw, 3.75rem);
|
||||
background: var(--console-surface);
|
||||
}
|
||||
|
||||
.admin-dashboard-technical {
|
||||
padding: clamp(1.25rem, 3vw, 3rem) clamp(1.25rem, 3.2vw, 3.75rem) 5rem;
|
||||
}
|
||||
|
||||
.keycloak__dashboard_card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.admin-dashboard-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-dashboard-aside {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin-dashboard-overview {
|
||||
padding: 1rem 1rem 3.5rem;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: 0;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero__signal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-dashboard-hero h1 {
|
||||
font-size: clamp(2.25rem, 12vw, 3.5rem);
|
||||
}
|
||||
|
||||
.admin-dashboard-section-header,
|
||||
.admin-dashboard-link-grid,
|
||||
.admin-dashboard-aside {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-dashboard-link-card {
|
||||
min-height: 92px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
adminWorkspaceOverview=Realm overview
|
||||
adminWorkspaceRealmEyebrow=Realm workspace
|
||||
adminWorkspaceConsoleLabel=Identity operations
|
||||
adminWorkspaceSectionEyebrow=Administration workspace
|
||||
adminWorkspaceOverviewDescription=Manage identities, applications, access and security posture from one operational workspace.
|
||||
adminWorkspaceAvailableAreas=available areas
|
||||
adminWorkspaceOperateEyebrow=Operations
|
||||
adminWorkspaceManageTitle=Manage this realm
|
||||
adminWorkspaceManageDescription=Open the area that matches the task you need to complete. Only areas available to your role are shown.
|
||||
adminWorkspaceUsersDescription=Find people, maintain profiles and manage credentials.
|
||||
adminWorkspaceClientsDescription=Configure applications, protocols and client access.
|
||||
adminWorkspaceGroupsDescription=Organize people and apply shared access rules.
|
||||
adminWorkspaceRealmSettingsDescription=Control realm behavior, themes, tokens and policies.
|
||||
adminWorkspaceAuthenticationDescription=Design sign-in flows and required actions.
|
||||
adminWorkspaceEventsDescription=Review user and administrator activity.
|
||||
adminWorkspacePostureEyebrow=Current state
|
||||
adminWorkspacePostureTitle=Security posture
|
||||
adminWorkspaceRealmStatus=Realm status
|
||||
adminWorkspaceReviewSettings=Review realm settings
|
||||
adminWorkspaceHelpEyebrow=Reference
|
||||
adminWorkspaceHelpTitle=Need implementation details?
|
||||
adminWorkspaceHelpDescription=Use the official documentation when changing protocols, authentication flows or production security settings.
|
||||
@@ -0,0 +1,22 @@
|
||||
adminWorkspaceOverview=领域总览
|
||||
adminWorkspaceRealmEyebrow=领域工作区
|
||||
adminWorkspaceConsoleLabel=身份运营
|
||||
adminWorkspaceSectionEyebrow=管理工作区
|
||||
adminWorkspaceOverviewDescription=在一个工作区中管理身份、应用、访问权限与安全配置。
|
||||
adminWorkspaceAvailableAreas=个可用业务区
|
||||
adminWorkspaceOperateEyebrow=业务操作
|
||||
adminWorkspaceManageTitle=管理当前领域
|
||||
adminWorkspaceManageDescription=从当前任务出发进入对应业务区，仅显示你有权限操作的功能。
|
||||
adminWorkspaceUsersDescription=查找人员、维护资料并管理登录凭据。
|
||||
adminWorkspaceClientsDescription=配置应用、协议以及客户端访问规则。
|
||||
adminWorkspaceGroupsDescription=组织人员并应用统一的访问权限。
|
||||
adminWorkspaceRealmSettingsDescription=管理领域行为、主题、令牌和安全策略。
|
||||
adminWorkspaceAuthenticationDescription=设计登录流程和必要操作。
|
||||
adminWorkspaceEventsDescription=查看用户及管理员的操作记录。
|
||||
adminWorkspacePostureEyebrow=当前状态
|
||||
adminWorkspacePostureTitle=安全配置概览
|
||||
adminWorkspaceRealmStatus=领域状态
|
||||
adminWorkspaceReviewSettings=检查领域设置
|
||||
adminWorkspaceHelpEyebrow=使用参考
|
||||
adminWorkspaceHelpTitle=需要配置说明？
|
||||
adminWorkspaceHelpDescription=修改协议、认证流程或生产安全设置时，可查阅官方文档。
|
||||
@@ -0,0 +1,22 @@
|
||||
adminWorkspaceOverview=領域總覽
|
||||
adminWorkspaceRealmEyebrow=領域工作區
|
||||
adminWorkspaceConsoleLabel=身分營運
|
||||
adminWorkspaceSectionEyebrow=管理工作區
|
||||
adminWorkspaceOverviewDescription=在同一個工作區中管理身分、應用程式、存取權限與安全設定。
|
||||
adminWorkspaceAvailableAreas=個可用業務區
|
||||
adminWorkspaceOperateEyebrow=業務操作
|
||||
adminWorkspaceManageTitle=管理目前領域
|
||||
adminWorkspaceManageDescription=從目前任務進入對應業務區，僅顯示你有權限操作的功能。
|
||||
adminWorkspaceUsersDescription=尋找人員、維護資料並管理登入憑證。
|
||||
adminWorkspaceClientsDescription=設定應用程式、協定與用戶端存取規則。
|
||||
adminWorkspaceGroupsDescription=組織人員並套用統一的存取權限。
|
||||
adminWorkspaceRealmSettingsDescription=管理領域行為、主題、權杖與安全政策。
|
||||
adminWorkspaceAuthenticationDescription=設計登入流程與必要操作。
|
||||
adminWorkspaceEventsDescription=查看使用者及管理員的操作記錄。
|
||||
adminWorkspacePostureEyebrow=目前狀態
|
||||
adminWorkspacePostureTitle=安全設定概覽
|
||||
adminWorkspaceRealmStatus=領域狀態
|
||||
adminWorkspaceReviewSettings=檢查領域設定
|
||||
adminWorkspaceHelpEyebrow=使用參考
|
||||
adminWorkspaceHelpTitle=需要設定說明？
|
||||
adminWorkspaceHelpDescription=修改協定、驗證流程或正式環境安全設定時，可查閱官方文件。
|
||||
@@ -0,0 +1,96 @@
|
||||
.keycloak__page_nav__nav {
|
||||
--pf-v5-c-page__sidebar--Transition: all 120ms cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
overflow: inherit;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.admin-nav-context {
|
||||
display: grid;
|
||||
gap: 0.32rem;
|
||||
margin: 0 0.35rem 1rem;
|
||||
padding: 0.2rem 0.45rem 1.15rem;
|
||||
border-bottom: 1px solid var(--console-line);
|
||||
}
|
||||
|
||||
.admin-nav-context__eyebrow {
|
||||
color: var(--console-primary-deep);
|
||||
font-size: 0.64rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.11em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.admin-nav-context strong {
|
||||
overflow: hidden;
|
||||
color: var(--console-ink);
|
||||
font-size: 1.08rem;
|
||||
font-weight: 720;
|
||||
letter-spacing: -0.015em;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.admin-nav-context__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
color: var(--console-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-nav-status {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--console-teal);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--console-teal) 12%, transparent);
|
||||
}
|
||||
|
||||
.admin-nav-status.is-disabled {
|
||||
background: var(--console-coral);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--console-coral) 12%, transparent);
|
||||
}
|
||||
|
||||
.keycloak__page_nav__nav .pf-v5-c-nav__link {
|
||||
display: grid;
|
||||
grid-template-columns: 2.25rem minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 0.68rem;
|
||||
}
|
||||
|
||||
.admin-nav-code {
|
||||
display: grid;
|
||||
width: 2.25rem;
|
||||
height: 1.75rem;
|
||||
border: 1px solid color-mix(in srgb, var(--console-line-strong) 62%, transparent);
|
||||
border-radius: 7px;
|
||||
color: var(--console-faint);
|
||||
background: color-mix(in srgb, var(--console-surface) 58%, transparent);
|
||||
font-family: "Cascadia Code", Consolas, monospace;
|
||||
font-size: 0.53rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.025em;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.pf-v5-c-nav__link:hover .admin-nav-code,
|
||||
.pf-v5-c-nav__link:focus .admin-nav-code,
|
||||
.pf-v5-c-nav__link.pf-m-current .admin-nav-code {
|
||||
border-color: color-mix(in srgb, var(--console-primary) 30%, var(--console-line));
|
||||
color: var(--console-primary-deep);
|
||||
background: color-mix(in srgb, var(--console-primary) 8%, var(--console-surface));
|
||||
}
|
||||
|
||||
.admin-nav-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin: 1.4rem 0.4rem 0;
|
||||
padding: 1rem 0.4rem 0;
|
||||
border-top: 1px solid var(--console-line);
|
||||
color: var(--console-faint);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
.admin-workspace-route {
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.admin-view-header {
|
||||
position: relative;
|
||||
padding-top: clamp(1.7rem, 3vw, 2.7rem);
|
||||
padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.admin-view-header::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: clamp(1.25rem, 3.2vw, 3.75rem);
|
||||
width: 3px;
|
||||
border-radius: 99px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--console-teal) 0 34%,
|
||||
var(--console-amber) 34% 67%,
|
||||
var(--console-coral) 67%
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.admin-view-header__layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
gap: 1.5rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.admin-view-header__copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-view-header__eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 0.55rem;
|
||||
color: var(--console-primary-deep);
|
||||
font-size: 0.67rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.admin-view-header__title-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.65rem 0.9rem;
|
||||
}
|
||||
|
||||
.admin-view-header h1 {
|
||||
margin: 0;
|
||||
color: var(--console-ink);
|
||||
font-size: clamp(2rem, 3.2vw, 3rem);
|
||||
font-weight: 730;
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.04;
|
||||
}
|
||||
|
||||
.admin-view-header__badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.admin-view-header__description {
|
||||
max-width: 76ch;
|
||||
margin: 0.8rem 0 0;
|
||||
color: var(--console-muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.admin-view-header__actions,
|
||||
.admin-view-header__switch,
|
||||
.admin-view-header__lower-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.admin-view-header__actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.admin-view-header__lower-actions {
|
||||
margin-top: 1.25rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.admin-view-header__divider {
|
||||
border-color: var(--console-line);
|
||||
}
|
||||
|
||||
/* List routes become a clear content deck below the shared business header. */
|
||||
.admin-workspace-route > .pf-v5-c-page__main-section:not(.admin-view-header),
|
||||
.admin-workspace-route > .pf-v5-c-tabs,
|
||||
.admin-workspace-route > form,
|
||||
.admin-workspace-route > .keycloak__form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.admin-workspace-route .pf-v5-c-toolbar + .pf-v5-c-table,
|
||||
.admin-workspace-route .pf-v5-c-toolbar + .pf-v5-c-data-list {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-workspace-route .pf-v5-c-toolbar {
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
.admin-workspace-route .pf-v5-c-table {
|
||||
--pf-v5-c-table--cell--PaddingTop: 0.9rem;
|
||||
--pf-v5-c-table--cell--PaddingBottom: 0.9rem;
|
||||
}
|
||||
|
||||
.admin-workspace-route .pf-v5-c-form__section-title {
|
||||
margin-top: 1.7rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--console-line);
|
||||
color: var(--console-ink);
|
||||
font-size: 1.12rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin-view-header::before {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.admin-view-header__layout {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: start;
|
||||
gap: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.admin-view-header__actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.admin-view-header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user