diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/variables/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/variables/page.tsx index 6e1b2ab68..d6d2820ab 100644 --- a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/variables/page.tsx +++ b/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/variables/page.tsx @@ -1,21 +1,5 @@ -/* eslint-disable @typescript-eslint/no-unsafe-call */ "use client"; -import { useState } from "react"; -import { IconDots } from "@tabler/icons-react"; -import { z } from "zod"; - -import { Button } from "@ctrlplane/ui/button"; -import { - Form, - FormControl, - FormField, - FormItem, - FormLabel, - useForm, -} from "@ctrlplane/ui/form"; -import { Input } from "@ctrlplane/ui/input"; -import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover"; import { Table, TableBody, @@ -27,179 +11,23 @@ import { import { api } from "~/trpc/react"; -const ValueInput: React.FC<{ - value: any; - onChange: (v: any) => void; - possibleValues: any[]; -}> = ({ possibleValues, value, onChange }) => { - const [open, setOpen] = useState(false); - return ( - - e.stopPropagation()} - className="flex flex-grow gap-2" - > - onChange(e.target.value)} - placeholder={value == null ? "NULL" : ""} - /> - - e.preventDefault()} - > - {possibleValues.map((k) => ( - - ))} - - - ); -}; - const VariableRow: React.FC<{ - variableId: string; varKey: string; description: string; - targetId: string; value?: string | null; - possibleValues: any[]; -}> = ({ variableId, targetId, varKey, description, value, possibleValues }) => { - const [edit, setEdit] = useState(false); - - const form = useForm({ - schema: z.object({ key: z.string(), value: z.string() }), - defaultValues: { key: varKey, value }, - }); - console.log(value); - const set = api.deployment.variable.value.setTarget.useMutation(); - const utils = api.useUtils(); - const onSubmit = form.handleSubmit(async ({ value }) => { - await set.mutateAsync({ value, variableId, targetId }); - await utils.deployment.variable.byTargetId.invalidate(targetId); - setEdit(false); - }); - - if (edit) { - return ( - - -
- -
- ( - - Key - - - - - )} - /> - ( - - Value - -
- -
-
-
- )} - /> - -
- -
- - - -
-
- -
-
- ); - } - - return ( - - -
-
{varKey}
-
-
{description}
-
- - {value ??
NULL
} -
- - - -
- ); -}; +}> = ({ varKey, description, value }) => ( + + +
+
{varKey}
+
+
{description}
+
+ + {value ??
NULL
} +
+
+); export default function VariablePage({ params, @@ -231,12 +59,9 @@ export default function VariablePage({ .map((v) => ( ))} diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/target-drawer/VariablesContent.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/target-drawer/VariablesContent.tsx index ad2df739f..0a645ed15 100644 --- a/apps/webservice/src/app/[workspaceSlug]/_components/target-drawer/VariablesContent.tsx +++ b/apps/webservice/src/app/[workspaceSlug]/_components/target-drawer/VariablesContent.tsx @@ -1,21 +1,5 @@ -/* eslint-disable @typescript-eslint/no-unsafe-call */ "use client"; -import { useState } from "react"; -import { IconDots } from "@tabler/icons-react"; -import { z } from "zod"; - -import { Button } from "@ctrlplane/ui/button"; -import { - Form, - FormControl, - FormField, - FormItem, - FormLabel, - useForm, -} from "@ctrlplane/ui/form"; -import { Input } from "@ctrlplane/ui/input"; -import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover"; import { Table, TableBody, @@ -27,179 +11,23 @@ import { import { api } from "~/trpc/react"; -const ValueInput: React.FC<{ - value: any; - onChange: (v: any) => void; - possibleValues: any[]; -}> = ({ possibleValues, value, onChange }) => { - const [open, setOpen] = useState(false); - return ( - - e.stopPropagation()} - className="flex flex-grow gap-2" - > - onChange(e.target.value)} - placeholder={value == null ? "NULL" : ""} - /> - - e.preventDefault()} - > - {possibleValues.map((k) => ( - - ))} - - - ); -}; - const VariableRow: React.FC<{ - variableId: string; varKey: string; description: string; - targetId: string; value?: string | null; - possibleValues: any[]; -}> = ({ variableId, targetId, varKey, description, value, possibleValues }) => { - const [edit, setEdit] = useState(false); - - const form = useForm({ - schema: z.object({ key: z.string(), value: z.string() }), - defaultValues: { key: varKey, value }, - }); - console.log(value); - const set = api.deployment.variable.value.setTarget.useMutation(); - const utils = api.useUtils(); - const onSubmit = form.handleSubmit(async ({ value }) => { - await set.mutateAsync({ value, variableId, targetId }); - await utils.deployment.variable.byTargetId.invalidate(targetId); - setEdit(false); - }); - - if (edit) { - return ( - - -
- -
- ( - - Key - - - - - )} - /> - ( - - Value - -
- -
-
-
- )} - /> - -
- -
- - - -
-
- -
-
- ); - } - - return ( - - -
-
{varKey}
-
-
{description}
-
- - {value ??
NULL
} -
- - - -
- ); -}; +}> = ({ varKey, description, value }) => ( + + +
+
{varKey}
+
+
{description}
+
+ + {value ??
NULL
} +
+
+); export const VariableContent: React.FC<{ targetId: string }> = ({ targetId, @@ -218,7 +46,6 @@ export const VariableContent: React.FC<{ targetId: string }> = ({ Keys Value - @@ -227,12 +54,9 @@ export const VariableContent: React.FC<{ targetId: string }> = ({ .map((v) => ( ))} diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/ConfigFields.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx similarity index 74% rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/ConfigFields.tsx rename to apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx index 55ffcdbcc..8a1aa7233 100644 --- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/ConfigFields.tsx +++ b/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx @@ -3,6 +3,7 @@ import type { BooleanVariableConfigType, ChoiceVariableConfigType, + NumberVariableConfigType, StringVariableConfigType, VariableConfigType, } from "@ctrlplane/validators/variables"; @@ -10,7 +11,6 @@ import { IconX } from "@tabler/icons-react"; import _ from "lodash"; import { Button } from "@ctrlplane/ui/button"; -import { Checkbox } from "@ctrlplane/ui/checkbox"; import { FormControl, FormItem, FormLabel } from "@ctrlplane/ui/form"; import { Input } from "@ctrlplane/ui/input"; import { @@ -25,26 +25,23 @@ import { Textarea } from "@ctrlplane/ui/textarea"; export const ConfigTypeSelector: React.FC<{ value: string | undefined; onChange: (type: string) => void; -}> = ({ value, onChange }) => { - return ( - - ); -}; +}> = ({ value, onChange }) => ( + +); type ConfigFieldsFC = React.FC<{ config: T; updateConfig: (updates: Partial) => void; - setConfig: (value: T) => void; }>; export const StringConfigFields: ConfigFieldsFC = ({ @@ -71,7 +68,7 @@ export const StringConfigFields: ConfigFieldsFC = ({ - Value + Default Value <> {config.inputType === "text" && ( @@ -79,14 +76,22 @@ export const StringConfigFields: ConfigFieldsFC = ({ type="text" placeholder="Enter text" value={config.default ?? ""} - onChange={(e) => updateConfig({ default: e.target.value })} + onChange={(e) => + updateConfig({ + default: e.target.value !== "" ? e.target.value : undefined, + }) + } /> )} {config.inputType === "text-area" && (