botway(core): remove flow layout, support railway volumes

core/app/api/ce/enable/route.ts

@@ -63,7 +63,7 @@ export async function POST(request: Request) {
             }
             volumes: [
               {
-                mountPath: "/home/coder"
+                mountPath: "/root"
                 projectId: "${projectId.data}"
               }
             ]

core/app/api/integrations/add/route.ts

@@ -53,6 +53,16 @@ export async function POST(request: Request) {
     }
   }
 
+  const volumes = body.has_volume
+    ? `
+    volumes: [
+      {
+        mountPath: "${body.volume_path}"
+        projectId: "${projectId.data}"
+      }
+    ]`
+    : "";
+
   const templateQuery = `
     mutation {
       templateDeploy(input: {
@@ -71,6 +81,7 @@ export async function POST(request: Request) {
             }"
             template: "https://github.com/${body.template_repo}"
             ${vars}
+            ${volumes}
           }
         ]
 

core/app/layout.tsx

@@ -4,7 +4,6 @@ import createClient from "@/supabase/server";
 import { AuthProvider } from "@/supabase/auth/provider";
 import "@/assets/main.scss";
 import "react-cmdk/dist/cmdk.css";
-import "reactflow/dist/style.css";
 
 // do not cache this layout
 export const revalidate = 0;

core/app/project/[id]/code-editor/page.tsx

@@ -239,7 +239,7 @@ const CE = ({ user, projectId }: any) => {
                                         children
                                       />
                                     )}
-                                    <span className="truncate">Save</span>
+                                    <span className="truncate">Done</span>
                                   </button>
                                 </div>
                               </div>

core/app/project/[id]/integrations/[slug]/page.tsx

@@ -100,6 +100,8 @@ const Project = ({ user, projectId, slug }: any) => {
         vars,
         def_vars: int.def_variables,
         plugin: int.plugin,
+        has_volume: int.has_volume,
+        volume_path: int.volume_path,
       };
 
       const newInt = await fetcher("/api/integrations/add", {

core/app/project/[id]/page.tsx

@@ -10,24 +10,13 @@ import {
   QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
-import ReactFlow, { Node, useNodesState, ConnectionLineType } from "reactflow";
-import NodeCustom from "./nodes/node";
-import NodeLoading from "./nodes/node-loading";
 import { fetcher } from "@/tools/fetch";
-import dagre from "dagre";
-
-const dagreGraph = new dagre.graphlib.Graph();
-dagreGraph.setDefaultEdgeLabel(() => ({}));
+import { ContainerIcon } from "@primer/octicons-react";
 
 export const revalidate = 0;
 
 const queryClient = new QueryClient();
 
-const nodeTypes = {
-  custom: NodeCustom,
-  loading: NodeLoading,
-};
-
 const Project = ({ user, projectId }: any) => {
   const fetchServices = async () => {
     const services = await fetcher(`/api/projects/services`, {
@@ -51,92 +40,18 @@ const Project = ({ user, projectId }: any) => {
     }
   );
 
-  let initNodes: Node<any, string | undefined>[] = [];
-
-  const nodeWidth = 172;
-  const nodeHeight = 36;
-
-  const getLayoutedElements = (nodes: any, direction = "TB") => {
-    const isHorizontal = direction === "LR";
-    dagreGraph.setGraph({ rankdir: direction });
-
-    nodes.forEach((node: any) => {
-      dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-    });
-
-    dagre.layout(dagreGraph);
-
-    nodes.forEach((node: any) => {
-      const nodeWithPosition = dagreGraph.node(node.id);
-
-      node.targetPosition = isHorizontal ? "left" : "top";
-      node.sourcePosition = isHorizontal ? "right" : "bottom";
-
-      // We are shifting the dagre node position (anchor=center center) to the top left
-      // so it matches the React Flow node anchor point (top left).
-      node.position = {
-        x: (nodeWithPosition.x * (services?.services.length - 2)) / 2,
-        y: 2 * (nodeWithPosition.y * services?.services.length),
-      };
-
-      return node;
-    });
-
-    return { nodes };
-  };
-
-  const position = { x: 0, y: 0 };
-
   services?.services.map((node: any, index: any) => {
-    initNodes.push({
-      id: `"${index + 1}"`,
-      type: "custom",
-      data: {
-        name: node.node.name,
-      },
-      position,
-    });
-  });
-
-  services?.plugins.map((node: any, index: any) => {
-    initNodes.push({
-      id: `"${index + services?.services.length + 1}"`,
-      type: "custom",
-      data: {
-        name: node.node.name,
-      },
-      position,
-    });
+    // initNodes.push({
+    //   id: `"${index + 1}"`,
+    //   type: "custom",
+    //   data: {
+    //     name: node.node.name,
+    //   },
+    //   position,
+    // });
   });
 
-  const initNodesLoading = [
-    {
-      id: "1",
-      type: "loading",
-      data: {},
-      position: { x: 0, y: 50 },
-    },
-  ];
-
-  const { nodes: layoutedNodes } = getLayoutedElements(initNodes);
-
-  const Flow = () => {
-    const [nodes, setNodes, onNodesChange] = useNodesState(
-      servicesIsLoading ? initNodesLoading : layoutedNodes
-    );
-
-    return (
-      <ReactFlow
-        nodes={nodes}
-        connectionLineType={ConnectionLineType.SmoothStep}
-        onNodesChange={onNodesChange}
-        nodeTypes={nodeTypes}
-        fitView
-        nodesDraggable={false}
-        className=""
-      />
-    );
-  };
+  services?.plugins.map((node: any, index: any) => {});
 
   const fetchProject = async () => {
     const { data: project } = await supabase
@@ -170,11 +85,17 @@ const Project = ({ user, projectId }: any) => {
           projectName={project?.name}
           projectRWID={project?.railway_project_id}
           grid={true}
-          noMargin={true}
         >
-          <div className="w-screen h-screen">
-            <Flow />
+          <div className="mx-6 my-16 flex items-center space-x-6">
+            <div className="">
+              <img src="https://cdn-botway.deno.dev/icons/bot.svg" width={67} />
+            </div>
+            <div>
+              <h1 className="text-lg text-white">{project?.name}</h1>
+              <h1 className="text-base text-gray-400">Bot Project</h1>
+            </div>
           </div>
+          <div className="mx-6"></div>
         </ProjectLayout>
       )}
     </>

core/package.json

@@ -21,7 +21,6 @@
     "boring-avatars": "^1.10.1",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",
-    "dagre": "^0.8.5",
     "encoding": "^0.1.13",
     "flowbite": "^1.6.6",
     "flowbite-react": "^0.4.9",
@@ -38,7 +37,6 @@
     "react-cmdk": "^1.3.9",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
-    "reactflow": "^11.7.4",
     "sass": "^1.63.6",
     "slug": "^8.2.2",
     "swr": "^2.2.0",
@@ -49,7 +47,6 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "@types/bcryptjs": "^2.4.2",
-    "@types/dagre": "^0.7.48",
     "@types/marked": "^5.0.0",
     "@types/node": "^20.3.1",
     "@types/react": "18.2.14",