Added add button to connector types and plugin types.

Author: sebinside

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

@@ -14,6 +14,10 @@
   &--quarter-size {
     @extend .mdl-cell, .mdl-cell--3-col-desktop, .mdl-cell--3-col-tablet, .mdl-cell--2-col-phone;
   }
+
+  &--sixth-size {
+    @extend .mdl-cell, .mdl-cell--2-col-desktop, .mdl-cell--2-col-tablet, .mdl-cell--1-col-phone;
+  }
 }
 
 .card--title {
@@ -67,4 +71,8 @@
     @extend .mdl-button, .button--colored-teal;
   }
 
+  &--green {
+    @extend .mdl-button, .button--colored-green;
+  }
+
 }

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

@@ -44,7 +44,7 @@ <h2 class="card--title">Login / Register</h2>
 </div>
 
 
-<div class="card--third-size">
+<div class="card--half-size">
   <base-card>
     <base-card-title>
       <h2 class="card--title">Connector types</h2>
@@ -56,12 +56,15 @@ <h2 class="card--title">Connector types</h2>
                [style.background-image]="'url(' + connectorMetadata.get(connectorType).icon + ')'"
                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">
+            <i class="material-icons">add</i>
+          </button>
           <ul class="typeList">
             <li *ngIf="!connectorMetadata.get(connectorType)?.found">no metadata found.</li>
             <li
-              *ngIf="connectorMetadata.get(connectorType)?.found">{{ connectorMetadata.get(connectorType)?.description }}</li>
-            <li *ngIf="connectorMetadata.get(connectorType)?.found">More Information: <a
-              [href]="connectorMetadata.get(connectorType)?.wikiUrl">Chat Overflow Wiki</a></li>
+              *ngIf="connectorMetadata.get(connectorType)?.found">{{ connectorMetadata.get(connectorType)?.description }}
+              More Information: <a [href]="connectorMetadata.get(connectorType)?.wikiUrl">Chat Overflow Wiki</a></li>
           </ul>
         </li>
       </ul>
@@ -109,14 +112,19 @@ <h2 class="card--title">Requirement types</h2>
     </base-card-body>
   </base-card>
 </div>
-<div class="card--third-size">
+<div class="card--sixth-size">
   <base-card>
     <base-card-title>
       <h2 class="card--title">Plugin types</h2>
     </base-card-title>
     <base-card-body>
       <ul class="typeList">
-        <li *ngFor="let pluginType of pluginTypes">{{ pluginType.name }} ({{pluginType.author}})</li>
+        <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">
+            <i class="material-icons">add</i>
+          </button>
+        </li>
       </ul>
     </base-card-body>
   </base-card>

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

@@ -353,6 +353,17 @@ export class BetterREPLComponent extends UpgradableComponent {
     this.mcrConnectorTypeValue = connectorKey.qualifiedConnectorType;
   }
 
+  copyToAddConnector(connectorType: string) {
+    this.mcConnectorTypeValue = connectorType;
+    this.mcSourceIdentifierValue = "";
+  }
+
+  copyToAddPlugin(pluginName: string, pluginAuthor: string) {
+    this.miPluginAuthorValue = pluginAuthor;
+    this.miPluginNameValue = pluginName;
+    this.miInstanceNameValue = "";
+  }
+
   getInstances() {
     this.instanceService.getInstances(this.authKey).subscribe((response: Array<PluginInstance>) => {
       if (this.pluginInstances) {