Canvas: Disable all inputs during non-edit mode
Change-Id: Ifca28e7cb78cb38175d5463311ff3d5006d412f8
diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index f01bd98..7516d19 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -91,7 +91,7 @@
subdomain: z.string().min(1, "required"),
});
-export function NodeAppDetails({ id, data }: ServiceNode) {
+export function NodeAppDetails({ id, data, disabled }: ServiceNode & { disabled?: boolean }) {
const store = useStateStore();
const nodes = useNodes<AppNode>();
const env = useEnv();
@@ -640,6 +640,7 @@
className="lowercase"
{...field}
ref={focus(field, "name")}
+ disabled={disabled}
/>
</FormControl>
<FormMessage />
@@ -651,7 +652,12 @@
name="type"
render={({ field }) => (
<FormItem>
- <Select onValueChange={field.onChange} defaultValue={field.value} {...typeProps}>
+ <Select
+ onValueChange={field.onChange}
+ defaultValue={field.value}
+ {...typeProps}
+ disabled={disabled}
+ >
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Runtime" />
@@ -679,7 +685,7 @@
name="id"
render={({ field }) => (
<FormItem>
- <Select onValueChange={field.onChange} defaultValue={field.value}>
+ <Select onValueChange={field.onChange} defaultValue={field.value} disabled={disabled}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Repository" />
@@ -708,7 +714,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="master" className="lowercase" {...field} />
+ <Input placeholder="master" className="lowercase" {...field} disabled={disabled} />
</FormControl>
<FormMessage />
</FormItem>
@@ -720,7 +726,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="/" {...field} />
+ <Input placeholder="/" {...field} disabled={disabled} />
</FormControl>
<FormMessage />
</FormItem>
@@ -739,6 +745,7 @@
variant={"ghost"}
onClick={() => removePort(p.id)}
className="w-4 h-4"
+ disabled={disabled}
>
<XIcon />
</Button>
@@ -756,7 +763,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="name" className="lowercase" {...field} />
+ <Input placeholder="name" className="lowercase" {...field} disabled={disabled} />
</FormControl>
<FormMessage />
</FormItem>
@@ -768,13 +775,15 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="value" {...field} />
+ <Input placeholder="value" {...field} disabled={disabled} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
- <Button type="submit">Add Port</Button>
+ <Button type="submit" disabled={disabled}>
+ Add Port
+ </Button>
</form>
</Form>
Env Vars
@@ -794,6 +803,7 @@
onKeyUp={saveAliasOnEnter(v)}
onBlur={saveAliasOnBlur(v)}
autoFocus={true}
+ disabled={disabled}
/>
</li>
);
@@ -823,6 +833,7 @@
placeholder="new line separated list of commands to run before running the service"
value={data.preBuildCommands}
onChange={setPreBuildCommands}
+ disabled={disabled}
/>
Dev
<Form {...devForm}>
@@ -833,7 +844,12 @@
render={({ field }) => (
<FormItem>
<div className="flex flex-row gap-1 items-center">
- <Checkbox id="devEnabled" onCheckedChange={field.onChange} checked={field.value} />
+ <Checkbox
+ id="devEnabled"
+ onCheckedChange={field.onChange}
+ checked={field.value}
+ disabled={disabled}
+ />
<Label htmlFor="devEnabled">Enabled</Label>
</div>
<FormMessage />
@@ -850,7 +866,11 @@
name="network"
render={({ field }) => (
<FormItem>
- <Select onValueChange={field.onChange} defaultValue={field.value}>
+ <Select
+ onValueChange={field.onChange}
+ defaultValue={field.value}
+ disabled={disabled}
+ >
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Network" />
@@ -875,7 +895,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="subdomain" {...field} />
+ <Input placeholder="subdomain" {...field} disabled={disabled} />
</FormControl>
<FormMessage />
</FormItem>