docs: add associated workflow badge in api reference (#8613)

www/apps/api-reference/components/Tags/Operation/DescriptionSection/WorkflowBadge/index.tsx

@@ -0,0 +1,35 @@
+import { Badge, DecisionProcessIcon } from "docs-ui"
+import { config } from "../../../../../config"
+import Link from "next/link"
+
+export type TagsOperationDescriptionSectionWorkflowBadgeProps = {
+  workflow: string
+}
+
+const TagsOperationDescriptionSectionWorkflowBadge = ({
+  workflow,
+}: TagsOperationDescriptionSectionWorkflowBadgeProps) => {
+  return (
+    <p className="my-1">
+      Workflow{" "}
+      <Link
+        href={`${config.baseUrl}/v2/resources/references/medusa-workflows/${workflow}`}
+        className="align-middle"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Badge
+          variant="neutral"
+          className="inline-flex hover:bg-medusa-tag-neutral-bg-hover cursor-pointer"
+          childrenWrapperClassName="inline-flex flex-row gap-[3px] items-center"
+        >
+          <DecisionProcessIcon />
+          <span>{workflow}</span>
+        </Badge>
+      </Link>{" "}
+      is used in this API route.
+    </p>
+  )
+}
+
+export default TagsOperationDescriptionSectionWorkflowBadge

www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx

@@ -11,6 +11,7 @@ import { useArea } from "../../../../providers/area"
 import { Feedback, Badge, Link, FeatureFlagNotice } from "docs-ui"
 import { usePathname } from "next/navigation"
 import formatReportLink from "../../../../utils/format-report-link"
+import { TagsOperationDescriptionSectionWorkflowBadgeProps } from "./WorkflowBadge"
 
 const TagsOperationDescriptionSectionSecurity =
   dynamic<TagsOperationDescriptionSectionSecurityProps>(
@@ -26,6 +27,12 @@ const TagsOperationDescriptionSectionResponses =
   dynamic<TagsOperationDescriptionSectionResponsesProps>(
     async () => import("./Responses")
   ) as React.FC<TagsOperationDescriptionSectionResponsesProps>
+
+const TagsOperationDescriptionSectionWorkflowBadge =
+  dynamic<TagsOperationDescriptionSectionWorkflowBadgeProps>(
+    async () => import("./WorkflowBadge")
+  ) as React.FC<TagsOperationDescriptionSectionWorkflowBadgeProps>
+
 type TagsOperationDescriptionSectionProps = {
   operation: Operation
 }
@@ -55,6 +62,11 @@ const TagsOperationDescriptionSection = ({
       <div className="my-1">
         <MDXContentClient content={operation.description} />
       </div>
+      {operation["x-workflow"] && (
+        <TagsOperationDescriptionSectionWorkflowBadge
+          workflow={operation["x-workflow"]}
+        />
+      )}
       <Feedback
         event="survey_api-ref"
         extraData={{