Canvas: UI polish
Change-Id: I3c7ae930917213dee8dddffdd9b14be7a80dab0a
diff --git a/apps/canvas/front/src/Integrations.tsx b/apps/canvas/front/src/Integrations.tsx
index 00fe9f1..ab3e6c9 100644
--- a/apps/canvas/front/src/Integrations.tsx
+++ b/apps/canvas/front/src/Integrations.tsx
@@ -67,7 +67,7 @@
};
return (
- <div className="space-y-6">
+ <div className="px-5 space-y-6">
<div>
<h3 className="text-md font-medium mb-2">GitHub</h3>
<div className="space-y-4">
diff --git a/apps/canvas/front/src/components/icon.tsx b/apps/canvas/front/src/components/icon.tsx
index fd01746..c99e4f5 100644
--- a/apps/canvas/front/src/components/icon.tsx
+++ b/apps/canvas/front/src/components/icon.tsx
@@ -1,16 +1,22 @@
import { NodeType } from "@/lib/state";
-import { MdStorage } from "react-icons/md";
-import { SiGithub, SiIngress, SiJunipernetworks, SiMongodb, SiPostgresql, SiServerfault } from "react-icons/si";
+import { ReactElement } from "react";
+import { SiGithub, SiMongodb, SiPostgresql } from "react-icons/si";
+import { GrServices } from "react-icons/gr";
+import { GoFileDirectoryFill } from "react-icons/go";
+import { TbWorldWww } from "react-icons/tb";
+import { PiNetwork } from "react-icons/pi";
+import { AiOutlineGlobal } from "react-icons/ai";
-export function Icon(type: NodeType | undefined): React.ReactElement {
+export function Icon(type: NodeType | undefined): ReactElement {
switch (type) {
- case "app": return (<SiServerfault />);
+ case "app": return (<GrServices />);
case "github": return (<SiGithub />);
- case "gateway-https": return (<SiIngress />);
- case "gateway-tcp": return (<SiJunipernetworks />);
+ case "gateway-https": return (<TbWorldWww />);
+ case "gateway-tcp": return (<PiNetwork />);
case "mongodb": return (<SiMongodb />);
case "postgresql": return (<SiPostgresql />);
- case "volume": return (<MdStorage />);
- case undefined: throw new Error("MUST NOT REACH!");
+ case "volume": return (<GoFileDirectoryFill />);
+ case "network": return (<AiOutlineGlobal />);
+ default: throw new Error(`MUST NOT REACH! ${type}`);
}
}
\ No newline at end of file
diff --git a/apps/canvas/front/src/components/resources.tsx b/apps/canvas/front/src/components/resources.tsx
index 085301c..36118db 100644
--- a/apps/canvas/front/src/components/resources.tsx
+++ b/apps/canvas/front/src/components/resources.tsx
@@ -4,11 +4,11 @@
import { useCallback, useState } from "react";
import { Accordion, AccordionTrigger } from "./ui/accordion";
import { AccordionContent, AccordionItem } from "@radix-ui/react-accordion";
-import { useCategories } from "@/lib/state";
+import { NodeType, useCategories } from "@/lib/state";
import { CategoryItem } from "@/lib/categories";
import { Icon } from "./icon";
-function addResource(i: CategoryItem, flow: ReactFlowInstance) {
+function addResource(i: CategoryItem<NodeType>, flow: ReactFlowInstance) {
flow.addNodes({
id: uuidv4(),
position: {
@@ -24,7 +24,7 @@
export function Resources() {
const flow = useReactFlow();
const categories = useCategories();
- const onResourceAdd = useCallback((item: CategoryItem) => {
+ const onResourceAdd = useCallback((item: CategoryItem<NodeType>) => {
return () => addResource(item, flow);
}, [flow]);
const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));
diff --git a/apps/canvas/front/src/lib/categories.ts b/apps/canvas/front/src/lib/categories.ts
index 6330536..17e786e 100644
--- a/apps/canvas/front/src/lib/categories.ts
+++ b/apps/canvas/front/src/lib/categories.ts
@@ -28,20 +28,6 @@
...defaultInit,
},
type: "github",
- },
- {
- title: "Gitlab",
- init: {
- ...defaultInit,
- },
- type: "github",
- },
- {
- title: "Create new",
- init: {
- ...defaultInit,
- },
- type: "github",
}
]
},
@@ -61,7 +47,7 @@
title: "Storage",
items: [
{
- title: "Volume",
+ title: "File system",
init: {
...defaultInit,
},