Canvas: Reuse Name component in node details
Change-Id: Ide8094b50f9ac019e7bada9a000100f9233133da
diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index 71fc358..aaa4ecf 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -30,9 +30,10 @@
import { Label } from "./ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Code, Container, Network, Pencil, Variable } from "lucide-react";
-import { Icon } from "./icon";
import { Badge } from "./ui/badge";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./ui/accordion";
+import { Name } from "./node-name";
+import { NodeDetailsProps } from "@/lib/types";
export function NodeApp(node: ServiceNode) {
const { id, selected } = node;
@@ -91,11 +92,11 @@
subdomain: z.string().min(1, "required"),
});
-export function NodeAppDetails({ node, disabled }: { node: ServiceNode; disabled?: boolean }) {
+export function NodeAppDetails({ node, disabled, showName = true }: NodeDetailsProps<ServiceNode>) {
const { data } = node;
return (
<>
- <Name node={node} disabled={disabled} />
+ {showName ? <Name node={node} disabled={disabled} /> : null}
<Tabs defaultValue="runtime">
<TabsList className="w-full flex flex-row justify-between">
<TabsTrigger value="runtime">
@@ -166,46 +167,6 @@
);
}
-function Name({ node, disabled }: { node: ServiceNode; disabled?: boolean }): React.ReactNode {
- const { id, data } = node;
- const store = useStateStore();
- const [isEditing, setIsEditing] = useState(false);
- useEffect(() => {
- if (data.label === "" && !disabled) {
- setIsEditing(true);
- }
- }, [data.label, disabled]);
- return (
- <div className="flex flex-row gap-1 items-center">
- <Icon type="app" />
- {isEditing ? (
- <Input
- placeholder="Name"
- value={data.label}
- onChange={(e) => store.updateNodeData(id, { label: e.target.value })}
- onBlur={() => {
- if (data.label !== "") {
- setIsEditing(false);
- }
- }}
- autoFocus={true}
- />
- ) : (
- <h3
- className="text-lg font-bold cursor-text select-none hover:outline-solid hover:outline-2 hover:outline-gray-200"
- onClick={() => {
- if (!disabled) {
- setIsEditing(true);
- }
- }}
- >
- {data.label}
- </h3>
- )}
- </div>
- );
-}
-
function Runtime({ node, disabled }: { node: ServiceNode; disabled?: boolean }): React.ReactNode {
const { id, data } = node;
const store = useStateStore();