Add config editor

Signed-off-by: Phillip Kruger <[email protected]>
quarkusio · May 29, 2023 · d4112f6 · d4112f6
1 parent 2fe1f5f
commit d4112f6
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 24 deletions.
diff --git a/...ttp/deployment/src/main/java/io/quarkus/devui/deployment/menu/ConfigurationProcessor.java b/...ttp/deployment/src/main/java/io/quarkus/devui/deployment/menu/ConfigurationProcessor.java
@@ -13,8 +13,10 @@
 import io.quarkus.deployment.annotations.BuildStep;
 import io.quarkus.deployment.builditem.ConfigDescriptionBuildItem;
 import io.quarkus.deployment.builditem.DevServicesLauncherConfigResultBuildItem;
+import io.quarkus.dev.console.DevConsoleManager;
 import io.quarkus.devui.deployment.InternalPageBuildItem;
 import io.quarkus.devui.spi.page.Page;
+import io.quarkus.vertx.http.deployment.devmode.console.ConfigEditorProcessor;
 import io.quarkus.vertx.http.runtime.devmode.ConfigDescription;
 
 /**
@@ -43,6 +45,13 @@ InternalPageBuildItem createConfigurationPages(List<ConfigDescriptionBuildItem>
         configurationPages.addBuildTimeData("allConfiguration",
                 getAllConfig(configDescriptionBuildItems, devServicesLauncherConfig));
 
+        // TODO: Move method to JsonRPCProvidersBuildItem method once that PR is in
+        DevConsoleManager.register("config-set-properties", value -> {
+            String content = value.get("content");
+            ConfigEditorProcessor.setConfig(content);
+            return null;
+        });
+
         return configurationPages;
     }
 

diff --git a/...src/main/java/io/quarkus/vertx/http/deployment/devmode/console/ConfigEditorProcessor.java b/...src/main/java/io/quarkus/vertx/http/deployment/devmode/console/ConfigEditorProcessor.java
@@ -262,7 +262,7 @@ public static void updateConfig(Map<String, String> values) {
         }
     }
 
-    static void setConfig(String value) {
+    public static void setConfig(String value) {
         try {
             Path configPath = getConfigPath();
             try (BufferedWriter writer = Files.newBufferedWriter(configPath)) {

diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-code-block.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-code-block.js
@@ -14,7 +14,8 @@ export class QuiCodeBlock extends observeState(LitElement) {
     static properties = {
         mode: {type: String}, // yaml / js / etc
         src: {type: String}, // src (optional)
-        content: {type: String, reflect: true }, // content (optional)
+        content: {type: String}, // content (optional),
+        value: {type: String, reflect: true }, // up to date value
         editable: {type: Boolean} // readonly
     };
 
@@ -23,6 +24,7 @@ export class QuiCodeBlock extends observeState(LitElement) {
         this.mode = null;
         this.src = null;
         this.content = null;
+        this.value = null;
         this.editable = false;
     }
 
@@ -34,15 +36,15 @@ export class QuiCodeBlock extends observeState(LitElement) {
                                 src='${this.src || nothing}'
                                 theme='base16-${themeState.theme.name}'
                                 ?readonly=${!this.editable}
-                                @focusout=${this._persistValue}>
+                                @keyup=${this._persistValue}>
                         <link rel='stylesheet' href='${currentPath}/_static/wc-codemirror/theme/base16-${themeState.theme.name}.css'>
                         ${this._renderContent()}
                     </wc-codemirror>`;
 
     }
 
     _persistValue(event){
-        this.content = event.target.value;
+        this.value = event.target.value;
     }
 
     _renderContent(){

diff --git a/...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration-editor.js b/...ons/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration-editor.js
@@ -1,8 +1,10 @@
 import { LitElement, html, css } from 'lit';
 import { JsonRpc } from 'jsonrpc';
+import { notifier } from 'notifier';
 import 'qui-code-block';
 import '@vaadin/button';
 import '@vaadin/icon';
+import '@vaadin/progress-bar';
 
 /**
  * This component allows users to change the configuration in an online editor
@@ -26,14 +28,16 @@ export class QwcConfigurationEditor extends LitElement {
     static properties = {      
         _type: {state: true},
         _value: {state: true},
-        _error: {state: true}
+        _error: {state: true},
+        _inProgress: {state: true, type: Boolean}
     };
 
     constructor() {
         super();
         this._error = null;
         this._value = null;
         this._type = null;
+        this._inProgress = false;
     }
 
     connectedCallback() {
@@ -46,6 +50,20 @@ export class QwcConfigurationEditor extends LitElement {
                 this._value = e.result.value;
             }
         });
+
+        this.addEventListener('keydown', this._handleCtrlS);
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this._handleCtrlS);
+        super.disconnectedCallback();
+    }
+
+    _handleCtrlS(e){
+        if (e.ctrlKey && e.key === 's') {
+            e.preventDefault();
+            this._save();
+        }
     }
 
     render() {
@@ -59,35 +77,41 @@ export class QwcConfigurationEditor extends LitElement {
             <qui-code-block id="code"
                 mode='${this._type}'
                 content='${this._value}'
+                value='${this._value}'
                 editable>
             </qui-code-block>`;
         }
     }
 
     _renderToolbar(){
         return html`<div class="toolbar">
-            ${this._renderFileName()}
-            <vaadin-button @click="${() => this._save()}">
-                <vaadin-icon icon="font-awesome-solid:floppy-disk" slot="prefix"></vaadin-icon>
-                Save
-            </vaadin-button>
+            <code>application.${this._type}</code>
+            ${this._renderProgressOrButton()}
         </div>`;
     }
 
-    _renderFileName(){
-        if(this._type === "properties"){
-            return html`<code>application.properties</code>`;
+    _renderProgressOrButton(){
+        if(this._inProgress){
+            return html`<vaadin-progress-bar class="progress" indeterminate></vaadin-progress-bar>`;
         }else{
-            return html`<code>application.yaml</code>`;
+            return html`<vaadin-button @click="${() => this._save()}">
+                <vaadin-icon icon="font-awesome-solid:floppy-disk" slot="prefix"></vaadin-icon>
+                Save
+            </vaadin-button>`;
         }
     }
 
     _save(){
-
-        let newValue = this.shadowRoot.getElementById('code').getAttribute('content');
-        this.jsonRpc.
-
-        console.log("Save " + newValue);
+        this._inProgress = true;
+        let newValue = this.shadowRoot.getElementById('code').getAttribute('value');
+        this.jsonRpc.updateProperties({content: newValue, type: this._type}).then(jsonRpcResponse => {
+            this._inProgress = false;
+            if(jsonRpcResponse.result === false){
+                notifier.showErrorMessage("Configuration failed to update. See log file for details");
+            }else{
+                notifier.showSuccessMessage("Configuration successfully updated");
+            }
+        });
     }
 }
 

diff --git a/...ertx-http/runtime/src/main/java/io/quarkus/devui/runtime/config/ConfigJsonRPCService.java b/...ertx-http/runtime/src/main/java/io/quarkus/devui/runtime/config/ConfigJsonRPCService.java
@@ -1,9 +1,14 @@
 package io.quarkus.devui.runtime.config;
 
+import java.io.IOException;
+import java.io.StringReader;
 import java.nio.file.Files;
 import java.nio.file.Path;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.Properties;
+import java.util.stream.Collectors;
 
 import jakarta.enterprise.context.ApplicationScoped;
 
@@ -21,6 +26,23 @@ public boolean updateProperty(String name, String value) {
         return true;
     }
 
+    public boolean updateProperties(String content, String type) {
+
+        if (type.equalsIgnoreCase("properties")) {
+            Properties p = new Properties();
+            try (StringReader sr = new StringReader(content)) {
+                p.load(sr); // Validate
+                Map<String, String> m = Map.of("content", content, "type", type);
+                DevConsoleManager.invoke("config-set-properties", m);
+                return true;
+            } catch (IOException ex) {
+                ex.printStackTrace();
+                return false;
+            }
+        }
+        return false;
+    }
+
     public JsonObject getAllValues() {
         JsonObject values = new JsonObject();
         Config config = ConfigProvider.getConfig();
@@ -41,16 +63,11 @@ public JsonObject getProjectProperties() {
                 // In the current project only
                 Path path = resourcesDir.get(0);
                 Path configPropertiesPath = path.resolve("application.properties");
-                Path configYamlPath = path.resolve("application.yaml");
                 if (Files.exists(configPropertiesPath)) {
                     // Properties file
                     response.put("type", "properties");
                     String value = new String(Files.readAllBytes(configPropertiesPath));
                     response.put("value", value);
-                } else if (Files.exists(configPropertiesPath)) {
-                    response.put("type", "yaml");
-                    String value = new String(Files.readAllBytes(configYamlPath));
-                    response.put("value", value);
                 } else {
                     response.put("type", "properties");
                     response.put("value", "");
@@ -62,4 +79,12 @@ public JsonObject getProjectProperties() {
         }
         return response;
     }
+
+    private Map<String, String> toMap(Properties prop) {
+        return prop.entrySet().stream().collect(
+                Collectors.toMap(
+                        e -> String.valueOf(e.getKey()),
+                        e -> String.valueOf(e.getValue()),
+                        (prev, next) -> next, HashMap::new));
+    }
 }