From 16e85ce3c281778f5ab6487a73377eed63bcac8b Mon Sep 17 00:00:00 2001 From: Devin Villarosa <102188207+devinvillarosa@users.noreply.github.com> Date: Fri, 17 Jan 2025 08:46:53 -0800 Subject: [PATCH] [UI v2] feat: Begins logic for creating UX based on an action type (#16752) --- .../use-list-deployments-with-flows.ts | 9 +- .../action-details/action-details.stories.tsx | 93 ++++++++++++++++++ .../action-details/action-details.tsx | 96 +++++++++++++++++++ .../automations/action-details/index.ts | 1 + .../automation-page/automation-page.tsx | 6 +- 5 files changed, 197 insertions(+), 8 deletions(-) create mode 100644 ui-v2/src/components/automations/action-details/action-details.stories.tsx create mode 100644 ui-v2/src/components/automations/action-details/action-details.tsx create mode 100644 ui-v2/src/components/automations/action-details/index.ts diff --git a/ui-v2/src/api/deployments/use-list-deployments-with-flows/use-list-deployments-with-flows.ts b/ui-v2/src/api/deployments/use-list-deployments-with-flows/use-list-deployments-with-flows.ts index e85eae65f6aa..425275fd6fb1 100644 --- a/ui-v2/src/api/deployments/use-list-deployments-with-flows/use-list-deployments-with-flows.ts +++ b/ui-v2/src/api/deployments/use-list-deployments-with-flows/use-list-deployments-with-flows.ts @@ -48,8 +48,9 @@ export const useListDeploymentsWithFlows = ( buildPaginateDeploymentsQuery(filter), ); - const deploymentsFlowIds = deploymentsData?.results.map( - (deployment) => deployment.flow_id, + // Creates a set of unique flow ids + const deploymentsFlowIds = new Set( + deploymentsData?.results.map((deployment) => deployment.flow_id), ); const { data: flowsData, status: flowsStatus } = useQuery( @@ -57,12 +58,12 @@ export const useListDeploymentsWithFlows = ( { flows: { operator: "or_", - id: { any_: deploymentsFlowIds }, + id: { any_: Array.from(deploymentsFlowIds) }, }, sort: "NAME_DESC", offset: 0, }, - { enabled: Boolean(deploymentsFlowIds) }, + { enabled: deploymentsFlowIds.size > 0 }, ), ); diff --git a/ui-v2/src/components/automations/action-details/action-details.stories.tsx b/ui-v2/src/components/automations/action-details/action-details.stories.tsx new file mode 100644 index 000000000000..888c142368fd --- /dev/null +++ b/ui-v2/src/components/automations/action-details/action-details.stories.tsx @@ -0,0 +1,93 @@ +import { Automation } from "@/api/automations"; +import type { Meta, StoryObj } from "@storybook/react"; +import { ActionDetails } from "./action-details"; + +const ACTIONS: Array = [ + { type: "do-nothing" }, + { type: "cancel-flow-run" }, + { type: "suspend-flow-run" }, + { type: "cancel-flow-run" }, + { type: "resume-flow-run" }, + { type: "run-deployment", deployment_id: null, source: "inferred" }, + { type: "run-deployment", deployment_id: "abc", source: "selected" }, + { type: "pause-deployment", deployment_id: null, source: "inferred" }, + { type: "resume-deployment", deployment_id: "abc", source: "selected" }, + { type: "pause-work-queue", work_queue_id: null, source: "inferred" }, + { type: "resume-work-queue", work_queue_id: "abc", source: "selected" }, + { type: "pause-work-pool", work_pool_id: null, source: "inferred" }, + { type: "resume-work-pool", work_pool_id: "abc", source: "selected" }, + { type: "pause-automation", automation_id: null, source: "inferred" }, + { type: "resume-automation", automation_id: "abc", source: "selected" }, + { + type: "send-notification", + block_document_id: "abc", + body: "my_body", + subject: "my_subject", + }, + { + type: "change-flow-run-state", + state: "CANCELLED", + }, + { + type: "change-flow-run-state", + state: "CANCELLING", + }, + { + type: "change-flow-run-state", + state: "COMPLETED", + }, + { + type: "change-flow-run-state", + state: "CRASHED", + }, + { + type: "change-flow-run-state", + state: "FAILED", + }, + { + type: "change-flow-run-state", + state: "PAUSED", + }, + { + type: "change-flow-run-state", + state: "PENDING", + }, + { + type: "change-flow-run-state", + state: "RUNNING", + message: "My message", + name: "My name", + }, + { + type: "change-flow-run-state", + state: "SCHEDULED", + }, + { + type: "call-webhook", + block_document_id: "abc", + payload: "my_payload", + }, +]; + +const meta = { + title: "Components/Automations/ActionDetails", + component: ActionDetailsStory, +} satisfies Meta; + +export default meta; + +export const Story: StoryObj = { + name: "ActionDetails", +}; + +function ActionDetailsStory() { + return ( + + ); +} diff --git a/ui-v2/src/components/automations/action-details/action-details.tsx b/ui-v2/src/components/automations/action-details/action-details.tsx new file mode 100644 index 000000000000..ace1257cbe56 --- /dev/null +++ b/ui-v2/src/components/automations/action-details/action-details.tsx @@ -0,0 +1,96 @@ +import { Automation } from "@/api/automations"; +import { Card } from "@/components/ui/card"; +import { Typography } from "@/components/ui/typography"; +type AutomationAction = Automation["actions"][number]; + +type ActionDetailsProps = { + action: AutomationAction; +}; +export const ActionDetails = ({ action }: ActionDetailsProps) => ( + + + +); + +export const ActionDetailsType = ({ action }: ActionDetailsProps) => { + switch (action.type) { + // Non-inferrable Actions + case "do-nothing": + case "cancel-flow-run": + case "suspend-flow-run": + case "resume-flow-run": + return ; + // Inferable actions + case "run-deployment": + return action.deployment_id && action.source == "selected" ? ( + "TODO" + ) : ( + + ); + case "pause-deployment": + case "resume-deployment": + return action.deployment_id && action.source == "selected" ? ( + "TODO" + ) : ( + + ); + case "pause-work-queue": + case "resume-work-queue": + return action.work_queue_id && action.source == "selected" ? ( + "TODO" + ) : ( + + ); + case "pause-automation": + case "resume-automation": + return action.automation_id && action.source == "selected" ? ( + "TODO" + ) : ( + + ); + case "pause-work-pool": + case "resume-work-pool": + return action.work_pool_id && action.source == "selected" ? ( + "TODO" + ) : ( + + ); + // Other actions + case "send-notification": + return "TODO"; + case "change-flow-run-state": + return "TODO"; + case "call-webhook": + return "TODO"; + } +}; + +const ACTION_TYPE_TO_STRING: Record = { + "cancel-flow-run": "Cancel flow run", + "suspend-flow-run": "Suspend flow run", + "resume-flow-run": "Resume a flow run", + "change-flow-run-state": "Change state of a flow run", + "run-deployment": "Run deployment", + "pause-deployment": "Pause deployment", + "resume-deployment": "Resume deployment", + "pause-work-queue": "Pause work queue", + "resume-work-queue": "Resume work queue", + "pause-work-pool": "Pause work queue", + "resume-work-pool": "Resume work queue", + "pause-automation": "Pause automation", + "resume-automation": "Resume automation", + "call-webhook": "Call a custom webhook notification", + "send-notification": "Send a notification", + "do-nothing": "Do nothing", +} as const; + +const NoninferredAction = ({ action }: ActionDetailsProps) => ( + + {`${ACTION_TYPE_TO_STRING[action.type]} from the triggering event`} + +); +const InferredAction = ({ action }: ActionDetailsProps) => ( + + {`${ACTION_TYPE_TO_STRING[action.type]} inferred from the triggering event`} + +); diff --git a/ui-v2/src/components/automations/action-details/index.ts b/ui-v2/src/components/automations/action-details/index.ts new file mode 100644 index 000000000000..fa880e1d248c --- /dev/null +++ b/ui-v2/src/components/automations/action-details/index.ts @@ -0,0 +1 @@ +export { ActionDetails } from "./action-details"; diff --git a/ui-v2/src/components/automations/automation-page/automation-page.tsx b/ui-v2/src/components/automations/automation-page/automation-page.tsx index 94f0f01a0bb7..4c1557485525 100644 --- a/ui-v2/src/components/automations/automation-page/automation-page.tsx +++ b/ui-v2/src/components/automations/automation-page/automation-page.tsx @@ -1,8 +1,8 @@ import { Automation, buildGetAutomationQuery } from "@/api/automations"; +import { ActionDetails } from "@/components/automations/action-details"; import { AutomationEnableToggle } from "@/components/automations/automation-enable-toggle"; import { AutomationsActionsMenu } from "@/components/automations/automations-actions-menu"; import { useDeleteAutomationConfirmationDialog } from "@/components/automations/use-delete-automation-confirmation-dialog"; -import { Card } from "@/components/ui/card"; import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog"; import { Typography } from "@/components/ui/typography"; import { useSuspenseQuery } from "@tanstack/react-query"; @@ -98,9 +98,7 @@ const AutomationActions = ({ data }: AutomationActionsProps) => {
    {actions.map((action, i) => (
  • - -
    TODO: {JSON.stringify(action)}
    -     +
    • ))}