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.

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
Show file tree
Hide file tree
Changes from all commits
Commits
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
7 changes: 5 additions & 2 deletions src/client/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -178,14 +178,16 @@ export const App = () => {
rel="noreferrer"
className="font-light text-content-secondary text-sm hover:text-content-primary"
>
<span className="sr-only"> (link opens in new tab)</span>
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"
>
<span className="sr-only"> (link opens in new tab)</span>
Docs
</a>
<ExampleSelector />
Expand All @@ -195,7 +197,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 Expand Up @@ -325,6 +327,7 @@ const ExampleSelector: FC = () => {
return (
<DropdownMenuItem key={slug} asChild={true}>
<a href={href} target="_blank" rel="noreferrer">
<span className="sr-only"> (link opens in new tab)</span>
<ExternalLinkIcon />
{title}
</a>
Expand Down
91 changes: 37 additions & 54 deletions src/client/Editor.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
import { Editor as MonacoEditor } from "@monaco-editor/react";
import {
CheckIcon,
ChevronDownIcon,
CopyIcon,
FileJsonIcon,
SettingsIcon,
ZapIcon,
} from "lucide-react";
import { type FC, useEffect, useState } from "react";
import { Button } from "@/client/components/Button";
import {
DropdownMenu,
Expand All @@ -13,71 +23,50 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/client/components/Tooltip";
import { useEditor } from "@/client/contexts/editor";
import { useTheme } from "@/client/contexts/theme";
import { multiSelect, radio, switchInput, textInput } from "@/client/snippets";
import type { ParameterFormType } from "@/gen/types";
import { type SnippetFunc, snippets } from "@/client/snippets";
import type { ParameterWithSource } from "@/gen/types";
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";

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 [codeCopied, setCodeCopied] = useState(() => false);
const copyTimeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(
undefined,
);

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

const [codeCopied, setCodeCopied] = useState(() => false);

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 nameCount = parameters.filter((p) => p.name.startsWith(name)).length;

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(() => {
if (!codeCopied) {
return;
}

clearTimeout(copyTimeoutId.current);

copyTimeoutId.current = setTimeout(() => {
const copyTimeoutId = setTimeout(() => {
setCodeCopied(() => false);
}, 1000);

return () => clearTimeout(copyTimeoutId.current);
return () => clearTimeout(copyTimeoutId);
}, [codeCopied]);

return (
Expand Down Expand Up @@ -116,23 +105,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
5 changes: 4 additions & 1 deletion src/client/Preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -239,9 +239,12 @@ 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"
>
<span className="sr-only"> (link opens in new tab)</span>
Read the docs
<span className="inline">
<ExternalLinkIcon width={16} />
Expand Down
Loading