GovOPlaN/govoplan-docs
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt shared WebUI layout primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 11:30:39 +02:00
parent 36c0afadd4
commit 0b4e7b6391
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/docs/DocsPage.tsx
+13 -12
View File
@@ -1,3 +1,4 @@
import { DescriptionList } from "@govoplan/core-webui";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { Link, useLocation } from "react-router"; import { Link, useLocation } from "react-router";
import { ChevronDown, ChevronRight, Eye, RefreshCw } from "lucide-react"; import { ChevronDown, ChevronRight, Eye, RefreshCw } from "lucide-react";
@@ -459,7 +460,7 @@ function ConstraintDetails({ id, constraints }: { id: string; constraints: Recor
return ( return (
<div className="docs-detail-block" id={id}> <div className="docs-detail-block" id={id}>
<h4>i18n:govoplan-docs.requirements.09a428f9</h4> <h4>i18n:govoplan-docs.requirements.09a428f9</h4>
<dl className="detail-list compact"> <DescriptionList variant="inline" density="compact">
{constraints.map((constraint, index) => { {constraints.map((constraint, index) => {
const label = metadataString(constraint, "label"); const label = metadataString(constraint, "label");
const description = metadataString(constraint, "description"); const description = metadataString(constraint, "description");
@@ -474,7 +475,7 @@ function ConstraintDetails({ id, constraints }: { id: string; constraints: Recor
</div> </div>
); );
})} })}
</dl> </DescriptionList>
</div> </div>
); );
} }
@@ -487,11 +488,11 @@ function ReferenceDetails({ topic, showTechnical, documentationType, topicById }
return ( return (
<div className="docs-topic-details"> <div className="docs-topic-details">
{(route || screen || section) && {(route || screen || section) &&
<dl className="detail-list compact"> <DescriptionList variant="inline" density="compact">
{screen && <div><dt>i18n:govoplan-docs.screen.c4878ec4</dt><dd>{screen}</dd></div>} {screen && <div><dt>i18n:govoplan-docs.screen.c4878ec4</dt><dd>{screen}</dd></div>}
{section && <div><dt>i18n:govoplan-docs.section.5e498158</dt><dd>{section}</dd></div>} {section && <div><dt>i18n:govoplan-docs.section.5e498158</dt><dd>{section}</dd></div>}
{showTechnical && route && <div><dt>i18n:govoplan-docs.route.4999528e</dt><dd>{route}</dd></div>} {showTechnical && route && <div><dt>i18n:govoplan-docs.route.4999528e</dt><dd>{route}</dd></div>}
</dl> </DescriptionList>
} }
{!!fields.length && <ReferenceFieldTable id={`${topicAnchorId(topic)}-fields`} fields={fields} showTechnical={showTechnical} />} {!!fields.length && <ReferenceFieldTable id={`${topicAnchorId(topic)}-fields`} fields={fields} showTechnical={showTechnical} />}
<RelatedTopics topic={topic} documentationType={documentationType} topicById={topicById} /> <RelatedTopics topic={topic} documentationType={documentationType} topicById={topicById} />
@@ -604,14 +605,14 @@ function UnavailableDocumentationReason({ topic }: { topic: DocsDocumentationTop
<div className="docs-unavailable-reason"> <div className="docs-unavailable-reason">
<p className="muted">{topic.reason}</p> <p className="muted">{topic.reason}</p>
{!!rows.length && {!!rows.length &&
<dl className="detail-list compact"> <DescriptionList variant="inline" density="compact">
{rows.map(([label, values]) => {rows.map(([label, values]) =>
<div key={String(label)}> <div key={String(label)}>
<dt>{label}</dt> <dt>{label}</dt>
<dd>{(values as string[]).join(", ")}</dd> <dd>{(values as string[]).join(", ")}</dd>
</div> </div>
)} )}
</dl> </DescriptionList>
} }
</div> </div>
); );
@@ -1001,7 +1002,7 @@ function RouteTable({ routes, emptyText }: { routes: DocsRoute[]; emptyText: str
function PermissionList({ permissions }: { permissions: Array<{ scope: string; label: string; category: string }> }) { function PermissionList({ permissions }: { permissions: Array<{ scope: string; label: string; category: string }> }) {
if (!permissions.length) return <p className="muted">i18n:govoplan-docs.no_granted_platform_permissions_found.36010898</p>; if (!permissions.length) return <p className="muted">i18n:govoplan-docs.no_granted_platform_permissions_found.36010898</p>;
return ( return (
<dl className="detail-list"> <DescriptionList variant="inline">
{permissions.slice(0, 24).map((permission) => {permissions.slice(0, 24).map((permission) =>
<div key={permission.scope}> <div key={permission.scope}>
<dt>{permission.category}</dt> <dt>{permission.category}</dt>
@@ -1009,7 +1010,7 @@ function PermissionList({ permissions }: { permissions: Array<{ scope: string; l
</div> </div>
)} )}
{permissions.length > 24 && <div><dt>i18n:govoplan-docs.more.4bab2d8f</dt><dd>{permissions.length - 24} i18n:govoplan-docs.additional_permissions.8042cb01</dd></div>} {permissions.length > 24 && <div><dt>i18n:govoplan-docs.more.4bab2d8f</dt><dd>{permissions.length - 24} i18n:govoplan-docs.additional_permissions.8042cb01</dd></div>}
</dl> </DescriptionList>
); );
} }
@@ -1047,7 +1048,7 @@ function EvidenceList({
return ( return (
<> <>
{sourceError && <DismissibleAlert tone="danger" resetKey={sourceError}>{sourceError}</DismissibleAlert>} {sourceError && <DismissibleAlert tone="danger" resetKey={sourceError}>{sourceError}</DismissibleAlert>}
<dl className="detail-list"> <DescriptionList variant="inline">
{modules.map((item) => {modules.map((item) =>
<div key={`${item.source_module_id}-${item.module_id}`}> <div key={`${item.source_module_id}-${item.module_id}`}>
<dt><StatusBadge status={item.status === "installed" ? "success" : "inactive"} label={item.status} /></dt> <dt><StatusBadge status={item.status === "installed" ? "success" : "inactive"} label={item.status} /></dt>
@@ -1076,7 +1077,7 @@ function EvidenceList({
</dd> </dd>
</div> </div>
)} )}
</dl> </DescriptionList>
<Dialog <Dialog
open={selected !== null} open={selected !== null}
title={selected?.label ?? "i18n:govoplan-docs.source_details.6dc79c75"} title={selected?.label ?? "i18n:govoplan-docs.source_details.6dc79c75"}
@@ -1114,14 +1115,14 @@ function SourceInspectionGroup({ title, values }: { title: string; values: Array
return ( return (
<section> <section>
<h3>{title}</h3> <h3>{title}</h3>
<dl className="detail-list"> <DescriptionList variant="inline">
{values.map(([key, value]) => {values.map(([key, value]) =>
<div key={key}> <div key={key}>
<dt>{humanizeSourceKey(key)}</dt> <dt>{humanizeSourceKey(key)}</dt>
<dd>{formatSourceValue(value)}</dd> <dd>{formatSourceValue(value)}</dd>
</div> </div>
)} )}
</dl> </DescriptionList>
</section> </section>
); );
} }