WebSocket APIs

src/components/apis/details-of-api/ko/runtime/api-details.html

@@ -11,6 +11,9 @@ <h1>
             <!-- ko if: api().type === 'soap' -->
             <span class="badge badge-soap">SOAP</span>
             <!-- /ko -->
+            <!-- ko if: api().type === 'websocket' -->
+            <span class="badge badge-soap">WebSocket</span>
+            <!-- /ko -->
         </h1>
 
         <div class="form-inline">
@@ -21,6 +24,7 @@ <h1>
                     data-bind="options: versionApis, optionsValue: 'name', optionsText: 'apiVersion', value: currentApiVersion">
                 </select>
                 <!-- /ko -->
+                <!-- ko if: api().type !== 'websocket' -->
                 <select id="apiDefinitions" class="form-control" aria-label="API definitions"
                     data-bind="value: downloadSelected">
                     <option value="" disabled="disabled" selected="selected">API definition</option>
@@ -35,6 +39,7 @@ <h1>
                 <a href="#" class="nav-link text-truncate" data-bind="attr: { href: $component.getChangeLogUrl()} ">
                     Changelog
                 </a>
+                <!-- /ko -->
             </div>
         </div>
 

src/components/apis/list-of-apis/ko/listOfApisEditor.html

@@ -5,6 +5,12 @@
             Allow selection
         </label>
     </div>
+    <div class="form-group">
+        <label for="showApiType" class="form-label">
+            <input type="checkbox" id="showApiType" name="showApiType" data-bind="checked: showApiType" />
+            Show API type
+        </label>
+    </div>
 
     <div class="form-group">
         <label for="defaultGroupByTagToEnabled" class="form-label">

src/components/apis/list-of-apis/ko/listOfApisEditor.ts

@@ -13,12 +13,14 @@ export class ListOfApisEditor {
     public readonly itemStyles: ko.ObservableArray<any>;
     public readonly itemStyle: ko.Observable<string>;
     public readonly allowSelection: ko.Observable<boolean>;
+    public readonly showApiType: ko.Observable<boolean>;
     public readonly defaultGroupByTagToEnabled: ko.Observable<boolean>;
     public readonly hyperlink: ko.Observable<HyperlinkModel>;
     public readonly hyperlinkTitle: ko.Computed<string>;
 
     constructor() {
         this.allowSelection = ko.observable(false);
+        this.showApiType = ko.observable(true);
         this.defaultGroupByTagToEnabled = ko.observable(false);
         this.hyperlink = ko.observable();
         this.hyperlinkTitle = ko.computed<string>(
@@ -44,15 +46,18 @@ export class ListOfApisEditor {
     @OnMounted()
     public async initialize(): Promise<void> {
         this.allowSelection(this.model.allowSelection);
+        this.showApiType(this.model.showApiType);
         this.defaultGroupByTagToEnabled(this.model.defaultGroupByTagToEnabled);
         this.hyperlink(this.model.detailsPageHyperlink);
 
         this.allowSelection.subscribe(this.applyChanges);
+        this.showApiType.subscribe(this.applyChanges);
         this.defaultGroupByTagToEnabled.subscribe(this.applyChanges);        
     }
 
     private applyChanges(): void {
         this.model.allowSelection = this.allowSelection();
+        this.model.showApiType = this.showApiType();
         this.model.defaultGroupByTagToEnabled = this.defaultGroupByTagToEnabled();
         this.model.detailsPageHyperlink = this.hyperlink();
         this.onChange(this.model);

src/components/apis/list-of-apis/ko/listOfApisViewModelBinder.ts

@@ -18,6 +18,7 @@ export class ListOfApisViewModelBinder implements ViewModelBinder<ListOfApisMode
 
         viewModel.runtimeConfig(JSON.stringify({
             allowSelection: model.allowSelection,
+            showApiType: model.showApiType,
             defaultGroupByTagToEnabled: model.defaultGroupByTagToEnabled,
             detailsPageUrl: model.detailsPageHyperlink
                 ? model.detailsPageHyperlink.href

src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html

@@ -3,8 +3,13 @@
         <div class="input-group">
             <div class="input">
                 <span data-bind="text: selection"></span>
-                <!-- ko if: selectedApi() && selectedApi().type === 'soap' -->
-                <span class="badge badge-soap">SOAP</span>
+                <!-- ko if: selectedApi() -->
+                    <!-- ko if: selectedApi().type === 'soap' -->
+                    <span class="badge badge-soap">SOAP</span>
+                    <!-- /ko -->
+                    <!-- ko if: selectedApi().type === 'websocket' -->
+                    <span class="badge badge-soap">WebSocket</span>
+                    <!-- /ko -->
                 <!-- /ko -->
             </div>
             <div class="input-group-append">
@@ -44,6 +49,9 @@
                             <!-- ko if: item.type === 'soap' -->
                             <span class="badge badge-soap">SOAP</span>
                             <!-- /ko -->
+                            <!-- ko if: item.type === 'websocket' -->
+                            <span class="badge badge-soap">WebSocket</span>
+                            <!-- /ko -->
                             <!-- ko if: item.apiVersion -->
                             - <span data-bind="text: item.apiVersion"></span>
                             <!-- /ko -->

src/components/apis/list-of-apis/ko/runtime/api-list.html

@@ -22,7 +22,14 @@
     <div class="table-head" role="rowgroup">
         <div class="table-row" role="row">
             <div tabindex="0" class="col-5" role="columnheader">Name</div>
+
+            <!-- ko if: showApiType -->
+            <div tabindex="0" class="col-5" role="columnheader">Description</div>
+            <div tabindex="0" class="col-2" role="columnheader">Type</div>
+            <!-- /ko -->
+            <!-- ko ifnot: showApiType -->
             <div tabindex="0" class="col-7" role="columnheader">Description</div>
+            <!-- /ko -->
         </div>
     </div>
 
@@ -45,17 +52,25 @@
                 <a href="#"
                     data-bind="attr: { href: $component.getReferenceUrl(item), title: item.displayName }">
                     <span data-bind="text: item.displayName"></span>
-                    <!-- ko if: item.type === 'soap' -->
-                    <span class="badge badge-soap">SOAP</span>
-                    <!-- /ko -->
                     <!-- ko if: item.apiVersion -->
                     - <span data-bind="text: item.apiVersion"></span>
                     <!-- /ko -->
                 </a>
             </div>
+
+            <!-- ko if: $component.showApiType -->
+            <div class="col-5" role="cell">
+                <div tabindex="0" data-bind="markdown: { source: item.description, truncateAt: 250 }"></div>
+            </div>
+            <div class="col-2" role="cell">
+                <span data-bind="text: item.typeName"></span>
+            </div>
+            <!-- /ko -->
+            <!-- ko ifnot: $component.showApiType -->
             <div class="col-7" role="cell">
                 <div tabindex="0" data-bind="markdown: { source: item.description, truncateAt: 250 }"></div>
             </div>
+            <!-- /ko -->            
         </div>
         <!-- /ko -->
         <!-- /ko -->
@@ -76,17 +91,24 @@
                 <a href="#"
                     data-bind="attr: { href: $component.getReferenceUrl(item), title: item.displayName }">
                     <span data-bind="text: item.displayName"></span>
-                    <!-- ko if: item.type === 'soap' -->
-                    <span class="badge badge-soap">SOAP</span>
-                    <!-- /ko -->
                     <!-- ko if: item.apiVersion -->
                     - <span data-bind="text: item.apiVersion"></span>
                     <!-- /ko -->
                 </a>
             </div>
+            <!-- ko if: $component.showApiType -->
+            <div class="col-5" role="cell">
+                <div tabindex="0" data-bind="markdown: { source: item.description, truncateAt: 250 }"></div>
+            </div>
+            <div class="col-2" role="cell">
+                <span data-bind="text: item.typeName"></span>
+            </div>
+            <!-- /ko -->
+            <!-- ko ifnot: $component.showApiType -->
             <div class="col-7" role="cell">
                 <div tabindex="0" data-bind="markdown: { source: item.description, truncateAt: 250 }"></div>
             </div>
+            <!-- /ko -->
         </div>
         <!-- /ko -->
 

src/components/apis/list-of-apis/ko/runtime/api-list.ts

@@ -35,6 +35,7 @@ export class ApiList {
     ) {
         this.detailsPageUrl = ko.observable();
         this.allowSelection = ko.observable(false);
+        this.showApiType = ko.observable(true);
         this.apis = ko.observableArray([]);
         this.working = ko.observable();
         this.pattern = ko.observable();
@@ -51,6 +52,9 @@ export class ApiList {
     @Param()
     public allowSelection: ko.Observable<boolean>;
 
+    @Param()
+    public showApiType: ko.Observable<boolean>;
+
     @Param()
     public defaultGroupByTagToEnabled: ko.Observable<boolean>;
 

src/components/apis/list-of-apis/listOfApisContract.ts

@@ -16,6 +16,11 @@ export interface ListOfApisContract extends Contract {
      */
     allowSelection: boolean;
 
+    /**
+     * Show API type.
+     */
+    showApiType: boolean;
+
     /**
      * Default GroupByTag to enabled.
      */

src/components/apis/list-of-apis/listOfApisModel.ts

@@ -11,6 +11,11 @@ export class ListOfApisModel {
      */
     public allowSelection: boolean;
 
+    /**
+     * Show API type.
+     */
+    public showApiType: boolean;
+
     /**
      * Default GroupByTag to enabled.
      */

src/components/apis/list-of-apis/listOfApisModelBinder.ts

@@ -17,6 +17,7 @@ export class ListOfApisModelBinder implements IModelBinder<ListOfApisModel> {
 
         model.layout = contract.itemStyleView;
         model.allowSelection = contract.allowSelection;
+        model.showApiType = contract.showApiType === undefined ? true : contract.showApiType;
         model.defaultGroupByTagToEnabled = contract.defaultGroupByTagToEnabled === true;
 
         if (contract.detailsPageHyperlink) {
@@ -35,6 +36,7 @@ export class ListOfApisModelBinder implements IModelBinder<ListOfApisModel> {
             type: "listOfApis",
             itemStyleView: model.layout,
             allowSelection: model.allowSelection,
+            showApiType: model.showApiType,
             defaultGroupByTagToEnabled: model.defaultGroupByTagToEnabled,
             detailsPageHyperlink: model.detailsPageHyperlink
                 ? {