Copy JSON values on click (#11382)

https://github.com/user-attachments/assets/1638c196-fb9c-4f2b-910c-6d8b0693a37a

Closes https://github.com/twentyhq/core-team-issues/issues/568

packages/twenty-ui/src/json-visualizer/__stories__/JsonTree.stories.tsx

@@ -1,7 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 import {
   expect,
+  fn,
   userEvent,
+  waitFor,
   waitForElementToBeRemoved,
   within,
 } from '@storybook/test';
@@ -482,3 +484,32 @@ export const RedHighlighting: Story = {
     expect(ageElement).toBeVisible();
   },
 };
+
+export const CopyJsonNodeValue: Story = {
+  args: {
+    value: {
+      name: 'John Doe',
+      age: 30,
+    },
+    onNodeValueClick: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const nameValue = await canvas.findByText('John Doe');
+
+    await userEvent.click(nameValue);
+
+    await waitFor(() => {
+      expect(args.onNodeValueClick).toHaveBeenCalledWith('John Doe');
+    });
+
+    const ageValue = await canvas.findByText('30');
+
+    await userEvent.click(ageValue);
+
+    await waitFor(() => {
+      expect(args.onNodeValueClick).toHaveBeenCalledWith('30');
+    });
+  },
+};

packages/twenty-ui/src/json-visualizer/components/JsonTree.tsx

@@ -14,6 +14,7 @@ export const JsonTree = ({
   emptyStringLabel,
   arrowButtonCollapsedLabel,
   arrowButtonExpandedLabel,
+  onNodeValueClick,
 }: {
   value: JsonValue;
   getNodeHighlighting?: GetJsonNodeHighlighting;
@@ -25,6 +26,7 @@ export const JsonTree = ({
   emptyStringLabel: string;
   arrowButtonCollapsedLabel: string;
   arrowButtonExpandedLabel: string;
+  onNodeValueClick?: (valueAsString: string) => void;
 }) => {
   return (
     <JsonTreeContextProvider
@@ -36,6 +38,7 @@ export const JsonTree = ({
         emptyStringLabel,
         arrowButtonCollapsedLabel,
         arrowButtonExpandedLabel,
+        onNodeValueClick,
       }}
     >
       <JsonList depth={0}>

packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow';
 import { JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting';
 
 const StyledText = styled.span<{
@@ -19,5 +20,15 @@ export const JsonNodeValue = ({
   valueAsString: string;
   highlighting?: JsonNodeHighlighting | undefined;
 }) => {
-  return <StyledText highlighting={highlighting}>{valueAsString}</StyledText>;
+  const { onNodeValueClick } = useJsonTreeContextOrThrow();
+
+  const handleClick = () => {
+    onNodeValueClick?.(valueAsString);
+  };
+
+  return (
+    <StyledText highlighting={highlighting} onClick={handleClick}>
+      {valueAsString}
+    </StyledText>
+  );
 };

packages/twenty-ui/src/json-visualizer/contexts/JsonTreeContext.tsx

@@ -13,6 +13,7 @@ export type JsonTreeContextType = {
   emptyObjectLabel: string;
   arrowButtonCollapsedLabel: string;
   arrowButtonExpandedLabel: string;
+  onNodeValueClick?: (valueAsString: string) => void;
 };
 
 export const JsonTreeContext = createContext<JsonTreeContextType | undefined>(