Added more utility buttons, rework button layout. Finished better repl connector update.

Author: sebinside

src/app/layouts/common-layout/common.scss

@@ -63,6 +63,8 @@
 /* USAGE: button-trans--teal mdl-js-button mdl-js-ripple-effect */
 .button-trans {
 
+  padding: 0 !important;
+
   &--white {
     @extend .mdl-button;
   }

src/app/pages/betterrepl/betterrepl.component.html

@@ -57,7 +57,7 @@ <h2 class="card--title">Connector types</h2>
                class="connector-image"></div>
           {{ connectorMetadata.get(connectorType)?.displayName }} <span class="type">({{ connectorType }})</span>
           <button (click)="copyToAddConnector(connectorType)"
-                  class="button-trans--green mdl-js-button mdl-js-ripple-effect">
+                  class="button-trans--green mdl-js-button mdl-js-ripple-effect mdl-button--icon">
             <i class="material-icons">add</i>
           </button>
           <ul class="typeList">
@@ -121,7 +121,7 @@ <h2 class="card--title">Plugin types</h2>
       <ul class="typeList">
         <li *ngFor="let pluginType of pluginTypes">{{ pluginType.name }} ({{pluginType.author}})
           <button (click)="copyToAddPlugin(pluginType.name, pluginType.author)"
-                  class="button-trans--green mdl-js-button mdl-js-ripple-effect">
+                  class="button-trans--green mdl-js-button mdl-js-ripple-effect mdl-button--icon">
             <i class="material-icons">add</i>
           </button>
         </li>
@@ -145,13 +145,33 @@ <h2 class="mdl-card__title-text">Connectors</h2>
         </button>
       </div>
       <ul>
-        <li *ngFor="let connectorKey of connectorKeys">{{connectorKey.sourceIdentifier}}
-          <button class="button-trans--teal mdl-js-button mdl-js-ripple-effect"
-                  (click)="copyConnectorData(connectorKey)">
-            <i class="material-icons">edit</i>
+        <li *ngFor="let connectorEntry of connectorData">{{connectorEntry.sourceIdentifier}}
+          <button (click)="copyConnectorData(connectorEntry)"
+                  class="button-trans--teal mdl-js-button mdl-js-ripple-effect mdl-button--icon">
+            <i class="material-icons material-li">edit</i>
           </button>
           <ul>
-            <li>{{connectorKey.qualifiedConnectorType}}</li>
+            <li>{{connectorEntry.qualifiedConnectorType}}</li>
+            <li>
+              <a (click)="getConnectorDetails(connectorEntry)" *ngIf="connectorEntry.details == null"
+                 class="pointer">Request details...</a>
+              <p *ngIf="connectorEntry.details != null">Running: {{ connectorEntry.details.isRunning }} - Credentials:
+                <u *ngFor="let cred of connectorEntry.details.requiredCredentialKeys">{{ cred }}
+                  <button
+                    (click)="copyCredentials(connectorEntry.qualifiedConnectorType, connectorEntry.sourceIdentifier, cred)"
+                    class="button-trans--teal mdl-js-button mdl-js-ripple-effect mdl-button--icon">
+                    <i class="material-icons material-li">edit</i>
+                  </button>
+                </u>
+                <span
+                  *ngFor="let optionalCred of connectorEntry.details.optionalCredentialKeys">{{ optionalCred}}
+                  <button
+                    (click)="copyCredentials(connectorEntry.qualifiedConnectorType, connectorEntry.sourceIdentifier, optionalCred)"
+                    class="button-trans--teal mdl-js-button mdl-js-ripple-effect mdl-button--icon">
+                    <i class="material-icons material-li">edit</i>
+                  </button></span>
+              </p>
+            </li>
           </ul>
         </li>
       </ul>
@@ -214,14 +234,16 @@ <h2 class="card--title">Manage credentials</h2>
                  #mcrConnectorType [(ngModel)]="mcrConnectorTypeValue"/>
           <label class="mdl-textfield__label" for="manageCredentialsConnectorType">Connector type</label>
         </div>
-        <div class="container--text mdl-js-textfield">
+        <div [class.is-dirty]="mcrKeyValue.length > 0"
+             class="container--text mdl-js-textfield">
           <input class="mdl-textfield__input" type="text" id="manageCredentialsKey" value=""
-                 #mcrKey/>
+                 #mcrKey [(ngModel)]="mcrKeyValue"/>
           <label class="mdl-textfield__label" for="manageCredentialsKey">Key</label>
         </div>
-        <div class="container--text mdl-js-textfield">
+        <div [class.is-dirty]="mcrValueValue.length > 0"
+             class="container--text mdl-js-textfield">
           <input class="mdl-textfield__input" type="text" id="manageCredentialsValue" value=""
-                 #mcrValue/>
+                 #mcrValue [(ngModel)]="mcrValueValue"/>
           <label class="mdl-textfield__label" for="manageCredentialsValue">Value</label>
         </div>
         <div class="manageButtons">
@@ -266,7 +288,7 @@ <h2 class="card--title">Plugin instances</h2>
                   [class.button--colored-orange]="!instance.isRunning"
                   [class.button--colored-green]="instance.isRunning"
                   (click)="copyInstanceData(instance)">
-            <i class="material-icons">edit</i>
+            <i class="material-icons material-li">edit</i>
           </button>
           <ul>
             <li>{{ instance.pluginName }} ({{ instance.pluginAuthor }})</li>
@@ -304,7 +326,8 @@ <h2 class="card--title">Start / Stop / Log</h2>
           Show log
         </button>
       </div>
-      <div #instanceLog id="instanceLog" style="white-space: pre-wrap" *ngIf="instanceLogOutput?.length > 0">{{ instanceLogOutput.join("\n") }}</div>
+      <div #instanceLog *ngIf="instanceLogOutput?.length > 0" id="instanceLog"
+           style="white-space: pre-wrap">{{ instanceLogOutput.join("\n") }}</div>
     </base-card-body>
   </base-card>
 </div>
@@ -369,9 +392,9 @@ <h2 class="card--title">Instance requirements</h2>
       <ul>
         <li *ngFor="let requirement of instanceRequirements">
           {{requirement.uniqueRequirementId}} ({{requirement.name}})
-          <button class="button-trans--teal mdl-js-button mdl-js-ripple-effect"
+          <button class="button-trans--teal mdl-js-button mdl-js-ripple-effect mdl-button--icon"
                   (click)="copyRequirementData(requirement, requirementsInstanceName.value)">
-            <i class="material-icons">edit</i>
+            <i class="material-icons material-li">edit</i>
           </button>
           <ul>
             <li>optional: {{requirement.isOptional}} - set: {{requirement.isSet}}</li>
@@ -415,17 +438,17 @@ <h2 class="card--title">Change requirement</h2>
           <label class="mdl-textfield__label" for="changeReqValue">Value</label>
         </div>
 
-      <div class="manageButtons">
-        <button class="button--green mdl-js-button mdl-js-ripple-effect"
-                (click)="setRequirement(changeReqInstanceName.value, changeReqID.value,
-               changeReqType.value, changeReqValue.value)">
-          PUT
-        </button>
-        <button class="button--red mdl-js-button mdl-js-ripple-effect"
-                (click)="removeRequirement(changeReqInstanceName.value, changeReqID.value)">
-          DELETE
-        </button>
-      </div>
+        <div class="manageButtons">
+          <button (click)="setRequirement(changeReqInstanceName.value, changeReqID.value,
+               changeReqType.value, changeReqValue.value)"
+                  class="button--green mdl-js-button mdl-js-ripple-effect">
+            PUT
+          </button>
+          <button (click)="removeRequirement(changeReqInstanceName.value, changeReqID.value)"
+                  class="button--red mdl-js-button mdl-js-ripple-effect">
+            DELETE
+          </button>
+        </div>
       </div>
     </base-card-body>
   </base-card>

src/app/pages/betterrepl/betterrepl.component.ts

@@ -25,6 +25,13 @@ import {
 import {CryptoService} from "../../../crypto.service";
 import {EventService} from "../../../event.service";
 
+class ConnectorData implements ConnectorKey {
+  public constructor(public qualifiedConnectorType: string,
+                     public sourceIdentifier: string,
+                     public details: ConnectorDetails) {
+  }
+}
+
 @Component({
   selector: 'better-repl',
   templateUrl: './betterrepl.component.html',
@@ -46,7 +53,7 @@ export class BetterREPLComponent extends UpgradableComponent {
   private requirementTypes: RequirementTypes;
   private pluginTypes: Array<PluginType>;
 
-  private connectorKeys: Array<ConnectorKey>;
+  private connectorData: Array<ConnectorData>;
   private pluginInstances: Array<PluginInstance>;
 
   private instanceLogOutput: Array<string>;
@@ -56,6 +63,8 @@ export class BetterREPLComponent extends UpgradableComponent {
   private mcConnectorTypeValue = "";
   private mcrSourceIdentifierValue = "";
   private mcrConnectorTypeValue = "";
+  private mcrKeyValue = "";
+  private mcrValueValue = "";
 
   private instanceNameSSValue = "";
   private miPluginNameValue = "";
@@ -86,6 +95,8 @@ export class BetterREPLComponent extends UpgradableComponent {
       this.mcConnectorTypeValue = "";
       this.mcrSourceIdentifierValue = "";
       this.mcrConnectorTypeValue = "";
+      this.mcrKeyValue = "";
+      this.mcrValueValue = "";
 
       this.instanceNameSSValue = "";
       this.miPluginNameValue = "";
@@ -103,7 +114,7 @@ export class BetterREPLComponent extends UpgradableComponent {
       this.requirementTypes = null;
       this.pluginTypes = [];
       this.pluginInstances = [];
-      this.connectorKeys = [];
+      this.connectorData = [];
 
     } else {
 
@@ -273,10 +284,10 @@ export class BetterREPLComponent extends UpgradableComponent {
   }
 
   getRegisteredConnectors() {
-    this.connectorKeys = [];
+    this.connectorData = [];
     this.connectorService.getConnectors(this.authKey).subscribe((response: Array<ConnectorKey>) => {
       this.logRequest("getConnectors", true, JSON.stringify(response));
-      this.connectorKeys = response;
+      response.forEach(key => this.connectorData.push(new ConnectorData(key.qualifiedConnectorType, key.sourceIdentifier, null)));
     }, error => this.logGenericError("getConnectors"));
   }
 
@@ -351,6 +362,8 @@ export class BetterREPLComponent extends UpgradableComponent {
     this.mcrSourceIdentifierValue = connectorKey.sourceIdentifier;
     this.mcConnectorTypeValue = connectorKey.qualifiedConnectorType;
     this.mcrConnectorTypeValue = connectorKey.qualifiedConnectorType;
+    this.mcrKeyValue = "";
+    this.mcrValueValue = "";
   }
 
   copyToAddConnector(connectorType: string) {
@@ -470,4 +483,20 @@ export class BetterREPLComponent extends UpgradableComponent {
     this.changeReqValueValue = requirement.value;
   }
 
+  getConnectorDetails(connectorKey: ConnectorData) {
+    this.connectorService.getConnector(connectorKey.qualifiedConnectorType, connectorKey.sourceIdentifier, this.authKey)
+      .subscribe((response: ConnectorDetails) => {
+        this.logRequest("getConnector", true, JSON.stringify(response));
+
+        connectorKey.details = response;
+      }, error => this.logGenericError("getConnector"));
+  }
+
+  copyCredentials(connectorType: string, sourceIdentifier: string, key: string) {
+    this.mcrConnectorTypeValue = connectorType;
+    this.mcrSourceIdentifierValue = sourceIdentifier;
+    this.mcrKeyValue = key;
+    this.mcrValueValue = "";
+  }
+
 }

src/app/pages/betterrepl/betterrepl.css

@@ -37,6 +37,16 @@
   font-size: 6pt !important;
 }
 
+.material-li {
+  font-size: 14pt !important;
+}
+
+.pointer {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: 300 !important;
+}
+
 .connector-image {
   height: 16px;
   width: 16px;