JSON visualizer: Highlight the parent nodes of in-use nodes (#11373)

https://github.com/user-attachments/assets/5f31023d-b24f-40c8-a061-ffc0d02b63b0

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

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepInputDetail.tsx

@@ -14,6 +14,7 @@ import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { IconBrackets, useIcons } from 'twenty-ui/display';
 import {
+  GetJsonNodeHighlighting,
   JsonNestedNode,
   JsonTreeContextProvider,
   ShouldExpandNodeInitiallyProps,
@@ -70,6 +71,7 @@ export const WorkflowRunStepInputDetail = ({ stepId }: { stepId: string }) => {
   const variablesUsedInStep = getWorkflowVariablesUsedInStep({
     step,
   });
+  const allVariablesUsedInStep = Array.from(variablesUsedInStep);
 
   const stepContext = getWorkflowRunStepContext({
     context: workflowRun.context,
@@ -80,6 +82,21 @@ export const WorkflowRunStepInputDetail = ({ stepId }: { stepId: string }) => {
     throw new Error('The input tab must be rendered with a non-empty context.');
   }
 
+  const getNodeHighlighting: GetJsonNodeHighlighting = (keyPath: string) => {
+    if (variablesUsedInStep.has(keyPath)) {
+      return 'blue';
+    }
+
+    const isUsedVariableParent = allVariablesUsedInStep.some((variable) =>
+      variable.startsWith(keyPath),
+    );
+    if (isUsedVariableParent) {
+      return 'partial-blue';
+    }
+
+    return undefined;
+  };
+
   const isFirstNodeDepthOfPreviousStep = ({
     keyPath,
     depth,
@@ -104,8 +121,7 @@ export const WorkflowRunStepInputDetail = ({ stepId }: { stepId: string }) => {
             emptyStringLabel: t`[empty string]`,
             arrowButtonCollapsedLabel: t`Expand`,
             arrowButtonExpandedLabel: t`Collapse`,
-            getNodeHighlighting: (keyPath) =>
-              variablesUsedInStep.has(keyPath) ? 'blue' : undefined,
+            getNodeHighlighting,
             shouldExpandNodeInitially: isFirstNodeDepthOfPreviousStep,
           }}
         >