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={{

www/apps/api-reference/types/openapi.ts

@@ -18,6 +18,7 @@ export type Operation = OpenAPIV3.OperationObject<{
   responses: ResponsesObject
   parameters: Parameter[]
   "x-featureFlag"?: string
+  "x-workflow"?: string
 }>
 
 export type RequestObject = OpenAPIV3.RequestBodyObject & {

www/packages/docs-ui/src/components/Badge/index.tsx

@@ -15,6 +15,7 @@ export type BadgeType = "default" | "shaded"
 
 export type BadgeProps = {
   className?: string
+  childrenWrapperClassName?: string
   variant: BadgeVariant
   badgeType?: BadgeType
 } & React.HTMLAttributes<HTMLSpanElement>
@@ -24,6 +25,7 @@ export const Badge = ({
   variant,
   badgeType = "default",
   children,
+  childrenWrapperClassName,
 }: BadgeProps) => {
   return (
     <span
@@ -57,7 +59,12 @@ export const Badge = ({
           className={clsx("absolute top-0 left-0 w-full h-full")}
         />
       )}
-      <span className={clsx(badgeType === "shaded" && "relative z-[1]")}>
+      <span
+        className={clsx(
+          badgeType === "shaded" && "relative z-[1]",
+          childrenWrapperClassName
+        )}
+      >
         {children}
       </span>
     </span>

www/packages/docs-ui/src/components/Icons/DecisionProcess/index.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const DecisionProcessIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.12498 2.375H2.79165C2.33141 2.375 1.95831 2.7481 1.95831 3.20833V4.04167C1.95831 4.5019 2.33141 4.875 2.79165 4.875H6.12498C6.58522 4.875 6.95831 4.5019 6.95831 4.04167V3.20833C6.95831 2.7481 6.58522 2.375 6.12498 2.375Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.12498 11.125H2.79165C2.33141 11.125 1.95831 11.4981 1.95831 11.9583V12.7917C1.95831 13.2519 2.33141 13.625 2.79165 13.625H6.12498C6.58522 13.625 6.95831 13.2519 6.95831 12.7917V11.9583C6.95831 11.4981 6.58522 11.125 6.12498 11.125Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.45831 6.95833V9.04166"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.04169 3.625H10.7084C11.1684 3.625 11.5417 3.99833 11.5417 4.45833V6.125"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.04169 12.375H10.7084C11.1684 12.375 11.5417 12.0017 11.5417 11.5417V9.875"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.5417 6.125L14.6667 8L11.5417 9.875L8.41669 8L11.5417 6.125Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

www/packages/docs-ui/src/components/Icons/index.tsx

@@ -1,5 +1,6 @@
 export * from "./AiAssistant"
 export * from "./CircleDottedLine"
+export * from "./DecisionProcess"
 export * from "./QuestionMark"
 export * from "./ShadedBg"
 export * from "./ThumbDown"