Canvas: Check if network supports auto
Change-Id: I19e06b70e3e1a59f6549fcf01b565bad8a7f5695
diff --git a/apps/canvas/back/src/index.ts b/apps/canvas/back/src/index.ts
index 4dc942f..d251998 100644
--- a/apps/canvas/back/src/index.ts
+++ b/apps/canvas/back/src/index.ts
@@ -486,6 +486,7 @@
{
name: "Trial",
domain: "trial.dodoapp.xyz",
+ hasAuth: false,
},
],
services,
diff --git a/apps/canvas/front/src/Gateways.tsx b/apps/canvas/front/src/Gateways.tsx
index 3612a95..0d6bdf4 100644
--- a/apps/canvas/front/src/Gateways.tsx
+++ b/apps/canvas/front/src/Gateways.tsx
@@ -65,7 +65,11 @@
<TooltipProvider>
<Tooltip delayDuration={100} open={open} onOpenChange={setOpen}>
<TooltipTrigger asChild>
- <Button variant="ghost" onClick={copy} className="!gap-1 !p-0 !h-fit">
+ <Button
+ variant="ghost"
+ onClick={g.type === "https" ? () => window.open(content, "_blank") : copy}
+ className="!gap-1 !p-0 !h-fit"
+ >
<AccessType type={g.type} className="w-4 h-4" />
<div className="hover:bg-gray-200 p-x-1">{hidden}</div>
</Button>
diff --git a/apps/canvas/front/src/components/actions.tsx b/apps/canvas/front/src/components/actions.tsx
index 83b40e1..087d96e 100644
--- a/apps/canvas/front/src/components/actions.tsx
+++ b/apps/canvas/front/src/components/actions.tsx
@@ -154,9 +154,8 @@
}, [projectId, instance, store]);
const clear = useCallback(() => {
store.setEdges([]);
- store.setNodes([]);
- instance.setViewport({ x: 0, y: 0, zoom: 1 });
- }, [store, instance]);
+ store.setNodes(store.nodes.filter((n) => n.type === "network"));
+ }, [store]);
const edit = useCallback(async () => {
store.setMode("edit");
}, [store]);
diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index e88902d..81c40c3 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -122,6 +122,12 @@
);
return () => sub.unsubscribe();
}, [id, data, form, store]);
+ const network = useMemo(() => {
+ if (data.network === undefined) {
+ return null;
+ }
+ return env.networks.find((n) => n.domain === data.network)!;
+ }, [data, env]);
const connectedToForm = useForm<z.infer<typeof connectedToSchema>>({
resolver: zodResolver(connectedToSchema),
mode: "onChange",
@@ -394,107 +400,114 @@
/>
</form>
</Form>
- Auth
- <Form {...authEnabledForm}>
- <form className="space-y-2">
- <FormField
- control={authEnabledForm.control}
- name="enabled"
- render={({ field }) => (
- <FormItem>
- <div className="flex flex-row gap-1 items-center">
- <Checkbox
- id="authEnabled"
- onCheckedChange={field.onChange}
- checked={field.value}
- disabled={disabled}
- />
- <Label htmlFor="authEnabled">Enabled</Label>
- </div>
- <FormMessage />
- </FormItem>
- )}
- />
- </form>
- </Form>
- {data && data.auth && data.auth.enabled ? (
+ {network?.hasAuth && (
<>
- Authorized Groups
- <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)}
- disabled={disabled}
- >
- <XIcon />
- </Button>
- <div>{p}</div>
- </li>
- ))}
- </ul>
- <Form {...authGroupForm}>
- <form className="flex flex-row space-x-1" onSubmit={authGroupForm.handleSubmit(onGroupSubmit)}>
+ Auth
+ <Form {...authEnabledForm}>
+ <form className="space-y-2">
<FormField
- control={authGroupForm.control}
- name="group"
+ control={authEnabledForm.control}
+ name="enabled"
render={({ field }) => (
<FormItem>
- <FormControl>
- <Input placeholder="group" {...field} disabled={disabled} />
- </FormControl>
+ <div className="flex flex-row gap-1 items-center">
+ <Checkbox
+ id="authEnabled"
+ onCheckedChange={field.onChange}
+ checked={field.value}
+ disabled={disabled}
+ />
+ <Label htmlFor="authEnabled">Enabled</Label>
+ </div>
<FormMessage />
</FormItem>
)}
/>
- <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)}
- disabled={disabled}
+ {data && data.auth && data.auth.enabled ? (
+ <>
+ Authorized Groups
+ <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)}
+ disabled={disabled}
+ >
+ <XIcon />
+ </Button>
+ <div>{p}</div>
+ </li>
+ ))}
+ </ul>
+ <Form {...authGroupForm}>
+ <form
+ className="flex flex-row space-x-1"
+ onSubmit={authGroupForm.handleSubmit(onGroupSubmit)}
>
- <XIcon />
- </Button>
- <div>{p}</div>
- </li>
- ))}
- </ul>
- <Form {...authNoAuthPatternFrom}>
- <form
- className="flex flex-row space-x-1"
- onSubmit={authNoAuthPatternFrom.handleSubmit(onNoAuthPathPatternSubmit)}
- >
- <FormField
- control={authNoAuthPatternFrom.control}
- name="noAuthPathPattern"
- render={({ field }) => (
- <FormItem>
- <FormControl>
- <Input placeholder="group" {...field} disabled={disabled} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <Button type="submit" disabled={disabled}>
- Add
- </Button>
- </form>
- </Form>
+ <FormField
+ control={authGroupForm.control}
+ name="group"
+ render={({ field }) => (
+ <FormItem>
+ <FormControl>
+ <Input placeholder="group" {...field} disabled={disabled} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <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)}
+ disabled={disabled}
+ >
+ <XIcon />
+ </Button>
+ <div>{p}</div>
+ </li>
+ ))}
+ </ul>
+ <Form {...authNoAuthPatternFrom}>
+ <form
+ className="flex flex-row space-x-1"
+ onSubmit={authNoAuthPatternFrom.handleSubmit(onNoAuthPathPatternSubmit)}
+ >
+ <FormField
+ control={authNoAuthPatternFrom.control}
+ name="noAuthPathPattern"
+ render={({ field }) => (
+ <FormItem>
+ <FormControl>
+ <Input placeholder="group" {...field} disabled={disabled} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ <Button type="submit" disabled={disabled}>
+ Add
+ </Button>
+ </form>
+ </Form>
+ </>
+ ) : (
+ <></>
+ )}
</>
- ) : (
- <></>
)}
</>
);
diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index 94b7fac..7cc3520 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -16,7 +16,7 @@
const hasFatal = messages.some((m) => m.type === "FATAL");
const hasWarning = messages.some((m) => m.type === "WARNING");
const [classes, setClasses] = useState<string[]>([]);
- const [stateClasses, setStateClasses] = useState<string[]>([]);
+ const [_, setStateClasses] = useState<string[]>([]);
useEffect(() => {
const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
classes.push("border");
@@ -49,7 +49,8 @@
<div style={{ position: "absolute", top: "5px", left: "5px" }}>
<Icon type={p.type} />
</div>
- <div
+ {/* TODO(gio): add state badge */}
+ {/* <div
style={{
position: "absolute",
top: "5px",
@@ -59,7 +60,7 @@
height: "5px",
}}
className={stateClasses.join(" ")}
- ></div>
+ ></div> */}
{children}
</div>
);
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index 2f714f7..ec64782 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -398,6 +398,7 @@
z.object({
name: z.string().min(1),
domain: z.string().min(1),
+ hasAuth: z.boolean(),
}),
)
.default([]),