fix(dashboard): Add Breadcrumb components (#10079)

**What**
- Adds Breadcrumb component to all routes that needs breadcrumbs.
- The Breadcrumb components use a combination of loader data and useQuery to ensure that the displayed value is kept up to date if the underlying data is changed via a mutation.
- Also fixes a couple of places where the breadcrumb was not setup correctly.

Resolves CMRC-688

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/breadcrumb.tsx

@@ -0,0 +1,26 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useWorkflowExecution } from "../../../hooks/api"
+
+type WorkflowExecutionDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminWorkflowExecutionResponse>
+
+export const WorkflowExecutionDetailBreadcrumb = (
+  props: WorkflowExecutionDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { workflow_execution } = useWorkflowExecution(id!, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!workflow_execution) {
+    return null
+  }
+
+  const cleanId = workflow_execution.id.replace("wf_exec_", "")
+
+  return <span>{cleanId}</span>
+}

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/index.ts

@@ -1 +1,3 @@
+export { WorkflowExecutionDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
+export { workflowExecutionLoader as loader } from "./loader"
 export { ExecutionDetail as Component } from "./workflow-detail"

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/loader.ts

@@ -1,6 +1,5 @@
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { HttpTypes } from "@medusajs/types"
 import { workflowExecutionsQueryKeys } from "../../../hooks/api/workflow-executions"
 import { sdk } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
@@ -10,13 +9,11 @@ const executionDetailQuery = (id: string) => ({
   queryFn: async () => sdk.admin.workflowExecution.retrieve(id),
 })
 
-export const executionLoader = async ({ params }: LoaderFunctionArgs) => {
+export const workflowExecutionLoader = async ({
+  params,
+}: LoaderFunctionArgs) => {
   const id = params.id
   const query = executionDetailQuery(id!)
 
-  return (
-    queryClient.getQueryData<HttpTypes.AdminWorkflowExecutionResponse>(
-      query.queryKey
-    ) ?? (await queryClient.fetchQuery(query))
-  )
+  return queryClient.ensureQueryData(query)
 }