feat: Refactor settings pages to preload graphql queries while navigating

app/schema.graphql

@@ -1513,6 +1513,24 @@ type GenerativeModel implements Node & ModelInterface {
   lastUsedAt: DateTime
 }
 
+"""A connection to a list of items."""
+type GenerativeModelConnection {
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Contains the nodes in this connection"""
+  edges: [GenerativeModelEdge!]!
+}
+
+"""An edge in a connection."""
+type GenerativeModelEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: GenerativeModel!
+}
+
 input GenerativeModelInput {
   providerKey: GenerativeProviderKey!
   name: String!
@@ -2373,7 +2391,7 @@ type PromptVersionTagMutationPayload {
 
 type Query {
   modelProviders: [GenerativeProvider!]!
-  generativeModels: [GenerativeModel!]!
+  generativeModels(first: Int = 50, last: Int, after: String, before: String): GenerativeModelConnection!
   playgroundModels(input: ModelsInput = null): [PlaygroundModel!]!
   modelInvocationParameters(input: ModelsInput = null): [InvocationParameter!]!
   users(first: Int = 50, last: Int, after: String, before: String): UserConnection!

app/src/Routes.tsx

@@ -8,6 +8,7 @@ import { RouterProvider } from "react-router/dom";
 
 import { DatasetEvaluatorsPage } from "@phoenix/pages/dataset/evaluators/DatasetEvaluatorsPage";
 import { RootLayout } from "@phoenix/pages/RootLayout";
+import { settingsPromptsPageLoader } from "@phoenix/pages/settings/prompts/settingsPromptsPageLoader";
 import { SettingsAIProvidersPage } from "@phoenix/pages/settings/SettingsAIProvidersPage";
 import { settingsAIProvidersPageLoader } from "@phoenix/pages/settings/settingsAIProvidersPageLoader";
 import { SettingsAnnotationsPage } from "@phoenix/pages/settings/SettingsAnnotationsPage";
@@ -389,6 +390,7 @@ const router = createBrowserRouter(
             <Route
               path="prompts"
               element={<SettingsPromptsPage />}
+              loader={settingsPromptsPageLoader}
               handle={{
                 crumb: () => "Prompts",
               }}

app/src/components/listbox/ListBox.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Ref } from "react";
+import { Ref } from "react";
 import {
   ListBox as AriaListBox,
   ListBoxProps as AriaListBoxProps,
@@ -64,20 +64,12 @@ const listBoxCSS = css`
   }
 `;
 
-export interface ListBoxProps<T> extends AriaListBoxProps<T>, StylableProps {}
+export interface ListBoxProps<T> extends AriaListBoxProps<T>, StylableProps {
+  ref?: Ref<HTMLDivElement>;
+}
 
-function ListBox<T extends object>(
-  props: ListBoxProps<T>,
-  ref: Ref<HTMLDivElement>
-) {
-  const { css: propsCSS, ...restProps } = props;
+export function ListBox<T extends object>(props: ListBoxProps<T>) {
+  const { css: propsCSS, ref, ...restProps } = props;
   const mergedCSS = css(listBoxCSS, propsCSS);
   return <AriaListBox css={mergedCSS} ref={ref} {...restProps} />;
 }
-
-type ListBoxComponent = <T extends object>(
-  props: ListBoxProps<T> & React.RefAttributes<HTMLDivElement>
-) => React.ReactElement<unknown> | null;
-
-const _ListBox = forwardRef(ListBox) as ListBoxComponent;
-export { _ListBox as ListBox };

app/src/pages/examples/ExamplesPage.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect } from "react";
+import { Suspense } from "react";
 import { usePreloadedQuery } from "react-relay";
 import { Outlet, useLoaderData } from "react-router";
 import invariant from "tiny-invariant";
@@ -13,11 +13,6 @@ export function ExamplesPage() {
   const loaderData = useLoaderData<typeof examplesLoader>();
   invariant(loaderData, "loaderData is required");
   const data = usePreloadedQuery(examplesLoaderGql, loaderData);
-  useEffect(() => {
-    return () => {
-      loaderData.dispose();
-    };
-  }, [loaderData]);
   return (
     <ExamplesFilterProvider>
       <ExamplesFilterBar />

app/src/pages/prompts/PromptsPage.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { usePreloadedQuery } from "react-relay";
 import { useLoaderData } from "react-router";
 import invariant from "tiny-invariant";
@@ -17,11 +16,6 @@ export function PromptsPage() {
   const loaderData = useLoaderData<PromptsLoaderType>();
   invariant(loaderData, "loaderData is required");
   const data = usePreloadedQuery(promptsLoaderGql, loaderData);
-  useEffect(() => {
-    return () => {
-      loaderData.dispose();
-    };
-  }, [loaderData]);
 
   return (
     <PromptsFilterProvider>

app/src/pages/settings/CloneModelButton.tsx

@@ -1,5 +1,6 @@
 import { Suspense, useState } from "react";
 import {
+  ConnectionHandler,
   graphql,
   PreloadedQuery,
   useMutation,
@@ -67,12 +68,37 @@ function CloneModelDialogContent({
     ModelQuery,
     queryReference
   );
+  const connectionId = ConnectionHandler.getConnectionID(
+    "client:root",
+    "ModelsTable_generativeModels"
+  );
   const [commitCloneModel, isCommittingCloneModel] =
     useMutation<CloneModelButtonMutation>(graphql`
-      mutation CloneModelButtonMutation($input: CreateModelMutationInput!) {
+      mutation CloneModelButtonMutation(
+        $input: CreateModelMutationInput!
+        $connectionId: ID!
+      ) {
         createModel(input: $input) {
-          query {
-            ...ModelsTable_generativeModels
+          model
+            @prependNode(
+              connections: [$connectionId]
+              edgeTypeName: "GenerativeModelEdge"
+            ) {
+            id
+            name
+            provider
+            namePattern
+            providerKey
+            startTime
+            createdAt
+            updatedAt
+            lastUsedAt
+            kind
+            tokenPrices {
+              tokenType
+              kind
+              costPerMillionTokens
+            }
           }
         }
       }
@@ -110,6 +136,7 @@ function CloneModelDialogContent({
                 })
               ),
             },
+            connectionId,
           },
           onCompleted: () => {
             onClose();

app/src/pages/settings/CreateRetentionPolicy.tsx

@@ -17,10 +17,7 @@ import {
 /**
  * A Wrapper around the RetentionPolicyForm component that is used to create a new retention policy.
  */
-export function CreateRetentionPolicy(props: {
-  onCreate: () => void;
-  queryId: string;
-}) {
+export function CreateRetentionPolicy(props: { onCreate: () => void }) {
   const notifySuccess = useNotifySuccess();
   const notifyError = useNotifyError();
   const [submit, isSubmitting] = useMutation<CreateRetentionPolicyMutation>(
@@ -67,7 +64,7 @@ export function CreateRetentionPolicy(props: {
       throw new Error("Invalid retention policy rule");
     }
     const connectionId = ConnectionHandler.getConnectionID(
-      props.queryId,
+      "client:root",
       "RetentionPoliciesTable_projectTraceRetentionPolicies"
     );
     submit({

app/src/pages/settings/DeleteModelButton.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useState } from "react";
-import { graphql, useMutation } from "react-relay";
-import { useRevalidator } from "react-router";
+import { ConnectionHandler, graphql, useMutation } from "react-relay";
 
 import {
   Button,
@@ -33,14 +32,23 @@ function DeleteModelDialogContent({
   modelName: string;
   onClose: () => void;
 }) {
-  const { revalidate } = useRevalidator();
+  const connectionId = ConnectionHandler.getConnectionID(
+    "client:root",
+    "ModelsTable_generativeModels"
+  );
   const [commitDeleteModel, isCommittingDeleteModel] =
     useMutation<DeleteModelButtonMutation>(graphql`
-      mutation DeleteModelButtonMutation($input: DeleteModelMutationInput!) {
+      mutation DeleteModelButtonMutation(
+        $input: DeleteModelMutationInput!
+        $connectionId: ID!
+      ) {
         deleteModel(input: $input) {
           query {
             ...ModelsTable_generativeModels
           }
+          model {
+            id @deleteEdge(connections: [$connectionId])
+          }
         }
       }
     `);
@@ -51,14 +59,14 @@ function DeleteModelDialogContent({
     commitDeleteModel({
       variables: {
         input: { id: modelId },
+        connectionId,
       },
       onCompleted: () => {
         notifySuccess({
           title: `Model Deleted`,
           message: `The "${modelName}" model has been deleted.`,
         });
         onClose();
-        revalidate();
       },
       onError: (error) => {
         const errorMessages = getErrorMessagesFromRelayMutationError(error);
@@ -75,7 +83,7 @@ function DeleteModelDialogContent({
     notifyError,
     notifySuccess,
     onClose,
-    revalidate,
+    connectionId,
   ]);
 
   return (

app/src/pages/settings/GenerativeProvidersCard.tsx

@@ -46,7 +46,6 @@ export function GenerativeProvidersCard({
 }: {
   query: GenerativeProvidersCard_data$key;
 }) {
-  const credentials = useCredentialsContext((state) => state);
   const data = useFragment<GenerativeProvidersCard_data$key>(
     graphql`
       fragment GenerativeProvidersCard_data on Query {
@@ -101,30 +100,14 @@ export function GenerativeProvidersCard({
         header: "configuration",
         accessorKey: "credentialsSet",
         cell: ({ row }) => {
-          if (!row.original.dependenciesInstalled) {
-            return <Text color="warning">missing dependencies</Text>;
-          }
-
-          // Check if any credentials are set locally
-          const credentialRequirements = row.original.credentialRequirements;
-          if (!isModelProvider(row.original.key)) {
-            return <Text color="warning">unknown provider key</Text>;
-          }
-          const providerCredentials = credentials[row.original.key];
-          const hasLocalCredentials = credentialRequirements.every(
-            ({ envVarName, isRequired }) => {
-              const envVarSet = providerCredentials?.[envVarName] !== undefined;
-              return envVarSet || !isRequired;
-            }
+          return (
+            <ProviderCredentialsStatus
+              dependenciesInstalled={row.original.dependenciesInstalled}
+              credentialRequirements={row.original.credentialRequirements}
+              providerKey={row.original.key}
+              credentialsSet={row.original.credentialsSet}
+            />
           );
-
-          if (hasLocalCredentials) {
-            return <Text color="success">local</Text>;
-          }
-          if (row.original.credentialsSet) {
-            return <Text color="success">configured on the server</Text>;
-          }
-          return <Text color="text-700">not configured</Text>;
         },
       },
       {
@@ -154,7 +137,7 @@ export function GenerativeProvidersCard({
         },
       },
     ] satisfies ColumnDef<DataRow>[];
-  }, [credentials]);
+  }, []);
 
   const table = useReactTable<(typeof tableData)[number]>({
     columns,
@@ -209,6 +192,43 @@ export function GenerativeProvidersCard({
   );
 }
 
+function ProviderCredentialsStatus({
+  dependenciesInstalled,
+  credentialRequirements,
+  providerKey,
+  credentialsSet,
+}: {
+  dependenciesInstalled: boolean;
+  credentialRequirements: GenerativeProvidersCard_data$data["modelProviders"][number]["credentialRequirements"];
+  providerKey: GenerativeProvidersCard_data$data["modelProviders"][number]["key"];
+  credentialsSet: boolean;
+}) {
+  const credentials = useCredentialsContext((state) => state);
+  if (!dependenciesInstalled) {
+    return <Text color="warning">missing dependencies</Text>;
+  }
+
+  // Check if any credentials are set locally
+  if (!isModelProvider(providerKey)) {
+    return <Text color="warning">unknown provider key</Text>;
+  }
+  const providerCredentials = credentials[providerKey];
+  const hasLocalCredentials = credentialRequirements.every(
+    ({ envVarName, isRequired }) => {
+      const envVarSet = !!providerCredentials?.[envVarName];
+      return envVarSet || !isRequired;
+    }
+  );
+
+  if (hasLocalCredentials) {
+    return <Text color="success">local</Text>;
+  }
+  if (credentialsSet) {
+    return <Text color="success">configured on the server</Text>;
+  }
+  return <Text color="text-700">not configured</Text>;
+}
+
 function ProviderCredentialsDialog({
   provider,
 }: {
@@ -233,16 +253,6 @@ function ProviderCredentialsDialog({
           </View>
           <Form>
             <ProviderCredentials provider={provider.key} />
-            <View paddingTop="size-200">
-              <Flex direction="row" justifyContent="end" gap="size-100">
-                <Button variant="default" size="S" slot="close">
-                  Cancel
-                </Button>
-                <Button variant="primary" size="S" slot="close">
-                  Save Credentials
-                </Button>
-              </Flex>
-            </View>
           </Form>
         </View>
       </DialogContent>
@@ -268,7 +278,7 @@ function ProviderCredentials({ provider }: { provider: ModelProvider }) {
               value,
             });
           }}
-          value={credentials?.[credentialConfig.envVarName] ?? undefined}
+          value={credentials?.[credentialConfig.envVarName] ?? ""}
         >
           <Label>{credentialConfig.envVarName}</Label>
           <CredentialInput />