Skip to content

feat: add snippets for all form types and add docs links #34

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 12 commits into from
Jul 9, 2025
Merged

feat: add snippets for all form types and add docs links #34

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3cdaf7b
feat: add all form types to snippets
brettkolodny Jul 2, 2025
a5145a0
chore: add proper docs links
brettkolodny Jul 2, 2025
3d01957
feat: snippets are aware of existing order and names
brettkolodny Jul 2, 2025
285fd2a
chore: remove commented code
brettkolodny Jul 2, 2025
aca5049
chore: use better icon for dropdown menu
brettkolodny Jul 2, 2025
684d476
feat: add placeholder example to input snippets
brettkolodny Jul 2, 2025
bcdb981
chore: add accessibility warning of links opening in new tabs
brettkolodny Jul 9, 2025
0159d41
chore: improve readability of adding code snippets
brettkolodny Jul 9, 2025
ba502b3
chore: use proper provided type from lucide-react
brettkolodny Jul 9, 2025
15485d7
chore: make snippet function arguments not optional
brettkolodny Jul 9, 2025
fac0ff0
chore: remove default function argument values
brettkolodny Jul 9, 2025
c52f435
chore: remove unneeded useRef
brettkolodny Jul 9, 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
4 changes: 2 additions & 2 deletions src/client/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export const App = () => {
Coder
</a>
<a
href="https://coder.com"
href="https://coder.com/docs/admin/templates/extending-templates/parameters"
Copy link
Member

Choose a reason for hiding this comment

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

Nit: for accessibility, whenever you have an external link, you want to add some screen reader text to make sure saying that the link opens in a new tab

It doesn't have to be much. It can be something like:

<span className="sr-only> (link opens in new tab)</span>

target="_blank"
rel="noreferrer"
className="font-light text-content-secondary text-sm hover:text-content-primary"
Expand All @@ -195,7 +195,7 @@ export const App = () => {

<ResizablePanelGroup direction={"horizontal"}>
{/* EDITOR */}
<Editor code={code} setCode={setCode} />
<Editor code={code} setCode={setCode} parameters={parameters} />

<ResizableHandle className="bg-surface-quaternary" />

Expand Down
66 changes: 30 additions & 36 deletions src/client/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,56 +14,56 @@ import {
TooltipTrigger,
} from "@/client/components/Tooltip";
import { useTheme } from "@/client/contexts/theme";
import { multiSelect, radio, switchInput, textInput } from "@/client/snippets";
import type { ParameterFormType } from "@/gen/types";
import { snippets, type SnippetFunc } from "@/client/snippets";
import { cn } from "@/utils/cn";
import { Editor as MonacoEditor } from "@monaco-editor/react";
import {
CheckIcon,
ChevronDownIcon,
CopyIcon,
FileJsonIcon,
RadioIcon,
SettingsIcon,
SquareMousePointerIcon,
TextCursorInputIcon,
ToggleLeftIcon,
ZapIcon,
} from "lucide-react";
import { type FC, useEffect, useRef, useState } from "react";
import { useEditor } from "@/client/contexts/editor";
import type { ParameterWithSource } from "@/gen/types";

type EditorProps = {
code: string;
setCode: React.Dispatch<React.SetStateAction<string>>;
parameters: ParameterWithSource[];
};

export const Editor: FC<EditorProps> = ({ code, setCode }) => {
export const Editor: FC<EditorProps> = ({ code, setCode, parameters }) => {
const { appliedTheme } = useTheme();
const editorRef = useEditor();

const [tab, setTab] = useState(() => "code");

const [codeCopied, setCodeCopied] = useState(() => false);
const copyTimeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(
undefined,
);
Copy link
Member

@Parkreiner Parkreiner Jul 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

We don't need this ref here. The timeout ID state can live entirely in the effect


const [tab, setTab] = useState(() => "code");

const onCopy = () => {
navigator.clipboard.writeText(code);
setCodeCopied(() => true);
};

const onAddSnippet = (formType: ParameterFormType) => {
if (formType === "input") {
setCode(`${code.trimEnd()}\n\n${textInput}\n`);
} else if (formType === "radio") {
setCode(`${code.trimEnd()}\n\n${radio}\n`);
} else if (formType === "multi-select") {
setCode(`${code.trimEnd()}\n\n${multiSelect}\n`);
} else if (formType === "switch") {
setCode(`${code.trimEnd()}\n\n${switchInput}\n`);
}
const onAddSnippet = (name: string, snippet: SnippetFunc) => {
const nextInOrder =
parameters.reduce(
(highestOrder, parameter) =>
highestOrder < parameter.order ? parameter.order : highestOrder,
0,
) + 1;
Copy link
Member

@Parkreiner Parkreiner Jul 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Nit: I'm generally not a fan of .reduce in JS, but I think it's fine here, since we're just working with primitive values, and actually have true function purity

Still, I'm wondering if we could do this:

const nextInOrder = 1 + Math.max(0, ...parameters.map((p) => p.order));

Feels like the Math.max is more clear about the intent

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I was not aware that Math.max was a variadic function!


const nameCount = parameters.filter((p) => p.name.startsWith(name)).length;

setCode(
`${code.trimEnd()}\n\n${snippet(nameCount > 0 ? `${name}-${nameCount}` : name, nextInOrder)}\n`,
);
Copy link
Member

@Parkreiner Parkreiner Jul 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I feel like this line of code is doing a lot, especially since we have to mindful of all the newlines. Could we refactor it to split up the steps?

const nextInOrder = 1 + Math.max(0, ...parameters.map((p) => p.order));
const newName = nameCount > 0 ? `${name}-${nameCount}` : name;
const newSnippet = snippet(newName, nextInOrder);
setCode(`${code.trimEnd()}\n\n${newSnippet}\n`);

};

useEffect(() => {
Expand Down Expand Up @@ -116,23 +116,17 @@ export const Editor: FC<EditorProps> = ({ code, setCode }) => {

<DropdownMenuPortal>
<DropdownMenuContent align="start">
<DropdownMenuItem onClick={() => onAddSnippet("input")}>
<TextCursorInputIcon width={24} height={24} />
Text input
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => onAddSnippet("multi-select")}
>
<SquareMousePointerIcon width={24} height={24} />
Multi-select
</DropdownMenuItem>
<DropdownMenuItem onClick={() => onAddSnippet("radio")}>
<RadioIcon width={24} height={24} />
Radio
</DropdownMenuItem>
<DropdownMenuItem onClick={() => onAddSnippet("switch")}>
<ToggleLeftIcon width={24} height={24} /> Switches
</DropdownMenuItem>
{snippets.map(
({ name, label, icon: Icon, snippet }, index) => (
<DropdownMenuItem
key={index}
Comment on lines +109 to +111
Copy link
Member

Choose a reason for hiding this comment

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

DropdownMenuItem looks stateful, which means that using array indices could eventually scramble up state during JSX reconciliation if we're not careful

If names aren't unique, I feel like it'd be better to find a way to generate a unique ID as a snippet is getting added

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

The snippets array doesn't change, it's a set list the user can pick from. Unless you're talking about onAddSnippet depending on state and that causing some weird interaction I'm not aware of I think it's fine.

onClick={() => onAddSnippet(name, snippet)}
>
<Icon size={24} />
{label}
</DropdownMenuItem>
),
)}
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu>
Expand Down
4 changes: 3 additions & 1 deletion src/client/Preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,9 @@ const PreviewEmptyState = () => {
</p>
</div>
<a
href="#todo"
href="https://coder.com/docs/admin/templates/extending-templates/parameters"
Copy link
Member

Choose a reason for hiding this comment

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

Same note here about links that open in new tabs

target="_blank"
rel="noreferrer"
className="flex items-center gap-0.5 text-content-link text-sm"
>
Read the docs
Expand Down
Loading