Canvas: Process pre-build commands

Change-Id: I236f154c430b9ea29a4e0e491e1de27e78438440
diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index 3598a4d..3eea939 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -12,6 +12,7 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 import { PencilIcon, XIcon } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import { Textarea } from "./ui/textarea";
 
 export function NodeApp(node: ServiceNode) {
   const { id, selected } = node;
@@ -270,6 +271,11 @@
       envVars: (data.envVars || []).filter((ev) => !(ev.source === null && "portId" in ev && ev.portId === portId)),
     });
   }, [id, data, store]);
+  const setPreBuildCommands = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    store.updateNodeData<"app">(id, {
+      preBuildCommands: e.currentTarget.value,
+    });
+  }, [id, store]);
   return (
     <>
       <Form {...form}>
@@ -368,5 +374,7 @@
           }
         })}
       </ul>
+      Pre-Build Commands
+      <Textarea placeholder="new line separated list of commands to run before running the service" value={data.preBuildCommands} onChange={setPreBuildCommands} />
     </>);
 }
\ No newline at end of file