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 all 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
7 changes: 5 additions & 2 deletions src/client/App.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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