update storybook

johnstcn · johnstcn · commit ebeb601904ec · 2025-07-24T12:32:04.000+01:00
diff --git a/site/src/pages/TasksPage/TasksPage.stories.tsx b/site/src/pages/TasksPage/TasksPage.stories.tsx
@@ -4,12 +4,14 @@ import { API } from "api/api";
 import { MockUsers } from "pages/UsersPage/storybookData/users";
 import { reactRouterParameters } from "storybook-addon-remix-react-router";
 import {
+	MockAIPromptPresets,
+	MockNewTaskData,
+	MockPresets,
+	MockTasks,
 	MockTemplate,
 	MockTemplateVersionExternalAuthGithub,
 	MockTemplateVersionExternalAuthGithubAuthenticated,
 	MockUserOwner,
-	MockWorkspace,
-	MockWorkspaceAppStatus,
 	mockApiError,
 } from "testHelpers/entities";
 import {
@@ -31,6 +33,7 @@ const meta: Meta<typeof TasksPage> = {
 	},
 	beforeEach: () => {
 		spyOn(API, "getTemplateVersionExternalAuth").mockResolvedValue([]);
+		spyOn(API, "getTemplateVersionPresets").mockResolvedValue(null);
 		spyOn(API, "getUsers").mockResolvedValue({
 			users: MockUsers,
 			count: MockUsers.length,
@@ -53,7 +56,7 @@ type Story = StoryObj<typeof TasksPage>;
 export const LoadingAITemplates: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchAITemplates").mockImplementation(
-			() => new Promise((res) => 1000 * 60 * 60),
+			() => new Promise(() => 1000 * 60 * 60),
 		);
 	},
 };
@@ -79,7 +82,7 @@ export const LoadingTasks: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
 		spyOn(data, "fetchTasks").mockImplementation(
-			() => new Promise((res) => 1000 * 60 * 60),
+			() => new Promise(() => 1000 * 60 * 60),
 		);
 	},
 	play: async ({ canvasElement, step }) => {
@@ -119,15 +122,57 @@ export const LoadedTasks: Story = {
 	},
 };
 
-const newTaskData = {
-	prompt: "Create a new task",
-	workspace: {
-		...MockWorkspace,
-		id: "workspace-4",
-		latest_app_status: {
-			...MockWorkspaceAppStatus,
-			message: "Task created successfully!",
-		},
+export const LoadedTasksWithPresets: Story = {
+	decorators: [withProxyProvider()],
+	beforeEach: () => {
+		const mockTemplateWithPresets = {
+			...MockTemplate,
+			id: "test-template-2",
+			name: "template-with-presets",
+			display_name: "Template with Presets",
+		};
+
+		spyOn(data, "fetchAITemplates").mockResolvedValue([
+			MockTemplate,
+			mockTemplateWithPresets,
+		]);
+		spyOn(data, "fetchTasks").mockResolvedValue(MockTasks);
+		spyOn(API, "getTemplateVersionPresets").mockImplementation(
+			async (versionId) => {
+				// Return presets only for the second template
+				if (versionId === mockTemplateWithPresets.active_version_id) {
+					return MockPresets;
+				}
+				return null;
+			},
+		);
+	},
+};
+
+export const LoadedTasksWithAIPromptPresets: Story = {
+	decorators: [withProxyProvider()],
+	beforeEach: () => {
+		const mockTemplateWithPresets = {
+			...MockTemplate,
+			id: "test-template-2",
+			name: "template-with-presets",
+			display_name: "Template with AI Prompt Presets",
+		};
+
+		spyOn(data, "fetchAITemplates").mockResolvedValue([
+			MockTemplate,
+			mockTemplateWithPresets,
+		]);
+		spyOn(data, "fetchTasks").mockResolvedValue(MockTasks);
+		spyOn(API, "getTemplateVersionPresets").mockImplementation(
+			async (versionId) => {
+				// Return presets only for the second template
+				if (versionId === mockTemplateWithPresets.active_version_id) {
+					return MockAIPromptPresets;
+				}
+				return null;
+			},
+		);
 	},
 };
 
@@ -154,15 +199,15 @@ export const CreateTaskSuccessfully: Story = {
 		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
 		spyOn(data, "fetchTasks")
 			.mockResolvedValueOnce(MockTasks)
-			.mockResolvedValue([newTaskData, ...MockTasks]);
-		spyOn(data, "createTask").mockResolvedValue(newTaskData);
+			.mockResolvedValue([MockNewTaskData, ...MockTasks]);
+		spyOn(data, "createTask").mockResolvedValue(MockNewTaskData);
 	},
 	play: async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 
 		await step("Run task", async () => {
 			const prompt = await canvas.findByLabelText(/prompt/i);
-			await userEvent.type(prompt, newTaskData.prompt);
+			await userEvent.type(prompt, MockNewTaskData.prompt);
 			const submitButton = canvas.getByRole("button", { name: /run task/i });
 			await waitFor(() => expect(submitButton).toBeEnabled());
 			await userEvent.click(submitButton);
@@ -208,8 +253,8 @@ export const WithAuthenticatedExternalAuth: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTasks")
 			.mockResolvedValueOnce(MockTasks)
-			.mockResolvedValue([newTaskData, ...MockTasks]);
-		spyOn(data, "createTask").mockResolvedValue(newTaskData);
+			.mockResolvedValue([MockNewTaskData, ...MockTasks]);
+		spyOn(data, "createTask").mockResolvedValue(MockNewTaskData);
 		spyOn(API, "getTemplateVersionExternalAuth").mockResolvedValue([
 			MockTemplateVersionExternalAuthGithubAuthenticated,
 		]);
@@ -235,8 +280,8 @@ export const MissingExternalAuth: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTasks")
 			.mockResolvedValueOnce(MockTasks)
-			.mockResolvedValue([newTaskData, ...MockTasks]);
-		spyOn(data, "createTask").mockResolvedValue(newTaskData);
+			.mockResolvedValue([MockNewTaskData, ...MockTasks]);
+		spyOn(data, "createTask").mockResolvedValue(MockNewTaskData);
 		spyOn(API, "getTemplateVersionExternalAuth").mockResolvedValue([
 			MockTemplateVersionExternalAuthGithub,
 		]);
@@ -246,7 +291,7 @@ export const MissingExternalAuth: Story = {
 
 		await step("Submit is disabled", async () => {
 			const prompt = await canvas.findByLabelText(/prompt/i);
-			await userEvent.type(prompt, newTaskData.prompt);
+			await userEvent.type(prompt, MockNewTaskData.prompt);
 			const submitButton = canvas.getByRole("button", { name: /run task/i });
 			expect(submitButton).toBeDisabled();
 		});
@@ -262,8 +307,8 @@ export const ExternalAuthError: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTasks")
 			.mockResolvedValueOnce(MockTasks)
-			.mockResolvedValue([newTaskData, ...MockTasks]);
-		spyOn(data, "createTask").mockResolvedValue(newTaskData);
+			.mockResolvedValue([MockNewTaskData, ...MockTasks]);
+		spyOn(data, "createTask").mockResolvedValue(MockNewTaskData);
 		spyOn(API, "getTemplateVersionExternalAuth").mockRejectedValue(
 			mockApiError({
 				message: "Failed to load external auth",
@@ -275,7 +320,7 @@ export const ExternalAuthError: Story = {
 
 		await step("Submit is disabled", async () => {
 			const prompt = await canvas.findByLabelText(/prompt/i);
-			await userEvent.type(prompt, newTaskData.prompt);
+			await userEvent.type(prompt, MockNewTaskData.prompt);
 			const submitButton = canvas.getByRole("button", { name: /run task/i });
 			expect(submitButton).toBeDisabled();
 		});
@@ -308,35 +353,3 @@ export const NonAdmin: Story = {
 		});
 	},
 };
-
-const MockTasks = [
-	{
-		workspace: {
-			...MockWorkspace,
-			latest_app_status: MockWorkspaceAppStatus,
-		},
-		prompt: "Create competitors page",
-	},
-	{
-		workspace: {
-			...MockWorkspace,
-			id: "workspace-2",
-			latest_app_status: {
-				...MockWorkspaceAppStatus,
-				message: "Avatar size fixed!",
-			},
-		},
-		prompt: "Fix user avatar size",
-	},
-	{
-		workspace: {
-			...MockWorkspace,
-			id: "workspace-3",
-			latest_app_status: {
-				...MockWorkspaceAppStatus,
-				message: "Accessibility issues fixed!",
-			},
-		},
-		prompt: "Fix accessibility issues",
-	},
-];
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -4571,3 +4571,101 @@ export function createTimestamp(minuteOffset: number, secondOffset: number) {
 	baseDate.setSeconds(baseDate.getSeconds() + secondOffset);
 	return baseDate.toISOString();
 }
+
+// Mock Presets for AI Tasks
+export const MockPresets: TypesGen.Preset[] = [
+	{
+		ID: "preset-1",
+		Name: "Development",
+		Parameters: [
+			{ Name: "cpu", Value: "4" },
+			{ Name: "memory", Value: "8GB" },
+		],
+		Default: true,
+	},
+	{
+		ID: "preset-2",
+		Name: "Testing",
+		Parameters: [
+			{ Name: "cpu", Value: "2" },
+			{ Name: "memory", Value: "4GB" },
+		],
+		Default: false,
+	},
+	{
+		ID: "preset-3",
+		Name: "Production",
+		Parameters: [
+			{ Name: "cpu", Value: "8" },
+			{ Name: "memory", Value: "16GB" },
+		],
+		Default: false,
+	},
+];
+
+export const MockAIPromptPresets: TypesGen.Preset[] = [
+	{
+		ID: "ai-preset-1",
+		Name: "Code Review",
+		Parameters: [
+			{ Name: "AI Prompt", Value: "Review the code for best practices" },
+			{ Name: "cpu", Value: "4" },
+			{ Name: "memory", Value: "8GB" },
+		],
+		Default: true,
+	},
+	{
+		ID: "ai-preset-2",
+		Name: "Custom Prompt",
+		Parameters: [
+			{ Name: "cpu", Value: "4" },
+			{ Name: "memory", Value: "8GB" },
+		],
+		Default: false,
+	},
+];
+
+// Mock Tasks for AI Tasks page
+export const MockTasks = [
+	{
+		workspace: {
+			...MockWorkspace,
+			latest_app_status: MockWorkspaceAppStatus,
+		},
+		prompt: "Create competitors page",
+	},
+	{
+		workspace: {
+			...MockWorkspace,
+			id: "workspace-2",
+			latest_app_status: {
+				...MockWorkspaceAppStatus,
+				message: "Avatar size fixed!",
+			},
+		},
+		prompt: "Fix user avatar size",
+	},
+	{
+		workspace: {
+			...MockWorkspace,
+			id: "workspace-3",
+			latest_app_status: {
+				...MockWorkspaceAppStatus,
+				message: "Accessibility issues fixed!",
+			},
+		},
+		prompt: "Fix accessibility issues",
+	},
+];
+
+export const MockNewTaskData = {
+	prompt: "Create a new task",
+	workspace: {
+		...MockWorkspace,
+		id: "workspace-4",
+		latest_app_status: {
+			...MockWorkspaceAppStatus,
+			message: "Task created successfully!",
+		},
+	},
+};
