Skip to content

Allow empty payloads in test runs #1962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 22, 2025
Merged

Allow empty payloads in test runs #1962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
759ad2b
Allow empty payloads in test runs
myftija Apr 22, 2025
09ecc22
Expose a basic linter configs in the code editor component
myftija Apr 22, 2025
134e486
Touch up the linting error elements in the code editor component
myftija Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 35 additions & 2 deletions apps/webapp/app/components/code/JSONEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { json as jsonLang } from "@codemirror/lang-json";
import type { ViewUpdate } from "@codemirror/view";
import { json as jsonLang, jsonParseLinter } from "@codemirror/lang-json";
import type { EditorView, ViewUpdate } from "@codemirror/view";
import { CheckIcon, ClipboardIcon, TrashIcon } from "@heroicons/react/20/solid";
import type { ReactCodeMirrorProps, UseCodeMirror } from "@uiw/react-codemirror";
import { useCodeMirror } from "@uiw/react-codemirror";
Expand All @@ -8,6 +8,7 @@ import { cn } from "~/utils/cn";
import { Button } from "../primitives/Buttons";
import { getEditorSetup } from "./codeMirrorSetup";
import { darkTheme } from "./codeMirrorTheme";
import { linter, lintGutter, type Diagnostic } from "@codemirror/lint";

export interface JSONEditorProps extends Omit<ReactCodeMirrorProps, "onBlur"> {
defaultValue?: string;
Expand All @@ -18,18 +19,35 @@ export interface JSONEditorProps extends Omit<ReactCodeMirrorProps, "onBlur"> {
onBlur?: (code: string) => void;
showCopyButton?: boolean;
showClearButton?: boolean;
linterEnabled?: boolean;
allowEmpty?: boolean;
}

const languages = {
json: jsonLang,
};

function emptyAwareJsonLinter() {
return (view: EditorView): Diagnostic[] => {
const content = view.state.doc.toString().trim();

// return no errors if content is empty
if (!content) {
return [];
}

return jsonParseLinter()(view);
};
}

type JSONEditorDefaultProps = Partial<JSONEditorProps>;

const defaultProps: JSONEditorDefaultProps = {
language: "json",
readOnly: true,
basicSetup: false,
linterEnabled: true,
allowEmpty: true,
};

export function JSONEditor(opts: JSONEditorProps) {
Expand All @@ -44,6 +62,8 @@ export function JSONEditor(opts: JSONEditorProps) {
autoFocus,
showCopyButton = true,
showClearButton = true,
linterEnabled,
allowEmpty,
} = {
...defaultProps,
...opts,
Expand All @@ -56,6 +76,19 @@ export function JSONEditor(opts: JSONEditorProps) {

extensions.push(languageExtension());

if (linterEnabled) {
extensions.push(lintGutter());

switch (language) {
case "json": {
extensions.push(allowEmpty ? linter(emptyAwareJsonLinter()) : linter(jsonParseLinter()));
break;
}
default:
language satisfies never;
}
}

const editor = useRef<HTMLDivElement>(null);
const settings: Omit<UseCodeMirror, "onBlur"> = {
...opts,
Expand Down
5 changes: 1 addition & 4 deletions apps/webapp/app/components/code/codeMirrorSetup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { closeBrackets } from "@codemirror/autocomplete";
import { indentWithTab } from "@codemirror/commands";
import { jsonParseLinter } from "@codemirror/lang-json";
import { bracketMatching } from "@codemirror/language";
import { lintGutter, lintKeymap, linter } from "@codemirror/lint";
import { lintKeymap } from "@codemirror/lint";
import { highlightSelectionMatches } from "@codemirror/search";
import { Prec, type Extension } from "@codemirror/state";
import {
Expand All @@ -21,8 +20,6 @@ export function getEditorSetup(showLineNumbers = true, showHighlights = true): A
dropCursor(),
bracketMatching(),
closeBrackets(),
lintGutter(),
linter(jsonParseLinter()),
Prec.highest(
keymap.of([
{
Expand Down
27 changes: 27 additions & 0 deletions apps/webapp/app/components/code/codeMirrorTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,32 @@ export function darkTheme(): Extension {
fontSize: "14px",
},

".cm-tooltip.cm-tooltip-lint": {
backgroundColor: tooltipBackground,
},

".cm-diagnostic": {
padding: "4px 8px",
color: ivory,
fontFamily: "Geist Mono Variable",
fontSize: "12px",
},

".cm-diagnostic-error": {
borderLeft: "2px solid #e11d48",
},

".cm-lint-marker-error": {
content: "none",
backgroundColor: "#e11d48",
height: "100%",
width: "2px",
},

".cm-lintPoint:after": {
borderBottom: "4px solid #e11d48",
},

".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
backgroundColor: selection,
Expand Down Expand Up @@ -82,6 +108,7 @@ export function darkTheme(): Extension {

".cm-tooltip": {
border: "none",
marginTop: "6px",
backgroundColor: tooltipBackground,
},
".cm-tooltip .cm-tooltip-arrow:before": {
Expand Down
1 change: 0 additions & 1 deletion ...gs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,6 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
}}
height="100%"
autoFocus={!tab || tab === "payload"}
placeholder="{ }"
className={cn("h-full overflow-auto", tab === "metadata" && "hidden")}
/>
<JSONEditor
Expand Down
56 changes: 26 additions & 30 deletions apps/webapp/app/v3/testTask.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,42 @@ export const TestTaskData = z
.discriminatedUnion("triggerSource", [
z.object({
triggerSource: z.literal("STANDARD"),
payload: z.string().transform((payload, ctx) => {
try {
const data = JSON.parse(payload);
return data as any;
} catch (e) {
console.log("parsing error", e);
payload: z
.string()
.optional()
.transform((val, ctx) => {
if (!val) {
return {};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Returning undefined here would be more fitting, but it breaks the replay flow, which doesn't handle this well. The fix seemed a bit involved, so leaving this for a separate PR. In the meantime, the behavior stays the same, as users would still pass { } as empty payload for tests.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea

}

if (e instanceof Error) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: e.message,
});
} else {
try {
return JSON.parse(val);
} catch {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "This is invalid JSON",
message: "Payload must be a valid JSON string",
});
return z.NEVER;
}
}),
metadata: z
.string()
.optional()
.transform((val, ctx) => {
if (!val) {
return {};
}
}
}),
metadata: z.string().transform((metadata, ctx) => {
try {
const data = JSON.parse(metadata);
return data as any;
} catch (e) {
console.log("parsing error", e);

if (e instanceof Error) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: e.message,
});
} else {
try {
return JSON.parse(val);
} catch {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "This is invalid JSON",
message: "Metadata must be a valid JSON string",
});
return z.NEVER;
}
}
}),
}),
}),
z.object({
triggerSource: z.literal("SCHEDULED"),
Expand Down
Loading