feat(prompts): default tags for prod / staging / dev (#5980)

app/src/constants/index.ts

@@ -2,3 +2,4 @@ export * from "./userConstants";
 export * from "./timeConstants";
 export * from "./numberConstants";
 export * from "./pointCloudConstants";
+export * from "./promptConstants";

app/src/constants/promptConstants.ts

@@ -0,0 +1,14 @@
+export const DEFAULT_PROMPT_VERSTION_TAGS = [
+  {
+    name: "production",
+    description: "The version deployed to production",
+  },
+  {
+    name: "staging",
+    description: "The version deployed to staging",
+  },
+  {
+    name: "development",
+    description: "The version deployed for development",
+  },
+];

app/src/pages/prompt/PromptVersionTagsConfigCard.tsx

@@ -10,7 +10,8 @@ import {
 
 import { Card } from "@arizeai/components";
 
-import { Flex, Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons, Link } from "@phoenix/components";
+import { TextCell } from "@phoenix/components/table";
 import { tableCSS } from "@phoenix/components/table/styles";
 import { TableEmpty } from "@phoenix/components/table/TableEmpty";
 
@@ -30,6 +31,7 @@ export function PromptVersionTagsConfigCard({
           id
           name
           description
+          promptVersionId
         }
       }
     `,
@@ -45,6 +47,19 @@ export function PromptVersionTagsConfigCard({
       {
         header: "Description",
         accessorKey: "description",
+        cell: TextCell,
+      },
+      {
+        header: "Version",
+        accessorKey: "promptVersionId",
+        cell: ({ row }) => {
+          const { promptId, promptVersionId } = row.original;
+          return (
+            <Link to={`/prompts/${promptId}/versions/${promptVersionId}`}>
+              {row.original.promptVersionId}
+            </Link>
+          );
+        },
       },
       {
         id: "actions",
@@ -79,6 +94,7 @@ export function PromptVersionTagsConfigCard({
       name: tag.name,
       description: tag.description,
       promptId: data.id,
+      promptVersionId: tag.promptVersionId,
     }));
   }, [data]);
 

app/src/pages/prompt/TagPromptVersionButton.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useMemo, useState } from "react";
 import { graphql, useLazyLoadQuery, useMutation } from "react-relay";
 import { useParams } from "react-router";
 import { css } from "@emotion/react";
@@ -15,11 +15,11 @@ import {
   PopoverArrow,
   View,
 } from "@phoenix/components";
+import { DEFAULT_PROMPT_VERSTION_TAGS } from "@phoenix/constants";
 import { useNotifySuccess } from "@phoenix/contexts";
 
 import { TagPromptVersionButtonTagsQuery } from "./__generated__/TagPromptVersionButtonTagsQuery.graphql";
 import { NewPromptVersionDialog } from "./NewPromptVersionTagDialog";
-
 export function TagPromptVersionButton() {
   const [showNewTagDialog, setShowNewTagDialog] = useState<boolean>(false);
   const [fetchKey, setFetchKey] = useState<number>(0);
@@ -131,10 +131,21 @@ function TagList({
     { promptId, versionId },
     { fetchKey, fetchPolicy: "store-and-network" }
   );
-  const allVersionTags =
-    data?.prompt?.versionTags?.map((tag) => tag.name) || [];
-  const versionTags = data?.promptVersion?.tags?.map((tag) => tag.name) || [];
 
+  const versionTags = useMemo(() => {
+    return data?.promptVersion?.tags?.map((tag) => tag.name) || [];
+  }, [data?.promptVersion?.tags]);
+
+  const allVersionTags = useMemo(() => {
+    return Array.from(
+      new Set([
+        ...DEFAULT_PROMPT_VERSTION_TAGS.map(
+          (tagDefinition) => tagDefinition.name
+        ),
+        ...versionTags,
+      ])
+    );
+  }, [versionTags]);
   const [commitSetTag, isCommitting] = useMutation(graphql`
     mutation TagPromptVersionButtonSetTagMutation(
       $input: SetPromptVersionTagInput!
@@ -151,7 +162,7 @@ function TagList({
   `);
   return (
     <ul>
-      {allVersionTags.map((tagName) => {
+      {allVersionTags.map((tagName: string) => {
         const isTagSet = versionTags.includes(tagName);
         return (
           <li key={tagName}>
@@ -169,11 +180,21 @@ function TagList({
                   disabled={isTagSet || isCommitting}
                   onChange={(e) => {
                     if (e.target.checked) {
+                      const isCreate = !versionTags.includes(tagName);
+                      let description = "";
+                      if (isCreate) {
+                        const tagDefinition = DEFAULT_PROMPT_VERSTION_TAGS.find(
+                          (tagDefinition) => tagDefinition.name === tagName
+                        );
+                        description = tagDefinition?.description || "";
+                      }
+
                       commitSetTag({
                         variables: {
                           input: {
                             name: tagName,
                             promptVersionId: versionId,
+                            description,
                           },
                           promptVersionId: versionId,
                         },
@@ -184,7 +205,7 @@ function TagList({
                     }
                   }}
                 />
-                {tagName}
+                <span>{tagName}</span>
               </Flex>
             </View>
           </li>