Added connector metadata display.

Author: sebinside

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

@@ -50,10 +50,18 @@ <h2 class="card--title">Login / Register</h2>
       <h2 class="card--title">Connector types</h2>
     </base-card-title>
     <base-card-body>
-      <ul class="typeList">
-        <li *ngFor="let connectorType of connectorTypes">{{ connectorType }}
-          <ul>
-            <li>{{ connectorMetadata.get(connectorType)?.displayName }}</li>
+      <ul>
+        <li *ngFor="let connectorType of connectorTypes">
+          <div *ngIf="connectorMetadata.get(connectorType)?.found"
+               [style.background-image]="'url(' + connectorMetadata.get(connectorType).icon + ')'"
+               class="connector-image"></div>
+          {{ connectorMetadata.get(connectorType)?.displayName }} <span class="type">({{ connectorType }})</span>
+          <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>
           </ul>
         </li>
       </ul>

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

@@ -42,7 +42,7 @@ export class BetterREPLComponent extends UpgradableComponent {
   private lastPassword = "";
 
   private connectorTypes: Array<string>;
-  private connectorMetadata: Map<string, ConnectorMetadata>;
+  private connectorMetadata: Map<string, ConnectorMetadata> = new Map();
   private requirementTypes: RequirementTypes;
   private pluginTypes: Array<PluginType>;
 
@@ -133,6 +133,13 @@ export class BetterREPLComponent extends UpgradableComponent {
         let allValues = response[key];
         for (let keyValue in allValues) {
           this.connectorMetadata.set(keyValue, allValues[keyValue]);
+
+          // Setting a placeholder display name for not found metadata
+          if (!this.connectorMetadata.get(keyValue).found) {
+            let fakeDisplayName = keyValue.substring(keyValue.lastIndexOf(".") + 1);
+            fakeDisplayName.replace("Connector", "");
+            this.connectorMetadata.get(keyValue).displayName = fakeDisplayName;
+          }
         }
       }
     }, error => this.logGenericError("getConnectorsMetadata"));

src/app/pages/betterrepl/betterrepl.css

@@ -26,7 +26,23 @@
 
 .typeList {
   margin-left: -20px;
-  font-size: 8pt;
+  font-size: 8pt !important;
+}
+
+.typeList a {
+  font-size: 8pt !important;
+}
+
+.type {
+  font-size: 6pt !important;
+}
+
+.connector-image {
+  height: 16px;
+  width: 16px;
+  background-size: contain;
+  display: inline-block;
+  margin-right: 3px;
 }
 
 #requestTypes > div > div {