add validator display to ViewDocument (#36444)

GitOrigin-RevId: 56cc711dd4506ab680206c5cc54915785ea15612

Author: atrakh

npm-packages/dashboard-common/src/features/data/components/Table/ViewDocument.tsx

@@ -1,13 +1,18 @@
 import { GenericDocument } from "convex/server";
 import { useState } from "react";
 import { TextInput } from "@ui/TextInput";
+import { Tooltip } from "@ui/Tooltip";
 import { ProductionEditsConfirmationDialog } from "@common/elements/ProductionEditsConfirmationDialog";
 import { EditDocumentField } from "@common/features/data/components/Table/EditDocumentField";
 import {
   documentValidatorForTable,
   validatorForColumn,
 } from "@common/features/data/components/Table/utils/validators";
-import { SchemaJson } from "@common/lib/format";
+import {
+  SchemaJson,
+  displayObjectFieldSchema,
+  prettier,
+} from "@common/lib/format";
 import { useNents } from "@common/lib/useNents";
 import { CopyButton } from "@common/elements/CopyButton";
 import { stringifyValue } from "@common/lib/stringifyValue";
@@ -121,8 +126,32 @@ export function ViewDocument({
                 key={column}
                 className="flex w-full flex-col items-center gap-1"
               >
-                <div className="flex w-full justify-between text-xs font-medium">
-                  {column}
+                <div className="flex w-full items-center justify-between gap-4">
+                  <div className="shrink text-xs font-medium">{column}</div>
+                  {documentValidator?.type === "object" &&
+                  documentValidator.value[column] ? (
+                    <Tooltip
+                      tip={
+                        <pre className="w-fit text-left">
+                          <code>
+                            {prettier(
+                              displayObjectFieldSchema(
+                                documentValidator.value[column],
+                              ),
+                              40,
+                            ).slice(0, -1)}
+                          </code>
+                        </pre>
+                      }
+                      className="mt-[-3px] max-w-[60%] truncate"
+                    >
+                      <code className="ml-auto  truncate text-right text-xs text-content-tertiary">
+                        {displayObjectFieldSchema(
+                          documentValidator.value[column],
+                        )}
+                      </code>
+                    </Tooltip>
+                  ) : null}
                 </div>
                 {editingColumn === column ? (
                   <EditDocumentField

npm-packages/dashboard-common/src/lib/format.ts

@@ -161,7 +161,7 @@ function displayDocumentType(validator: ValidatorJSON): string {
   }
 }
 
-function displayObjectFieldSchema(field: ObjectFieldType): string {
+export function displayObjectFieldSchema(field: ObjectFieldType): string {
   const validator = displayValidator(field.fieldType);
   return field.optional ? `v.optional(${validator})` : validator;
 }