feat: add option to configure a default to expand all group tags (#2330)

Author: jan-mrm

src/components/operations/operation-list/ko/operationListEditor.html

@@ -33,6 +33,13 @@
         </label>
     </div>
 
+    <div class="form-group">
+        <label for="defaultAllGroupTagsExpanded" class="form-label">
+            <input type="checkbox" id="defaultAllGroupTagsExpanded" name="defaultAllGroupTagsExpanded" data-bind="checked: defaultAllGroupTagsExpanded" />
+            Default to expand all GroupTags
+        </label>
+    </div>
+
     <div class="form-group">
         <label for="hyperlink" class="form-label">
             Link to operation details page

src/components/operations/operation-list/ko/operationListEditor.ts

@@ -14,6 +14,7 @@ export class OperationListEditor {
     public readonly showToggleUrlPath: ko.Observable<boolean>;
     public readonly defaultShowUrlPath: ko.Observable<boolean>;
     public readonly defaultGroupByTagToEnabled: ko.Observable<boolean>;
+    public readonly defaultAllGroupTagsExpanded: ko.Observable<boolean>;
     public readonly hyperlink: ko.Observable<HyperlinkModel>;
     public readonly hyperlinkTitle: ko.Computed<string>;
 
@@ -23,6 +24,7 @@ export class OperationListEditor {
         this.showToggleUrlPath = ko.observable();
         this.defaultShowUrlPath = ko.observable();
         this.defaultGroupByTagToEnabled = ko.observable(false);
+        this.defaultAllGroupTagsExpanded = ko.observable(false);
         this.hyperlink = ko.observable();
         this.hyperlinkTitle = ko.computed<string>(() => this.hyperlink() ? this.hyperlink().title : "Add a link...");
     }
@@ -40,13 +42,15 @@ export class OperationListEditor {
         this.showToggleUrlPath(this.model.showToggleUrlPath);
         this.defaultShowUrlPath(this.model.defaultShowUrlPath);
         this.defaultGroupByTagToEnabled(this.model.defaultGroupByTagToEnabled);
+        this.defaultAllGroupTagsExpanded(this.model.defaultAllGroupTagsExpanded);
         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);
+        this.defaultAllGroupTagsExpanded.subscribe(this.applyChanges);
     }
 
     private applyChanges(): void {
@@ -55,6 +59,7 @@ export class OperationListEditor {
         this.model.showToggleUrlPath = this.showToggleUrlPath();
         this.model.defaultShowUrlPath = this.defaultShowUrlPath();
         this.model.defaultGroupByTagToEnabled = this.defaultGroupByTagToEnabled();
+        this.model.defaultAllGroupTagsExpanded = this.defaultAllGroupTagsExpanded();
         this.model.detailsPageHyperlink = this.hyperlink();
         this.onChange(this.model);
     }

src/components/operations/operation-list/ko/operationListViewModelBinder.ts

@@ -16,6 +16,7 @@ export class OperationListViewModelBinder implements ViewModelBinder<OperationLi
             showToggleUrlPath: state.showToggleUrlPath,
             defaultShowUrlPath: state.defaultShowUrlPath,
             defaultGroupByTagToEnabled: state.defaultGroupByTagToEnabled,
+            defaultAllGroupTagsExpanded: state.defaultAllGroupTagsExpanded,
             detailsPageUrl: state.detailsPageUrl
         }));
     }
@@ -26,6 +27,7 @@ export class OperationListViewModelBinder implements ViewModelBinder<OperationLi
         state.showToggleUrlPath = model.showToggleUrlPath;
         state.defaultShowUrlPath = model.defaultShowUrlPath;
         state.defaultGroupByTagToEnabled = model.defaultGroupByTagToEnabled;
+        state.defaultAllGroupTagsExpanded = model.defaultAllGroupTagsExpanded;
         state.detailsPageUrl = model.detailsPageHyperlink
             ? model.detailsPageHyperlink.href
             : undefined

src/components/operations/operation-list/ko/runtime/operation-list.ts

@@ -58,6 +58,7 @@ export class OperationList {
         this.groupByTag = ko.observable(false);
         this.defaultGroupByTagToEnabled = ko.observable(false);
         this.groupTagsExpanded = ko.observable(new Set<string>());
+        this.defaultAllGroupTagsExpanded = ko.observable(false);
         this.pattern = ko.observable();
         this.tags = ko.observable([]);
         this.pageNumber = ko.observable(1);
@@ -82,6 +83,9 @@ export class OperationList {
     @Param()
     public defaultGroupByTagToEnabled: ko.Observable<boolean>;
 
+    @Param()
+    public defaultAllGroupTagsExpanded: ko.Observable<boolean>;
+
     @Param()
     public detailsPageUrl: ko.Observable<string>;
 
@@ -113,6 +117,12 @@ export class OperationList {
 
         this.pageNumber
             .subscribe(this.loadOperations);
+
+        if (this.defaultAllGroupTagsExpanded()) {
+            let groups = new Set<string>()
+            this.operationGroups().map(g => {groups.add(g.tag)})
+            this.groupTagsExpanded(groups);
+        }
     }
 
     private async onRouteChange(): Promise<void> {

src/components/operations/operation-list/operationListContract.ts

@@ -31,6 +31,11 @@ export interface OperationListContract extends Contract {
      */
     defaultGroupByTagToEnabled?: boolean;
 
+    /**
+     * Default to expand all GroupTags.
+     */
+    defaultAllGroupTagsExpanded: boolean;
+
     /**
      * Link to a page that contains operation details.
      */

src/components/operations/operation-list/operationListModel.ts

@@ -27,6 +27,11 @@ export class OperationListModel {
      */
     public defaultGroupByTagToEnabled: boolean;
 
+    /**
+     * Default to expand all GroupTags.
+     */
+    public defaultAllGroupTagsExpanded: boolean;
+
     /**
      * Link to a page that contains operation details.
      */

src/components/operations/operation-list/operationListModelBinder.ts

@@ -14,6 +14,7 @@ export class OperationListModelBinder implements IModelBinder<OperationListModel
         model.showToggleUrlPath = contract.showToggleUrlPath;
         model.defaultShowUrlPath = contract.defaultShowUrlPath;
         model.defaultGroupByTagToEnabled = contract.defaultGroupByTagToEnabled === true;
+        model.defaultAllGroupTagsExpanded = contract.defaultAllGroupTagsExpanded === true;
         model.styles = contract.styles ?? {};
 
         if (contract.detailsPageHyperlink) {
@@ -31,6 +32,7 @@ export class OperationListModelBinder implements IModelBinder<OperationListModel
             showToggleUrlPath: model.showToggleUrlPath,
             defaultShowUrlPath: model.defaultShowUrlPath,
             defaultGroupByTagToEnabled: model.defaultGroupByTagToEnabled,
+            defaultAllGroupTagsExpanded: model.defaultAllGroupTagsExpanded,
             detailsPageHyperlink: model.detailsPageHyperlink
                 ? {
                     target: model.detailsPageHyperlink.target,