From 3cdaf7b553f6f4826c17cf391d4b7ea7e01c96ed Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 2 Jul 2025 15:14:48 +0000 Subject: [PATCH 01/12] feat: add all form types to snippets --- src/client/Editor.tsx | 47 +++------- src/client/snippets.ts | 204 ++++++++++++++++++++++++++++++++++++----- 2 files changed, 192 insertions(+), 59 deletions(-) diff --git a/src/client/Editor.tsx b/src/client/Editor.tsx index 87c5fc8..0b635cf 100644 --- a/src/client/Editor.tsx +++ b/src/client/Editor.tsx @@ -14,8 +14,7 @@ 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 } from "@/client/snippets"; import { cn } from "@/utils/cn"; import { Editor as MonacoEditor } from "@monaco-editor/react"; import { @@ -23,11 +22,7 @@ import { ChevronDownIcon, CopyIcon, FileJsonIcon, - RadioIcon, SettingsIcon, - SquareMousePointerIcon, - TextCursorInputIcon, - ToggleLeftIcon, ZapIcon, } from "lucide-react"; import { type FC, useEffect, useRef, useState } from "react"; @@ -54,18 +49,6 @@ export const Editor: FC = ({ code, setCode }) => { 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`); - } - }; - useEffect(() => { if (!codeCopied) { return; @@ -116,23 +99,17 @@ export const Editor: FC = ({ code, setCode }) => { - onAddSnippet("input")}> - - Text input - - onAddSnippet("multi-select")} - > - - Multi-select - - onAddSnippet("radio")}> - - Radio - - onAddSnippet("switch")}> - Switches - + {snippets.map(({ label, icon: Icon, snippet }, index) => ( + + setCode(`${code.trimEnd()}\n\n${snippet()}\n`) + } + > + + {label} + + ))} diff --git a/src/client/snippets.ts b/src/client/snippets.ts index 26b8fef..8ff879d 100644 --- a/src/client/snippets.ts +++ b/src/client/snippets.ts @@ -1,3 +1,14 @@ +import { + ChevronDownIcon, + LetterTextIcon, + RadioIcon, + Settings2Icon, + SquareMousePointerIcon, + TagIcon, + TextCursorInputIcon, + ToggleLeftIcon, +} from "lucide-react"; + export const defaultCode = `terraform { required_providers { coder = { @@ -7,25 +18,91 @@ export const defaultCode = `terraform { } }`; -export const textInput = `data "coder_parameter" "project-name" { - display_name = "An input" - name = "an-input" - description = "What is the name of your project?" - order = 4 +type SnippetFunc = (name?: string, order?: number) => string; +type Snippet = { + label: string; + icon: typeof RadioIcon; + snippet: SnippetFunc; +}; + +export const input: SnippetFunc = ( + name = "input", + order = 1, +) => `data "coder_parameter" "text-input" { + name = "${name}" + display_name = "A text input" + description = "This parameter can be used to input text." + order = ${order} form_type = "input" type = "string" default = "An input value" }`; -export const radio = `data "coder_parameter" "radio" { - name = "radio" - display_name = "An example of a radio input" - description = "The next parameter supports a single value." - type = "string" - form_type = "radio" - order = 1 - default = "option-1" +export const textarea: SnippetFunc = ( + name = "textarea", + order = 1, +) => `data "coder_parameter" "textarea" { + name = "${name}" + display_name = "A textarea input" + description = "This parameter can be used to input multiple lines of text" + order = ${order} + + form_type = "textarea" + type = "string" + default = "An input value" +}`; + +export const radio: SnippetFunc = ( + name = "radio", + order = 1, +) => `data "coder_parameter" "radio" { + name = "${name}" + display_name = "A radio input" + description = "This parameter supports selecting a single value out of a list of options" + order = ${order} + + type = "string" + form_type = "radio" + default = "option-1" + + option { + name = "Option 1" + value = "option-1" + description = "A description for Option 1" + } + + option { + name = "Option 2" + value = "option-2" + description = "A description for Option 2" + } + + option { + name = "Option 3" + value = "option-3" + description = "A description for Option 3" + } + + option { + name = "Option 4" + value = "option-4" + description = "A description for Option 4" + } +}`; + +export const dropdown: SnippetFunc = ( + name = "dropdown", + order = 1, +) => `data "coder_parameter" "dropdown" { + name = "${name}" + display_name = "A dropdown input" + description = "This parameter supports selecting a single value out of a list of options. Especially useful when you have a lot of options." + order = ${order} + + type = "string" + form_type = "dropdown" + default = "option-1" option { name = "Option 1" @@ -52,13 +129,16 @@ export const radio = `data "coder_parameter" "radio" { } }`; -export const multiSelect = `data "coder_parameter" "multi-select" { - name = "multi-select" - display_name = "An example of a multi-select" - description = "The next parameter supports multiple values." +export const multiSelect: SnippetFunc = ( + name = "multi-select", + order = 1, +) => `data "coder_parameter" "multi-select" { + name = "${name}" + display_name = "A multi-select input" + description = "This parameter supports selecting multiple values from a list of options" type = "list(string)" form_type = "multi-select" - order = 1 + order = ${order} option { name = "Option 1" @@ -85,15 +165,91 @@ export const multiSelect = `data "coder_parameter" "multi-select" { } }`; -export const switchInput = `data "coder_parameter" "switch" { - name = "switch" - display_name = "An example of a switch" - description = "The next parameter can be on or off" +export const tagSelect: SnippetFunc = ( + name = "tag-select", + order = 1, +) => `data "coder_parameter" "tag-select" { + name = "${name}" + display_name = "A tag-select input" + description = "This parameter supports selecting multiple user inputed values at once" + type = "list(string)" + form_type = "tag-select" + order = ${order} +}`; + +export const switchInput: SnippetFunc = ( + name = "switch", + order = 1, +) => `data "coder_parameter" "switch" { + name = "${name}" + display_name = "A switch input" + description = "This parameter can be toggled between true and false" type = "bool" form_type = "switch" default = true - order = 1 -}` + order = ${order} +}`; + +export const slider: SnippetFunc = ( + name = "slider", + order = 1, +) => `data "coder_parameter" "slider" { + name = "${name}" + display_name = "A slider input" + description = "This parameter supports selecting a number within a given range" + type = "number" + form_type = "slider" + default = 6 + order = ${order} + + validation { + min = 1 + max = 10 + } +}`; + +export const snippets: Snippet[] = [ + { + label: "Text Input", + icon: TextCursorInputIcon, + snippet: input, + }, + { + label: "Textarea", + icon: LetterTextIcon, + snippet: textarea, + }, + { + label: "Radio", + icon: RadioIcon, + snippet: radio, + }, + { + label: "Multi-select", + icon: SquareMousePointerIcon, + snippet: multiSelect, + }, + { + label: "Tag-select", + icon: TagIcon, + snippet: tagSelect, + }, + { + label: "Switch", + icon: ToggleLeftIcon, + snippet: switchInput, + }, + { + label: "Dropdown", + icon: ChevronDownIcon, + snippet: dropdown, + }, + { + label: "Slider", + icon: Settings2Icon, + snippet: slider, + }, +]; export const checkerModule = ` variable "solutions" { From a5145a098df62a19481b5604ec5dfe209600b0c3 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 2 Jul 2025 15:16:38 +0000 Subject: [PATCH 02/12] chore: add proper docs links --- src/client/App.tsx | 2 +- src/client/Preview.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/client/App.tsx b/src/client/App.tsx index d440302..b0d9e10 100644 --- a/src/client/App.tsx +++ b/src/client/App.tsx @@ -181,7 +181,7 @@ export const App = () => { Coder {

Read the docs From 3d0195798013edf92c4a81cc7e2d3652b80d03a7 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 2 Jul 2025 15:41:28 +0000 Subject: [PATCH 03/12] feat: snippets are aware of existing order and names --- src/client/App.tsx | 2 +- src/client/Editor.tsx | 50 +++++++++++++++++++++++++++++------------- src/client/snippets.ts | 11 +++++++++- 3 files changed, 46 insertions(+), 17 deletions(-) diff --git a/src/client/App.tsx b/src/client/App.tsx index b0d9e10..4c1392e 100644 --- a/src/client/App.tsx +++ b/src/client/App.tsx @@ -195,7 +195,7 @@ export const App = () => { {/* EDITOR */} - + diff --git a/src/client/Editor.tsx b/src/client/Editor.tsx index 0b635cf..9c71c18 100644 --- a/src/client/Editor.tsx +++ b/src/client/Editor.tsx @@ -14,7 +14,7 @@ import { TooltipTrigger, } from "@/client/components/Tooltip"; import { useTheme } from "@/client/contexts/theme"; -import { snippets } from "@/client/snippets"; +import { snippets, type SnippetFunc } from "@/client/snippets"; import { cn } from "@/utils/cn"; import { Editor as MonacoEditor } from "@monaco-editor/react"; import { @@ -27,28 +27,45 @@ import { } 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>; + parameters: ParameterWithSource[]; }; -export const Editor: FC = ({ code, setCode }) => { +export const Editor: FC = ({ code, setCode, parameters }) => { const { appliedTheme } = useTheme(); const editorRef = useEditor(); + const [tab, setTab] = useState(() => "code"); + const [codeCopied, setCodeCopied] = useState(() => false); const copyTimeoutId = useRef | undefined>( undefined, ); - const [tab, setTab] = useState(() => "code"); - const onCopy = () => { navigator.clipboard.writeText(code); setCodeCopied(() => true); }; + const onAddSnippet = (name: string, snippet: SnippetFunc) => { + const nextInOrder = + parameters.reduce( + (highestOrder, parameter) => + highestOrder < parameter.order ? parameter.order : highestOrder, + 0, + ) + 1; + + const nameCount = parameters.filter((p) => p.name.startsWith(name)).length; + + setCode( + `${code.trimEnd()}\n\n${snippet(nameCount > 0 ? `${name}-${nameCount}` : name, nextInOrder)}\n`, + ); + }; + useEffect(() => { if (!codeCopied) { return; @@ -99,17 +116,20 @@ export const Editor: FC = ({ code, setCode }) => { - {snippets.map(({ label, icon: Icon, snippet }, index) => ( - - setCode(`${code.trimEnd()}\n\n${snippet()}\n`) - } - > - - {label} - - ))} + {snippets.map( + ({ name, label, icon: Icon, snippet }, index) => ( + + // setCode(`${code.trimEnd()}\n\n${snippet()}\n`) + onAddSnippet(name, snippet) + } + > + + {label} + + ), + )} diff --git a/src/client/snippets.ts b/src/client/snippets.ts index 8ff879d..55f46fc 100644 --- a/src/client/snippets.ts +++ b/src/client/snippets.ts @@ -18,8 +18,9 @@ export const defaultCode = `terraform { } }`; -type SnippetFunc = (name?: string, order?: number) => string; +export type SnippetFunc = (name?: string, order?: number) => string; type Snippet = { + name: string; label: string; icon: typeof RadioIcon; snippet: SnippetFunc; @@ -210,41 +211,49 @@ export const slider: SnippetFunc = ( export const snippets: Snippet[] = [ { + name: "text-input", label: "Text Input", icon: TextCursorInputIcon, snippet: input, }, { + name: "textarea", label: "Textarea", icon: LetterTextIcon, snippet: textarea, }, { + name: "radio", label: "Radio", icon: RadioIcon, snippet: radio, }, { + name: "switch", label: "Multi-select", icon: SquareMousePointerIcon, snippet: multiSelect, }, { + name: "tag-select", label: "Tag-select", icon: TagIcon, snippet: tagSelect, }, { + name: "switch", label: "Switch", icon: ToggleLeftIcon, snippet: switchInput, }, { + name: "dropdown", label: "Dropdown", icon: ChevronDownIcon, snippet: dropdown, }, { + name: "slider", label: "Slider", icon: Settings2Icon, snippet: slider, From 285fd2a7110e21465dcefc2c4f31412b4525cc8e Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 2 Jul 2025 15:43:07 +0000 Subject: [PATCH 04/12] chore: remove commented code --- src/client/Editor.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/client/Editor.tsx b/src/client/Editor.tsx index 9c71c18..b7068e5 100644 --- a/src/client/Editor.tsx +++ b/src/client/Editor.tsx @@ -120,10 +120,7 @@ export const Editor: FC = ({ code, setCode, parameters }) => { ({ name, label, icon: Icon, snippet }, index) => ( - // setCode(`${code.trimEnd()}\n\n${snippet()}\n`) - onAddSnippet(name, snippet) - } + onClick={() => onAddSnippet(name, snippet)} > {label} From aca5049a84a45c8d9cda6615a51e23f1ba3e7e23 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 2 Jul 2025 15:45:33 +0000 Subject: [PATCH 05/12] chore: use better icon for dropdown menu --- src/client/snippets.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/client/snippets.ts b/src/client/snippets.ts index 55f46fc..bbded15 100644 --- a/src/client/snippets.ts +++ b/src/client/snippets.ts @@ -1,7 +1,7 @@ import { - ChevronDownIcon, LetterTextIcon, RadioIcon, + Rows3Icon, Settings2Icon, SquareMousePointerIcon, TagIcon, @@ -20,7 +20,7 @@ export const defaultCode = `terraform { export type SnippetFunc = (name?: string, order?: number) => string; type Snippet = { - name: string; + name: string; label: string; icon: typeof RadioIcon; snippet: SnippetFunc; @@ -211,49 +211,49 @@ export const slider: SnippetFunc = ( export const snippets: Snippet[] = [ { - name: "text-input", + name: "text-input", label: "Text Input", icon: TextCursorInputIcon, snippet: input, }, { - name: "textarea", + name: "textarea", label: "Textarea", icon: LetterTextIcon, snippet: textarea, }, { - name: "radio", + name: "radio", label: "Radio", icon: RadioIcon, snippet: radio, }, { - name: "switch", + name: "switch", label: "Multi-select", icon: SquareMousePointerIcon, snippet: multiSelect, }, { - name: "tag-select", + name: "tag-select", label: "Tag-select", icon: TagIcon, snippet: tagSelect, }, { - name: "switch", + name: "switch", label: "Switch", icon: ToggleLeftIcon, snippet: switchInput, }, { - name: "dropdown", + name: "dropdown", label: "Dropdown", - icon: ChevronDownIcon, + icon: Rows3Icon, snippet: dropdown, }, { - name: "slider", + name: "slider", label: "Slider", icon: Settings2Icon, snippet: slider, From 684d476fd78cb7d607e3d5f729eaf89c56bfda50 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 2 Jul 2025 16:23:20 +0000 Subject: [PATCH 06/12] feat: add placeholder example to input snippets --- src/client/snippets.ts | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/client/snippets.ts b/src/client/snippets.ts index bbded15..4c94dbe 100644 --- a/src/client/snippets.ts +++ b/src/client/snippets.ts @@ -35,6 +35,10 @@ export const input: SnippetFunc = ( description = "This parameter can be used to input text." order = ${order} + styling = jsonencode({ + placeholder = "A placeholder that will appear if the input value is empty" + }) + form_type = "input" type = "string" default = "An input value" @@ -49,6 +53,10 @@ export const textarea: SnippetFunc = ( description = "This parameter can be used to input multiple lines of text" order = ${order} + styling = jsonencode({ + placeholder = "A placeholder that will appear if the input value is empty" + }) + form_type = "textarea" type = "string" default = "An input value" @@ -101,6 +109,10 @@ export const dropdown: SnippetFunc = ( description = "This parameter supports selecting a single value out of a list of options. Especially useful when you have a lot of options." order = ${order} + styling = jsonencode({ + placeholder = "A placeholder that will appear if the input value is empty" + }) + type = "string" form_type = "dropdown" default = "option-1" @@ -137,9 +149,10 @@ export const multiSelect: SnippetFunc = ( name = "${name}" display_name = "A multi-select input" description = "This parameter supports selecting multiple values from a list of options" + order = ${order} + type = "list(string)" form_type = "multi-select" - order = ${order} option { name = "Option 1" @@ -173,9 +186,10 @@ export const tagSelect: SnippetFunc = ( name = "${name}" display_name = "A tag-select input" description = "This parameter supports selecting multiple user inputed values at once" + order = ${order} + type = "list(string)" form_type = "tag-select" - order = ${order} }`; export const switchInput: SnippetFunc = ( @@ -185,10 +199,11 @@ export const switchInput: SnippetFunc = ( name = "${name}" display_name = "A switch input" description = "This parameter can be toggled between true and false" + order = ${order} + type = "bool" form_type = "switch" default = true - order = ${order} }`; export const slider: SnippetFunc = ( From bcdb981244bcac5aedab813e3e643846126658a5 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 9 Jul 2025 16:36:50 +0000 Subject: [PATCH 07/12] chore: add accessibility warning of links opening in new tabs --- src/client/App.tsx | 3 +++ src/client/Preview.tsx | 1 + 2 files changed, 4 insertions(+) diff --git a/src/client/App.tsx b/src/client/App.tsx index 4c1392e..1587375 100644 --- a/src/client/App.tsx +++ b/src/client/App.tsx @@ -178,6 +178,7 @@ export const App = () => { rel="noreferrer" className="font-light text-content-secondary text-sm hover:text-content-primary" > + (link opens in new tab) Coder { rel="noreferrer" className="font-light text-content-secondary text-sm hover:text-content-primary" > + (link opens in new tab) Docs @@ -325,6 +327,7 @@ const ExampleSelector: FC = () => { return ( + (link opens in new tab) {title} diff --git a/src/client/Preview.tsx b/src/client/Preview.tsx index 3e5e514..f40c6eb 100644 --- a/src/client/Preview.tsx +++ b/src/client/Preview.tsx @@ -244,6 +244,7 @@ const PreviewEmptyState = () => { rel="noreferrer" className="flex items-center gap-0.5 text-content-link text-sm" > + (link opens in new tab) Read the docs From 0159d410bb38a4ddf2f40a31b55766e321d79cea Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 9 Jul 2025 16:41:00 +0000 Subject: [PATCH 08/12] chore: improve readability of adding code snippets --- src/client/Editor.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/client/Editor.tsx b/src/client/Editor.tsx index b7068e5..61eceab 100644 --- a/src/client/Editor.tsx +++ b/src/client/Editor.tsx @@ -52,18 +52,12 @@ export const Editor: FC = ({ code, setCode, parameters }) => { }; const onAddSnippet = (name: string, snippet: SnippetFunc) => { - const nextInOrder = - parameters.reduce( - (highestOrder, parameter) => - highestOrder < parameter.order ? parameter.order : highestOrder, - 0, - ) + 1; - const nameCount = parameters.filter((p) => p.name.startsWith(name)).length; - setCode( - `${code.trimEnd()}\n\n${snippet(nameCount > 0 ? `${name}-${nameCount}` : name, nextInOrder)}\n`, - ); + 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(() => { From ba502b35250d515834b65eaebb3f2ac6c0f56cc0 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 9 Jul 2025 16:44:54 +0000 Subject: [PATCH 09/12] chore: use proper provided type from lucide-react --- src/client/snippets.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/client/snippets.ts b/src/client/snippets.ts index 4c94dbe..66d1335 100644 --- a/src/client/snippets.ts +++ b/src/client/snippets.ts @@ -1,5 +1,6 @@ import { LetterTextIcon, + type LucideIcon, RadioIcon, Rows3Icon, Settings2Icon, @@ -22,7 +23,7 @@ export type SnippetFunc = (name?: string, order?: number) => string; type Snippet = { name: string; label: string; - icon: typeof RadioIcon; + icon: LucideIcon; snippet: SnippetFunc; }; From 15485d7f921f98ea93f58958755f43485ddbfdad Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 9 Jul 2025 16:45:49 +0000 Subject: [PATCH 10/12] chore: make snippet function arguments not optional --- src/client/snippets.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/snippets.ts b/src/client/snippets.ts index 66d1335..cb2ba79 100644 --- a/src/client/snippets.ts +++ b/src/client/snippets.ts @@ -19,7 +19,7 @@ export const defaultCode = `terraform { } }`; -export type SnippetFunc = (name?: string, order?: number) => string; +export type SnippetFunc = (name: string, order: number) => string; type Snippet = { name: string; label: string; From fac0ff015a7c19daa6fd0e11027491c8ad21558e Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 9 Jul 2025 16:48:13 +0000 Subject: [PATCH 11/12] chore: remove default function argument values --- src/client/snippets.ts | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/client/snippets.ts b/src/client/snippets.ts index cb2ba79..f32c7e9 100644 --- a/src/client/snippets.ts +++ b/src/client/snippets.ts @@ -28,8 +28,8 @@ type Snippet = { }; export const input: SnippetFunc = ( - name = "input", - order = 1, + name, + order, ) => `data "coder_parameter" "text-input" { name = "${name}" display_name = "A text input" @@ -46,8 +46,8 @@ export const input: SnippetFunc = ( }`; export const textarea: SnippetFunc = ( - name = "textarea", - order = 1, + name, + order, ) => `data "coder_parameter" "textarea" { name = "${name}" display_name = "A textarea input" @@ -64,8 +64,8 @@ export const textarea: SnippetFunc = ( }`; export const radio: SnippetFunc = ( - name = "radio", - order = 1, + name, + order, ) => `data "coder_parameter" "radio" { name = "${name}" display_name = "A radio input" @@ -102,8 +102,8 @@ export const radio: SnippetFunc = ( }`; export const dropdown: SnippetFunc = ( - name = "dropdown", - order = 1, + name, + order, ) => `data "coder_parameter" "dropdown" { name = "${name}" display_name = "A dropdown input" @@ -144,8 +144,8 @@ export const dropdown: SnippetFunc = ( }`; export const multiSelect: SnippetFunc = ( - name = "multi-select", - order = 1, + name, + order, ) => `data "coder_parameter" "multi-select" { name = "${name}" display_name = "A multi-select input" @@ -181,8 +181,8 @@ export const multiSelect: SnippetFunc = ( }`; export const tagSelect: SnippetFunc = ( - name = "tag-select", - order = 1, + name, + order, ) => `data "coder_parameter" "tag-select" { name = "${name}" display_name = "A tag-select input" @@ -194,8 +194,8 @@ export const tagSelect: SnippetFunc = ( }`; export const switchInput: SnippetFunc = ( - name = "switch", - order = 1, + name, + order, ) => `data "coder_parameter" "switch" { name = "${name}" display_name = "A switch input" @@ -208,8 +208,8 @@ export const switchInput: SnippetFunc = ( }`; export const slider: SnippetFunc = ( - name = "slider", - order = 1, + name, + order, ) => `data "coder_parameter" "slider" { name = "${name}" display_name = "A slider input" From c52f4355f11c5a64a5aeb6fc9bc9ab309d0ec740 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Wed, 9 Jul 2025 16:50:28 +0000 Subject: [PATCH 12/12] chore: remove unneeded useRef --- src/client/Editor.tsx | 35 +++++++++++++++-------------------- 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/src/client/Editor.tsx b/src/client/Editor.tsx index 61eceab..09eb5e6 100644 --- a/src/client/Editor.tsx +++ b/src/client/Editor.tsx @@ -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, @@ -13,21 +23,11 @@ import { TooltipContent, TooltipTrigger, } from "@/client/components/Tooltip"; -import { useTheme } from "@/client/contexts/theme"; -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, - SettingsIcon, - ZapIcon, -} from "lucide-react"; -import { type FC, useEffect, useRef, useState } from "react"; import { useEditor } from "@/client/contexts/editor"; +import { useTheme } from "@/client/contexts/theme"; +import { type SnippetFunc, snippets } from "@/client/snippets"; import type { ParameterWithSource } from "@/gen/types"; +import { cn } from "@/utils/cn"; type EditorProps = { code: string; @@ -42,9 +42,6 @@ export const Editor: FC = ({ code, setCode, parameters }) => { const [tab, setTab] = useState(() => "code"); const [codeCopied, setCodeCopied] = useState(() => false); - const copyTimeoutId = useRef | undefined>( - undefined, - ); const onCopy = () => { navigator.clipboard.writeText(code); @@ -65,13 +62,11 @@ export const Editor: FC = ({ code, setCode, parameters }) => { return; } - clearTimeout(copyTimeoutId.current); - - copyTimeoutId.current = setTimeout(() => { + const copyTimeoutId = setTimeout(() => { setCodeCopied(() => false); }, 1000); - return () => clearTimeout(copyTimeoutId.current); + return () => clearTimeout(copyTimeoutId); }, [codeCopied]); return (