feat: add deprecation reason to deprecated fields table in op view

connect/src/wg/cosmo/platform/v1/platform_pb.ts

@@ -23611,6 +23611,11 @@ export class GetOperationDeprecatedFieldsResponse_DeprecatedField extends Messag
    */
   path = "";
 
+  /**
+   * @generated from field: string deprecationReason = 4;
+   */
+  deprecationReason = "";
+
   constructor(data?: PartialMessage<GetOperationDeprecatedFieldsResponse_DeprecatedField>) {
     super();
     proto3.util.initPartial(data, this);
@@ -23622,6 +23627,7 @@ export class GetOperationDeprecatedFieldsResponse_DeprecatedField extends Messag
     { no: 1, name: "fieldName", kind: "scalar", T: 9 /* ScalarType.STRING */ },
     { no: 2, name: "typeName", kind: "scalar", T: 9 /* ScalarType.STRING */ },
     { no: 3, name: "path", kind: "scalar", T: 9 /* ScalarType.STRING */ },
+    { no: 4, name: "deprecationReason", kind: "scalar", T: 9 /* ScalarType.STRING */ },
   ]);
 
   static fromBinary(bytes: Uint8Array, options?: Partial<BinaryReadOptions>): GetOperationDeprecatedFieldsResponse_DeprecatedField {

controlplane/src/core/bufservices/analytics/getOperationDeprecatedFields.ts

@@ -116,6 +116,10 @@ export function getOperationDeprecatedFields(
           deprecatedFields.find(
             (f) => f.name === field.deprecatedFieldName && f.typeName === field.deprecatedFieldTypeNames[0],
           )?.path || '',
+        deprecationReason:
+          deprecatedFields.find(
+            (f) => f.name === field.deprecatedFieldName && f.typeName === field.deprecatedFieldTypeNames[0],
+          )?.deprecationReason || '',
       })),
     };
   });

controlplane/src/core/services/SchemaGraphPruner.ts

@@ -64,6 +64,7 @@ export default class SchemaGraphPruner {
             endColumn: field.astNode?.loc?.endToken.column,
           },
           isDeprecated: !!field.deprecationReason,
+          deprecationReason: field.deprecationReason || undefined,
         });
       }
     }

controlplane/src/types/index.ts

@@ -746,6 +746,7 @@ export interface Field {
     endColumn?: number;
   };
   isDeprecated: boolean;
+  deprecationReason?: string;
 }
 export interface S3StorageOptions {
   url: string;

proto/wg/cosmo/platform/v1/platform.proto

@@ -3017,6 +3017,7 @@ message GetOperationDeprecatedFieldsResponse {
     string fieldName = 1;
     string typeName = 2;
     string path = 3;
+    string deprecationReason = 4;
   }
   Response response = 1;
   repeated DeprecatedField deprecatedFields = 2;

studio/src/components/operations/deprecated-fields-table.tsx

@@ -22,6 +22,7 @@ interface DeprecatedField {
   fieldName: string;
   typeName: string;
   path: string;
+  deprecationReason: string;
 }
 
 interface DeprecatedFieldsTableProps {
@@ -64,6 +65,7 @@ export const DeprecatedFieldsTable = ({
       fieldName: field.fieldName || "",
       typeName: field.typeName || "",
       path: field.path || "",
+      deprecationReason: field.deprecationReason || "-",
     })) || [];
   const hasDeprecatedFields = deprecatedFields.length > 0;
 
@@ -96,7 +98,8 @@ export const DeprecatedFieldsTable = ({
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead className="w-[80%]">Field Path</TableHead>
+              <TableHead className="w-[30%]">Field Path</TableHead>
+              <TableHead className="w-[50%]">Deprecation Reason</TableHead>
               <TableHead className="w-[20%] text-center">Actions</TableHead>
             </TableRow>
           </TableHeader>
@@ -106,18 +109,23 @@ export const DeprecatedFieldsTable = ({
             <TableBody>
               {isLoading ? (
                 <TableRow>
-                  <TableCell colSpan={2} className="h-24 text-center">
+                  <TableCell colSpan={3} className="h-24 text-center">
                     <Loader />
                   </TableCell>
                 </TableRow>
               ) : hasDeprecatedFields ? (
                 deprecatedFields.map((field, index) => (
                   <TableRow key={`${field.path}-${index}`}>
-                    <TableCell className="w-[80%]">
+                    <TableCell className="w-[30%]">
                       <code className="rounded bg-muted px-2 py-1 font-mono text-sm">
                         {field.path}
                       </code>
                     </TableCell>
+                    <TableCell className="w-[50%]">
+                      <span className="text-sm text-muted-foreground">
+                        {field.deprecationReason || "-"}
+                      </span>
+                    </TableCell>
                     <TableCell className="w-[20%] text-right">
                       <Button
                         variant="outline"
@@ -132,7 +140,7 @@ export const DeprecatedFieldsTable = ({
               ) : (
                 <TableRow>
                   <TableCell
-                    colSpan={2}
+                    colSpan={3}
                     className="text-center text-muted-foreground"
                   >
                     No deprecated fields found
@@ -146,7 +154,7 @@ export const DeprecatedFieldsTable = ({
           <Table className="w-full border-t">
             <TableFooter>
               <TableRow className="border-b-0 bg-background hover:bg-background">
-                <TableCell colSpan={2}>
+                <TableCell colSpan={3}>
                   <div className="flex items-center justify-center space-x-1 text-xs text-muted-foreground">
                     <span>
                       Found {deprecatedFields.length}{" "}

studio/src/components/operations/operation-content-modal.tsx

@@ -14,6 +14,17 @@ import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/empty-state";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { CodeViewer } from "@/components/code-viewer";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { PlayIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useCurrentOrganization } from "@/hooks/use-current-organization";
+import { useWorkspace } from "@/hooks/use-workspace";
+import { CopyButton } from "@/components/ui/copy-button";
 
 interface OperationContentModalProps {
   operationHash: string;
@@ -29,6 +40,12 @@ export const OperationContentModal = ({
   onClose,
 }: OperationContentModalProps) => {
   const graphContext = useContext(GraphContext);
+  const router = useRouter();
+  const {
+    namespace: { name: namespace },
+  } = useWorkspace();
+  const organizationSlug = useCurrentOrganization()?.slug;
+  const slug = router.query.slug as string;
 
   const { data, isLoading, error, refetch } = useQuery(
     getOperationContent,
@@ -71,7 +88,29 @@ export const OperationContentModal = ({
               actions={<Button onClick={() => refetch()}>Retry</Button>}
             />
           ) : (
-            <div className="scrollbar-custom overflow-auto rounded-lg border">
+            <div className="scrollbar-custom relative overflow-auto rounded-lg border">
+              <div className="absolute right-2 top-2 z-10 flex items-center gap-2">
+                <Tooltip delayDuration={100}>
+                  <TooltipTrigger asChild>
+                    <Button variant="secondary" size="icon-sm" asChild>
+                      <Link
+                        href={`/${organizationSlug}/${namespace}/graph/${slug}/playground?operation=${encodeURIComponent(
+                          data?.operationContent || "",
+                        )}`}
+                      >
+                        <PlayIcon />
+                      </Link>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Run in Playground</TooltipContent>
+                </Tooltip>
+                <CopyButton
+                  value={data?.operationContent || ""}
+                  tooltip="Copy operation"
+                  variant="secondary"
+                  size="icon-sm"
+                />
+              </div>
               <CodeViewer
                 code={data?.operationContent || "No content available"}
                 language="graphql"