From 3ec5f1e5f97fbbfcbc016f021db880dcd93e5f5f Mon Sep 17 00:00:00 2001
From: Tony Powell <apowell@arize.com>
Date: Tue, 17 Dec 2024 10:43:38 -0500
Subject: [PATCH] Rename prompt combobox components for clarity

---
 app/src/pages/playground/PromptComboBox.tsx | 43 ++++++++++++---------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/app/src/pages/playground/PromptComboBox.tsx b/app/src/pages/playground/PromptComboBox.tsx
index 189247a4c6..9363963b14 100644
--- a/app/src/pages/playground/PromptComboBox.tsx
+++ b/app/src/pages/playground/PromptComboBox.tsx
@@ -24,7 +24,7 @@ type PromptComboBoxProps = {
   "children" | "onSelectionChange" | "defaultSelectedKey"
 >;
 
-export function PromptComboBoxLoader({
+function PromptComboBoxComponent({
   onChange,
   container,
   promptId,
@@ -33,7 +33,24 @@ export function PromptComboBoxLoader({
 }: PromptComboBoxProps & {
   queryReference: PreloadedQuery<PromptComboBoxQuery>;
 }) {
-  const data = usePreloadedQuery(promptComboBoxQuery, queryReference);
+  const data = usePreloadedQuery(
+    graphql`
+      query PromptComboBoxQuery($first: Int = 100) {
+        prompts(first: $first) {
+          edges {
+            prompt: node {
+              __typename
+              ... on Prompt {
+                id
+                name
+              }
+            }
+          }
+        }
+      }
+    `,
+    queryReference
+  );
   const items = useMemo((): PromptItem[] => {
     return data.prompts.edges.map((edge) => edge.prompt);
   }, [data.prompts.edges]);
@@ -73,7 +90,7 @@ export function PromptComboBoxLoader({
   );
 }
 
-export function PromptComboBox(props: PromptComboBoxProps) {
+function PromptComboBoxLoader(props: PromptComboBoxProps) {
   const [queryReference, loadQuery, disposeQuery] =
     useQueryLoader<PromptComboBoxQuery>(promptComboBoxQuery);
 
@@ -84,22 +101,10 @@ export function PromptComboBox(props: PromptComboBoxProps) {
   }, [disposeQuery, loadQuery]);
 
   return queryReference != null ? (
-    <PromptComboBoxLoader queryReference={queryReference} {...props} />
+    <PromptComboBoxComponent queryReference={queryReference} {...props} />
   ) : null;
 }
 
-graphql`
-  query PromptComboBoxQuery($first: Int = 100) {
-    prompts(first: $first) {
-      edges {
-        prompt: node {
-          __typename
-          ... on Prompt {
-            id
-            name
-          }
-        }
-      }
-    }
-  }
-`;
+export function PromptComboBox(props: PromptComboBoxProps) {
+  return <PromptComboBoxLoader {...props} />;
+}