Open History to see the last commit
1import type { ManagedPolicySummary } from "@t3tools/contracts";
2import { BuildingIcon } from "lucide-react";
3import type { ReactNode } from "react";
4
5import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
6
7/**
8 * A control an administrator's policy turns off: shown inert, with the policy's reason on hover
9 * and focus. Without a reason it renders the control untouched.
10 */
11export function ManagedControl({
12 reason,
13 children,
14}: {
15 reason: string | undefined;
16 children: ReactNode;
17}) {
18 if (reason === undefined) return children;
19 return (
20 <Tooltip>
21 <TooltipTrigger
22 render={
23 <span
24 tabIndex={0}
25 role="group"
26 aria-disabled="true"
27 aria-label={reason}
28 className="inline-flex rounded-md outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
29 />
30 }
31 >
32 <span inert className="inline-flex opacity-50">
33 {children}
34 </span>
35 </TooltipTrigger>
36 <TooltipPopup side="top">{reason}</TooltipPopup>
37 </Tooltip>
38 );
39}
40
41/** One line of policy text with the building mark, for places a whole feature is managed. */
42export function ManagedNotice({ children }: { children: ReactNode }) {
43 return (
44 <p className="flex items-start gap-2 text-muted-foreground text-xs leading-relaxed">
45 <BuildingIcon aria-hidden="true" className="mt-0.5 size-3.5 shrink-0" />
46 <span>{children}</span>
47 </p>
48 );
49}
50
51/** "This environment is managed by <organization>", linking the support page when there is one. */
52export function ManagedByOrganization({ policy }: { policy: ManagedPolicySummary }) {
53 return (
54 <ManagedNotice>
55 This environment is managed by {policy.organization}.
56 {policy.supportUrl ? (
57 <>
58 {" "}
59 <a
60 href={policy.supportUrl}
61 target="_blank"
62 rel="noreferrer"
63 className="text-foreground underline underline-offset-2"
64 >
65 Get help
66 </a>
67 </>
68 ) : null}
69 </ManagedNotice>
70 );
71}