Added welcome tab to admin-ui (#25992)
* resolved conflict Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> * fixed space Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> * reemoved logo from welcome tab Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> * feedback Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> * fixed mashead tests Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> * fixed mashead tests Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> --------- Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com> Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
agagancarczyk
GitHub
parent
01939bcf34
commit
fa23c0b4c6
7 changed files with 110 additions and 9 deletions
|
|
@ -35,7 +35,7 @@ describe("Masthead tests", () => {
|
|||
it("Go to realm info", () => {
|
||||
sidebarPage.goToClients();
|
||||
masthead.toggleUsernameDropdown().clickRealmInfo();
|
||||
cy.get(".pf-c-card__title").should("contain.text", "Server info");
|
||||
cy.get(".pf-l-grid").should("contain.text", "Welcome");
|
||||
});
|
||||
|
||||
it("Should go to documentation page", () => {
|
||||
|
|
@ -58,6 +58,7 @@ describe("Masthead tests", () => {
|
|||
|
||||
it("Enable/disable help mode in desktop mode", () => {
|
||||
masthead.assertIsDesktopView();
|
||||
cy.findByTestId("infoTab").click();
|
||||
cy.get(helpLabel).should("exist");
|
||||
masthead.toggleGlobalHelp();
|
||||
masthead.clickGlobalHelp();
|
||||
|
|
@ -79,9 +80,8 @@ describe("Masthead tests", () => {
|
|||
.assertIsMobileView()
|
||||
.toggleUsernameDropdown()
|
||||
.toggleMobileViewHelp();
|
||||
cy.get(helpLabel).should("not.exist");
|
||||
masthead.toggleMobileViewHelp();
|
||||
cy.get(helpLabel).should("exist");
|
||||
cy.findByTestId("helpIcon").should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2973,3 +2973,10 @@ authenticatorRefConfig.maxAge.help=The max age in seconds that the authenticator
|
|||
authenticatorRefConfig.maxAge.label=Authenticator Reference Max Age
|
||||
includeInLightweight.label=Add to lightweight access token
|
||||
includeInLightweight.tooltip=Should the claim be added to the lightweight access token?
|
||||
welcomeTabTitle=Welcome
|
||||
welcomeTo=Welcome to {{realmDisplayInfo}}
|
||||
welcomeText=Keycloak provides user federation, strong authentication, user management, fine-grained authorization, and more. Add authentication to applications and secure services with minimum effort. No need to deal with storing users or authenticating users.
|
||||
viewDocumentation=Refer to documentation
|
||||
viewGuides=View guides
|
||||
joinCommunity=Join community
|
||||
readBlog=Read blog
|
||||
|
|
|
|||
|
|
@ -73,7 +73,11 @@ const HelpDropdownItem = () => {
|
|||
const { t } = useTranslation();
|
||||
const { enabled, toggleHelp } = useHelp();
|
||||
return (
|
||||
<DropdownItem icon={<HelpIcon />} onClick={toggleHelp}>
|
||||
<DropdownItem
|
||||
data-testId="helpIcon"
|
||||
icon={<HelpIcon />}
|
||||
onClick={toggleHelp}
|
||||
>
|
||||
{enabled ? t("helpEnabled") : t("helpDisabled")}
|
||||
</DropdownItem>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import { useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActionList,
|
||||
ActionListItem,
|
||||
Brand,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardTitle,
|
||||
|
|
@ -22,6 +25,7 @@ import {
|
|||
TabTitleText,
|
||||
Text,
|
||||
TextContent,
|
||||
TextVariants,
|
||||
Title,
|
||||
} from "@patternfly/react-core";
|
||||
|
||||
|
|
@ -42,6 +46,10 @@ import { DashboardTab, toDashboard } from "./routes/Dashboard";
|
|||
import { ProviderInfo } from "./ProviderInfo";
|
||||
|
||||
import "./dashboard.css";
|
||||
import { useFetch } from "../utils/useFetch";
|
||||
import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
|
||||
import { adminClient } from "../admin-client";
|
||||
import helpUrls from "../help-urls";
|
||||
|
||||
const EmptyDashboard = () => {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -95,6 +103,7 @@ const Dashboard = () => {
|
|||
const { realm } = useRealm();
|
||||
const serverInfo = useServerInfo();
|
||||
const localeSort = useLocaleSort();
|
||||
const [realmInfo, setRealmInfo] = useState<RealmRepresentation>();
|
||||
|
||||
const sortedFeatures = useMemo(
|
||||
() => localeSort(serverInfo.features ?? [], mapByKey("name")),
|
||||
|
|
@ -119,6 +128,11 @@ const Dashboard = () => {
|
|||
}),
|
||||
);
|
||||
|
||||
useFetch(() => adminClient.realms.findOne({ realm }), setRealmInfo, []);
|
||||
|
||||
const realmDisplayInfo = realmInfo?.displayName ?? realm;
|
||||
|
||||
const welcomeTab = useTab("welcome");
|
||||
const infoTab = useTab("info");
|
||||
const providersTab = useTab("providers");
|
||||
|
||||
|
|
@ -138,11 +152,77 @@ const Dashboard = () => {
|
|||
data-testid="dashboard-tabs"
|
||||
defaultLocation={toDashboard({
|
||||
realm,
|
||||
tab: "info",
|
||||
tab: "welcome",
|
||||
})}
|
||||
isBox
|
||||
mountOnEnter
|
||||
>
|
||||
<Tab
|
||||
id="welcome"
|
||||
data-testid="welcomeTab"
|
||||
title={<TabTitleText>{t("welcomeTabTitle")}</TabTitleText>}
|
||||
{...welcomeTab}
|
||||
>
|
||||
<PageSection variant="light">
|
||||
<div className="pf-l-grid pf-u-ml-lg">
|
||||
<div className="pf-l-grid__item pf-m-12-col">
|
||||
<Title
|
||||
className="pf-u-font-weight-bold"
|
||||
headingLevel="h2"
|
||||
size="3xl"
|
||||
>
|
||||
{t("welcomeTo", { realmDisplayInfo })}
|
||||
</Title>
|
||||
</div>
|
||||
<div className="pf-l-grid__item keycloak__dashboard_welcome_tab">
|
||||
<Text component={TextVariants.h3}>{t("welcomeText")}</Text>
|
||||
</div>
|
||||
<div className="pf-l-grid__item pf-m-10-col pf-u-mt-md">
|
||||
<Button
|
||||
className="pf-u-px-lg pf-u-py-sm"
|
||||
component="a"
|
||||
href={helpUrls.documentation}
|
||||
target="_blank"
|
||||
variant="primary"
|
||||
>
|
||||
{t("viewDocumentation")}
|
||||
</Button>
|
||||
</div>
|
||||
<ActionList className="pf-u-mt-sm">
|
||||
<ActionListItem>
|
||||
<Button
|
||||
component="a"
|
||||
href={helpUrls.guides}
|
||||
target="_blank"
|
||||
variant="tertiary"
|
||||
>
|
||||
{t("viewGuides")}
|
||||
</Button>
|
||||
</ActionListItem>
|
||||
<ActionListItem>
|
||||
<Button
|
||||
component="a"
|
||||
href={helpUrls.community}
|
||||
target="_blank"
|
||||
variant="tertiary"
|
||||
>
|
||||
{t("joinCommunity")}
|
||||
</Button>
|
||||
</ActionListItem>
|
||||
<ActionListItem>
|
||||
<Button
|
||||
component="a"
|
||||
href={helpUrls.blog}
|
||||
target="_blank"
|
||||
variant="tertiary"
|
||||
>
|
||||
{t("readBlog")}
|
||||
</Button>
|
||||
</ActionListItem>
|
||||
</ActionList>
|
||||
</div>
|
||||
</PageSection>
|
||||
</Tab>
|
||||
<Tab
|
||||
id="info"
|
||||
data-testid="infoTab"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
|
||||
.keycloak__dashboard_icon {
|
||||
max-width: 114px;
|
||||
}
|
||||
|
||||
.keycloak__dashboard_card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.keycloak__dashboard_welcome_tab {
|
||||
max-width: 38%;
|
||||
margin-top: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import type { Path } from "react-router-dom";
|
|||
import { generateEncodedPath } from "../../utils/generateEncodedPath";
|
||||
import type { AppRouteObject } from "../../routes";
|
||||
|
||||
export type DashboardTab = "info" | "providers";
|
||||
export type DashboardTab = "info" | "providers" | "welcome";
|
||||
|
||||
export type DashboardParams = { realm?: string; tab?: DashboardTab };
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
const adminGuide =
|
||||
"https://www.keycloak.org/docs/latest/server_admin/index.html";
|
||||
|
||||
const keycloakHomepageURL = "https://www.keycloak.org";
|
||||
|
||||
export default {
|
||||
documentationUrl: `${adminGuide}`,
|
||||
clientsUrl: `${adminGuide}#assembly-managing-clients_server_administration_guide`,
|
||||
|
|
@ -14,4 +16,8 @@ export default {
|
|||
authenticationUrl: `${adminGuide}#configuring-authentication`,
|
||||
identityProvidersUrl: `${adminGuide}#_identity_broker`,
|
||||
userFederationUrl: `${adminGuide}#_user-storage-federation`,
|
||||
documentation: `${keycloakHomepageURL}/documentation`,
|
||||
guides: `${keycloakHomepageURL}/guides`,
|
||||
community: `${keycloakHomepageURL}/community`,
|
||||
blog: `${keycloakHomepageURL}/blog`,
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue