@acmekit/dashboard 2.13.35 → 2.13.36

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx

@@ -1,140 +1,24 @@
 import { HttpTypes } from "@acmekit/types"
-import { Button, Container, Heading, Tabs, toast } from "@acmekit/ui"
-import { useState } from "react"
-import { useTranslation } from "react-i18next"
 import { JsonViewSection } from "../../../../../components/common/json-view-section"
 
 type WorkflowExecutionPayloadSectionProps = {
   execution: HttpTypes.AdminWorkflowExecution
 }
 
-function downloadJson(data: unknown, filename: string) {
-  const blob = new Blob([JSON.stringify(data, null, 2)], {
-    type: "application/json",
-  })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement("a")
-  a.href = url
-  a.download = filename
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
 export const WorkflowExecutionPayloadSection = ({
   execution,
 }: WorkflowExecutionPayloadSectionProps) => {
-  const { t } = useTranslation()
-
   let payload = execution.context?.data?.payload
-  if (payload && typeof payload !== "object") {
-    payload = { input: payload }
-  }
-
-  const checkpoint = execution.context || {}
-  const errors = (execution as any).context?.errors || []
-
-  const stepOutputs: Record<string, unknown> = {}
-  const steps = execution?.execution?.steps || {}
-  for (const [stepId, step] of Object.entries(steps)) {
-    if (stepId === "_root") continue
-    const output = (step as any)?.invoke?.output
-    if (output !== undefined) {
-      stepOutputs[stepId] = output
-    }
-  }
-
-  const hasPayload = !!payload
-  const hasStepOutputs = Object.keys(stepOutputs).length > 0
-  const hasErrors = errors.length > 0
 
-  const defaultTab = hasPayload ? "input" : "checkpoint"
-  const [activeTab, setActiveTab] = useState(defaultTab)
-
-  if (!hasPayload && !hasStepOutputs && !hasErrors) {
+  if (!payload) {
     return null
   }
 
-  const activeData =
-    activeTab === "input"
-      ? payload
-      : activeTab === "checkpoint"
-        ? checkpoint
-        : activeTab === "outputs"
-          ? stepOutputs
-          : errors
-
-  const handleCopyAll = () => {
-    navigator.clipboard.writeText(JSON.stringify(activeData, null, 2))
-    toast.success("Copied to clipboard")
-  }
-
-  const handleDownload = () => {
-    downloadJson(
-      activeData,
-      `${execution.workflow_id}-${activeTab}.json`
-    )
+  // payloads may be a primitive, so we need to wrap them in an object
+  // to ensure the JsonViewSection component can render them.
+  if (typeof payload !== "object") {
+    payload = { input: payload }
   }
 
-  return (
-    <Container className="divide-y p-0">
-      <div className="flex items-center justify-between px-6 py-4">
-        <Heading level="h2">
-          {t("workflowExecutions.payload.inputPayload")}
-        </Heading>
-        <div className="flex items-center gap-x-2">
-          <Button size="small" variant="transparent" onClick={handleCopyAll}>
-            {t("workflowExecutions.payload.copyAll")}
-          </Button>
-          <Button size="small" variant="transparent" onClick={handleDownload}>
-            {t("workflowExecutions.payload.downloadJson")}
-          </Button>
-        </div>
-      </div>
-      <Tabs
-        value={activeTab}
-        onValueChange={setActiveTab}
-      >
-        <div className="border-ui-border-base border-b px-6">
-          <Tabs.List>
-            {hasPayload && (
-              <Tabs.Trigger value="input">
-                {t("workflowExecutions.payload.inputPayload")}
-              </Tabs.Trigger>
-            )}
-            <Tabs.Trigger value="checkpoint">
-              {t("workflowExecutions.payload.fullCheckpoint")}
-            </Tabs.Trigger>
-            {hasStepOutputs && (
-              <Tabs.Trigger value="outputs">
-                {t("workflowExecutions.payload.stepOutputs")}
-              </Tabs.Trigger>
-            )}
-            {hasErrors && (
-              <Tabs.Trigger value="errors">
-                {t("workflowExecutions.payload.errors")}
-              </Tabs.Trigger>
-            )}
-          </Tabs.List>
-        </div>
-        {hasPayload && (
-          <Tabs.Content value="input" className="p-0">
-            <JsonViewSection data={payload as object} />
-          </Tabs.Content>
-        )}
-        <Tabs.Content value="checkpoint" className="p-0">
-          <JsonViewSection data={checkpoint as object} />
-        </Tabs.Content>
-        {hasStepOutputs && (
-          <Tabs.Content value="outputs" className="p-0">
-            <JsonViewSection data={stepOutputs} />
-          </Tabs.Content>
-        )}
-        {hasErrors && (
-          <Tabs.Content value="errors" className="p-0">
-            <JsonViewSection data={errors as object} />
-          </Tabs.Content>
-        )}
-      </Tabs>
-    </Container>
-  )
+  return <JsonViewSection data={payload as object} />
 }

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx

@@ -18,7 +18,6 @@ import {
   STEP_OK_STATES,
   STEP_SKIPPED_STATES,
 } from "../../../constants"
-import { TransactionStepState } from "../../../types"
 import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type WorkflowExecutionTimelineSectionProps = {
@@ -399,8 +398,6 @@ const Node = ({ step }: { step: HttpTypes.AdminWorkflowExecutionStep }) => {
     }, 100)
   }
 
-  const isInvoking = step.invoke.state === TransactionStepState.INVOKING
-
   return (
     <Link
       to={`#${stepId}`}
@@ -408,10 +405,7 @@ const Node = ({ step }: { step: HttpTypes.AdminWorkflowExecutionStep }) => {
       className="focus-visible:shadow-borders-focus transition-fg rounded-md outline-none"
     >
       <div
-        className={clx(
-          "bg-ui-bg-base shadow-borders-base flex min-w-[120px] items-center gap-x-0.5 rounded-md p-0.5",
-          { "animate-pulse": isInvoking }
-        )}
+        className="bg-ui-bg-base shadow-borders-base flex min-w-[120px] items-center gap-x-0.5 rounded-md p-0.5"
         data-step-id={step.id}
       >
         <div className="flex size-5 items-center justify-center">

package/src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx

@@ -1,20 +1,9 @@
 import { useParams } from "react-router-dom"
-import { useQueryClient } from "@tanstack/react-query"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import {
-  useWorkflowExecution,
-  workflowExecutionsQueryKeys,
-} from "../../../hooks/api/workflow-executions"
+import { useWorkflowExecution } from "../../../hooks/api/workflow-executions"
 import { useExtension } from "../../../providers/extension-provider"
-import { useWorkflowSSE } from "../../../hooks/use-workflow-sse"
-import { TRANSACTION_ACTIVE_STATES } from "../constants"
-import { TransactionState } from "../types"
-import { isTerminalState, mergeStepEvent } from "../utils"
-import { WorkflowExecutionActionBar } from "./components/workflow-execution-action-bar"
-import { WorkflowExecutionErrorCard } from "./components/workflow-execution-error-card"
-import { WorkflowExecutionWaitingBanner } from "./components/workflow-execution-waiting-banner"
 import { WorkflowExecutionGeneralSection } from "./components/workflow-execution-general-section"
 import { WorkflowExecutionHistorySection } from "./components/workflow-execution-history-section"
 import { WorkflowExecutionPayloadSection } from "./components/workflow-execution-payload-section"
@@ -22,42 +11,12 @@ import { WorkflowExecutionTimelineSection } from "./components/workflow-executio
 
 export const ExecutionDetail = () => {
   const { id } = useParams()
-  const queryClient = useQueryClient()
 
   const { workflow_execution, isLoading, isError, error } =
     useWorkflowExecution(id!)
 
   const { getWidgets } = useExtension()
 
-  const isActive = workflow_execution
-    ? TRANSACTION_ACTIVE_STATES.includes(
-        workflow_execution.state as TransactionState
-      )
-    : false
-
-  useWorkflowSSE(workflow_execution?.workflow_id || "", {
-    enabled: isActive && !!workflow_execution?.workflow_id,
-    onEvent: (event) => {
-      queryClient.setQueryData(
-        workflowExecutionsQueryKeys.detail(id!),
-        (current: any) => {
-          if (!current) return current
-          return mergeStepEvent(current, event)
-        }
-      )
-
-      if (
-        event.event_type === "onFinish" ||
-        (event.response?.state &&
-          isTerminalState(event.response.state as TransactionState))
-      ) {
-        queryClient.invalidateQueries({
-          queryKey: workflowExecutionsQueryKeys.detail(id!),
-        })
-      }
-    },
-  })
-
   if (isLoading || !workflow_execution) {
     return <SingleColumnPageSkeleton sections={4} showJSON />
   }
@@ -74,11 +33,7 @@ export const ExecutionDetail = () => {
       }}
       data={workflow_execution}
       showJSON
-      hasOutlet
     >
-      <WorkflowExecutionActionBar execution={workflow_execution} />
-      <WorkflowExecutionErrorCard execution={workflow_execution} />
-      <WorkflowExecutionWaitingBanner execution={workflow_execution} />
       <WorkflowExecutionGeneralSection execution={workflow_execution} />
       <WorkflowExecutionTimelineSection execution={workflow_execution} />
       <WorkflowExecutionPayloadSection execution={workflow_execution} />

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-columns.tsx

@@ -7,7 +7,6 @@ import { TransactionStepState } from "../../../types"
 import { getTransactionState, getTransactionStateColor } from "../../../utils"
 import { HttpTypes } from "@acmekit/types"
 import { DataTableStatusCell } from "../../../../../components/data-table/components/data-table-status-cell/data-table-status-cell"
-import { WorkflowExecutionRowActions } from "./workflow-execution-row-actions"
 
 const columnHelper =
   createColumnHelper<
@@ -187,12 +186,6 @@ export const useWorkflowExecutionTableColumns = (): ColumnDef<
           return <DateCell date={date} />
         },
       }),
-      columnHelper.display({
-        id: "actions",
-        cell: ({ row }) => (
-          <WorkflowExecutionRowActions execution={row.original} />
-        ),
-      }),
     ],
     [t]
   )

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-filters.tsx

@@ -52,12 +52,6 @@ export const useWorkflowExecutionTableFilters = (): Filter[] => {
     { key: "updated_at", label: t("fields.updatedAt"), type: "date" },
   ]
 
-  const workflowIdFilter: Filter = {
-    key: "workflow_id",
-    label: t("workflowExecutions.workflowIdLabel"),
-    type: "string",
-  }
-
-  return [stateFilter, workflowIdFilter, ...dateFilters]
+  return [stateFilter, ...dateFilters]
 }
 

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-query.tsx

@@ -9,19 +9,17 @@ export const useWorkflowExecutionTableQuery = ({
   prefix?: string
 }) => {
   const raw = useQueryParams(
-    ["q", "offset", "order", "state", "workflow_id", "created_at", "updated_at"],
+    ["q", "offset", "order", "state", "created_at", "updated_at"],
     prefix
   )
 
-  const { offset, order, state, workflow_id, created_at, updated_at, ...rest } =
-    raw
+  const { offset, order, state, created_at, updated_at, ...rest } = raw
 
   const searchParams: HttpTypes.AdminGetWorkflowExecutionsParams = {
     limit: pageSize,
     offset: offset ? parseInt(offset) : 0,
     order: order ?? "-created_at",
     state: state ? state.split(",") : undefined,
-    workflow_id: workflow_id ? workflow_id.split(",") : undefined,
     created_at: created_at ? JSON.parse(created_at) : undefined,
     updated_at: updated_at ? JSON.parse(updated_at) : undefined,
     ...rest,

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-list-table.tsx

@@ -1,13 +1,9 @@
-import { PlayMiniSolid } from "@acmekit/icons"
-import { Button, Container, Heading, Text } from "@acmekit/ui"
+import { Container, Heading, Text } from "@acmekit/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
 import { _DataTable } from "../../../../../components/table/data-table"
 import { useWorkflowExecutions } from "../../../../../hooks/api/workflow-executions"
 import { useDataTable } from "../../../../../hooks/use-data-table"
-import { WorkflowExecutionAutoRefresh } from "./workflow-execution-auto-refresh"
-import { WorkflowExecutionSavedViews } from "./workflow-execution-saved-views"
 import { useWorkflowExecutionTableColumns } from "./use-workflow-execution-table-columns"
 import { useWorkflowExecutionTableFilters } from "./use-workflow-execution-table-filters"
 import { useWorkflowExecutionTableQuery } from "./use-workflow-execution-table-query"
@@ -56,18 +52,6 @@ export const WorkflowExecutionListTable = () => {
             {t(`workflowExecutions.subtitle`)}
           </Text>
         </div>
-        <div className="flex items-center gap-x-2">
-          <WorkflowExecutionAutoRefresh />
-          <Button variant="secondary" size="small" asChild>
-            <Link to="run">
-              <PlayMiniSolid className="mr-1" />
-              {t("workflowExecutions.actions.runWorkflow")}
-            </Link>
-          </Button>
-        </div>
-      </div>
-      <div className="border-ui-border-base border-b px-6 py-2">
-        <WorkflowExecutionSavedViews />
       </div>
       <_DataTable
         table={table}

package/src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx

@@ -12,7 +12,7 @@ export const WorkflowExcecutionList = () => {
         after: getWidgets("workflow.list.after"),
         before: getWidgets("workflow.list.before"),
       }}
-      hasOutlet
+      hasOutlet={false}
     >
       <WorkflowExecutionListTable />
     </SingleColumnPage>

package/src/hooks/api/workflow-definitions.tsx

@@ -1,79 +0,0 @@
-import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"
-import { sdk } from "../../lib/client"
-import { queryKeysFactory } from "../../lib/query-key-factory"
-import { FetchError } from "@acmekit/js-sdk"
-
-export type WorkflowDefinitionResponse = {
-  workflow_definitions: Array<{
-    id: string
-    handler_count: number
-    steps: Array<{
-      action: string
-      depth: number
-      noCompensation: boolean
-    }>
-    options: Record<string, unknown>
-  }>
-  count: number
-}
-
-export type WorkflowDefinitionDetailResponse = {
-  workflow_definition: {
-    id: string
-    handler_count: number
-    steps: Array<{
-      action: string
-      depth: number
-      noCompensation: boolean
-    }>
-    flow: Record<string, unknown> | null
-    options: Record<string, unknown>
-  }
-}
-
-const WORKFLOW_DEFINITIONS_QUERY_KEY = "workflow_definitions" as const
-export const workflowDefinitionsQueryKeys = queryKeysFactory(
-  WORKFLOW_DEFINITIONS_QUERY_KEY
-)
-
-export const useWorkflowDefinitions = (
-  query?: Record<string, unknown>,
-  options?: Omit<
-    UseQueryOptions<
-      WorkflowDefinitionResponse,
-      FetchError,
-      WorkflowDefinitionResponse,
-      QueryKey
-    >,
-    "queryKey" | "queryFn"
-  >
-) => {
-  const { data, ...rest } = useQuery({
-    queryFn: () => sdk.admin.workflowDefinition.list(query),
-    queryKey: workflowDefinitionsQueryKeys.list(query),
-    ...options,
-  })
-
-  return { ...data, ...rest }
-}
-
-export const useWorkflowDefinition = (
-  id: string,
-  options?: Omit<
-    UseQueryOptions<
-      WorkflowDefinitionDetailResponse,
-      FetchError,
-      WorkflowDefinitionDetailResponse,
-      QueryKey
-    >,
-    "queryKey" | "queryFn"
-  >
-) => {
-  const { data, ...rest } = useQuery({
-    queryFn: () => sdk.admin.workflowDefinition.retrieve(id),
-    queryKey: workflowDefinitionsQueryKeys.detail(id),
-    ...options,
-  })
-
-  return { ...data, ...rest }
-}

package/src/hooks/api/workflow-metrics.tsx

@@ -1,48 +0,0 @@
-import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"
-import { sdk } from "../../lib/client"
-import { queryKeysFactory } from "../../lib/query-key-factory"
-import { FetchError } from "@acmekit/js-sdk"
-
-export type WorkflowMetricsResponse = {
-  total_24h: number
-  success_rate_24h: number
-  avg_duration_ms_24h: number
-  running_now: number
-  per_workflow: Array<{
-    workflow_id: string
-    runs: number
-    success_rate: number
-    avg_duration_ms: number
-  }>
-}
-
-const WORKFLOW_METRICS_QUERY_KEY = "workflow_metrics" as const
-export const workflowMetricsQueryKeys = queryKeysFactory(
-  WORKFLOW_METRICS_QUERY_KEY
-)
-
-export const useWorkflowMetrics = (
-  options?: Omit<
-    UseQueryOptions<
-      WorkflowMetricsResponse,
-      FetchError,
-      WorkflowMetricsResponse,
-      QueryKey
-    >,
-    "queryKey" | "queryFn"
-  >
-) => {
-  const { data, ...rest } = useQuery({
-    queryFn: async () => {
-      const result = await sdk.client.fetch<WorkflowMetricsResponse>(
-        "/admin/workflows-executions/metrics"
-      )
-      return result as unknown as WorkflowMetricsResponse
-    },
-    queryKey: workflowMetricsQueryKeys.all,
-    refetchInterval: 30000,
-    ...options,
-  })
-
-  return { ...data, ...rest }
-}

package/src/hooks/use-workflow-sse.tsx

@@ -1,78 +0,0 @@
-import { useEffect, useRef, useState } from "react"
-import { backendUrl } from "../lib/client"
-
-export interface WorkflowSSEEvent {
-  event_type: string
-  workflow_id: string
-  transaction_id: string
-  step?: Record<string, unknown>
-  response?: Record<string, unknown>
-  result?: Record<string, unknown>
-  errors?: Array<Record<string, unknown>>
-}
-
-interface UseWorkflowSSEOptions {
-  enabled?: boolean
-  onEvent?: (event: WorkflowSSEEvent) => void
-}
-
-export const useWorkflowSSE = (
-  workflowId: string | undefined,
-  options?: UseWorkflowSSEOptions
-) => {
-  const { enabled = true, onEvent } = options || {}
-  const [isConnected, setIsConnected] = useState(false)
-  const eventSourceRef = useRef<EventSource | null>(null)
-  const onEventRef = useRef(onEvent)
-  onEventRef.current = onEvent
-
-  useEffect(() => {
-    if (!enabled || !workflowId) {
-      if (eventSourceRef.current) {
-        eventSourceRef.current.close()
-        eventSourceRef.current = null
-        setIsConnected(false)
-      }
-      return
-    }
-
-    const base = backendUrl === "/" ? "" : backendUrl
-    const url = `${base}/admin/workflows-executions/${workflowId}/subscribe`
-
-    const es = new EventSource(url, { withCredentials: true })
-    eventSourceRef.current = es
-
-    es.onopen = () => {
-      setIsConnected(true)
-    }
-
-    es.onmessage = (e) => {
-      try {
-        const data = JSON.parse(e.data) as WorkflowSSEEvent
-        onEventRef.current?.(data)
-      } catch {
-        // ignore parse errors
-      }
-    }
-
-    es.onerror = () => {
-      setIsConnected(false)
-    }
-
-    return () => {
-      es.close()
-      eventSourceRef.current = null
-      setIsConnected(false)
-    }
-  }, [enabled, workflowId])
-
-  const disconnect = () => {
-    if (eventSourceRef.current) {
-      eventSourceRef.current.close()
-      eventSourceRef.current = null
-      setIsConnected(false)
-    }
-  }
-
-  return { isConnected, disconnect }
-}