133 lines
3.5 KiB
TypeScript
133 lines
3.5 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import FieldLabel from "./help/FieldLabel";
|
|
import ActionToolbar from "./ActionToolbar";
|
|
|
|
type PolicySectionProps = {
|
|
title?: ReactNode;
|
|
summary?: ReactNode;
|
|
actions?: ReactNode;
|
|
children: ReactNode;
|
|
className?: string;
|
|
headingClassName?: string;
|
|
};
|
|
|
|
type PolicyTableProps = {
|
|
children: ReactNode;
|
|
fieldLabel: ReactNode;
|
|
settingLabel: ReactNode;
|
|
effectiveLabel?: ReactNode;
|
|
lowerLevelLabel?: ReactNode;
|
|
showEffectiveColumn?: boolean;
|
|
showAllowColumn?: boolean;
|
|
className?: string;
|
|
rowClassName?: string;
|
|
headerClassName?: string;
|
|
};
|
|
|
|
type PolicyRowProps = {
|
|
label: ReactNode;
|
|
help?: ReactNode;
|
|
note?: ReactNode;
|
|
control: ReactNode;
|
|
effective?: ReactNode;
|
|
effectiveHelp?: ReactNode;
|
|
allowControl?: ReactNode;
|
|
className?: string;
|
|
labelClassName?: string;
|
|
controlClassName?: string;
|
|
effectiveClassName?: string;
|
|
effectiveCellClassName?: string;
|
|
};
|
|
|
|
export function PolicySection({
|
|
title,
|
|
summary,
|
|
actions,
|
|
children,
|
|
className = "",
|
|
headingClassName = ""
|
|
}: PolicySectionProps) {
|
|
return (
|
|
<section className={["policy-section", className].filter(Boolean).join(" ")}>
|
|
{(title || summary || actions) &&
|
|
<ActionToolbar surface="section-header" className={headingClassName}>
|
|
{title && <h3>{title}</h3>}
|
|
{actions ?? summary}
|
|
</ActionToolbar>
|
|
}
|
|
{children}
|
|
</section>);
|
|
|
|
}
|
|
|
|
export function PolicyTable({
|
|
children,
|
|
fieldLabel,
|
|
settingLabel,
|
|
effectiveLabel,
|
|
lowerLevelLabel,
|
|
showEffectiveColumn = false,
|
|
showAllowColumn = false,
|
|
className = "",
|
|
rowClassName = "",
|
|
headerClassName = ""
|
|
}: PolicyTableProps) {
|
|
return (
|
|
<div className={[
|
|
"policy-table",
|
|
showEffectiveColumn ? "with-effective-column" : "",
|
|
showAllowColumn ? "with-allow-column" : "",
|
|
className].
|
|
filter(Boolean).join(" ")}>
|
|
<div className={[rowClassName, "policy-row", "policy-row-header", headerClassName].filter(Boolean).join(" ")}>
|
|
<span>{fieldLabel}</span>
|
|
<span>{settingLabel}</span>
|
|
{showEffectiveColumn && <span>{effectiveLabel}</span>}
|
|
{showAllowColumn && <span>{lowerLevelLabel}</span>}
|
|
</div>
|
|
{children}
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function PolicyRow({
|
|
label,
|
|
help,
|
|
note,
|
|
control,
|
|
effective,
|
|
effectiveHelp,
|
|
allowControl,
|
|
className = "",
|
|
labelClassName = "",
|
|
controlClassName = "",
|
|
effectiveClassName = "",
|
|
effectiveCellClassName = ""
|
|
}: PolicyRowProps) {
|
|
return (
|
|
<div className={["policy-row", className].filter(Boolean).join(" ")}>
|
|
<div className={["policy-field-label", labelClassName].filter(Boolean).join(" ")}>
|
|
{help ?
|
|
<FieldLabel className="policy-field-title" help={help}>{label}</FieldLabel> :
|
|
<strong>{label}</strong>
|
|
}
|
|
{note && (typeof note === "string" ? <small>{note}</small> : note)}
|
|
</div>
|
|
<div className={["policy-control", controlClassName].filter(Boolean).join(" ")}>{control}</div>
|
|
{effective !== undefined &&
|
|
<div className={["policy-effective-cell", effectiveCellClassName].filter(Boolean).join(" ")}>
|
|
{effectiveHelp ?
|
|
<FieldLabel className={["policy-effective-value", effectiveClassName].filter(Boolean).join(" ")} help={effectiveHelp}>
|
|
{effective}
|
|
</FieldLabel> :
|
|
<span className={["policy-effective-value", effectiveClassName].filter(Boolean).join(" ")}>
|
|
{effective}
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
{allowControl}
|
|
</div>);
|
|
|
|
}
|