fix(site): disable task prompt submit button when prompt empty (#20357)

Disable the submit button by default in the task creation form, it is only enabled once the prompt field is non empty

site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx

@@ -72,6 +72,37 @@ export const ReadOnlyPresetPrompt: Story = {
 	},
 };
 
+export const SubmitEnabledWhenPromptNotEmpty: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const prompt = await canvas.findByLabelText(/prompt/i);
+		await userEvent.type(prompt, MockNewTaskData.prompt);
+
+		const submitButton = canvas.getByRole("button", { name: /run task/i });
+		expect(submitButton).toBeEnabled();
+	},
+};
+
+export const SubmitDisabledWhenPromptEmpty: Story = {
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step("No prompt", async () => {
+			const submitButton = canvas.getByRole("button", { name: /run task/i });
+			expect(submitButton).toBeDisabled();
+		});
+
+		await step("Whitespace prompt", async () => {
+			const prompt = await canvas.findByLabelText(/prompt/i);
+			await userEvent.type(prompt, "   ");
+
+			const submitButton = canvas.getByRole("button", { name: /run task/i });
+			expect(submitButton).toBeDisabled();
+		});
+	},
+};
+
 export const OnSuccess: Story = {
 	decorators: [withGlobalSnackbar],
 	parameters: {

site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx

@@ -368,7 +368,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 						<Button
 							size="icon"
 							type="submit"
-							disabled={isMissingExternalAuth}
+							disabled={prompt.trim().length === 0 || isMissingExternalAuth}
 							className="rounded-full disabled:bg-surface-invert-primary disabled:opacity-70"
 						>
 							<Spinner