Canvas: Disable all inputs during non-edit mode
Change-Id: Ifca28e7cb78cb38175d5463311ff3d5006d412f8
diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index 3785d59..e88902d 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -71,7 +71,7 @@
);
}
-export function NodeGatewayHttpsDetails({ id, data }: GatewayHttpsNode) {
+export function NodeGatewayHttpsDetails({ id, data, disabled }: GatewayHttpsNode & { disabled?: boolean }) {
const store = useStateStore();
const env = useEnv();
const form = useForm<z.infer<typeof schema>>({
@@ -301,7 +301,7 @@
<Select
onValueChange={field.onChange}
defaultValue={field.value}
- disabled={data.readonly}
+ disabled={data.readonly || disabled}
>
<FormControl>
<SelectTrigger>
@@ -327,7 +327,7 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="subdomain" {...field} disabled={data.readonly} />
+ <Input placeholder="subdomain" {...field} disabled={data.readonly || disabled} />
</FormControl>
<FormMessage />
</FormItem>
@@ -345,7 +345,7 @@
<Select
onValueChange={field.onChange}
defaultValue={field.value}
- disabled={data.readonly}
+ disabled={data.readonly || disabled}
>
<FormControl>
<SelectTrigger>
@@ -372,7 +372,7 @@
<Select
onValueChange={field.onChange}
defaultValue={field.value}
- disabled={data.readonly}
+ disabled={data.readonly || disabled}
>
<FormControl>
<SelectTrigger>
@@ -403,7 +403,12 @@
render={({ field }) => (
<FormItem>
<div className="flex flex-row gap-1 items-center">
- <Checkbox id="authEnabled" onCheckedChange={field.onChange} checked={field.value} />
+ <Checkbox
+ id="authEnabled"
+ onCheckedChange={field.onChange}
+ checked={field.value}
+ disabled={disabled}
+ />
<Label htmlFor="authEnabled">Enabled</Label>
</div>
<FormMessage />
@@ -418,7 +423,12 @@
<ul>
{(data.auth.groups || []).map((p) => (
<li key={p} className="flex flex-row gap-1 items-center">
- <Button size={"icon"} variant={"ghost"} onClick={() => removeGroup(p)}>
+ <Button
+ size={"icon"}
+ variant={"ghost"}
+ onClick={() => removeGroup(p)}
+ disabled={disabled}
+ >
<XIcon />
</Button>
<div>{p}</div>
@@ -433,20 +443,27 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="group" {...field} />
+ <Input placeholder="group" {...field} disabled={disabled} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
- <Button type="submit">Add Group</Button>
+ <Button type="submit" disabled={disabled}>
+ Add Group
+ </Button>
</form>
</Form>
Auth optional path patterns
<ul>
{(data.auth.noAuthPathPatterns || []).map((p) => (
<li key={p} className="flex flex-row gap-1 items-center">
- <Button size={"icon"} variant={"ghost"} onClick={() => removeNoAuthPathPattern(p)}>
+ <Button
+ size={"icon"}
+ variant={"ghost"}
+ onClick={() => removeNoAuthPathPattern(p)}
+ disabled={disabled}
+ >
<XIcon />
</Button>
<div>{p}</div>
@@ -464,13 +481,15 @@
render={({ field }) => (
<FormItem>
<FormControl>
- <Input placeholder="group" {...field} />
+ <Input placeholder="group" {...field} disabled={disabled} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
- <Button type="submit">Add</Button>
+ <Button type="submit" disabled={disabled}>
+ Add
+ </Button>
</form>
</Form>
</>