Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 | import { AiHydroMessage } from "@shared/ExtensionMessage"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { useMemo } from "react"
import { expect, userEvent, within } from "storybook/test"
import { createStorybookDecorator } from "@/config/StorybookDecorator"
import ErrorRow from "./ErrorRow"
// Mock data factories
const createMockMessage = (overrides: Partial<AiHydroMessage> = {}): AiHydroMessage => ({
ts: Date.now(),
type: "say",
say: "error",
text: "An error occurred while processing your request.",
...overrides,
})
const createMockAuthState = (overrides: any = {}) => ({
aihydroUser: null,
activeOrganization: null,
isAuthenticated: false,
...overrides,
})
const createMockExtensionState = (overrides: any = {}) => ({
version: "1.0.0",
aihydroMessages: [],
taskHistory: [],
shouldShowAnnouncement: false,
...overrides,
})
// Reusable decorators
const createStoryDecorator =
(authOverrides: any = {}, extensionOverrides: any = {}) =>
(Story: any) => {
const mockExtensionState = useMemo(
() => ({
state: { ...createMockExtensionState(extensionOverrides) },
auth: { ...createMockAuthState(authOverrides) },
}),
[],
)
return createStorybookDecorator(mockExtensionState.state, "p-4", mockExtensionState.auth)(Story)
}
const meta: Meta<typeof ErrorRow> = {
title: "Views/Components/ErrorRow",
component: ErrorRow,
parameters: {
docs: {
description: {
component:
"Displays different types of error messages in the chat interface, including API errors, credit limit errors, diff errors, and aihydroignore errors. Handles special error parsing for AI-Hydro provider errors and provides appropriate user actions.",
},
},
},
decorators: [createStoryDecorator()],
}
export default meta
type Story = StoryObj<typeof ErrorRow>
// Interactive plain text error story with configurable args and presets
export const Default: Story = {
args: {
message: createMockMessage({ text: "Something went wrong while executing the command." }),
errorType: "error",
apiRequestFailedMessage: undefined,
},
argTypes: {
errorType: {
control: { type: "select" },
options: ["error", "mistake_limit_reached", "auto_approval_max_req_reached", "diff_error", "aihydroignore_error"],
description: "Type of error to display",
},
message: {
control: { type: "object" },
description: "Message object containing error text and metadata",
},
apiRequestFailedMessage: {
control: { type: "select" },
options: [
// Empty option for no error message
"",
// PowerShell error
"PowerShell is not recognized as an internal or external command, operable program or batch file.",
JSON.stringify({
request_id: "has-request-id",
message: "error message.",
code: "random_code",
}),
],
},
},
parameters: {
docs: {
description: {
story: "Interactive story for testing different plain text error types and messages. Use the preset dropdown to quickly test common scenarios, or manually configure the error type and message object.",
},
},
},
}
// API request errors
export const ApiRequestFailed: Story = {
args: {
message: createMockMessage(),
errorType: "error",
apiRequestFailedMessage:
"Network error: Unable to connect to the API server. Please check your internet connection and try again.",
},
}
export const ApiStreamingFailed: Story = {
args: {
message: createMockMessage(),
errorType: "error",
apiReqStreamingFailedMessage: "Streaming error: Connection was interrupted while receiving the response.",
},
}
// Cline-specific errors
export const AiHydroBalanceError: Story = {
args: {
message: createMockMessage(),
errorType: "error",
apiRequestFailedMessage: JSON.stringify({
message: "Insufficient credits to complete this request.",
code: "insufficient_credits",
request_id: "req_123456789",
providerId: "cline",
details: {
current_balance: 0.5,
total_spent: 25.75,
total_promotions: 5.0,
message: "You have run out of credits. Please purchase more to continue.",
buy_credits_url: "https://app.example.bot/dashboard/account?tab=credits&redirect=true",
},
}),
},
}
export const AiHydroRateLimitError: Story = {
args: {
message: createMockMessage(),
errorType: "error",
apiRequestFailedMessage: JSON.stringify({
message: "Rate limit exceeded. Please wait before making another request.",
request_id: "req_987654321",
providerId: "cline",
}),
},
}
// Authentication-related errors with configurable scenarios
export const AuthenticationErrors: Story = {
args: {
message: createMockMessage(),
errorType: "error",
apiRequestFailedMessage: JSON.stringify({
message: "Authentication failed. Please sign in to continue.",
code: "ERR_BAD_REQUEST",
request_id: "req_auth_123",
providerId: "cline",
}),
},
argTypes: {
apiRequestFailedMessage: {
control: { type: "text" },
description: "JSON string containing error details",
},
},
parameters: {
docs: {
description: {
story: "Interactive story for testing authentication-related errors. Configure the error message JSON to test different auth scenarios including signed in/out states.",
},
},
},
}
// Auth error when signed in (shows different UI)
export const AuthErrorSignedIn: Story = {
...AuthenticationErrors,
decorators: [
createStoryDecorator({
aihydroUser: { id: "user123", email: "user@example.com" },
isAuthenticated: true,
}),
],
args: {
message: createMockMessage(),
errorType: "error",
apiRequestFailedMessage: JSON.stringify({
message: "Authentication failed. Please retry your request.",
request_id: "req_auth_456",
providerId: "anthropic",
}),
},
}
// Interactive tests
export const InteractiveSignIn: Story = {
args: {
message: createMockMessage(),
errorType: "error",
apiRequestFailedMessage: JSON.stringify({
message: "Please sign in to access AI-Hydro services.",
code: "ERR_BAD_REQUEST",
request_id: "req_signin_test",
providerId: "cline",
}),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement)
// Find the sign in button
const signInButton = canvas.getByRole("button", { name: /sign in to cline/i })
await expect(signInButton).toBeInTheDocument()
// Test button is clickable
await expect(signInButton).toBeEnabled()
// Click the button (this will trigger the mock handler)
await userEvent.click(signInButton)
},
}
export const TroubleshootingLink: Story = {
args: {
message: createMockMessage(),
errorType: "error",
apiRequestFailedMessage:
"PowerShell is not recognized as an internal or external command. Please check your system configuration.",
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement)
// Find the troubleshooting link
const troubleshootingLink = canvas.getByRole("link", { name: /troubleshooting guide/i })
await expect(troubleshootingLink).toBeInTheDocument()
// Verify link attributes
await expect(troubleshootingLink).toHaveAttribute("href")
await expect(troubleshootingLink).toHaveClass("underline")
},
}
// Keep this one as it has specific testing logic for request ID
export const ErrorWithRequestId: Story = {
args: {
message: createMockMessage(),
errorType: "error",
apiRequestFailedMessage: JSON.stringify({
message: "An unexpected error occurred while processing your request.",
request_id: "req_detailed_123456",
providerId: "cline",
}),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement)
// Verify error message is displayed
const errorMessage = canvas.getByText(/an unexpected error occurred/i)
await expect(errorMessage).toBeInTheDocument()
// Verify request ID is displayed
const requestId = canvas.getByText(/request id: req_detailed_123456/i)
await expect(requestId).toBeInTheDocument()
},
}
|