Skip to content

Commit 16e85ce

Browse files
devinvillarosadevinvillarosa
authored
[UI v2] feat: Begins logic for creating UX based on an action type (#16752)
1 parent adf1033 commit 16e85ce

File tree

5 files changed

+197
-8
lines changed

5 files changed

+197
-8
lines changed

‎ui-v2/src/api/deployments/use-list-deployments-with-flows/use-list-deployments-with-flows.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,22 @@ export const useListDeploymentsWithFlows = (
4848
buildPaginateDeploymentsQuery(filter),
4949
);
5050

51-
const deploymentsFlowIds = deploymentsData?.results.map(
52-
(deployment) => deployment.flow_id,
51+
// Creates a set of unique flow ids
52+
const deploymentsFlowIds = new Set(
53+
deploymentsData?.results.map((deployment) => deployment.flow_id),
5354
);
5455

5556
const { data: flowsData, status: flowsStatus } = useQuery(
5657
buildListFlowsQuery(
5758
{
5859
flows: {
5960
operator: "or_",
60-
id: { any_: deploymentsFlowIds },
61+
id: { any_: Array.from(deploymentsFlowIds) },
6162
},
6263
sort: "NAME_DESC",
6364
offset: 0,
6465
},
65-
{ enabled: Boolean(deploymentsFlowIds) },
66+
{ enabled: deploymentsFlowIds.size > 0 },
6667
),
6768
);
6869

‎ui-v2/src/components/automations/action-details/action-details.stories.tsx

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { Automation } from "@/api/automations";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
import { ActionDetails } from "./action-details";
4+
5+
const ACTIONS: Array<Automation["actions"][number]> = [
6+
{ type: "do-nothing" },
7+
{ type: "cancel-flow-run" },
8+
{ type: "suspend-flow-run" },
9+
{ type: "cancel-flow-run" },
10+
{ type: "resume-flow-run" },
11+
{ type: "run-deployment", deployment_id: null, source: "inferred" },
12+
{ type: "run-deployment", deployment_id: "abc", source: "selected" },
13+
{ type: "pause-deployment", deployment_id: null, source: "inferred" },
14+
{ type: "resume-deployment", deployment_id: "abc", source: "selected" },
15+
{ type: "pause-work-queue", work_queue_id: null, source: "inferred" },
16+
{ type: "resume-work-queue", work_queue_id: "abc", source: "selected" },
17+
{ type: "pause-work-pool", work_pool_id: null, source: "inferred" },
18+
{ type: "resume-work-pool", work_pool_id: "abc", source: "selected" },
19+
{ type: "pause-automation", automation_id: null, source: "inferred" },
20+
{ type: "resume-automation", automation_id: "abc", source: "selected" },
21+
{
22+
type: "send-notification",
23+
block_document_id: "abc",
24+
body: "my_body",
25+
subject: "my_subject",
26+
},
27+
{
28+
type: "change-flow-run-state",
29+
state: "CANCELLED",
30+
},
31+
{
32+
type: "change-flow-run-state",
33+
state: "CANCELLING",
34+
},
35+
{
36+
type: "change-flow-run-state",
37+
state: "COMPLETED",
38+
},
39+
{
40+
type: "change-flow-run-state",
41+
state: "CRASHED",
42+
},
43+
{
44+
type: "change-flow-run-state",
45+
state: "FAILED",
46+
},
47+
{
48+
type: "change-flow-run-state",
49+
state: "PAUSED",
50+
},
51+
{
52+
type: "change-flow-run-state",
53+
state: "PENDING",
54+
},
55+
{
56+
type: "change-flow-run-state",
57+
state: "RUNNING",
58+
message: "My message",
59+
name: "My name",
60+
},
61+
{
62+
type: "change-flow-run-state",
63+
state: "SCHEDULED",
64+
},
65+
{
66+
type: "call-webhook",
67+
block_document_id: "abc",
68+
payload: "my_payload",
69+
},
70+
];
71+
72+
const meta = {
73+
title: "Components/Automations/ActionDetails",
74+
component: ActionDetailsStory,
75+
} satisfies Meta<typeof ActionDetails>;
76+
77+
export default meta;
78+
79+
export const Story: StoryObj = {
80+
name: "ActionDetails",
81+
};
82+
83+
function ActionDetailsStory() {
84+
return (
85+
<ul className="flex flex-col gap-4">
86+
{ACTIONS.map((action, i) => (
87+
<li key={i}>
88+
<ActionDetails key={i} action={action} />
89+
</li>
90+
))}
91+
</ul>
92+
);
93+
}

‎ui-v2/src/components/automations/action-details/action-details.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { Automation } from "@/api/automations";
2+
import { Card } from "@/components/ui/card";
3+
import { Typography } from "@/components/ui/typography";
4+
type AutomationAction = Automation["actions"][number];
5+
6+
type ActionDetailsProps = {
7+
action: AutomationAction;
8+
};
9+
export const ActionDetails = ({ action }: ActionDetailsProps) => (
10+
<Card className="p-4 border-r-8">
11+
<ActionDetailsType action={action} />
12+
</Card>
13+
);
14+
15+
export const ActionDetailsType = ({ action }: ActionDetailsProps) => {
16+
switch (action.type) {
17+
// Non-inferrable Actions
18+
case "do-nothing":
19+
case "cancel-flow-run":
20+
case "suspend-flow-run":
21+
case "resume-flow-run":
22+
return <NoninferredAction action={action} />;
23+
// Inferable actions
24+
case "run-deployment":
25+
return action.deployment_id && action.source == "selected" ? (
26+
"TODO"
27+
) : (
28+
<InferredAction action={action} />
29+
);
30+
case "pause-deployment":
31+
case "resume-deployment":
32+
return action.deployment_id && action.source == "selected" ? (
33+
"TODO"
34+
) : (
35+
<InferredAction action={action} />
36+
);
37+
case "pause-work-queue":
38+
case "resume-work-queue":
39+
return action.work_queue_id && action.source == "selected" ? (
40+
"TODO"
41+
) : (
42+
<InferredAction action={action} />
43+
);
44+
case "pause-automation":
45+
case "resume-automation":
46+
return action.automation_id && action.source == "selected" ? (
47+
"TODO"
48+
) : (
49+
<InferredAction action={action} />
50+
);
51+
case "pause-work-pool":
52+
case "resume-work-pool":
53+
return action.work_pool_id && action.source == "selected" ? (
54+
"TODO"
55+
) : (
56+
<InferredAction action={action} />
57+
);
58+
// Other actions
59+
case "send-notification":
60+
return "TODO";
61+
case "change-flow-run-state":
62+
return "TODO";
63+
case "call-webhook":
64+
return "TODO";
65+
}
66+
};
67+
68+
const ACTION_TYPE_TO_STRING: Record<AutomationAction["type"], string> = {
69+
"cancel-flow-run": "Cancel flow run",
70+
"suspend-flow-run": "Suspend flow run",
71+
"resume-flow-run": "Resume a flow run",
72+
"change-flow-run-state": "Change state of a flow run",
73+
"run-deployment": "Run deployment",
74+
"pause-deployment": "Pause deployment",
75+
"resume-deployment": "Resume deployment",
76+
"pause-work-queue": "Pause work queue",
77+
"resume-work-queue": "Resume work queue",
78+
"pause-work-pool": "Pause work queue",
79+
"resume-work-pool": "Resume work queue",
80+
"pause-automation": "Pause automation",
81+
"resume-automation": "Resume automation",
82+
"call-webhook": "Call a custom webhook notification",
83+
"send-notification": "Send a notification",
84+
"do-nothing": "Do nothing",
85+
} as const;
86+
87+
const NoninferredAction = ({ action }: ActionDetailsProps) => (
88+
<Typography variant="bodySmall">
89+
{`${ACTION_TYPE_TO_STRING[action.type]} from the triggering event`}
90+
</Typography>
91+
);
92+
const InferredAction = ({ action }: ActionDetailsProps) => (
93+
<Typography variant="bodySmall">
94+
{`${ACTION_TYPE_TO_STRING[action.type]} inferred from the triggering event`}
95+
</Typography>
96+
);

‎ui-v2/src/components/automations/action-details/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ActionDetails } from "./action-details";

‎ui-v2/src/components/automations/automation-page/automation-page.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Automation, buildGetAutomationQuery } from "@/api/automations";
2+
import { ActionDetails } from "@/components/automations/action-details";
23
import { AutomationEnableToggle } from "@/components/automations/automation-enable-toggle";
34
import { AutomationsActionsMenu } from "@/components/automations/automations-actions-menu";
45
import { useDeleteAutomationConfirmationDialog } from "@/components/automations/use-delete-automation-confirmation-dialog";
5-
import { Card } from "@/components/ui/card";
66
import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
77
import { Typography } from "@/components/ui/typography";
88
import { useSuspenseQuery } from "@tanstack/react-query";
@@ -98,9 +98,7 @@ const AutomationActions = ({ data }: AutomationActionsProps) => {
9898
<ul className="flex flex-col gap-2">
9999
{actions.map((action, i) => (
100100
<li key={i}>
101-
<Card className="p-4 border-r-8">
102-
<div>TODO: {JSON.stringify(action)}</div>
103-
</Card>
101+
<ActionDetails action={action} />
104102
</li>
105103
))}
106104
</ul>

0 commit comments

Comments
 (0)