From 32c89abe67d913977775e1973144862bd1c7427e Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 21 May 2025 19:34:55 +0300
Subject: [PATCH] docs: show when condition in workflows reference (#12566)

---
 .../components/CodeBlock/Actions/index.tsx    |  6 ++-
 .../src/components/CodeBlock/index.tsx        |  5 ++-
 .../WorkflowDiagram/Common/Node/index.tsx     | 41 +++++++++++++++----
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx
index f040cf96ff..6a05c91a91 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx
@@ -19,6 +19,7 @@ export type CodeBlockActionsProps = {
   onApiTesting?: React.Dispatch<React.SetStateAction<boolean>>
   noReport?: boolean
   noCopy?: boolean
+  noAskAi?: boolean
 }
 
 export const CodeBlockActions = ({
@@ -32,6 +33,7 @@ export const CodeBlockActions = ({
   onApiTesting,
   noReport = false,
   noCopy = false,
+  noAskAi = false,
 }: CodeBlockActionsProps) => {
   const iconClassName = [
     "text-medusa-contrast-fg-secondary",
@@ -75,7 +77,9 @@ export const CodeBlockActions = ({
           ]
         )}
       >
-        <CodeBlockAskAiAction source={source} inHeader={inHeader} />
+        {!noAskAi && (
+          <CodeBlockAskAiAction source={source} inHeader={inHeader} />
+        )}
         {canShowApiTesting && (
           <Tooltip
             text="Test API"
diff --git a/www/packages/docs-ui/src/components/CodeBlock/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
index 92ea3f8292..a5af122df4 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
@@ -92,6 +92,7 @@ export const CodeBlock = ({
   style,
   forceNoTitle = false,
   animateTokenHighlights,
+  noAskAi = false,
   ...rest
 }: CodeBlockProps) => {
   if (!source && typeof children === "string") {
@@ -306,6 +307,7 @@ export const CodeBlock = ({
       isCollapsed: collapsibleType !== undefined && collapsibleResult.collapsed,
       inInnerCode: hasInnerCodeBlock,
       showGradientBg: scrollable,
+      noAskAi,
     }),
     [
       source,
@@ -317,6 +319,7 @@ export const CodeBlock = ({
       collapsibleResult,
       hasInnerCodeBlock,
       scrollable,
+      noAskAi,
     ]
   )
 
@@ -457,7 +460,7 @@ export const CodeBlock = ({
                   </code>
                 </pre>
                 {!hasInnerCodeBlock &&
-                  (!noCopy || !noReport || canShowApiTesting) && (
+                  (!noCopy || !noReport || canShowApiTesting || !noAskAi) && (
                     <CodeBlockActions
                       {...actionsProps}
                       inHeader={false}
diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
index f95da04455..6edd676826 100644
--- a/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
+++ b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
@@ -5,7 +5,7 @@ import clsx from "clsx"
 import Link from "next/link"
 import React, { useEffect, useMemo, useRef, useState } from "react"
 import { WorkflowStepUi } from "types"
-import { InlineCode, MarkdownContent, Tooltip } from "../../.."
+import { CodeBlock, MarkdownContent, Tooltip } from "../../.."
 import { Bolt, InformationCircle } from "@medusajs/icons"
 import { getBrowser } from "../../../../utils"
 
@@ -53,18 +53,33 @@ export const WorkflowDiagramStepNode = ({ step }: WorkflowDiagramNodeProps) => {
     }
   }, [ref.current])
 
+  const unindentLines = (str: string) => {
+    let minIndent = 4
+    return str
+      .split("\n")
+      .reverse()
+      .map((line, index) => {
+        const trimmedStartLine = line.trimStart()
+        const numberOfSpaces = line.length - trimmedStartLine.length
+        if (index === 0) {
+          minIndent = numberOfSpaces || minIndent
+        }
+        if (numberOfSpaces >= minIndent) {
+          return " ".repeat(numberOfSpaces - 4) + trimmedStartLine
+        }
+
+        return line
+      })
+      .reverse()
+      .join("\n")
+  }
+
   return (
     <Tooltip
       tooltipClassName="!text-left max-w-[300px] text-pretty overflow-scroll"
       tooltipChildren={
         <>
           <h4 className="text-compact-x-small-plus">{step.name}</h4>
-          {step.when && (
-            <span className="block py-docs_0.25">
-              Runs only if a <InlineCode>when</InlineCode> condition is
-              satisfied.
-            </span>
-          )}
           {description && (
             <MarkdownContent
               allowedElements={["a", "strong", "code"]}
@@ -73,6 +88,18 @@ export const WorkflowDiagramStepNode = ({ step }: WorkflowDiagramNodeProps) => {
               {description}
             </MarkdownContent>
           )}
+          {step.when?.condition && (
+            <CodeBlock
+              lang="typescript"
+              source={unindentLines(step.when.condition)}
+              noReport
+              noCopy
+              noAskAi
+              noLineNumbers
+              title="when Condition"
+              wrapperClassName="mt-docs_0.5"
+            />
+          )}
         </>
       }
       clickable={true}