|
|
|
|
@@ -1,13 +1,16 @@
|
|
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
|
|
|
import React, { createContext, useContext } from "react";
|
|
|
|
|
|
|
|
|
|
import { Navbar } from "./Navbar";
|
|
|
|
|
import { Sidebar, type SidebarNavItem } from "./Sidebar";
|
|
|
|
|
import { Footer, type FooterNavItem } from "./Footer";
|
|
|
|
|
import { PageShell } from "./PageShell";
|
|
|
|
|
|
|
|
|
|
// ─── ShellConfig types — mirror gsc-shell-api's response DTO ──────────────────
|
|
|
|
|
// ─── ShellConfig types ────────────────────────────────────────────────────────
|
|
|
|
|
//
|
|
|
|
|
// Mirrors gsc-shell-api's response DTO. Apps fetch this server-side (RSC)
|
|
|
|
|
// and pass it to <AppShell>; the library doesn't talk to the network.
|
|
|
|
|
|
|
|
|
|
export type ShellMenuZone = "topbar" | "sidebar" | "footer" | "user-menu";
|
|
|
|
|
|
|
|
|
|
@@ -52,112 +55,28 @@ export type ShellConfig = {
|
|
|
|
|
menus: Partial<Record<ShellMenuZone, ShellMenuItem[]>>;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// ─── Context ──────────────────────────────────────────────────────────────────
|
|
|
|
|
// ─── Context — exposes config to descendants via useShell() ───────────────────
|
|
|
|
|
|
|
|
|
|
type ShellContextValue = {
|
|
|
|
|
config: ShellConfig | null;
|
|
|
|
|
loading: boolean;
|
|
|
|
|
error: Error | null;
|
|
|
|
|
refresh: () => Promise<void>;
|
|
|
|
|
};
|
|
|
|
|
const ShellContext = createContext<ShellConfig | null>(null);
|
|
|
|
|
|
|
|
|
|
const ShellContext = createContext<ShellContextValue | null>(null);
|
|
|
|
|
|
|
|
|
|
export function useShell(): ShellContextValue {
|
|
|
|
|
const ctx = useContext(ShellContext);
|
|
|
|
|
if (!ctx) {
|
|
|
|
|
throw new Error("useShell must be used inside <AppShell> / <ShellProvider>");
|
|
|
|
|
/** Read the current ShellConfig from anywhere inside <AppShell>. */
|
|
|
|
|
export function useShell(): ShellConfig {
|
|
|
|
|
const cfg = useContext(ShellContext);
|
|
|
|
|
if (!cfg) {
|
|
|
|
|
throw new Error("useShell must be used inside <AppShell>");
|
|
|
|
|
}
|
|
|
|
|
return ctx;
|
|
|
|
|
return cfg;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ─── Provider — handles fetch + revalidation + cache ──────────────────────────
|
|
|
|
|
|
|
|
|
|
export type ShellProviderProps = {
|
|
|
|
|
/** App identifier as registered in shell-api (e.g. "gsc-crm") */
|
|
|
|
|
appKey: string;
|
|
|
|
|
/** Base URL of gsc-shell-api (e.g. "https://shell-api.gosec.internal") */
|
|
|
|
|
apiUrl: string;
|
|
|
|
|
/** Returns a fresh Keycloak access token. Called on each fetch. */
|
|
|
|
|
getToken: () => Promise<string>;
|
|
|
|
|
/** Optional: a snapshot of ShellConfig to render before the first fetch finishes. */
|
|
|
|
|
initialConfig?: ShellConfig;
|
|
|
|
|
/** Optional: revalidate this often (ms). Default 5 minutes. */
|
|
|
|
|
revalidateMs?: number;
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export function ShellProvider({
|
|
|
|
|
appKey,
|
|
|
|
|
apiUrl,
|
|
|
|
|
getToken,
|
|
|
|
|
initialConfig,
|
|
|
|
|
revalidateMs = 5 * 60 * 1000,
|
|
|
|
|
children,
|
|
|
|
|
}: ShellProviderProps) {
|
|
|
|
|
const [config, setConfig] = useState<ShellConfig | null>(initialConfig ?? null);
|
|
|
|
|
const [loading, setLoading] = useState<boolean>(!initialConfig);
|
|
|
|
|
const [error, setError] = useState<Error | null>(null);
|
|
|
|
|
const [etag, setEtag] = useState<string | null>(null);
|
|
|
|
|
|
|
|
|
|
const fetcher = useCallback(async () => {
|
|
|
|
|
setLoading(true);
|
|
|
|
|
try {
|
|
|
|
|
const token = await getToken();
|
|
|
|
|
const res = await fetch(`${apiUrl}/api/v1/shell/${encodeURIComponent(appKey)}`, {
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: token ? `Bearer ${token}` : "",
|
|
|
|
|
...(etag ? { "If-None-Match": etag } : {}),
|
|
|
|
|
},
|
|
|
|
|
credentials: "omit",
|
|
|
|
|
});
|
|
|
|
|
if (res.status === 304) {
|
|
|
|
|
// Cached config still valid
|
|
|
|
|
setError(null);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!res.ok) {
|
|
|
|
|
throw new Error(`shell-api ${res.status}: ${await res.text()}`);
|
|
|
|
|
}
|
|
|
|
|
const next = (await res.json()) as ShellConfig;
|
|
|
|
|
setConfig(next);
|
|
|
|
|
setError(null);
|
|
|
|
|
const newEtag = res.headers.get("ETag");
|
|
|
|
|
if (newEtag) setEtag(newEtag);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
setError(e instanceof Error ? e : new Error(String(e)));
|
|
|
|
|
} finally {
|
|
|
|
|
setLoading(false);
|
|
|
|
|
}
|
|
|
|
|
}, [apiUrl, appKey, getToken, etag]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
void fetcher();
|
|
|
|
|
if (!revalidateMs) return;
|
|
|
|
|
const id = window.setInterval(() => {
|
|
|
|
|
void fetcher();
|
|
|
|
|
}, revalidateMs);
|
|
|
|
|
return () => window.clearInterval(id);
|
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
|
}, [appKey, apiUrl]);
|
|
|
|
|
|
|
|
|
|
const value = useMemo<ShellContextValue>(
|
|
|
|
|
() => ({ config, loading, error, refresh: fetcher }),
|
|
|
|
|
[config, loading, error, fetcher],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return <ShellContext.Provider value={value}>{children}</ShellContext.Provider>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ─── AppShell — composite that renders chrome from ShellConfig ─────────────────
|
|
|
|
|
// ─── AppShell — pure renderer ─────────────────────────────────────────────────
|
|
|
|
|
|
|
|
|
|
export type AppShellProps = {
|
|
|
|
|
/** Same args as ShellProvider — AppShell wraps it. */
|
|
|
|
|
appKey: string;
|
|
|
|
|
apiUrl: string;
|
|
|
|
|
getToken: () => Promise<string>;
|
|
|
|
|
initialConfig?: ShellConfig;
|
|
|
|
|
revalidateMs?: number;
|
|
|
|
|
/**
|
|
|
|
|
* Pre-resolved shell config. Apps fetch this server-side from
|
|
|
|
|
* gsc-shell-api and pass it down. The library never makes a
|
|
|
|
|
* network call — no CORS, no cert trust, no browser auth dance.
|
|
|
|
|
*/
|
|
|
|
|
config: ShellConfig;
|
|
|
|
|
|
|
|
|
|
/** Current pathname for active-route highlight. Default: window.location.pathname. */
|
|
|
|
|
currentPath?: string;
|
|
|
|
|
@@ -168,68 +87,28 @@ export type AppShellProps = {
|
|
|
|
|
/** Optional: signs the user out. Hook this up to your NextAuth/Keycloak signout. */
|
|
|
|
|
onSignOut?: () => void;
|
|
|
|
|
|
|
|
|
|
/** Optional: rendered inside <PageHeader> slot. */
|
|
|
|
|
/** Optional content for the <PageHeader> slot (breadcrumbs, page title, etc.). */
|
|
|
|
|
pageHeader?: React.ReactNode;
|
|
|
|
|
|
|
|
|
|
/** Page content. */
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
|
|
|
|
|
/** Override the wrapper className. */
|
|
|
|
|
/** Optional className on the outer wrapper. */
|
|
|
|
|
className?: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export function AppShell(props: AppShellProps) {
|
|
|
|
|
return (
|
|
|
|
|
<ShellProvider
|
|
|
|
|
appKey={props.appKey}
|
|
|
|
|
apiUrl={props.apiUrl}
|
|
|
|
|
getToken={props.getToken}
|
|
|
|
|
initialConfig={props.initialConfig}
|
|
|
|
|
revalidateMs={props.revalidateMs}
|
|
|
|
|
>
|
|
|
|
|
<ShellChrome
|
|
|
|
|
currentPath={props.currentPath}
|
|
|
|
|
translate={props.translate}
|
|
|
|
|
onSignOut={props.onSignOut}
|
|
|
|
|
pageHeader={props.pageHeader}
|
|
|
|
|
className={props.className}
|
|
|
|
|
>
|
|
|
|
|
{props.children}
|
|
|
|
|
</ShellChrome>
|
|
|
|
|
</ShellProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type ShellChromeProps = Pick<AppShellProps, "currentPath" | "translate" | "onSignOut" | "pageHeader" | "className" | "children">;
|
|
|
|
|
|
|
|
|
|
function ShellChrome({ currentPath, translate, onSignOut, pageHeader, className, children }: ShellChromeProps) {
|
|
|
|
|
const { config, error } = useShell();
|
|
|
|
|
export function AppShell({
|
|
|
|
|
config,
|
|
|
|
|
currentPath,
|
|
|
|
|
translate,
|
|
|
|
|
onSignOut,
|
|
|
|
|
pageHeader,
|
|
|
|
|
className,
|
|
|
|
|
children,
|
|
|
|
|
}: AppShellProps) {
|
|
|
|
|
const t = translate ?? ((k: string) => k);
|
|
|
|
|
const path = currentPath ?? (typeof window !== "undefined" ? window.location.pathname : "/");
|
|
|
|
|
|
|
|
|
|
// Fallback chrome if config never loaded — minimal so the app still renders.
|
|
|
|
|
if (!config) {
|
|
|
|
|
return (
|
|
|
|
|
<PageShell
|
|
|
|
|
navbar={
|
|
|
|
|
<Navbar
|
|
|
|
|
brand={<span className="navbar-brand-text">…</span>}
|
|
|
|
|
brandHref="/"
|
|
|
|
|
showSidebarToggle={false}
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
className={className}
|
|
|
|
|
>
|
|
|
|
|
{error ? (
|
|
|
|
|
<div className="alert alert-warning mt-3">
|
|
|
|
|
Chrome unavailable: {error.message}. Showing app content only.
|
|
|
|
|
</div>
|
|
|
|
|
) : null}
|
|
|
|
|
{children}
|
|
|
|
|
</PageShell>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const sidebarItems = (config.menus.sidebar ?? []).map((m) => toSidebarNavItem(m, path, t));
|
|
|
|
|
const footerNavItems: FooterNavItem[] = (config.menus.footer ?? []).map((m) => ({
|
|
|
|
|
label: t(m.translationKey),
|
|
|
|
|
@@ -238,7 +117,11 @@ function ShellChrome({ currentPath, translate, onSignOut, pageHeader, className,
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
const navbarBrand = (
|
|
|
|
|
<a className="d-flex align-items-center gap-2" href={config.app.baseUrl} style={{ color: "inherit", textDecoration: "none" }}>
|
|
|
|
|
<a
|
|
|
|
|
className="d-flex align-items-center gap-2"
|
|
|
|
|
href={config.app.baseUrl}
|
|
|
|
|
style={{ color: "inherit", textDecoration: "none" }}
|
|
|
|
|
>
|
|
|
|
|
<img src={config.branding.logoUrl} alt="" height={24} />
|
|
|
|
|
<span className="fw-semibold">{config.branding.productName}</span>
|
|
|
|
|
</a>
|
|
|
|
|
@@ -270,7 +153,9 @@ function ShellChrome({ currentPath, translate, onSignOut, pageHeader, className,
|
|
|
|
|
data-bs-toggle="dropdown"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
>
|
|
|
|
|
<span className="d-none d-md-inline me-2">{config.user.displayName || t("menu.account")}</span>
|
|
|
|
|
<span className="d-none d-md-inline me-2">
|
|
|
|
|
{config.user.displayName || t("menu.account")}
|
|
|
|
|
</span>
|
|
|
|
|
<i className="ph-user-circle" />
|
|
|
|
|
</button>
|
|
|
|
|
<div className="dropdown-menu dropdown-menu-end">{userMenuItems}</div>
|
|
|
|
|
@@ -279,6 +164,7 @@ function ShellChrome({ currentPath, translate, onSignOut, pageHeader, className,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ShellContext.Provider value={config}>
|
|
|
|
|
<PageShell
|
|
|
|
|
className={className}
|
|
|
|
|
navbar={
|
|
|
|
|
@@ -316,9 +202,12 @@ function ShellChrome({ currentPath, translate, onSignOut, pageHeader, className,
|
|
|
|
|
>
|
|
|
|
|
{children}
|
|
|
|
|
</PageShell>
|
|
|
|
|
</ShellContext.Provider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ─── helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
|
|
|
|
|
|
function toSidebarNavItem(
|
|
|
|
|
m: ShellMenuItem,
|
|
|
|
|
currentPath: string,
|
|
|
|
|
@@ -328,21 +217,23 @@ function toSidebarNavItem(
|
|
|
|
|
const item: SidebarNavItem = {
|
|
|
|
|
type: m.children && m.children.length > 0 ? "submenu" : "link",
|
|
|
|
|
label: t(m.translationKey),
|
|
|
|
|
href: m.isExternal ? m.href : m.href,
|
|
|
|
|
href: m.href,
|
|
|
|
|
iconClass: m.icon,
|
|
|
|
|
active,
|
|
|
|
|
};
|
|
|
|
|
if (m.children && m.children.length > 0) {
|
|
|
|
|
item.children = m.children.map((c) => toSidebarNavItem(c, currentPath, t));
|
|
|
|
|
// submenu open if any descendant is active
|
|
|
|
|
item.isOpen = item.children.some((c) => c.active || (c.children?.some((g) => g.active) ?? false));
|
|
|
|
|
item.isOpen = item.children.some(
|
|
|
|
|
(c) => c.active || (c.children?.some((g) => g.active) ?? false),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return item;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isActiveHref(href: string, currentPath: string): boolean {
|
|
|
|
|
if (!href) return false;
|
|
|
|
|
// Strip locale prefix from current path so /en/dashboard matches /dashboard
|
|
|
|
|
// Strip a leading 2-letter locale prefix so /en/dashboard matches /dashboard.
|
|
|
|
|
const stripped = currentPath.replace(/^\/[a-z]{2}(?=\/|$)/, "") || "/";
|
|
|
|
|
if (href === "/") return stripped === "/";
|
|
|
|
|
return stripped === href || stripped.startsWith(`${href}/`);
|
|
|
|
|
|
Claude