update node source

frontend/src/scenes/frame/frameLogic.ts

@@ -39,6 +39,12 @@ export const frameLogic = kea<frameLogicType>([
     refreshFrame: true,
     restartFrame: true,
     redeployFrame: true,
+    updateNodeSource: (sceneId: string, nodeId: string, file: string, source: string) => ({
+      sceneId,
+      nodeId,
+      file,
+      source,
+    }),
   }),
   forms(({ actions, values }) => ({
     frameForm: {

frontend/src/scenes/frame/panels/EditApp/EditApp.tsx

@@ -13,15 +13,20 @@ interface EditAppProps {
 
 export function EditApp({ sceneId, nodeId, nodeData }: EditAppProps) {
   const { id: frameId } = useValues(frameLogic)
+  const { updateNodeSource } = useActions(frameLogic)
   const logicProps: EditAppLogicProps = {
     frameId,
     sceneId,
     nodeId,
     keyword: nodeData.keyword,
     sources: nodeData.sources,
+    onChange: (file, source) => {
+      updateNodeSource(sceneId, nodeId, file, source)
+      // TODO: this does nothing
+    },
   }
-  const { sources, sourcesLoading, activeFile } = useValues(editAppLogic(logicProps))
-  const { setActiveFile } = useActions(editAppLogic(logicProps))
+  const { sources, sourcesLoading, activeFile, hasChanges, configJson } = useValues(editAppLogic(logicProps))
+  const { setActiveFile, updateFile } = useActions(editAppLogic(logicProps))
 
   function setEditorTheme(monaco: any) {
     monaco.editor.defineTheme('darkframe', {
@@ -36,11 +41,23 @@ export function EditApp({ sceneId, nodeId, nodeData }: EditAppProps) {
     return <div>Loading...</div>
   }
 
+  const name = configJson?.name || nodeData.keyword
+
   return (
     <div className="flex flex-col gap-2 max-h-full h-full max-w-full w-full">
       <div className="bg-gray-700 p-2 border-gray-500">
-        <strong>Note!</strong> You're editing the system app <strong>{nodeData.keyword}</strong>. If you make any
-        changes, the app will be forked onto the current scene.
+        {nodeData.keyword ? (
+          hasChanges ? (
+            <>
+              <strong>{name}</strong> will be forked onto the current scene when you save
+            </>
+          ) : (
+            <>
+              <strong>Note!</strong> You're editing the system app <strong>{name}</strong>. If you make any changes, the
+              app will be forked onto the current scene.
+            </>
+          )
+        ) : null}
       </div>
       <div className="flex flex-row gap-2 max-h-full h-full max-w-full w-full">
         <div className="max-w-40 space-y-1">
@@ -60,12 +77,8 @@ export function EditApp({ sceneId, nodeId, nodeData }: EditAppProps) {
             value={sources[activeFile] ?? sources[Object.keys(sources)[0]] ?? ''}
             theme="darkframe"
             beforeMount={setEditorTheme}
-            onChange={() => {}}
-            options={{
-              minimap: {
-                enabled: false, // This line disables the minimap
-              },
-            }}
+            onChange={(value) => updateFile(activeFile, value ?? '')}
+            options={{ minimap: { enabled: false } }}
           />
         </div>
       </div>

frontend/src/scenes/frame/panels/EditApp/editAppLogic.tsx

@@ -1,4 +1,4 @@
-import { actions, afterMount, kea, key, path, props, reducers } from 'kea'
+import { actions, afterMount, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 
 import type { editAppLogicType } from './editAppLogicType'
 import { loaders } from 'kea-loaders'
@@ -9,33 +9,74 @@ export interface EditAppLogicProps {
   nodeId: string
   keyword: string
   sources?: Record<string, string>
+  onChange?: (file: string, source: string) => void
 }
 
 export const editAppLogic = kea<editAppLogicType>([
   path(['src', 'scenes', 'frame', 'panels', 'EditApp', 'editAppLogic']),
   props({} as EditAppLogicProps),
   key((props) => `${props.frameId}:${props.sceneId}.${props.nodeId}.${props.keyword}`),
-  actions({ setActiveFile: (file: string) => ({ file }) }),
+  actions({
+    setActiveFile: (file: string) => ({ file }),
+    updateFile: (file: string, source: string) => ({ file, source }),
+  }),
   loaders(({ props, values }) => ({
     sources: [
       props.sources || ({} as Record<string, string>),
       {
         loadSources: async () => {
-          if (!props.keyword) return values.sources
+          if (!props.keyword) {
+            return values.sources
+          }
           const response = await fetch(`/api/apps/source/${encodeURIComponent(props.keyword as string)}`)
           return await response.json()
         },
       },
     ],
   })),
-  reducers({
+  reducers(({ props }) => ({
     activeFile: [
       'frame.py' as string,
       {
         setActiveFile: (state, { file }) => file,
       },
     ],
+    sources: {
+      updateFile: (state, { file, source }) => ({ ...state, [file]: source }),
+    },
+    initialSources: [
+      props.sources ? structuredClone(props.sources) : ({} as Record<string, string>),
+      {
+        loadSourcesSuccess: (_, { sources }) => sources,
+      },
+    ],
+  })),
+  selectors({
+    hasChanges: [
+      (s) => [s.sources, s.sourcesLoading, s.initialSources],
+      (sources, sourcesLoading, initialSources) => {
+        if (sourcesLoading) {
+          return false
+        }
+        return Object.entries(sources).some(([file, source]) => source !== initialSources[file])
+      },
+    ],
+    configJson: [
+      (s) => [s.sources],
+      (sources): Record<string, any> | null => {
+        try {
+          return JSON.parse(sources['config.json'])
+        } catch (e) {
+          return null
+        }
+      },
+    ],
   }),
+  listeners(({ props }) => ({
+    updateFile: ({ file, source }) => {
+      props.onChange?.(file, source)
+    },
+  })),
   afterMount(({ actions, props }) => {
     if (props.keyword) {
       actions.loadSources()