[UI v2] chore: rename automation props from data to automation (#16878)

PrefectHQ · Jan 29, 2025 · c7a2ec8 · c7a2ec8
1 parent bd807de
commit c7a2ec8
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 39 deletions.
diff --git a/ui-v2/src/components/automations/automation-details-page.tsx b/ui-v2/src/components/automations/automation-details-page.tsx
@@ -32,16 +32,16 @@ export const AutomationDetailsPage = ({ id }: AutomationsDetailsPageProps) => {
 		<>
 			<div className="flex flex-col gap-6">
 				<div className="flex items-center justify-between">
-					<NavHeader data={data} />
+					<NavHeader automation={data} />
 					<div className="flex items-center gap-2">
-						<AutomationEnableToggle data={data} />
+						<AutomationEnableToggle automation={data} />
 						<AutomationsActionsMenu id={data.id} onDelete={handleDelete} />
 					</div>
 				</div>
 				<div className="flex flex-col gap-4">
-					<AutomationDescription data={data} />
-					<AutomationTrigger data={data} />
-					<AutomationActions data={data} />
+					<AutomationDescription automation={data} />
+					<AutomationTrigger automation={data} />
+					<AutomationActions automation={data} />
 				</div>
 			</div>
 			<DeleteConfirmationDialog {...dialogState} />
@@ -50,9 +50,9 @@ export const AutomationDetailsPage = ({ id }: AutomationsDetailsPageProps) => {
 };
 
 type NavHeaderProps = {
-	data: Automation;
+	automation: Automation;
 };
-const NavHeader = ({ data }: NavHeaderProps) => {
+const NavHeader = ({ automation }: NavHeaderProps) => {
 	return (
 		<Breadcrumb>
 			<BreadcrumbList>
@@ -63,7 +63,7 @@ const NavHeader = ({ data }: NavHeaderProps) => {
 				</BreadcrumbItem>
 				<BreadcrumbSeparator />
 				<BreadcrumbItem className="text-xl font-semibold">
-					<BreadcrumbPage>{data.name}</BreadcrumbPage>
+					<BreadcrumbPage>{automation.name}</BreadcrumbPage>
 				</BreadcrumbItem>
 			</BreadcrumbList>
 		</Breadcrumb>

diff --git a/ui-v2/src/components/automations/automation-details.tsx b/ui-v2/src/components/automations/automation-details.tsx
@@ -7,24 +7,26 @@ import { Typography } from "@/components/ui/typography";
 import { pluralize } from "@/utils";
 
 type AutomationDetailsProps = {
-	data: Automation;
+	automation: Automation;
 };
 
-export const AutomationDescription = ({ data }: AutomationDetailsProps) => {
+export const AutomationDescription = ({
+	automation,
+}: AutomationDetailsProps) => {
 	return (
 		<div className="flex flex-col gap-1">
 			<Typography className="text-muted-foreground" variant="bodySmall">
 				Description
 			</Typography>
 			<Typography className="text-muted-foreground">
-				{data.description || "None"}
+				{automation.description || "None"}
 			</Typography>
 		</div>
 	);
 };
 
-export const AutomationTrigger = ({ data }: AutomationDetailsProps) => {
-	const { trigger } = data;
+export const AutomationTrigger = ({ automation }: AutomationDetailsProps) => {
+	const { trigger } = automation;
 	return (
 		<div className="flex flex-col gap-1">
 			<Typography>Trigger</Typography>
@@ -35,8 +37,9 @@ export const AutomationTrigger = ({ data }: AutomationDetailsProps) => {
 	);
 };
 
-export const AutomationActions = ({ data }: AutomationDetailsProps) => {
-	const { data: resources, loading } = useGetAutomationActionResources(data);
+export const AutomationActions = ({ automation }: AutomationDetailsProps) => {
+	const { data: resources, loading } =
+		useGetAutomationActionResources(automation);
 
 	const {
 		automationsMap,
@@ -48,15 +51,15 @@ export const AutomationActions = ({ data }: AutomationDetailsProps) => {
 
 	return (
 		<div className="flex flex-col gap-1">
-			<Typography>{pluralize(data.actions.length, "Action")}</Typography>
+			<Typography>{pluralize(automation.actions.length, "Action")}</Typography>
 			<ul className="flex flex-col gap-2">
 				{loading
-					? Array.from({ length: data.actions.length }, (_, i) => (
+					? Array.from({ length: automation.actions.length }, (_, i) => (
 							<Card className="p-4" key={i}>
 								<Skeleton className="p-2 h-2 w-full" />
 							</Card>
 						))
-					: data.actions.map((action, i) => (
+					: automation.actions.map((action, i) => (
 							<li key={i}>
 								<ActionDetails
 									action={action}

diff --git a/.../src/components/automations/automation-enable-toggle/automation-enable-toggle.stories.tsx b/.../src/components/automations/automation-enable-toggle/automation-enable-toggle.stories.tsx
@@ -9,7 +9,7 @@ const meta = {
 	title: "Components/Automations/AutomationEnableToggle",
 	component: AutomationEnableToggle,
 	decorators: [reactQueryDecorator, toastDecorator],
-	args: { data: MOCK_DATA },
+	args: { automation: MOCK_DATA },
 } satisfies Meta<typeof AutomationEnableToggle>;
 
 export default meta;

diff --git a/ui-v2/src/components/automations/automation-enable-toggle/automation-enable-toggle.test.tsx b/ui-v2/src/components/automations/automation-enable-toggle/automation-enable-toggle.test.tsx
@@ -14,7 +14,7 @@ test("AutomationEnableToggle can toggle switch", async () => {
 	render(
 		<>
 			<Toaster />
-			<AutomationEnableToggle data={MOCK_DATA} />
+			<AutomationEnableToggle automation={MOCK_DATA} />
 		</>,
 		{ wrapper: createWrapper() },
 	);

diff --git a/ui-v2/src/components/automations/automation-enable-toggle/automation-enable-toggle.tsx b/ui-v2/src/components/automations/automation-enable-toggle/automation-enable-toggle.tsx
@@ -3,10 +3,10 @@ import { Switch } from "@/components/ui/switch";
 import { useToast } from "@/hooks/use-toast";
 
 type AutomationEnableToggleProps = {
-	data: Automation;
+	automation: Automation;
 };
 export const AutomationEnableToggle = ({
-	data,
+	automation,
 }: AutomationEnableToggleProps) => {
 	const { toast } = useToast();
 
@@ -36,8 +36,8 @@ export const AutomationEnableToggle = ({
 	return (
 		<Switch
 			aria-label="toggle automation"
-			checked={data.enabled}
-			onCheckedChange={(checked) => handleCheckedChange(checked, data.id)}
+			checked={automation.enabled}
+			onCheckedChange={(checked) => handleCheckedChange(checked, automation.id)}
 		/>
 	);
 };
diff --git a/ui-v2/src/components/automations/automations-page.tsx b/ui-v2/src/components/automations/automations-page.tsx
@@ -45,7 +45,7 @@ export const AutomationsPage = () => {
 									aria-label={`automation item ${automation.name}`}
 								>
 									<AutomationCardDetails
-										data={automation}
+										automation={automation}
 										onDelete={() => handleDelete(automation)}
 									/>
 								</li>
@@ -60,46 +60,48 @@ export const AutomationsPage = () => {
 };
 
 type AutomationCardDetailsProps = {
-	data: Automation;
+	automation: Automation;
 	onDelete: () => void;
 };
 const AutomationCardDetails = ({
-	data,
+	automation,
 	onDelete,
 }: AutomationCardDetailsProps) => {
 	return (
 		<Card className="p-4 pt-5 flex flex-col gap-6">
 			<div className="flex items-center justify-between">
-				<NavHeader data={data} />
+				<NavHeader automation={automation} />
 				<div className="flex items-center gap-2">
-					<AutomationEnableToggle data={data} />
-					<AutomationsActionsMenu id={data.id} onDelete={onDelete} />
+					<AutomationEnableToggle automation={automation} />
+					<AutomationsActionsMenu id={automation.id} onDelete={onDelete} />
 				</div>
 			</div>
 			<div className="flex flex-col gap-4">
-				{data.description && <AutomationDescription data={data} />}
-				<AutomationTrigger data={data} />
-				<AutomationActions data={data} />
+				{automation.description && (
+					<AutomationDescription automation={automation} />
+				)}
+				<AutomationTrigger automation={automation} />
+				<AutomationActions automation={automation} />
 			</div>
 		</Card>
 	);
 };
 
 type NavHeaderProps = {
-	data: Automation;
+	automation: Automation;
 };
 
-const NavHeader = ({ data }: NavHeaderProps) => {
+const NavHeader = ({ automation }: NavHeaderProps) => {
 	return (
 		<Breadcrumb>
 			<BreadcrumbList>
 				<BreadcrumbItem className="text-xl">
 					<BreadcrumbLink
 						to="/automations/automation/$id"
-						params={{ id: data.id }}
+						params={{ id: automation.id }}
 						className="text-lg"
 					>
-						{data.name}
+						{automation.name}
 					</BreadcrumbLink>
 				</BreadcrumbItem>
 			</BreadcrumbList>

diff --git a/ui-v2/tests/utils/handlers.ts b/ui-v2/tests/utils/handlers.ts
@@ -21,7 +21,7 @@ const automationsHandlers = [
 	}),
 ];
 
-const blocksHandelrs = [
+const blocksHandlers = [
 	http.post(buildApiUrl("/blocks/filter"), () => {
 		return HttpResponse.json([]);
 	}),
@@ -126,7 +126,7 @@ const workeQueuesHandlers = [
 
 export const handlers = [
 	...automationsHandlers,
-	...blocksHandelrs,
+	...blocksHandlers,
 	...deploymentsHandlers,
 	...flowHandlers,
 	...flowRunHandlers,