[UI v2] feat: Starts page layout for concurrency page

ui-v2/src/components/concurrency/concurrency-constants.ts

@@ -0,0 +1,5 @@
+export const TAB_OPTIONS = {
+	Global: "Global",
+	"Task Run": "Task Run",
+} as const;
+export type TabOptions = keyof typeof TAB_OPTIONS;

ui-v2/src/components/concurrency/concurrency-page.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+
+import { Typography } from "@/components//ui/typography";
+
+import { TAB_OPTIONS, TabOptions } from "./concurrency-constants";
+import { ConcurrencyTabs } from "./concurrency-tabs";
+import { GlobalConcurrencyView } from "./global-concurrency-view";
+import { TaskRunConcurrencyView } from "./task-run-concurrenct-view";
+
+export const ConcurrencyPage = (): JSX.Element => {
+	// TODO: Use URL query instead
+	const [tab, setTab] = useState<TabOptions>(TAB_OPTIONS.Global);
+
+	return (
+		<div className="flex flex-col gap-4">
+			<Typography variant="h2">Concurrency</Typography>
+			<div className="flex flex-col gap-6">
+				<ConcurrencyTabs
+					value={tab}
+					onValueChange={setTab}
+					globalView={<GlobalConcurrencyView />}
+					taskRunView={<TaskRunConcurrencyView />}
+				/>
+			</div>
+		</div>
+	);
+};

ui-v2/src/components/concurrency/concurrency-tabs.tsx

@@ -0,0 +1,34 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TAB_OPTIONS, TabOptions } from "./concurrency-constants";
+
+type Props = {
+	globalView: React.ReactNode;
+	onValueChange: (value: TabOptions) => void;
+	taskRunView: React.ReactNode;
+	value: TabOptions;
+};
+
+// TODO: Move Tabs for navigation to a generic styled component
+
+export const ConcurrencyTabs = ({
+	globalView,
+	onValueChange,
+	taskRunView,
+	value,
+}: Props): JSX.Element => {
+	return (
+		<Tabs
+			defaultValue="Global"
+			className="w-[400px]"
+			value={value}
+			onValueChange={(value) => onValueChange(value as TabOptions)}
+		>
+			<TabsList className="grid w-full grid-cols-2">
+				<TabsTrigger value="Global">{TAB_OPTIONS.Global}</TabsTrigger>
+				<TabsTrigger value="Task Run">{TAB_OPTIONS["Task Run"]}</TabsTrigger>
+			</TabsList>
+			<TabsContent value={TAB_OPTIONS.Global}>{globalView}</TabsContent>
+			<TabsContent value={TAB_OPTIONS["Task Run"]}>{taskRunView}</TabsContent>
+		</Tabs>
+	);
+};

ui-v2/src/components/concurrency/global-concurrency-limit-empty-state.test.tsx → ui-v2/src/components/concurrency/global-concurrency-view/global-concurrency-limit-empty-state.test.tsx

@@ -9,7 +9,7 @@ describe("GlobalConcurrencyLimitEmptyState", () => {
 
 		const mockFn = vi.fn();
 
-		render(<GlobalConcurrencyLimitEmptyState onClick={mockFn} />);
+		render(<GlobalConcurrencyLimitEmptyState onAdd={mockFn} />);
 		await user.click(
 			screen.getByRole("button", { name: /Add Concurrency Limit/i }),
 		);

ui-v2/src/components/concurrency/global-concurrency-limit-empty-state.tsx → ui-v2/src/components/concurrency/global-concurrency-view/global-concurrency-limit-empty-state.tsx

@@ -10,9 +10,9 @@ import {
 import { Icon } from "@/components/ui/icons";
 
 type Props = {
-	onClick: () => void;
+	onAdd: () => void;
 };
-export const GlobalConcurrencyLimitEmptyState = ({ onClick }: Props) => (
+export const GlobalConcurrencyLimitEmptyState = ({ onAdd }: Props) => (
 	<EmptyState>
 		<EmptyStateIcon id="AlignVerticalJustifyStart" />
 		<EmptyStateTitle>Add a concurrency limit</EmptyStateTitle>
@@ -21,7 +21,7 @@ export const GlobalConcurrencyLimitEmptyState = ({ onClick }: Props) => (
 			operation where you want to control concurrency.
 		</EmptyStateDescription>
 		<EmptyStateActions>
-			<Button onClick={onClick}>
+			<Button onClick={onAdd}>
 				Add Concurrency Limit <Icon id="Plus" className="h-4 w-4 ml-2" />
 			</Button>
 			<DocsLink id="global-concurrency-guide" />

ui-v2/src/components/concurrency/global-concurrency-view/global-concurrency-limits-header.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icons";
+import { Typography } from "@/components/ui/typography";
+
+type Props = {
+	onAdd: () => void;
+};
+
+export const GlobalConcurrencyLimitsHeader = ({ onAdd }: Props) => {
+	return (
+		<div className="flex flex-row items-center gap-2">
+			<Typography variant="h4">Global Concurrency Limits</Typography>
+			<Button onClick={onAdd} size="icon">
+				<Icon id="Plus" />
+			</Button>
+		</div>
+	);
+};

ui-v2/src/components/concurrency/global-concurrency-view/index.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { GlobalConcurrencyLimitsHeader } from "./global-concurrency-limits-header";
+
+export const GlobalConcurrencyView = () => {
+	const [showAddDialog, setShowAddDialog] = useState(false);
+
+	const openAddDialog = () => setShowAddDialog(true);
+	const closeAddDialog = () => setShowAddDialog(false);
+
+	return (
+		<>
+			<div className="flex flex-col gap-2">
+				<GlobalConcurrencyLimitsHeader onAdd={openAddDialog} />
+			</div>
+			{showAddDialog && <div onClick={closeAddDialog}>TODO: DIALOG</div>}
+		</>
+	);
+};

ui-v2/src/components/concurrency/task-run-concurrenct-view/index.tsx

@@ -0,0 +1,3 @@
+export const TaskRunConcurrencyView = () => {
+	return <div>🚧🚧 Pardon our dust! 🚧🚧</div>;
+};

ui-v2/src/components/concurrency/task-run-concurrency-limit-empty-state.test.tsx → ui-v2/src/components/concurrency/task-run-concurrenct-view/task-run-concurrency-limit-empty-state.test.tsx

@@ -9,7 +9,7 @@ describe("TaskRunConcurrencyLimitEmptyState", () => {
 
 		const mockFn = vi.fn();
 
-		render(<TaskRunConcurrencyLimitEmptyState onClick={mockFn} />);
+		render(<TaskRunConcurrencyLimitEmptyState onAdd={mockFn} />);
 		await user.click(
 			screen.getByRole("button", { name: /Add Concurrency Limit/i }),
 		);

ui-v2/src/components/concurrency/task-run-concurrency-limit-empty-state.tsx → ui-v2/src/components/concurrency/task-run-concurrenct-view/task-run-concurrency-limit-empty-state.tsx

@@ -10,9 +10,9 @@ import {
 import { Icon } from "@/components/ui/icons";
 
 type Props = {
-	onClick: () => void;
+	onAdd: () => void;
 };
-export const TaskRunConcurrencyLimitEmptyState = ({ onClick }: Props) => (
+export const TaskRunConcurrencyLimitEmptyState = ({ onAdd }: Props) => (
 	<EmptyState>
 		<EmptyStateIcon id="CircleArrowOutUpRight" />
 		<EmptyStateTitle>
@@ -23,7 +23,7 @@ export const TaskRunConcurrencyLimitEmptyState = ({ onClick }: Props) => (
 			simultaneously with a given tag.
 		</EmptyStateDescription>
 		<EmptyStateActions>
-			<Button onClick={onClick}>
+			<Button onClick={onAdd}>
 				Add Concurrency Limit <Icon id="Plus" className="h-4 w-4 ml-2" />
 			</Button>
 			<DocsLink id="task-concurrency-guide" />

ui-v2/src/components/layouts/MainLayout.tsx

@@ -1,12 +1,12 @@
-import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/ui/app-sidebar";
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "../ui/toaster";
 
 export function MainLayout({ children }: { children: React.ReactNode }) {
 	return (
 		<SidebarProvider>
 			<AppSidebar />
-			<main className="flex-1 overflow-auto">{children}</main>
+			<main className="flex-1 overflow-auto p-4">{children}</main>
 			<Toaster />
 		</SidebarProvider>
 	);

ui-v2/src/components/variables/layout.tsx

@@ -14,7 +14,7 @@ export const VariablesLayout = ({
 	children: React.ReactNode;
 }) => {
 	return (
-		<div className="flex flex-col gap-4 p-4">
+		<div className="flex flex-col gap-4">
 			<div className="flex items-center gap-2">
 				<Breadcrumb>
 					<BreadcrumbList>

ui-v2/src/routes/concurrency-limits.tsx

@@ -1,9 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
 
+import { ConcurrencyPage } from "@/components/concurrency/concurrency-page";
+
 export const Route = createFileRoute("/concurrency-limits")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return "🚧🚧 Pardon our dust! 🚧🚧";
+	return <ConcurrencyPage />;
 }