@acmekit/dashboard 2.13.35 → 2.13.36

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-action-bar/workflow-execution-action-bar.tsx

@@ -1,212 +0,0 @@
-import { ArrowPathMini, EllipsisHorizontal, XMark } from "@acmekit/icons"
-import { HttpTypes } from "@acmekit/types"
-import {
-  Badge,
-  Button,
-  Container,
-  Copy,
-  StatusBadge,
-  toast,
-  usePrompt,
-} from "@acmekit/ui"
-import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
-import { ActionMenu } from "../../../../../components/common/action-menu"
-import {
-  useCancelWorkflowExecution,
-  useRunWorkflow,
-} from "../../../../../hooks/api/workflow-executions"
-import {
-  TRANSACTION_ERROR_STATES,
-  TRANSACTION_IN_PROGRESS_STATES,
-} from "../../../constants"
-import { TransactionState } from "../../../types"
-import {
-  getTransactionState,
-  getTransactionStateColor,
-  getWaitingSteps,
-} from "../../../utils"
-
-type WorkflowExecutionActionBarProps = {
-  execution: HttpTypes.AdminWorkflowExecution
-}
-
-export const WorkflowExecutionActionBar = ({
-  execution,
-}: WorkflowExecutionActionBarProps) => {
-  const { t } = useTranslation()
-  const prompt = usePrompt()
-
-  const state = execution.state as TransactionState
-  const stateColor = getTransactionStateColor(state)
-  const translatedState = getTransactionState(t, state)
-
-  const workflowId = execution.workflow_id
-  const transactionId = execution.transaction_id
-
-  const isFailed = TRANSACTION_ERROR_STATES.includes(state)
-  const isRunning = TRANSACTION_IN_PROGRESS_STATES.includes(state)
-  const waitingSteps = getWaitingSteps(execution)
-  const hasWaitingSteps = waitingSteps.length > 0
-
-  const { mutateAsync: runAsync, isPending: isRunning_ } =
-    useRunWorkflow(workflowId)
-  const { mutateAsync: cancelAsync, isPending: isCancelling } =
-    useCancelWorkflowExecution(workflowId, transactionId)
-
-  const handleRetry = async () => {
-    const payload = (execution as any)?.context?.data?.payload
-    const input =
-      payload && typeof payload === "object"
-        ? (payload as Record<string, unknown>)
-        : {}
-    await runAsync(
-      { input },
-      {
-        onSuccess: () => {
-          toast.success(t("workflowExecutions.actions.retrySuccess"))
-        },
-        onError: (err) => {
-          toast.error(err.message)
-        },
-      }
-    )
-  }
-
-  const handleCancel = async () => {
-    const res = await prompt({
-      title: t("workflowExecutions.actions.cancelConfirmTitle"),
-      description: t("workflowExecutions.actions.cancelConfirmDescription", {
-        workflow_id: workflowId,
-      }),
-      confirmText: t("workflowExecutions.actions.cancel"),
-      cancelText: t("actions.cancel"),
-    })
-
-    if (!res) return
-
-    await cancelAsync(undefined, {
-      onSuccess: () => {
-        toast.success(t("workflowExecutions.actions.cancelSuccess"))
-      },
-      onError: (err) => {
-        toast.error(err.message)
-      },
-    })
-  }
-
-  const handleExportJson = () => {
-    const data = JSON.stringify(execution, null, 2)
-    const blob = new Blob([data], { type: "application/json" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = `workflow-${workflowId}-${execution.id}.json`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const handleExportCsv = () => {
-    const steps = execution?.execution?.steps || {}
-    const rows = [["Step", "State", "Duration"]]
-    for (const [stepId, step] of Object.entries(steps)) {
-      if (stepId === "_root") continue
-      const invokeState = (step as any)?.invoke?.state || "unknown"
-      rows.push([stepId, invokeState, ""])
-    }
-    const csv = rows.map((r) => r.join(",")).join("\n")
-    const blob = new Blob([csv], { type: "text/csv" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = `workflow-${workflowId}-${execution.id}.csv`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const cleanId = execution.id.replace("wf_exec_", "")
-
-  return (
-    <Container className="sticky top-14 z-10 p-0">
-      <div className="flex items-center justify-between px-6 py-3">
-        <div className="flex items-center gap-x-3">
-          <Copy content={workflowId} asChild>
-            <Badge size="2xsmall" className="cursor-pointer">
-              {workflowId}
-            </Badge>
-          </Copy>
-          <StatusBadge color={stateColor}>{translatedState}</StatusBadge>
-          <Copy content={execution.id} asChild>
-            <Badge
-              size="2xsmall"
-              color="grey"
-              className="cursor-pointer text-ui-fg-muted"
-            >
-              {cleanId}
-            </Badge>
-          </Copy>
-        </div>
-        <div className="flex items-center gap-x-2">
-          {isFailed && (
-            <Button
-              variant="secondary"
-              size="small"
-              onClick={handleRetry}
-              isLoading={isRunning_}
-            >
-              <ArrowPathMini className="mr-1" />
-              {t("workflowExecutions.actions.retry")}
-            </Button>
-          )}
-          {isRunning && (
-            <Button
-              variant="danger"
-              size="small"
-              onClick={handleCancel}
-              isLoading={isCancelling}
-            >
-              <XMark className="mr-1" />
-              {t("workflowExecutions.actions.cancel")}
-            </Button>
-          )}
-          {hasWaitingSteps && (
-            <Button variant="secondary" size="small" asChild>
-              <Link to="complete-step">
-                {t("workflowExecutions.actions.completeStep")}
-              </Link>
-            </Button>
-          )}
-          <ActionMenu
-            groups={[
-              {
-                actions: [
-                  ...(isFailed
-                    ? [
-                        {
-                          label: t(
-                            "workflowExecutions.actions.retryWithNewInput"
-                          ),
-                          icon: <ArrowPathMini />,
-                          to: "rerun",
-                        },
-                      ]
-                    : []),
-                  {
-                    label: t("workflowExecutions.actions.exportJson"),
-                    icon: <EllipsisHorizontal />,
-                    onClick: handleExportJson,
-                  },
-                  {
-                    label: t("workflowExecutions.actions.exportCsv"),
-                    icon: <EllipsisHorizontal />,
-                    onClick: handleExportCsv,
-                  },
-                ],
-              },
-            ]}
-          />
-        </div>
-      </div>
-    </Container>
-  )
-}

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-error-card/index.ts

@@ -1 +0,0 @@
-export { WorkflowExecutionErrorCard } from "./workflow-execution-error-card"

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-error-card/workflow-execution-error-card.tsx

@@ -1,59 +0,0 @@
-import { XCircle } from "@acmekit/icons"
-import { HttpTypes } from "@acmekit/types"
-import { Container, Heading, Text } from "@acmekit/ui"
-import { useTranslation } from "react-i18next"
-import { TransactionState } from "../../../types"
-import { getFailedSteps } from "../../../utils"
-
-type WorkflowExecutionErrorCardProps = {
-  execution: HttpTypes.AdminWorkflowExecution
-}
-
-export const WorkflowExecutionErrorCard = ({
-  execution,
-}: WorkflowExecutionErrorCardProps) => {
-  const { t } = useTranslation()
-
-  if ((execution.state as TransactionState) !== TransactionState.FAILED) {
-    return null
-  }
-
-  const failedSteps = getFailedSteps(execution)
-  if (failedSteps.length === 0) return null
-
-  const firstFailure = failedSteps[0]
-  const errorMessage =
-    firstFailure.error?.error?.message ||
-    firstFailure.error?.error ||
-    "Unknown error"
-  const handlerType = firstFailure.error?.handlerType || "invoke"
-
-  return (
-    <Container className="border border-ui-tag-red-border bg-ui-tag-red-bg p-0">
-      <div className="flex items-start gap-x-3 px-6 py-4">
-        <div className="mt-0.5">
-          <XCircle className="text-ui-tag-red-icon" />
-        </div>
-        <div className="flex flex-1 flex-col gap-y-1">
-          <Heading level="h3">
-            {t("workflowExecutions.error.failureAtStep", {
-              step: firstFailure.stepId,
-            })}
-          </Heading>
-          <Text size="small" className="text-ui-fg-subtle">
-            {String(errorMessage)}
-          </Text>
-          <Text size="xsmall" className="text-ui-fg-muted">
-            {handlerType === "compensate" ? "Compensation" : "Invoke"} failure
-          </Text>
-        </div>
-        <a
-          href={`#${firstFailure.stepId}`}
-          className="text-ui-fg-interactive txt-compact-small-plus shrink-0 hover:underline"
-        >
-          {t("workflowExecutions.error.jumpToStep")}
-        </a>
-      </div>
-    </Container>
-  )
-}

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-waiting-banner/index.ts

@@ -1 +0,0 @@
-export { WorkflowExecutionWaitingBanner } from "./workflow-execution-waiting-banner"

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-waiting-banner/workflow-execution-waiting-banner.tsx

@@ -1,63 +0,0 @@
-import { ClockSolidMini } from "@acmekit/icons"
-import { HttpTypes } from "@acmekit/types"
-import { Container, Copy, Heading, Text } from "@acmekit/ui"
-import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
-import { computeIdempotencyKey, getWaitingSteps } from "../../../utils"
-
-type WorkflowExecutionWaitingBannerProps = {
-  execution: HttpTypes.AdminWorkflowExecution
-}
-
-export const WorkflowExecutionWaitingBanner = ({
-  execution,
-}: WorkflowExecutionWaitingBannerProps) => {
-  const { t } = useTranslation()
-  const waitingSteps = getWaitingSteps(execution)
-
-  if (waitingSteps.length === 0) return null
-
-  const firstStep = waitingSteps[0]
-  const idempotencyKey = computeIdempotencyKey(
-    execution.workflow_id,
-    execution.transaction_id,
-    firstStep.stepId,
-    "invoke"
-  )
-
-  return (
-    <Container className="border border-ui-tag-purple-border bg-ui-tag-purple-bg p-0">
-      <div className="flex items-start gap-x-3 px-6 py-4">
-        <div className="mt-0.5">
-          <ClockSolidMini className="text-ui-tag-purple-icon" />
-        </div>
-        <div className="flex flex-1 flex-col gap-y-1">
-          <Heading level="h3">
-            {t("workflowExecutions.asyncStep.waitingBanner")}
-          </Heading>
-          <Text size="small" className="text-ui-fg-subtle">
-            {t("workflowExecutions.asyncStep.waitingDescription", {
-              step: firstStep.stepId,
-            })}
-          </Text>
-          <div className="mt-1 flex items-center gap-x-2">
-            <Text size="xsmall" className="text-ui-fg-muted">
-              {t("workflowExecutions.asyncStep.idempotencyKey")}:
-            </Text>
-            <Copy content={idempotencyKey} asChild>
-              <code className="bg-ui-bg-base txt-compact-xsmall cursor-pointer rounded px-1.5 py-0.5">
-                {idempotencyKey}
-              </code>
-            </Copy>
-          </div>
-        </div>
-        <Link
-          to="complete-step"
-          className="text-ui-fg-interactive txt-compact-small-plus shrink-0 hover:underline"
-        >
-          {t("workflowExecutions.actions.completeStep")}
-        </Link>
-      </div>
-    </Container>
-  )
-}

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

@@ -1,73 +0,0 @@
-import { ArrowPathMini } from "@acmekit/icons"
-import { DropdownMenu, IconButton } from "@acmekit/ui"
-import { useQueryClient } from "@tanstack/react-query"
-import { useCallback, useEffect, useRef, useState } from "react"
-import { workflowExecutionsQueryKeys } from "../../../../../hooks/api/workflow-executions"
-
-const INTERVALS = [
-  { label: "Off", value: 0 },
-  { label: "5s", value: 5000 },
-  { label: "10s", value: 10000 },
-  { label: "30s", value: 30000 },
-]
-
-export const WorkflowExecutionAutoRefresh = () => {
-  const queryClient = useQueryClient()
-  const [interval, setInterval_] = useState(0)
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
-
-  const refresh = useCallback(() => {
-    queryClient.invalidateQueries({
-      queryKey: workflowExecutionsQueryKeys.lists(),
-    })
-  }, [queryClient])
-
-  useEffect(() => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current)
-      intervalRef.current = null
-    }
-
-    if (interval > 0) {
-      intervalRef.current = setInterval(refresh, interval)
-    }
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
-      }
-    }
-  }, [interval, refresh])
-
-  const activeLabel = INTERVALS.find((i) => i.value === interval)?.label
-
-  return (
-    <div className="flex items-center gap-x-1">
-      <IconButton
-        size="small"
-        variant="transparent"
-        onClick={refresh}
-      >
-        <ArrowPathMini />
-      </IconButton>
-      <DropdownMenu>
-        <DropdownMenu.Trigger asChild>
-          <button className="txt-compact-small text-ui-fg-muted hover:text-ui-fg-subtle rounded px-1.5 py-0.5 transition-colors">
-            {activeLabel}
-          </button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content align="end">
-          {INTERVALS.map((opt) => (
-            <DropdownMenu.Item
-              key={opt.value}
-              onClick={() => setInterval_(opt.value)}
-              className={interval === opt.value ? "font-medium" : ""}
-            >
-              {opt.label}
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    </div>
-  )
-}

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

@@ -1,116 +0,0 @@
-import { ArrowPathMini, Eye, XMark } from "@acmekit/icons"
-import { HttpTypes } from "@acmekit/types"
-import { toast, usePrompt } from "@acmekit/ui"
-import { useTranslation } from "react-i18next"
-import {
-  Action,
-  ActionMenu,
-} from "../../../../../components/common/action-menu"
-import {
-  useCancelWorkflowExecution,
-  useRunWorkflow,
-} from "../../../../../hooks/api/workflow-executions"
-import {
-  TRANSACTION_ERROR_STATES,
-  TRANSACTION_IN_PROGRESS_STATES,
-} from "../../../constants"
-import { TransactionState } from "../../../types"
-
-type WorkflowExecutionRowActionsProps = {
-  execution: HttpTypes.AdminWorkflowExecutionResponse["workflow_execution"]
-}
-
-export const WorkflowExecutionRowActions = ({
-  execution,
-}: WorkflowExecutionRowActionsProps) => {
-  const { t } = useTranslation()
-  const prompt = usePrompt()
-
-  const state = execution.state as TransactionState
-  const isFailed = TRANSACTION_ERROR_STATES.includes(state)
-  const isRunning = TRANSACTION_IN_PROGRESS_STATES.includes(state)
-
-  const workflowId = execution.workflow_id
-  const transactionId = execution.transaction_id
-
-  const { mutateAsync: runAsync } = useRunWorkflow(workflowId)
-  const { mutateAsync: cancelAsync } = useCancelWorkflowExecution(
-    workflowId,
-    transactionId
-  )
-
-  const handleRetry = async () => {
-    const payload = (execution as any)?.context?.data?.payload
-    const input =
-      payload && typeof payload === "object"
-        ? (payload as Record<string, unknown>)
-        : {}
-    await runAsync(
-      { input },
-      {
-        onSuccess: () => {
-          toast.success(t("workflowExecutions.actions.retrySuccess"))
-        },
-        onError: (err) => {
-          toast.error(err.message)
-        },
-      }
-    )
-  }
-
-  const handleCancel = async () => {
-    const res = await prompt({
-      title: t("workflowExecutions.actions.cancelConfirmTitle"),
-      description: t(
-        "workflowExecutions.actions.cancelConfirmDescription",
-        { workflow_id: workflowId }
-      ),
-      confirmText: t("workflowExecutions.actions.cancel"),
-      cancelText: t("actions.cancel"),
-    })
-
-    if (!res) return
-
-    await cancelAsync(undefined, {
-      onSuccess: () => {
-        toast.success(t("workflowExecutions.actions.cancelSuccess"))
-      },
-      onError: (err) => {
-        toast.error(err.message)
-      },
-    })
-  }
-
-  const secondaryActions: Action[] = []
-  if (isFailed) {
-    secondaryActions.push({
-      icon: <ArrowPathMini />,
-      label: t("workflowExecutions.actions.retry"),
-      onClick: handleRetry,
-    })
-  }
-  if (isRunning) {
-    secondaryActions.push({
-      icon: <XMark />,
-      label: t("workflowExecutions.actions.cancel"),
-      onClick: handleCancel,
-    })
-  }
-
-  const groups = [
-    {
-      actions: [
-        {
-          icon: <Eye />,
-          label: t("workflowExecutions.actions.viewDetails"),
-          to: `${execution.id}`,
-        } as Action,
-      ],
-    },
-    ...(secondaryActions.length > 0
-      ? [{ actions: secondaryActions }]
-      : []),
-  ]
-
-  return <ActionMenu groups={groups} />
-}

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

@@ -1,84 +0,0 @@
-import { Button, clx } from "@acmekit/ui"
-import { useCallback, useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { useSearchParams } from "react-router-dom"
-
-type SavedView = {
-  label: string
-  params: Record<string, string>
-}
-
-export const WorkflowExecutionSavedViews = () => {
-  const { t } = useTranslation()
-  const [searchParams, setSearchParams] = useSearchParams()
-
-  const views: SavedView[] = useMemo(
-    () => [
-      {
-        label: t("workflowExecutions.filters.allExecutions"),
-        params: {} as Record<string, string>,
-      },
-      {
-        label: t("workflowExecutions.filters.running"),
-        params: { state: "invoking" } as Record<string, string>,
-      },
-      {
-        label: t("workflowExecutions.filters.failedToday"),
-        params: {
-          state: "failed",
-          created_at: JSON.stringify({
-            $gte: new Date(
-              new Date().setHours(0, 0, 0, 0)
-            ).toISOString(),
-          }),
-        } as Record<string, string>,
-      },
-    ],
-    [t]
-  )
-
-  const isActive = useCallback(
-    (view: SavedView) => {
-      const viewKeys = Object.keys(view.params)
-      if (viewKeys.length === 0) {
-        return !searchParams.has("state") && !searchParams.has("created_at")
-      }
-      return viewKeys.every(
-        (key) => searchParams.get(key) === view.params[key]
-      )
-    },
-    [searchParams]
-  )
-
-  const handleClick = useCallback(
-    (view: SavedView) => {
-      const newParams = new URLSearchParams()
-      for (const [key, value] of Object.entries(view.params)) {
-        newParams.set(key, value)
-      }
-      setSearchParams(newParams)
-    },
-    [setSearchParams]
-  )
-
-  return (
-    <div className="flex items-center gap-x-1">
-      {views.map((view) => (
-        <Button
-          key={view.label}
-          variant="transparent"
-          size="small"
-          onClick={() => handleClick(view)}
-          className={clx(
-            "txt-compact-small-plus",
-            isActive(view)
-              ? "bg-ui-bg-base shadow-elevation-card-rest text-ui-fg-base"
-              : "text-ui-fg-muted"
-          )}
-        >
-          {view.label}
-        </Button>
-      ))}
-    </div>
-  )
-}