[UI v2] chore: Consistent and descriptive prop name (#16580)

PrefectHQ · Jan 3, 2025 · 488e7b4 · 488e7b4
1 parent 8626bf6
commit 488e7b4
Show file tree

Hide file tree

Showing 28 changed files with 83 additions and 57 deletions.
diff --git a/ui-v2/src/components/concurrency/concurrency-limits-tabs.tsx b/ui-v2/src/components/concurrency/concurrency-limits-tabs.tsx
@@ -24,7 +24,7 @@ const TAB_OPTIONS: Record<TabOptions, TabOptionValues> = {
 	},
 } as const;
 
-type Props = {
+type ConcurrencyLimitsTabsProps = {
 	globalView: React.ReactNode;
 	taskRunView: React.ReactNode;
 };
@@ -34,7 +34,7 @@ type Props = {
 export const ConcurrencyLimitsTabs = ({
 	globalView,
 	taskRunView,
-}: Props): JSX.Element => {
+}: ConcurrencyLimitsTabsProps): JSX.Element => {
 	const { tab } = routeApi.useSearch();
 	const navigate = routeApi.useNavigate();
 

diff --git a/...currency-limits-create-or-edit-dialog/global-concurrency-limits-create-or-edit-dialog.tsx b/...currency-limits-create-or-edit-dialog/global-concurrency-limits-create-or-edit-dialog.tsx
@@ -21,7 +21,7 @@ import type { GlobalConcurrencyLimit } from "@/hooks/global-concurrency-limits";
 
 import { useCreateOrEditGlobalConcurrencyLimitForm } from "./use-create-or-edit-global-concurrency-limit-form";
 
-type Props = {
+type GlobalConcurrencyLimitsCreateOrEditDialogProps = {
 	limitToUpdate?: GlobalConcurrencyLimit;
 	onOpenChange: (open: boolean) => void;
 	onSubmit: () => void;
@@ -31,7 +31,7 @@ export const GlobalConcurrencyLimitsCreateOrEditDialog = ({
 	limitToUpdate,
 	onOpenChange,
 	onSubmit,
-}: Props) => {
+}: GlobalConcurrencyLimitsCreateOrEditDialogProps) => {
 	const { form, isLoading, saveOrUpdate } =
 		useCreateOrEditGlobalConcurrencyLimitForm({
 			limitToUpdate,

diff --git a/...ncurrency/global-concurrency-limits/global-concurrency-limits-data-table/actions-cell.tsx b/...ncurrency/global-concurrency-limits/global-concurrency-limits-data-table/actions-cell.tsx
@@ -11,12 +11,16 @@ import type { GlobalConcurrencyLimit } from "@/hooks/global-concurrency-limits";
 import { useToast } from "@/hooks/use-toast";
 import type { CellContext } from "@tanstack/react-table";
 
-type Props = CellContext<GlobalConcurrencyLimit, unknown> & {
+type ActionsCellProps = CellContext<GlobalConcurrencyLimit, unknown> & {
 	onEditRow: (row: GlobalConcurrencyLimit) => void;
 	onDeleteRow: (row: GlobalConcurrencyLimit) => void;
 };
 
-export const ActionsCell = ({ onEditRow, onDeleteRow, ...props }: Props) => {
+export const ActionsCell = ({
+	onEditRow,
+	onDeleteRow,
+	...props
+}: ActionsCellProps) => {
 	const { toast } = useToast();
 
 	const handleCopyId = (id: string) => {

diff --git a/...ency-limits/global-concurrency-limits-data-table/global-concurrency-limits-data-table.tsx b/...ency-limits/global-concurrency-limits-data-table/global-concurrency-limits-data-table.tsx
@@ -54,7 +54,7 @@ const createColumns = ({
 	}),
 ];
 
-type Props = {
+type GlobalConcurrencyLimitsDataTableProps = {
 	data: Array<GlobalConcurrencyLimit>;
 	onEditRow: (row: GlobalConcurrencyLimit) => void;
 	onDeleteRow: (row: GlobalConcurrencyLimit) => void;
@@ -64,7 +64,7 @@ export const GlobalConcurrencyLimitsDataTable = ({
 	data,
 	onEditRow,
 	onDeleteRow,
-}: Props) => {
+}: GlobalConcurrencyLimitsDataTableProps) => {
 	const navigate = routeApi.useNavigate();
 	const { search } = routeApi.useSearch();
 	const deferredSearch = useDeferredValue(search ?? "");

diff --git a/...imits/global-concurrency-limits-delete-dialog/global-concurrency-limits-delete-dialog.tsx b/...imits/global-concurrency-limits-delete-dialog/global-concurrency-limits-delete-dialog.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/hooks/global-concurrency-limits";
 import { useToast } from "@/hooks/use-toast";
 
-type Props = {
+type GlobalConcurrencyLimitsDeleteDialogProps = {
 	limit: GlobalConcurrencyLimit;
 	onOpenChange: (open: boolean) => void;
 	onDelete: () => void;
@@ -24,7 +24,7 @@ export const GlobalConcurrencyLimitsDeleteDialog = ({
 	limit,
 	onOpenChange,
 	onDelete,
-}: Props) => {
+}: GlobalConcurrencyLimitsDeleteDialogProps) => {
 	const { toast } = useToast();
 	const { deleteGlobalConcurrencyLimit, isPending } =
 		useDeleteGlobalConcurrencyLimit();

diff --git a/...cy-limits/global-concurrency-limits-empty-state/global-concurrency-limits-empty-state.tsx b/...cy-limits/global-concurrency-limits-empty-state/global-concurrency-limits-empty-state.tsx
@@ -9,10 +9,12 @@ import {
 } from "@/components/ui/empty-state";
 import { Icon } from "@/components/ui/icons";
 
-type Props = {
+type GlobalConcurrencyLimitsEmptyStateProps = {
 	onAdd: () => void;
 };
-export const GlobalConcurrencyLimitsEmptyState = ({ onAdd }: Props) => (
+export const GlobalConcurrencyLimitsEmptyState = ({
+	onAdd,
+}: GlobalConcurrencyLimitsEmptyStateProps) => (
 	<EmptyState>
 		<EmptyStateIcon id="AlignVerticalJustifyStart" />
 		<EmptyStateTitle>Add a concurrency limit</EmptyStateTitle>

diff --git a/...-concurrency-limits/global-concurrency-limits-header/global-concurrency-limits-header.tsx b/...-concurrency-limits/global-concurrency-limits-header/global-concurrency-limits-header.tsx
@@ -2,11 +2,13 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icons";
 import { Typography } from "@/components/ui/typography";
 
-type Props = {
+type GlobalConcurrencyLimitsHeaderProps = {
 	onAdd: () => void;
 };
 
-export const GlobalConcurrencyLimitsHeader = ({ onAdd }: Props) => {
+export const GlobalConcurrencyLimitsHeader = ({
+	onAdd,
+}: GlobalConcurrencyLimitsHeaderProps) => {
 	return (
 		<div className="flex gap-2 items-center">
 			<Typography className="font-semibold">

diff --git a/...sk-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.tsx b/...sk-run-concurrency-limit-active-task-runs/task-run-concurrency-limit-active-task-runs.tsx
@@ -1,15 +1,17 @@
 import type { components } from "@/api/prefect";
 import { RunCard } from "@/components/ui/run-card";
 
-type Props = {
+type TaskRunConcurrencyLimitActiveTaskRunsProps = {
 	data: Array<{
 		taskRun: components["schemas"]["TaskRun"];
 		flowRun?: components["schemas"]["FlowRun"] | null;
 		flow?: components["schemas"]["Flow"] | null;
 	}>;
 };
 
-export const TaskRunConcurrencyLimitActiveTaskRuns = ({ data }: Props) => {
+export const TaskRunConcurrencyLimitActiveTaskRuns = ({
+	data,
+}: TaskRunConcurrencyLimitActiveTaskRunsProps) => {
 	return (
 		<ul className="flex flex-col gap-2">
 			{data.map((d) => (

diff --git a/...currency-limits/task-run-concurrency-limit-details/task-run-concurrency-limit-details.tsx b/...currency-limits/task-run-concurrency-limit-details/task-run-concurrency-limit-details.tsx
@@ -4,11 +4,13 @@ import type { TaskRunConcurrencyLimit } from "@/hooks/task-run-concurrency-limit
 import { format, parseISO } from "date-fns";
 import React from "react";
 
-type Props = {
+type TaskRunConcurrencyLimitDetailsProps = {
 	data: TaskRunConcurrencyLimit;
 };
 
-export const TaskRunConcurrencyLimitDetails = ({ data }: Props) => {
+export const TaskRunConcurrencyLimitDetails = ({
+	data,
+}: TaskRunConcurrencyLimitDetailsProps) => {
 	return (
 		<div className="flex flex-col gap-4">
 			<dt className="text-muted-foreground">Tag</dt>

diff --git a/.../concurrency/task-run-concurrency-limits/task-run-concurrency-limit-header/nav-header.tsx b/.../concurrency/task-run-concurrency-limits/task-run-concurrency-limit-header/nav-header.tsx
@@ -7,11 +7,11 @@ import {
 	BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 
-type Props = {
+type NavHeaderProps = {
 	tag: string;
 };
 
-export const NavHeader = ({ tag }: Props) => {
+export const NavHeader = ({ tag }: NavHeaderProps) => {
 	return (
 		<div className="flex items-center gap-2">
 			<Breadcrumb>

diff --git a/...oncurrency-limits/task-run-concurrency-limit-header/task-run-concurrency-limit-header.tsx b/...oncurrency-limits/task-run-concurrency-limit-header/task-run-concurrency-limit-header.tsx
@@ -3,7 +3,7 @@ import type { TaskRunConcurrencyLimit } from "@/hooks/task-run-concurrency-limit
 
 import { NavHeader } from "./nav-header";
 
-type Props = {
+type TaskRunConcurrencyLimitHeaderProps = {
 	data: TaskRunConcurrencyLimit;
 	onDelete: () => void;
 	onReset: () => void;
@@ -13,7 +13,7 @@ export const TaskRunConcurrencyLimitHeader = ({
 	data,
 	onDelete,
 	onReset,
-}: Props) => {
+}: TaskRunConcurrencyLimitHeaderProps) => {
 	return (
 		<div className="flex items-center justify-between">
 			<NavHeader tag={data.tag} />

diff --git a/...ponents/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-page/index.tsx b/...ponents/concurrency/task-run-concurrency-limits/task-run-concurrency-limit-page/index.tsx
@@ -14,11 +14,13 @@ import {
 } from "./task-run-concurrency-limit-dialog";
 import { TaskRunConcurrencyLimitTabNavigation } from "./task-run-concurrency-limit-tab-navigation";
 
-type Props = {
+type TaskRunConcurrencyLimitPageProps = {
 	id: string;
 };
 
-export const TaskRunConcurrencyLimitPage = ({ id }: Props) => {
+export const TaskRunConcurrencyLimitPage = ({
+	id,
+}: TaskRunConcurrencyLimitPageProps) => {
 	const [openDialog, setOpenDialog] = useState<Dialogs>(null);
 	const { data } = useSuspenseQuery(
 		buildConcurrenyLimitDetailsActiveRunsQuery(id),

diff --git a/...-concurrency-limits/task-run-concurrency-limit-page/task-run-concurrency-limit-dialog.tsx b/...-concurrency-limits/task-run-concurrency-limit-page/task-run-concurrency-limit-dialog.tsx
@@ -7,7 +7,7 @@ export type Dialogs = null | "delete" | "reset";
 
 const routeApi = getRouteApi("/concurrency-limits/");
 
-type Props = {
+type TaskRunConcurrencyLimitDialogProps = {
 	data: TaskRunConcurrencyLimit;
 	openDialog: Dialogs;
 	onOpenChange: (open: boolean) => void;
@@ -19,7 +19,7 @@ export const TaskRunConcurrencyLimitDialog = ({
 	openDialog,
 	onCloseDialog,
 	onOpenChange,
-}: Props) => {
+}: TaskRunConcurrencyLimitDialogProps) => {
 	const navigate = routeApi.useNavigate();
 
 	const handleDelete = () => {

diff --git a/...ency-limits/task-run-concurrency-limit-page/task-run-concurrency-limit-tab-navigation.tsx b/...ency-limits/task-run-concurrency-limit-page/task-run-concurrency-limit-tab-navigation.tsx
@@ -19,13 +19,15 @@ const TAB_OPTIONS: Record<TabOptions, TabOptionValues> = {
 	},
 } as const;
 
-type Props = {
+type TaskRunConcurrencyLimitTabNavigationProps = {
 	/** Should add ActiveTaskRun component */
 	children: React.ReactNode;
 };
 
 // TODO: Move Tabs for navigation to a generic styled component
-export const TaskRunConcurrencyLimitTabNavigation = ({ children }: Props) => {
+export const TaskRunConcurrencyLimitTabNavigation = ({
+	children,
+}: TaskRunConcurrencyLimitTabNavigationProps) => {
 	const { tab } = routeApi.useSearch();
 	const navigate = routeApi.useNavigate();
 

diff --git a/...its/task-run-concurrency-limits-actions-menu/task-run-concurrency-limits-actions-menu.tsx b/...its/task-run-concurrency-limits-actions-menu/task-run-concurrency-limits-actions-menu.tsx
@@ -9,7 +9,7 @@ import {
 import { Icon } from "@/components/ui/icons";
 import { useToast } from "@/hooks/use-toast";
 
-type Props = {
+type TaskRunConcurrencyLimitsActionsMenuProps = {
 	id: string;
 	onDelete: () => void;
 	onReset: () => void;
@@ -19,7 +19,7 @@ export const TaskRunConcurrencyLimitsActionsMenu = ({
 	id,
 	onDelete,
 	onReset,
-}: Props) => {
+}: TaskRunConcurrencyLimitsActionsMenuProps) => {
 	const { toast } = useToast();
 
 	const handleCopyId = (id: string) => {

diff --git a/...s/task-run-concurrency-limits-create-dialog/task-run-concurrency-limits-create-dialog.tsx b/...s/task-run-concurrency-limits-create-dialog/task-run-concurrency-limits-create-dialog.tsx
@@ -37,15 +37,15 @@ const DEFAULT_VALUES = {
 	concurrency_limit: 0,
 } as const;
 
-type Props = {
+type TaskRunConcurrencyLimitsCreateDialogProps = {
 	onOpenChange: (open: boolean) => void;
 	onSubmit: () => void;
 };
 
 export const TaskRunConcurrencyLimitsCreateDialog = ({
 	onOpenChange,
 	onSubmit,
-}: Props) => {
+}: TaskRunConcurrencyLimitsCreateDialogProps) => {
 	const { toast } = useToast();
 
 	const { createTaskRunConcurrencyLimit, isPending } =

diff --git a/...k-run-concurrency-limits/task-run-concurrency-limits-data-table/active-task-runs-cell.tsx b/...k-run-concurrency-limits/task-run-concurrency-limits-data-table/active-task-runs-cell.tsx
@@ -1,9 +1,12 @@
 import type { TaskRunConcurrencyLimit } from "@/hooks/task-run-concurrency-limits";
 import type { CellContext } from "@tanstack/react-table";
 
-type Props = CellContext<TaskRunConcurrencyLimit, Array<string>>;
+type ActiveTaskRunCellsProps = CellContext<
+	TaskRunConcurrencyLimit,
+	Array<string>
+>;
 
-export const ActiveTaskRunCells = (props: Props) => {
+export const ActiveTaskRunCells = (props: ActiveTaskRunCellsProps) => {
 	const activeTaskRuns = props.getValue();
 	const numActiveTaskRuns = activeTaskRuns.length;
 	if (numActiveTaskRuns === 0) {

diff --git a/...ncurrency/task-run-concurrency-limits/task-run-concurrency-limits-data-table/tag-cell.tsx b/...ncurrency/task-run-concurrency-limits/task-run-concurrency-limits-data-table/tag-cell.tsx
@@ -2,9 +2,9 @@ import type { TaskRunConcurrencyLimit } from "@/hooks/task-run-concurrency-limit
 import { Link } from "@tanstack/react-router";
 import type { CellContext } from "@tanstack/react-table";
 
-type Props = CellContext<TaskRunConcurrencyLimit, string>;
+type TagCellProps = CellContext<TaskRunConcurrencyLimit, string>;
 
-export const TagCell = (props: Props) => {
+export const TagCell = (props: TagCellProps) => {
 	const tag = props.getValue();
 	const id = props.row.original.id;
 	return (

diff --git a/...-limits/task-run-concurrency-limits-data-table/task-run-concurrency-limits-data-table.tsx b/...-limits/task-run-concurrency-limits-data-table/task-run-concurrency-limits-data-table.tsx
@@ -52,7 +52,7 @@ const createColumns = ({
 	}),
 ];
 
-type Props = {
+type TaskRunConcurrencyLimitsDataTableProps = {
 	data: Array<TaskRunConcurrencyLimit>;
 	onDeleteRow: (row: TaskRunConcurrencyLimit) => void;
 	onResetRow: (row: TaskRunConcurrencyLimit) => void;
@@ -62,7 +62,7 @@ export const TaskRunConcurrencyLimitsDataTable = ({
 	data,
 	onDeleteRow,
 	onResetRow,
-}: Props) => {
+}: TaskRunConcurrencyLimitsDataTableProps) => {
 	const navigate = routeApi.useNavigate();
 	const { search } = routeApi.useSearch();
 	const deferredSearch = useDeferredValue(search ?? "");

diff --git a/...s/task-run-concurrency-limits-delete-dialog/task-run-concurrency-limits-delete-dialog.tsx b/...s/task-run-concurrency-limits-delete-dialog/task-run-concurrency-limits-delete-dialog.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/hooks/task-run-concurrency-limits";
 import { useToast } from "@/hooks/use-toast";
 
-type Props = {
+type TaskRunConcurrencyLimitsDeleteDialogProps = {
 	data: TaskRunConcurrencyLimit;
 	onOpenChange: (open: boolean) => void;
 	onDelete: () => void;
@@ -24,7 +24,7 @@ export const TaskRunConcurrencyLimitsDeleteDialog = ({
 	data,
 	onOpenChange,
 	onDelete,
-}: Props) => {
+}: TaskRunConcurrencyLimitsDeleteDialogProps) => {
 	const { toast } = useToast();
 	const { deleteTaskRunConcurrencyLimit, isPending } =
 		useDeleteTaskRunConcurrencyLimit();

diff --git a/...imits/task-run-concurrency-limits-empty-state/task-run-concurrency-limits-empty-state.tsx b/...imits/task-run-concurrency-limits-empty-state/task-run-concurrency-limits-empty-state.tsx
@@ -9,10 +9,12 @@ import {
 } from "@/components/ui/empty-state";
 import { Icon } from "@/components/ui/icons";
 
-type Props = {
+type TaskRunConcurrencyLimitsEmptyStateProps = {
 	onAdd: () => void;
 };
-export const TaskRunConcurrencyLimitsEmptyState = ({ onAdd }: Props) => (
+export const TaskRunConcurrencyLimitsEmptyState = ({
+	onAdd,
+}: TaskRunConcurrencyLimitsEmptyStateProps) => (
 	<EmptyState>
 		<EmptyStateIcon id="CircleArrowOutUpRight" />
 		<EmptyStateTitle>

diff --git a/...currency-limits/task-run-concurrency-limits-header/task-run-concurrency-limits-header.tsx b/...currency-limits/task-run-concurrency-limits-header/task-run-concurrency-limits-header.tsx
@@ -2,11 +2,13 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icons";
 import { Typography } from "@/components/ui/typography";
 
-type Props = {
+type TaskRunConcurrencyLimitsHeaderProps = {
 	onAdd: () => void;
 };
 
-export const TaskRunConcurrencyLimitsHeader = ({ onAdd }: Props) => {
+export const TaskRunConcurrencyLimitsHeader = ({
+	onAdd,
+}: TaskRunConcurrencyLimitsHeaderProps) => {
 	return (
 		<div className="flex gap-2 items-center">
 			<Typography className="font-semibold">

diff --git a/...its/task-run-concurrency-limits-reset-dialog/task-run-concurrency-limits-reset-dialog.tsx b/...its/task-run-concurrency-limits-reset-dialog/task-run-concurrency-limits-reset-dialog.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/hooks/task-run-concurrency-limits";
 import { useToast } from "@/hooks/use-toast";
 
-type Props = {
+type TaskRunConcurrencyLimitsResetDialogProps = {
 	data: TaskRunConcurrencyLimit;
 	onOpenChange: (open: boolean) => void;
 	onReset: () => void;
@@ -24,7 +24,7 @@ export const TaskRunConcurrencyLimitsResetDialog = ({
 	data,
 	onOpenChange,
 	onReset,
-}: Props) => {
+}: TaskRunConcurrencyLimitsResetDialogProps) => {
 	const { toast } = useToast();
 	const { resetTaskRunConcurrencyLimitTag, isPending } =
 		useResetTaskRunConcurrencyLimitTag();