Operation list improvements (#1116)

* Added toggle to manage operation name wrap * Added a toggle to manage to show operation urlTemplate or name * added search operation by urlTemplate * changed wrap mode to break-word close #1019
Azure · Jan 15, 2021 · b66f1e4 · b66f1e4
1 parent dc27dbe
commit b66f1e4
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 15 deletions.
diff --git a/src/components/operations/operation-list/ko/operationListEditor.html b/src/components/operations/operation-list/ko/operationListEditor.html
@@ -6,6 +6,26 @@
         </label>
     </div>
 
+    <div class="form-group">
+        <label for="wrapText" class="form-label">
+            <input type="checkbox" id="wrapText" name="wrapText" data-bind="checked: wrapText" />
+            Wrap operation names to new lines
+        </label>
+    </div>
+
+    <div class="form-group">
+        <label for="showToggleUrlPath" class="form-label">
+            <input type="checkbox" id="showToggleUrlPath" name="showToggleUrlPath" data-bind="checked: showToggleUrlPath" />
+            Allow switching between URL paths and operation names
+        </label>
+    </div>
+    <div class="form-group">
+        <label for="defaultShowUrlPath" class="form-label">
+            <input type="checkbox" id="defaultShowUrlPath" name="defaultShowUrlPath" data-bind="checked: defaultShowUrlPath" />
+            Show URL paths instead of operation names by default
+        </label>
+    </div>
+
     <div class="form-group">
         <label for="defaultGroupByTagToEnabled" class="form-label">
             <input type="checkbox" id="defaultGroupByTagToEnabled" name="defaultGroupByTagToEnabled" data-bind="checked: defaultGroupByTagToEnabled" />

diff --git a/src/components/operations/operation-list/ko/operationListEditor.ts b/src/components/operations/operation-list/ko/operationListEditor.ts
@@ -10,12 +10,18 @@ import { HyperlinkModel } from "@paperbits/common/permalinks";
 })
 export class OperationListEditor {
     public readonly allowSelection: ko.Observable<boolean>;
+    public readonly wrapText: ko.Observable<boolean>;
+    public readonly showToggleUrlPath: ko.Observable<boolean>;
+    public readonly defaultShowUrlPath: 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.wrapText = ko.observable(true);
+        this.showToggleUrlPath = ko.observable();
+        this.defaultShowUrlPath = ko.observable();
         this.defaultGroupByTagToEnabled = ko.observable(false);
         this.hyperlink = ko.observable();
         this.hyperlinkTitle = ko.computed<string>(() => this.hyperlink() ? this.hyperlink().title : "Add a link...");
@@ -30,15 +36,24 @@ export class OperationListEditor {
     @OnMounted()
     public async initialize(): Promise<void> {
         this.allowSelection(this.model.allowSelection);
+        this.wrapText(this.model.wrapText);
+        this.showToggleUrlPath(this.model.showToggleUrlPath);
+        this.defaultShowUrlPath(this.model.defaultShowUrlPath);
         this.defaultGroupByTagToEnabled(this.model.defaultGroupByTagToEnabled);
         this.hyperlink(this.model.detailsPageHyperlink);
 
         this.allowSelection.subscribe(this.applyChanges);
+        this.wrapText.subscribe(this.applyChanges);
+        this.showToggleUrlPath.subscribe(this.applyChanges);
+        this.defaultShowUrlPath.subscribe(this.applyChanges);
         this.defaultGroupByTagToEnabled.subscribe(this.applyChanges);
     }
 
     private applyChanges(): void {
         this.model.allowSelection = this.allowSelection();
+        this.model.wrapText = this.wrapText();
+        this.model.showToggleUrlPath = this.showToggleUrlPath();
+        this.model.defaultShowUrlPath = this.defaultShowUrlPath();
         this.model.defaultGroupByTagToEnabled = this.defaultGroupByTagToEnabled();
         this.model.detailsPageHyperlink = this.hyperlink();
         this.onChange(this.model);

diff --git a/src/components/operations/operation-list/ko/operationListViewModelBinder.ts b/src/components/operations/operation-list/ko/operationListViewModelBinder.ts
@@ -14,6 +14,9 @@ export class OperationListViewModelBinder implements ViewModelBinder<OperationLi
 
         viewModel.runtimeConfig(JSON.stringify({
             allowSelection: model.allowSelection,
+            wrapText: model.wrapText,
+            showToggleUrlPath: model.showToggleUrlPath,
+            defaultShowUrlPath: model.defaultShowUrlPath,
             defaultGroupByTagToEnabled: model.defaultGroupByTagToEnabled,
             detailsPageUrl: model.detailsPageHyperlink
                 ? model.detailsPageHyperlink.href

diff --git a/src/components/operations/operation-list/ko/runtime/operation-list.html b/src/components/operations/operation-list/ko/runtime/operation-list.html
@@ -16,9 +16,20 @@
             </div>
         </label>
     </div>
+    <!-- ko if: showToggleUrlPath -->
+    <div class="form-group ml-auto">
+        <label for="showUrlPath">Show URL path
+            <div class="switch">
+                <input id="showUrlPath" type="checkbox" data-bind="checked: $component.showUrlPath">
+                <span class="slider round"></span>
+            </div>
+        </label>
+    </div>
+    <!-- /ko -->
 </div>
 
-<!-- ko if: groupByTag-->
+
+<!-- ko if: groupByTag -->
 <div class="menu menu-vertical d-block">
     <!-- ko if: working -->
     <spinner class="fit"></spinner>
@@ -35,10 +46,12 @@
         <ul class="nav" role="list">
             <!-- ko foreach: { data: group.items, as: 'item' } -->
             <li class="nav-item" role="presentation">
-                <a href="#" role="listitem" class="nav-link text-truncate"
+                <a href="#" role="listitem" class="nav-link"
                     data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedOperationName() === item.name }">
-                    <span data-bind="attr: { 'data-method': method }"></span>
-                    <span class="operation-name" data-bind="text: item.displayName"></span>
+                    <div class="row">
+                        <span class="col-md-2" data-bind="attr: { 'data-method': method }"></span>
+                        <span class="col-md-9" data-bind="text: ($component.showUrlPath() ? item.urlTemplate : item.displayName), css: { 'text-truncate': !$component.wrapText(), 'text-wrap': $component.wrapText() }, attr: { title: ($component.showUrlPath() ? item.urlTemplate : item.displayName) }"></span>
+                    </div>
                 </a>
             </li>
             <!-- /ko -->
@@ -69,10 +82,12 @@
         <ul class="nav" role="list">
             <!-- ko foreach: { data: operations, as: 'item' } -->
             <li class="nav-item" role="presentation">
-                <a href="#" role="listitem" class="nav-link text-truncate"
-                    data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedOperationName() === item.name }">
-                    <span data-bind="attr: { 'data-method': method }"></span>
-                    <span class="operation-name" data-bind="text: item.displayName"></span>
+                <a href="#" role="listitem" class="nav-link"
+                    data-bind="attr: { href: $component.getReferenceUrl(item)}, css: { 'nav-link-active': $component.selectedOperationName() === item.name }">
+                    <div class="row">
+                        <span class="col-md-2" data-bind="attr: { 'data-method': method }"></span>
+                        <span class="col-md-9" data-bind="text: ($component.showUrlPath() ? item.urlTemplate : item.displayName), css: { 'text-truncate': !$component.wrapText(), 'text-wrap': $component.wrapText() }, attr: { title: ($component.showUrlPath() ? item.urlTemplate : item.displayName) }"></span>
+                    </div>
                 </a>
             </li>
             <!-- /ko -->

diff --git a/src/components/operations/operation-list/ko/runtime/operation-list.ts b/src/components/operations/operation-list/ko/runtime/operation-list.ts
@@ -35,6 +35,7 @@ export class OperationList {
     public readonly hasNextPage: ko.Observable<boolean>;
     public readonly hasPager: ko.Computed<boolean>;
     public readonly tagScope: ko.Computed<string>;
+    public readonly showUrlPath: ko.Observable<boolean>;
 
     constructor(
         private readonly apiService: ApiService,
@@ -43,6 +44,12 @@ export class OperationList {
     ) {
         this.detailsPageUrl = ko.observable();
         this.allowSelection = ko.observable(false);
+        this.wrapText = ko.observable();
+
+        this.showUrlPath = ko.observable();
+        this.defaultShowUrlPath = ko.observable();
+        this.showToggleUrlPath = ko.observable();
+
         this.operations = ko.observableArray();
         this.operationGroups = ko.observableArray();
         this.selectedApiName = ko.observable();
@@ -56,15 +63,21 @@ export class OperationList {
         this.hasNextPage = ko.observable();
         this.hasPrevPage = ko.observable();
         this.hasPager = ko.computed(() => this.hasPrevPage() || this.hasNextPage());
-        this.tagScope = ko.computed(() =>
-            this.selectedApiName()
-                ? `apis/${this.selectedApiName()}`
-                : "");
+        this.tagScope = ko.computed(() => this.selectedApiName() ? `apis/${this.selectedApiName()}`: "");
     }
 
     @Param()
     public allowSelection: ko.Observable<boolean>;
 
+    @Param()
+    public wrapText: ko.Observable<boolean>;
+
+    @Param()
+    public defaultShowUrlPath: ko.Observable<boolean>;
+
+    @Param()
+    public showToggleUrlPath: ko.Observable<boolean>;
+
     @Param()
     public defaultGroupByTagToEnabled: ko.Observable<boolean>;
 
@@ -80,6 +93,7 @@ export class OperationList {
         this.selectedOperationName(operationName);
 
         this.groupByTag(this.defaultGroupByTagToEnabled());
+        this.showUrlPath(this.defaultShowUrlPath());
 
         if (this.selectedApiName()) {
             await this.loadOperations();
@@ -124,6 +138,8 @@ export class OperationList {
             this.searchRequest = { pattern: this.pattern(), tags: this.tags(), grouping: "none" };
         }
 
+        this.searchRequest.propertyName = this.showUrlPath() ? 'urlTemplate' : undefined;
+
         try {
             this.working(true);
 

diff --git a/src/components/operations/operation-list/operationListContract.ts b/src/components/operations/operation-list/operationListContract.ts
@@ -10,6 +10,21 @@ export interface OperationListContract extends Contract {
      */
     allowSelection: boolean;
 
+    /**
+     * Indicated that an operations name should wraps to new line if it's too long.
+     */
+    wrapText: boolean;
+
+    /**
+     * Allow switching between URL paths and operation names
+     */
+    showToggleUrlPath: boolean;
+
+    /**
+     * Show URL paths instead of operation names by default.
+     */
+    defaultShowUrlPath: boolean;
+
     /**
      * Default GroupByTag to enabled.
      */

diff --git a/src/components/operations/operation-list/operationListModel.ts b/src/components/operations/operation-list/operationListModel.ts
@@ -5,6 +5,21 @@ export class OperationListModel {
      * Indicated that an operations can be selected.
      */
     public allowSelection: boolean;
+
+    /**
+     * Indicated that an operations name should wraps to new line if it's too long.
+     */
+    public wrapText: boolean;
+
+    /**
+     * Allow switching between URL paths and operation names
+     */
+    public showToggleUrlPath: boolean;
+
+    /**
+     * Show URL paths instead of operation names by default.
+     */
+    public defaultShowUrlPath: boolean;
 
     /**
      * Default GroupByTag to enabled.

diff --git a/src/components/operations/operation-list/operationListModelBinder.ts b/src/components/operations/operation-list/operationListModelBinder.ts
@@ -4,7 +4,6 @@ import { IPermalinkResolver } from "@paperbits/common/permalinks";
 import { OperationListModel } from "./operationListModel";
 import { OperationListContract } from "./operationListContract";
 
-
 export class OperationListModelBinder implements IModelBinder<OperationListModel> {
     constructor(private readonly permalinkResolver: IPermalinkResolver) { }
 
@@ -20,6 +19,9 @@ export class OperationListModelBinder implements IModelBinder<OperationListModel
         const model = new OperationListModel();
 
         model.allowSelection = contract.allowSelection;
+        model.wrapText = contract.wrapText;
+        model.showToggleUrlPath = contract.showToggleUrlPath;
+        model.defaultShowUrlPath = contract.defaultShowUrlPath;
         model.defaultGroupByTagToEnabled = contract.defaultGroupByTagToEnabled === true;
 
         if (contract.detailsPageHyperlink) {
@@ -33,6 +35,9 @@ export class OperationListModelBinder implements IModelBinder<OperationListModel
         const contract: OperationListContract = {
             type: "operationList",
             allowSelection: model.allowSelection,
+            wrapText: model.wrapText,
+            showToggleUrlPath: model.showToggleUrlPath,
+            defaultShowUrlPath: model.defaultShowUrlPath,
             defaultGroupByTagToEnabled: model.defaultGroupByTagToEnabled,
             detailsPageHyperlink: model.detailsPageHyperlink
                 ? {

diff --git a/src/contracts/searchQuery.ts b/src/contracts/searchQuery.ts
@@ -1,6 +1,7 @@
 import { Tag } from "./../models/tag";
 
 export interface SearchQuery {
+    propertyName?: string;
     pattern?: string;
     tags?: Tag[];
     skip?: number;

diff --git a/src/services/apiService.ts b/src/services/apiService.ts
@@ -104,7 +104,7 @@ export class ApiService {
 
             if (searchQuery.pattern) {
                 const pattern = Utils.escapeValueForODataFilter(searchQuery.pattern);
-                odataFilterEntries.push(`(contains(operation/name,'${encodeURIComponent(pattern)}'))`);
+                odataFilterEntries.push(`(contains(operation/${searchQuery.propertyName || 'name'},'${encodeURIComponent(pattern)}'))`);
             }
         }
 
@@ -347,7 +347,7 @@ export class ApiService {
 
             if (searchQuery.pattern) {
                 const pattern = Utils.escapeValueForODataFilter(searchQuery.pattern);
-                query = Utils.addQueryParameter(query, `$filter=contains(properties/displayName,'${encodeURIComponent(pattern)}')`);
+                query = Utils.addQueryParameter(query, `$filter=contains(properties/${searchQuery.propertyName || 'displayName'},'${encodeURIComponent(pattern)}')`);
             }
 
             top = searchQuery && searchQuery.take || Constants.defaultPageSize;

diff --git a/src/themes/website/styles/utils.scss b/src/themes/website/styles/utils.scss
@@ -57,6 +57,10 @@
     white-space: nowrap;
 }
 
+.text-wrap {
+    word-wrap: break-word;
+}
+
 .text-center {
     text-align: center;
 }