From 413f392865db1024687ffe11cd095a2a64af9391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sat, 9 Apr 2022 17:00:29 +0200
Subject: [PATCH 1/3] feat(ui): add the draft state * on code editor

---
 .../ui/client/components/views/ViewEditor.vue | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index e881b43ac8c3..ff89d1f99a7c 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -10,13 +10,19 @@ const props = defineProps<{
 }>()
 
 const code = ref('')
+const serverCode = shallowRef<string | undefined>(undefined)
+const draft = ref(false)
 watch(() => props.file,
   async() => {
     if (!props.file || !props.file?.filepath) {
       code.value = ''
+      serverCode.value = code.value
+      draft.value = false
       return
     }
     code.value = await client.rpc.readFile(props.file.filepath)
+    serverCode.value = code.value
+    draft.value = false
   },
   { immediate: true },
 )
@@ -44,8 +50,12 @@ useResizeObserver(editor, () => {
   cm.value?.refresh()
 })
 
-watch([cm, failed], () => {
-  if (!cm.value) {
+function codemirrorChanges() {
+  draft.value = serverCode.value !== cm.value!.getValue()
+}
+
+watch([cm, failed], ([cmValue]) => {
+  if (!cmValue) {
     clearListeners()
     return
   }
@@ -57,6 +67,8 @@ watch([cm, failed], () => {
     widgets.length = 0
     handles.length = 0
 
+    cmValue.on('changes', codemirrorChanges)
+
     failed.value.forEach((i) => {
       const e = i.result?.error
       const stacks = (e?.stacks || []).filter(i => i.file && i.file === props.file?.filepath)
@@ -86,13 +98,15 @@ watch([cm, failed], () => {
       }
     })
     if (!hasBeenEdited.value)
-      cm.value?.clearHistory() // Prevent getting access to initial state
+      cmValue.clearHistory() // Prevent getting access to initial state
   }, 100)
 }, { flush: 'post' })
 
 async function onSave(content: string) {
   hasBeenEdited.value = true
   await client.rpc.writeFile(props.file!.filepath, content)
+  serverCode.value = code.value
+  draft.value = false
 }
 </script>
 

From 8e5475f8c53fbfd7747154fbf034ae2cc3773e36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sat, 9 Apr 2022 17:05:41 +0200
Subject: [PATCH 2/3] chore: use content to update the server code

---
 packages/ui/client/components/views/ViewEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index ff89d1f99a7c..363812e1ea70 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -105,7 +105,7 @@ watch([cm, failed], ([cmValue]) => {
 async function onSave(content: string) {
   hasBeenEdited.value = true
   await client.rpc.writeFile(props.file!.filepath, content)
-  serverCode.value = code.value
+  serverCode.value = content
   draft.value = false
 }
 </script>

From 3b65724b4f45dc845ac8bfb0dfb4b2e7845209c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Sat, 9 Apr 2022 17:43:52 +0200
Subject: [PATCH 3/3] chore: add mark on code tab

---
 packages/ui/client/components/FileDetails.vue      | 8 ++++++--
 packages/ui/client/components/views/ViewEditor.vue | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index 3a5c1bd08e4e..b08faa7a52b6 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -8,6 +8,7 @@ import type { ModuleGraphData } from '#types'
 
 const data = ref<ModuleGraphData>({ externalized: [], graph: {}, inlined: [] })
 const graph = ref<ModuleGraph>({ nodes: [], links: [] })
+const draft = ref(false)
 
 debouncedWatch(
   current,
@@ -32,6 +33,9 @@ const changeViewMode = (view: Params['view']) => {
 const consoleCount = computed(() => {
   return currentLogs.value?.reduce((s, { size }) => s + size, 0) ?? 0
 })
+function onDraft(value: boolean) {
+  draft.value = value
+}
 </script>
 
 <template>
@@ -72,7 +76,7 @@ const consoleCount = computed(() => {
           :class="{ 'tab-button-active': viewMode === 'editor' }"
           @click="changeViewMode('editor')"
         >
-          Code
+          {{ draft ? '*&#160;': '' }}Code
         </button>
         <button
           tab-button
@@ -86,7 +90,7 @@ const consoleCount = computed(() => {
 
     <div flex flex-col flex-1 overflow="hidden">
       <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" />
-      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" />
+      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" @draft="onDraft" />
       <ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" />
       <ViewReport v-else-if="!viewMode" :file="current" />
     </div>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 363812e1ea70..9d58bec8a0fb 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -8,6 +8,7 @@ import type { File } from '#types'
 const props = defineProps<{
   file?: File
 }>()
+const emit = defineEmits<{ (event: 'draft', value: boolean): void }>()
 
 const code = ref('')
 const serverCode = shallowRef<string | undefined>(undefined)
@@ -54,6 +55,10 @@ function codemirrorChanges() {
   draft.value = serverCode.value !== cm.value!.getValue()
 }
 
+watch(draft, (d) => {
+  emit('draft', d)
+}, { immediate: true })
+
 watch([cm, failed], ([cmValue]) => {
   if (!cmValue) {
     clearListeners()