diff --git a/.changeset/purple-bats-thank.md b/.changeset/purple-bats-thank.md new file mode 100644 index 000000000..ef809c57b --- /dev/null +++ b/.changeset/purple-bats-thank.md @@ -0,0 +1,5 @@ +--- +'hive': patch +--- + +Add readonly resource ID to settings pages diff --git a/packages/web/app/src/components/ui/input-copy.tsx b/packages/web/app/src/components/ui/input-copy.tsx index d9a9288c2..b839b2e41 100644 --- a/packages/web/app/src/components/ui/input-copy.tsx +++ b/packages/web/app/src/components/ui/input-copy.tsx @@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { useClipboard } from '@/lib/hooks'; -export function InputCopy(props: { value: string }) { +export function InputCopy(props: { value: string; className?: string }) { const [isCopied, setIsCopied] = useState(false); const copyToClipboard = useClipboard(); @@ -31,7 +31,7 @@ export function InputCopy(props: { value: string }) { type="text" value={props.value} readOnly - className="bg-secondary truncate text-white" + className={`bg-secondary truncate text-white ${props.className}`} onFocus={ev => ev.target.select()} /> diff --git a/packages/web/app/src/components/ui/resource-details.tsx b/packages/web/app/src/components/ui/resource-details.tsx new file mode 100644 index 000000000..7ccf56532 --- /dev/null +++ b/packages/web/app/src/components/ui/resource-details.tsx @@ -0,0 +1,27 @@ +import { ReactElement } from 'react'; +import { InfoCircledIcon } from '@radix-ui/react-icons'; +import { InputCopy } from './input-copy'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'; + +/** Renders readonly properties for resources. Used on settings pages. */ +export function ResourceDetails(props: { id: string }): ReactElement { + return ( +