feat(auth): system api keys ui

app/src/pages/dataset/DatasetCodeDropdown.tsx

@@ -65,7 +65,12 @@ export function DatasetCodeDropdown() {
           >
             <View padding="size-200">
               <Form>
-                <Flex direction="row" gap="size-100" alignItems="end">
+                <Flex
+                  direction="row"
+                  gap="size-100"
+                  alignItems="end"
+                  width="100%"
+                >
                   <TextField label="Dataset ID" isReadOnly value={datasetId} />
                   <CopyToClipboardButton text={datasetId} size="normal" />
                 </Flex>

app/src/pages/settings/APIKeysCard.tsx

@@ -0,0 +1,110 @@
+import React, { ReactNode, Suspense, useState } from "react";
+import { graphql, useLazyLoadQuery } from "react-relay";
+import { css } from "@emotion/react";
+
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogContainer,
+  Flex,
+  Icon,
+  Icons,
+  TabbedCard,
+  TabPane,
+  Tabs,
+  TextField,
+} from "@arizeai/components";
+
+import { CopyToClipboardButton, Loading } from "@phoenix/components";
+
+import { APIKeysCardQuery } from "./__generated__/APIKeysCardQuery.graphql";
+import { CreateSystemAPIKeyDialog } from "./CreateSystemAPIKeyDialog";
+import { SystemAPIKeysTable } from "./SystemAPIKeysTable";
+
+function APIKeysCardContent() {
+  const query = useLazyLoadQuery<APIKeysCardQuery>(
+    graphql`
+      query APIKeysCardQuery {
+        ...SystemAPIKeysTableFragment
+      }
+    `,
+    {}
+  );
+
+  return (
+    <Tabs>
+      <TabPane title="System Keys" name="System Keys">
+        <SystemAPIKeysTable query={query} />
+      </TabPane>
+      <TabPane title="User Keys" name="User Keys">
+        <p>Coming Soon</p>
+      </TabPane>
+    </Tabs>
+  );
+}
+
+export function APIKeysCard() {
+  const [dialog, setDialog] = useState<ReactNode>(null);
+  const showOneTimeAPIKeyDialog = (jwt: string) => {
+    setDialog(<OneTimeAPIKeyDialog jwt={jwt} />);
+  };
+  const showCreateSystemAPIKeyDialog = () => {
+    setDialog(
+      <CreateSystemAPIKeyDialog onSystemKeyCreated={showOneTimeAPIKeyDialog} />
+    );
+  };
+  return (
+    <div>
+      <TabbedCard
+        title="API Keys"
+        variant="compact"
+        extra={
+          <Button
+            variant="default"
+            size="compact"
+            icon={<Icon svg={<Icons.PlusCircleOutline />} />}
+            onClick={showCreateSystemAPIKeyDialog}
+          >
+            System Key
+          </Button>
+        }
+      >
+        <Suspense fallback={<Loading />}>
+          <APIKeysCardContent />
+        </Suspense>
+      </TabbedCard>
+      <DialogContainer onDismiss={() => setDialog(null)}>
+        {dialog}
+      </DialogContainer>
+    </div>
+  );
+}
+
+/**
+ * Displays the key one time for the user to copy.
+ */
+function OneTimeAPIKeyDialog(props: { jwt: string }) {
+  const { jwt } = props;
+  return (
+    <Dialog title="New API Key Created" isDismissable>
+      <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`
+          padding: var(--ac-global-dimension-size-200);
+          .ac-field {
+            width: 100%;
+          }
+        `}
+      >
+        <Flex direction="row" gap="size-100" alignItems="end">
+          <TextField label="API Key" isReadOnly value={jwt} minWidth="100%" />
+          <CopyToClipboardButton text={jwt} size="normal" />
+        </Flex>
+      </div>
+    </Dialog>
+  );
+}

app/src/pages/settings/CreateSystemAPIKeyDialog.tsx

@@ -0,0 +1,149 @@
+import React, { useCallback, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useMutation } from "react-relay";
+import { Form } from "react-router-dom";
+import { graphql } from "relay-runtime";
+
+import {
+  Alert,
+  Button,
+  Dialog,
+  Flex,
+  TextArea,
+  TextField,
+  View,
+} from "@arizeai/components";
+
+import { CreateSystemAPIKeyDialogMutation } from "./__generated__/CreateSystemAPIKeyDialogMutation.graphql";
+
+export type SystemKeyFormParams = {
+  name: string;
+  description: string | null;
+};
+
+/**
+ * A dialog that allows admin users to create a system API key.
+ * TODO: Add expiry date field
+ */
+export function CreateSystemAPIKeyDialog(props: {
+  onSystemKeyCreated: (jwt: string) => void;
+}) {
+  const { onSystemKeyCreated } = props;
+  const [error, setError] = useState<string | null>(null);
+  const {
+    control,
+    handleSubmit,
+    formState: { isDirty, isValid },
+  } = useForm<SystemKeyFormParams>({
+    defaultValues: {
+      name: "System",
+      description: "",
+    },
+  });
+
+  const [commit, isCommitting] = useMutation<CreateSystemAPIKeyDialogMutation>(
+    graphql`
+      mutation CreateSystemAPIKeyDialogMutation(
+        $name: String!
+        $description: String = null
+      ) {
+        createSystemApiKey(input: { name: $name, description: $description }) {
+          jwt
+          query {
+            ...SystemAPIKeysTableFragment
+          }
+        }
+      }
+    `
+  );
+
+  const onSubmit = useCallback(
+    (data: SystemKeyFormParams) => {
+      setError(null);
+      commit({
+        variables: data,
+        onCompleted: (response) => {
+          onSystemKeyCreated(response.createSystemApiKey.jwt);
+        },
+        onError: (error) => {
+          setError(error.message);
+        },
+      });
+    },
+    [commit, onSystemKeyCreated]
+  );
+
+  return (
+    <Dialog title="Create a System Key" isDismissable>
+      {error && (
+        <Alert variant="danger" banner>
+          {error}
+        </Alert>
+      )}
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <View padding="size-200">
+          <Controller
+            name="name"
+            control={control}
+            rules={{
+              required: "System key name is required",
+            }}
+            render={({
+              field: { onChange, onBlur, value },
+              fieldState: { invalid, error },
+            }) => (
+              <TextField
+                label="Name"
+                description="A short name to identify this key"
+                errorMessage={error?.message}
+                validationState={invalid ? "invalid" : "valid"}
+                onChange={onChange}
+                onBlur={onBlur}
+                value={value.toString()}
+              />
+            )}
+          />
+          <Controller
+            name="description"
+            control={control}
+            render={({
+              field: { onChange, onBlur, value },
+              fieldState: { invalid, error },
+            }) => (
+              <TextArea
+                label="description"
+                description={`A description of the system key`}
+                isRequired={false}
+                height={100}
+                errorMessage={error?.message}
+                validationState={invalid ? "invalid" : "valid"}
+                onChange={onChange}
+                onBlur={onBlur}
+                value={value?.toString()}
+              />
+            )}
+          />
+        </View>
+        <View
+          paddingStart="size-200"
+          paddingEnd="size-200"
+          paddingTop="size-100"
+          paddingBottom="size-100"
+          borderColor="dark"
+          borderTopWidth="thin"
+        >
+          <Flex direction="row" gap="size-100" justifyContent="end">
+            <Button
+              variant={isDirty ? "primary" : "default"}
+              type="submit"
+              size="compact"
+              disabled={!isValid || isCommitting}
+            >
+              {isCommitting ? "Creating..." : "Create Key"}
+            </Button>
+          </Flex>
+        </View>
+      </Form>
+    </Dialog>
+  );
+}

app/src/pages/settings/SettingsPage.tsx

@@ -7,6 +7,7 @@ import { CopyToClipboardButton, Loading } from "@phoenix/components";
 import { BASE_URL, VERSION } from "@phoenix/config";
 import { useFunctionality } from "@phoenix/contexts/FunctionalityContext";
 
+import { APIKeysCard } from "./APIKeysCard";
 import { UsersTable } from "./UsersTable";
 
 const settingsPageCSS = css`
@@ -62,11 +63,7 @@ export function SettingsPage() {
             </Flex>
           </form>
         </Card>
-        {authenticationEnabled && (
-          <Card title="API Keys" variant="compact">
-            API settings go here
-          </Card>
-        )}
+        {authenticationEnabled && <APIKeysCard />}
         {authenticationEnabled && (
           <Card title="Users" variant="compact" bodyStyle={{ padding: 0 }}>
             <Suspense fallback={<Loading />}>