Add Miscellaneous components card on Final Page (#1374)

Author: mohitsuman

browser/pages/start/controller.js

@@ -23,6 +23,25 @@ class StartController {
     return 'https://developers.redhat.com/products/cdk/hello-world/#cdk_build-your-first-app';
   }
 
+  fetchMiscComponents() {
+    let miscComponents = [];
+    this.removeComponents('devstudio');
+    this.removeComponents('cdk');
+    for (let [key, value] of this.installerDataSvc.allInstallables()) {
+      if(value.installed && key!=="devstudio" && key!=="cdk" && key!==undefined){
+        miscComponents.push(value);
+      }
+    }
+    return miscComponents;
+  }
+
+  removeComponents(key) {
+    for(let list of this.installerDataSvc.getInstallable(key).dependenciesOf){
+      this.installerDataSvc.allInstallables().delete(list.keyName);
+    }
+    return;
+  }
+
   startDevstudio() {
     if(this.devstudioInstall.isSkipped() && this.fuseInstall.isSkipped()) {
       this.exit();

browser/pages/start/start.html

@@ -11,6 +11,34 @@
       </div>
       <get-started component="'devstudio'" start="startCtrl.startDevstudio()"></get-started>
       <get-started component="'cdk'" start="startCtrl.startCdk()"></get-started>
+      <div class="row row-cards-pf" ng-show="startCtrl.fetchMiscComponents().length > 0">
+        <div class="col-xs-12">
+          <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
+            <div class="card-pf-body" style="min-height: 100px; overflow: hidden;">
+              <section class="product-header">
+                <div class="row">
+                  <div class="header-column"> 
+                    <h2>
+                      <span class="field-name-title">Miscellaneous Components</span>
+                    </h2> 
+                  </div>
+                </div>
+              </section>
+              <div class="card-pf-top-element">
+                <div class="col-sm-8" style="margin-top: 2%">
+                  <ul style="margin-left: -50px;list-style: none;">
+                    <li ng-repeat="dependency in startCtrl.fetchMiscComponents()" style="margin: 6px">
+                      <i class="pficon-applications"></i>
+                      <span>{{dependency.productName}}&nbsp;|</span>
+                      <span class="product-info">{{dependency.version}}</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </main>