diff --git a/ui-v2/src/components/flow-runs/data-table/parameters-cell.tsx b/ui-v2/src/components/flow-runs/data-table/parameters-cell.tsx new file mode 100644 index 000000000000..be69a8c1339f --- /dev/null +++ b/ui-v2/src/components/flow-runs/data-table/parameters-cell.tsx @@ -0,0 +1,61 @@ +import { + type FlowRunWithDeploymentAndFlow, + type FlowRunWithFlow, +} from "@/api/flow-runs"; +import { Button } from "@/components/ui/button"; +import { DialogHeader } from "@/components/ui/dialog"; +import { + Dialog, + DialogContent, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { Icon } from "@/components/ui/icons"; +import { JsonInput } from "@/components/ui/json-input"; +import { pluralize } from "@/utils"; +import type { CellContext } from "@tanstack/react-table"; + +type ParametersCellProps = CellContext< + FlowRunWithFlow | FlowRunWithDeploymentAndFlow, + Record | undefined +>; + +export const ParametersCell = (props: ParametersCellProps) => { + const flowRunName = props.row.original.name; + const parameters = props.getValue() ?? {}; + return ( +
+ + +
+ ); +}; + +type ParametersDialogProps = { + flowRunName: string | undefined; + parameters: Record; +}; + +export const ParametersDialog = ({ + flowRunName, + parameters, +}: ParametersDialogProps) => { + const numParameters = Object.keys(parameters).length; + return ( + + + + + + + + Flow run parameters for {flowRunName ?? "Flow run"} + + + + + + ); +}; diff --git a/ui-v2/src/components/ui/icons/constants.ts b/ui-v2/src/components/ui/icons/constants.ts index 0c5410f05535..398a3f6901f7 100644 --- a/ui-v2/src/components/ui/icons/constants.ts +++ b/ui-v2/src/components/ui/icons/constants.ts @@ -33,6 +33,7 @@ import { Rocket, Search, ServerCrash, + SlidersVertical, Sun, Trash2, Variable, @@ -75,6 +76,7 @@ export const ICONS = { Rocket, Search, ServerCrash, + SlidersVertical, Sun, Trash2, Variable,