diff --git a/apps/fabro-web/app/routes/settings.tsx b/apps/fabro-web/app/routes/settings.tsx index d9df32c68..cf4b1f1fb 100644 --- a/apps/fabro-web/app/routes/settings.tsx +++ b/apps/fabro-web/app/routes/settings.tsx @@ -1,5 +1,9 @@ -import type { ServerSettings } from "@qltysh/fabro-api-client"; -import { CollapsibleFile } from "../components/collapsible-file"; +import type { ReactNode } from "react"; +import type { + ObjectStoreSettings, + ServerListenSettings, + ServerSettings, +} from "@qltysh/fabro-api-client"; import { useServerSettings } from "../lib/queries"; export function meta({}: any) { @@ -8,18 +12,340 @@ export function meta({}: any) { export default function Settings() { const settingsQuery = useServerSettings(); - const settings = (settingsQuery.data ?? {}) as ServerSettings; + const settings = settingsQuery.data; + + if (!settings) { + return ( +
+ + + + +
+ ); + } return ( - <> -

- Snapshot of the server configuration. Edit via{" "} - settings.toml; changes - take effect on the next server restart. -

- - +
+ + + + +
); } + +function PageIntro() { + return ( +

+ Snapshot of the server configuration. Edit via{" "} + settings.toml; changes take + effect on the next server restart. +

+ ); +} + +function ServerPanel({ settings }: { settings: ServerSettings }) { + const { listen, web, api, storage } = settings.server; + return ( + + + + + + {web.enabled ? : } + + + {api.url ? : Same origin} + + + {storage.root} + + + ); +} + +function AccessPanel({ settings }: { settings: ServerSettings }) { + const { auth, ip_allowlist, scheduler } = settings.server; + const githubUsers = auth.github.allowed_usernames; + return ( + + + {auth.methods.length === 0 ? ( + None configured + ) : ( +
+ {auth.methods.map((m) => ( + {m} + ))} +
+ )} + + + {githubUsers.length === 0 ? ( + Anyone + ) : ( + + )} + + + 0 + ? `· ${ip_allowlist.trusted_proxy_count} trusted ${plural(ip_allowlist.trusted_proxy_count, "proxy", "proxies")}` + : undefined + } + /> + + + + + + ); +} + +function IntegrationsPanel({ settings }: { settings: ServerSettings }) { + const { integrations, artifacts } = settings.server; + return ( + + + + + + + + + ); +} + +function Panel({ title, children }: { title: string; children: ReactNode }) { + return ( +
+
+

+ {title} +

+
+
{children}
+
+ ); +} + +function PanelSkeleton() { + return ( +
+
+
+
+
+
+
+
+ ); +} + +function Row({ + title, + help, + children, +}: { + title: string; + help?: string; + children: ReactNode; +}) { + return ( +
+
+
{title}
+ {help ? ( +
{help}
+ ) : null} +
+
{children}
+
+ ); +} + +function Mono({ children }: { children: ReactNode }) { + return ( +
+ {children} +
+ ); +} + +function Muted({ children }: { children: ReactNode }) { + return {children}; +} + +function Badge({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} + +function Number({ value }: { value: number }) { + return {value}; +} + +function Dot({ on }: { on: boolean }) { + return ( +