Merge pull request #81 from OliveTin/feature-input-description

feature: #61 - Descriptions in arguments

OliveTin.proto

@@ -20,6 +20,8 @@ message ActionArgument {
 	string defaultValue = 4;
 
 	repeated ActionArgumentChoice choices = 5;
+
+	string description = 6;
 }
 
 message ActionArgumentChoice {

config.yaml

@@ -25,11 +25,13 @@ actions:
       title: host
       type: ascii_identifier
       default: example.com
+      description: The host that you want to ping
 
     - name: count
       title: Count
       type: int
       default: 1
+      description: How many times to do you want to ping?
   
   # Restart lightdm on host "server1"
   # Docs: https://docs.olivetin.app/action-ping.html

internal/config/config.go

@@ -17,6 +17,7 @@ type Action struct {
 type ActionArgument struct {
 	Name    string
 	Title   string
+	Description string
 	Type    string
 	Default string
 	Choices []ActionArgumentChoice

internal/grpcapi/grpcApiActions.go

@@ -36,6 +36,7 @@ func actionCfgToPb(action config.Action, user *acl.AuthenticatedUser) *pb.Action
 			Name:         cfgArg.Name,
 			Title:        cfgArg.Title,
 			Type:         cfgArg.Type,
+			Description:  cfgArg.Description,
 			DefaultValue: cfgArg.Default,
 			Choices:      buildChoices(cfgArg.Choices),
 		}

webui/js/ArgumentForm.js

@@ -64,6 +64,7 @@ class ArgumentForm extends window.HTMLElement {
 
       domFieldWrapper.appendChild(this.createDomLabel(arg))
       domFieldWrapper.appendChild(this.createDomInput(arg))
+      domFieldWrapper.appendChild(this.createDomDescription(arg))
 
       this.domArgs.appendChild(domFieldWrapper)
     }
@@ -130,6 +131,14 @@ class ArgumentForm extends window.HTMLElement {
     return domEl
   }
 
+  createDomDescription (arg) {
+    const domArgumentDescription = document.createElement('span')
+    domArgumentDescription.classList.add('argument-description')
+    domArgumentDescription.innerText = arg.description
+
+    return domArgumentDescription
+  }
+
   createSelectOption (choice) {
     const domEl = document.createElement('option')
 

webui/style.css

@@ -282,6 +282,10 @@ input[name="start"]:hover {
   background-color: #aceaac;
 }
 
+span.argument-description {
+  margin-left: 1em;
+}
+
 form div.buttons {
   text-align: right;
 }