OneTimeAPIKeyDialog.tsx•3.43 kB
import { css } from "@emotion/react";
import {
Alert,
Button,
Dialog,
ExternalLink,
Flex,
Heading,
Input,
Label,
Text,
TextField,
View,
} from "@phoenix/components";
import { CodeWrap, PythonBlockWithCopy } from "@phoenix/components/code";
import { CopyToClipboardButton } from "@phoenix/components/CopyToClipboardButton";
import {
DialogCloseButton,
DialogContent,
DialogHeader,
DialogTitle,
DialogTitleExtra,
} from "@phoenix/components/dialog";
/**
* Displays the key one time for the user to copy.
*/
export function OneTimeAPIKeyDialog(props: { jwt: string }) {
const { jwt } = props;
return (
<Dialog>
<DialogContent>
<DialogHeader>
<DialogTitle>New API Key Created</DialogTitle>
<DialogTitleExtra>
<DialogCloseButton slot="close" />
</DialogTitleExtra>
</DialogHeader>
<Alert variant="success" banner>
You have successfully created a new API key. The API key will only be
displayed once below. Please copy and save it in a secure location.
</Alert>
<div
css={css`
.ac-field {
width: 100%;
}
`}
>
<View padding="size-200">
<Flex direction="row" gap="size-100" alignItems="end">
<TextField isReadOnly value={jwt}>
<Label>API Key</Label>
<Input />
</TextField>
<CopyToClipboardButton text={jwt} size="M" />
</Flex>
</View>
<View padding="size-200" borderTopColor="light" borderTopWidth="thin">
<Heading level={2} weight="heavy">
How to Use the API Key
</Heading>
<View paddingBottom="size-100" paddingTop="size-100">
<Text>
When interacting with Phoenix clients and OTEL SDKs, set the
environment variable
</Text>
</View>
<CodeWrap>
<PythonBlockWithCopy value={`PHOENIX_API_KEY=${jwt}`} />
</CodeWrap>
<View paddingBottom="size-100" paddingTop="size-100">
<Text>
When using OpenTelemetry SDKs pass the API key in the headers
</Text>
</View>
<CodeWrap>
<PythonBlockWithCopy
value={`OTEL_EXPORTER_OTLP_HEADERS='Authorization=Bearer ${jwt}'`}
/>
</CodeWrap>
<View paddingBottom="size-100" paddingTop="size-100">
<Text>
When using the Phoenix REST and GraphQL APIs, pass the API key
as a{" "}
<ExternalLink href="https://swagger.io/docs/specification/authentication/bearer-authentication/">
bearer token
</ExternalLink>
.
</Text>
</View>
<CodeWrap>
<PythonBlockWithCopy value={`Authorization: Bearer ${jwt}`} />
</CodeWrap>
</View>
<View padding="size-200" borderTopColor="light" borderTopWidth="thin">
<Flex direction="row" justifyContent="end">
<Button variant="primary" aria-label="dismiss" slot="close">
Close
</Button>
</Flex>
</View>
</div>
</DialogContent>
</Dialog>
);
}