Open files in editor (#115)

* Attempt at autocompleting frankdoc elements

* Editor now suggests frank-elements when opening a tag: '<' and inserts any mandatory attributes when the suggestion is inserted. Also suggests attribute names when typing within a tag

* Doesnt show attribute suggestions when inside of quotation marks

* Restructed backend and endpoints to now point to a projectname/filename for fetching configurations.

* Can now update xmlcontent in memory

* Fixed issue with sidebar close button not properly showing up, moved savebutton to sidebar

* Applied feedback from review

* Forgot two instances of assuming a project was loaded in when that was not necessarily true, also removed the default tab

Author: Daan0709

src/main/frontend/app/app.css

@@ -54,6 +54,10 @@ body {
   }
 }
 
+.monaco-editor .highlight-line {
+  @apply bg-yellow-200/30 border-l-4 border-yellow-400 transition-colors;
+}
+
 :root {
   /* Allotment Styling */
   --focus-border: var(--color-brand);

src/main/frontend/app/routes/builder/builder-structure.tsx

@@ -54,6 +54,7 @@ export default function BuilderStructure() {
       setIsLoading: state.setIsLoading,
     })),
   )
+  const project = useProjectStore.getState().project
   const [searchTerm, setSearchTerm] = useState('')
   const tree = useRef<TreeRef>(null)
   const dataProviderReference = useRef(new BuilderFilesDataProvider([]))
@@ -73,12 +74,14 @@ export default function BuilderStructure() {
       try {
         const loaded: ConfigWithAdapters[] = await Promise.all(
           configurationNames.map(async (configName) => {
-            const adapterNames = await getAdapterNamesFromConfiguration(configName)
+            if (!project) return
+            const adapterNames = await getAdapterNamesFromConfiguration(project.name, configName)
 
             // Fetch listener name for each adapter
             const adapters = await Promise.all(
               adapterNames.map(async (adapterName) => {
-                const listenerName = await getAdapterListenerType(configName, adapterName)
+                const listenerName = await getAdapterListenerType(project.name, configName, adapterName)
+                console.log(listenerName)
                 return { adapterName, listenerName }
               }),
             )

src/main/frontend/app/routes/builder/canvas/flow.tsx

@@ -27,10 +27,11 @@ import { convertAdapterXmlToJson, getAdapterFromConfiguration } from '~/routes/b
 import { exportFlowToXml } from '~/routes/builder/flow-to-xml-parser'
 import useNodeContextStore from '~/stores/node-context-store'
 import CreateNodeModal from '~/components/flow/create-node-modal'
+import { useProjectStore } from "~/stores/project-store";
 
 export type FlowNode = FrankNode | ExitNode | StickyNote | GroupNode | Node
 
-const NodeContextMenuContext = createContext<(visible: boolean) => void>(() => {})
+const NodeContextMenuContext = createContext<(visible: boolean) => void>(() => { })
 export const useNodeContextMenu = () => useContext(NodeContextMenuContext)
 
 const selector = (state: FlowState) => ({
@@ -68,6 +69,7 @@ function FlowCanvas({ showNodeContextMenu }: Readonly<{ showNodeContextMenu: (b:
   const { nodes, edges, viewport, onNodesChange, onEdgesChange, onConnect, onReconnect } = useFlowStore(
     useShallow(selector),
   )
+  const project = useProjectStore.getState().project
 
   const sourceInfoReference = useRef<{
     nodeId: string | null
@@ -430,7 +432,8 @@ function FlowCanvas({ showNodeContextMenu }: Readonly<{ showNodeContextMenu: (b:
       if (tab.flowJson && Object.keys(tab.flowJson).length > 0) {
         restoreFlowFromTab(tab.value)
       } else if (tab.configurationName && tab.value) {
-        const adapter = await getAdapterFromConfiguration(tab.configurationName, tab.value)
+        if (!project) return
+        const adapter = await getAdapterFromConfiguration(project.name, tab.configurationName, tab.value)
         if (!adapter) return
         const adapterJson = await convertAdapterXmlToJson(adapter)
         flowStore.setEdges(adapterJson.edges)

src/main/frontend/app/routes/builder/xml-to-json-parser.ts

@@ -8,21 +8,22 @@ interface IdCounter {
   current: number
 }
 
-export async function getXmlString(filename: string): Promise<string> {
+export async function getXmlString(projectName: string, filename: string): Promise<string> {
   try {
-    const response = await fetch(`/configurations/${filename}`)
+    const response = await fetch(`/projects/${projectName}/${filename}`);
     if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`)
+      throw new Error(`HTTP error! Status: ${response.status}`);
     }
-    const data = await response.json()
-    return data.xmlContent
+
+    const data = await response.json();
+    return data.xmlContent;
   } catch (error) {
-    throw new Error(`Failed to fetch XML file: ${error}`)
+    throw new Error(`Failed to fetch XML file for ${projectName}/${filename}: ${error}`);
   }
 }
 
-export async function getAdapterNamesFromConfiguration(filename: string): Promise<string[]> {
-  const xmlString = await getXmlString(filename)
+export async function getAdapterNamesFromConfiguration(projectName: string, filename: string): Promise<string[]> {
+  const xmlString = await getXmlString(projectName, filename)
 
   return new Promise((resolve, reject) => {
     const adapterNames: string[] = []
@@ -50,8 +51,8 @@ export async function getAdapterNamesFromConfiguration(filename: string): Promis
   })
 }
 
-export async function getAdapterFromConfiguration(filename: string, adapterName: string): Promise<Element | null> {
-  const xmlString = await getXmlString(filename)
+export async function getAdapterFromConfiguration(projectname: string, filename: string, adapterName: string): Promise<Element | null> {
+  const xmlString = await getXmlString(projectname, filename)
   const parser = new DOMParser()
   const xmlDoc = parser.parseFromString(xmlString, 'text/xml')
 
@@ -65,8 +66,12 @@ export async function getAdapterFromConfiguration(filename: string, adapterName:
   return null
 }
 
-export async function getAdapterListenerType(filename: string, adapterName: string): Promise<string | null> {
-  const adapterElement = await getAdapterFromConfiguration(filename, adapterName)
+export async function getAdapterListenerType(
+  projectName: string,
+  filename: string,
+  adapterName: string,
+): Promise<string | null> {
+  const adapterElement = await getAdapterFromConfiguration(projectName, filename, adapterName)
   if (!adapterElement) return null
   // Look through all child elements inside the adapter
   const children = adapterElement.querySelectorAll('*')

src/main/frontend/app/routes/editor/editor-files.tsx

@@ -48,6 +48,7 @@ export default function EditorFiles() {
       setIsLoading: state.setIsLoading,
     })),
   )
+  const project = useProjectStore.getState().project
   const [searchTerm, setSearchTerm] = useState('')
   const tree = useRef<TreeRef>(null)
   const dataProviderReference = useRef(new BuilderFilesDataProvider([]))
@@ -68,7 +69,8 @@ export default function EditorFiles() {
       try {
         const loaded: ConfigWithAdapters[] = await Promise.all(
           configurationNames.map(async (configName) => {
-            const adapterNames = await getAdapterNamesFromConfiguration(configName)
+            if (!project) return
+            const adapterNames = await getAdapterNamesFromConfiguration(project.name, configName)
             return { configName, adapterNames }
           }),
         )