Add conversion method from TomlConfigLoader to NetworkConfig to enhance configuration experience (#990)

* add method to create NetworkConfig from TomlConfigLoader
* allow web export/import toml config file and gui edit toml config
* Extract the configuration file dialog into a separate component and allow direct editing of the configuration file on the web

easytier-gui/src/App.vue

@@ -8,5 +8,6 @@ onBeforeMount(async () => {
 </script>
 
 <template>
+  <Toast position="bottom-right" />
   <RouterView />
 </template>

easytier-gui/src/auto-imports.d.ts

@@ -23,6 +23,7 @@ declare global {
   const effectScope: typeof import('vue')['effectScope']
   const event2human: typeof import('./composables/utils')['event2human']
   const generateMenuItem: typeof import('./composables/tray')['generateMenuItem']
+  const generateNetworkConfig: typeof import('./composables/network')['generateNetworkConfig']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
@@ -134,6 +135,7 @@ declare module 'vue' {
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly generateMenuItem: UnwrapRef<typeof import('./composables/tray')['generateMenuItem']>
+    readonly generateNetworkConfig: UnwrapRef<typeof import('./composables/network')['generateNetworkConfig']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>

easytier-gui/src/composables/network.ts

@@ -8,6 +8,10 @@ export async function parseNetworkConfig(cfg: NetworkConfig) {
   return invoke<string>('parse_network_config', { cfg })
 }
 
+export async function generateNetworkConfig(tomlConfig: string) {
+  return invoke<NetworkConfig>('generate_network_config', { tomlConfig })
+}
+
 export async function runNetworkInstance(cfg: NetworkConfig) {
   return invoke('run_network_instance', { cfg })
 }

easytier-gui/src/pages/index.vue

@@ -8,7 +8,7 @@ import { exit } from '@tauri-apps/plugin-process'
 import { open } from '@tauri-apps/plugin-shell'
 import TieredMenu from 'primevue/tieredmenu'
 import { useToast } from 'primevue/usetoast'
-import { NetworkTypes, Config, Status, Utils, I18nUtils } from 'easytier-frontend-lib'
+import { NetworkTypes, Config, Status, Utils, I18nUtils, ConfigEditDialog } from 'easytier-frontend-lib'
 
 import { isAutostart, setLoggingLevel } from '~/composables/network'
 import { useTray } from '~/composables/tray'
@@ -23,7 +23,7 @@ useTray(true)
 
 const items = ref([
   {
-    label: () => t('show_config'),
+    label: () => activeStep.value == "2" ? t('show_config') : t('edit_config'),
     icon: 'pi pi-file-edit',
     command: async () => {
       try {
@@ -262,6 +262,13 @@ onMounted(async () => {
 function isRunning(id: string) {
   return networkStore.networkInstanceIds.includes(id)
 }
+
+async function saveTomlConfig(tomlConfig: string) {
+  const config = await generateNetworkConfig(tomlConfig)
+  networkStore.replaceCurNetwork(config);
+  toast.add({ severity: 'success', detail: t('config_saved'), life: 3000 })
+  visible.value = false
+}
 </script>
 
 <script lang="ts">
@@ -269,17 +276,8 @@ function isRunning(id: string) {
 
 <template>
   <div id="root" class="flex flex-col">
-    <Dialog v-model:visible="visible" modal header="Config File" :style="{ width: '70%' }">
-      <Panel>
-        <ScrollPanel style="width: 100%; height: 300px">
-          <pre>{{ tomlConfig }}</pre>
-        </ScrollPanel>
-      </Panel>
-      <Divider />
-      <div class="flex gap-2 justify-end">
-        <Button type="button" :label="t('close')" @click="visible = false" />
-      </div>
-    </Dialog>
+    <ConfigEditDialog v-model:visible="visible" :cur-network="curNetworkConfig" :readonly="activeStep !== '1'"
+      :save-config="saveTomlConfig" :generate-config="parseNetworkConfig" />
 
     <Dialog v-model:visible="aboutVisible" modal :header="t('about.title')" :style="{ width: '70%' }">
       <About />

easytier-gui/src/stores/network.ts

@@ -48,6 +48,12 @@ export const useNetworkStore = defineStore('networkStore', {
       this.curNetwork = this.networkList[nextCurNetworkIdx]
     },
 
+    replaceCurNetwork(cfg: NetworkTypes.NetworkConfig) {
+      const curNetworkIdx = this.networkList.indexOf(this.curNetwork)
+      this.networkList[curNetworkIdx] = cfg
+      this.curNetwork = cfg
+    },
+
     removeNetworkInstance(instanceId: string) {
       delete this.instances[instanceId]
     },