Added support for tags as a refrence in url for apis and operations (#…

…1189)
Azure · Mar 16, 2021 · d4198ea · d4198ea
1 parent 4340ac6
commit d4198ea
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 10 deletions.
diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list.ts b/src/components/apis/list-of-apis/ko/runtime/api-list.ts
@@ -8,7 +8,6 @@ import { TagGroup } from "../../../../../models/tagGroup";
 import { SearchQuery } from "../../../../../contracts/searchQuery";
 import { RouteHelper } from "../../../../../routing/routeHelper";
 import { Tag } from "../../../../../models/tag";
-import { Utils } from "../../../../../utils";
 
 
 @RuntimeComponent({
@@ -61,18 +60,15 @@ export class ApiList {
     @OnMounted()
     public async initialize(): Promise<void> {
         this.groupByTag(this.defaultGroupByTagToEnabled());
+        this.tags.subscribe(this.resetSearch);
 
         await this.resetSearch();
 
         this.pattern
             .extend({ rateLimit: { timeout: Constants.defaultInputDelayMs, method: "notifyWhenChangesStop" } })
             .subscribe(this.resetSearch);
 
-        this.tags
-            .subscribe(this.resetSearch);
-
-        this.groupByTag
-            .subscribe(this.resetSearch);
+        this.groupByTag.subscribe(this.resetSearch);
     }
 
     /**

diff --git a/src/components/operations/operation-list/ko/runtime/operation-list.ts b/src/components/operations/operation-list/ko/runtime/operation-list.ts
@@ -93,6 +93,8 @@ export class OperationList {
         this.selectedOperationName(operationName);
 
         this.groupByTag(this.defaultGroupByTagToEnabled());
+        this.tags.subscribe(this.resetSearch);
+
         this.showUrlPath(this.defaultShowUrlPath());
 
         if (this.selectedApiName()) {
@@ -103,9 +105,6 @@ export class OperationList {
             .extend({ rateLimit: { timeout: Constants.defaultInputDelayMs, method: "notifyWhenChangesStop" } })
             .subscribe(this.resetSearch);
 
-        this.tags
-            .subscribe(this.resetSearch);
-
         this.groupByTag
             .subscribe(this.loadOperations);
 

diff --git a/src/components/tag-input/tag-input.ts b/src/components/tag-input/tag-input.ts
@@ -5,6 +5,9 @@ import tagListTemplate from "./tag-list.html";
 import { Component, Event, Param, OnMounted } from "@paperbits/common/ko/decorators";
 import { Tag } from "../../models/tag";
 import { TagService } from "../../services/tagService";
+import { RouteHelper } from "../../routing/routeHelper";
+import { TagContract } from "../../contracts/tag";
+import { Utils } from "../../utils";
 
 @Component({
     selector: "tag-input",
@@ -19,7 +22,10 @@ export class TagInput {
     public readonly canAddTags: ko.Computed<boolean>;
     public readonly availableTags: ko.Computed<Tag[]>;
 
-    constructor(private readonly tagService: TagService) {
+    constructor(
+        private readonly tagService: TagService,
+        private readonly routeHelper: RouteHelper
+        ) {
         this.tags = ko.observableArray();
         this.scope = ko.observable();
         this.pattern = ko.observable();
@@ -43,6 +49,8 @@ export class TagInput {
             return;
         }
 
+        this.initTagsFilter();
+
         await this.resetSearch();
 
         this.pattern
@@ -53,6 +61,31 @@ export class TagInput {
             .subscribe(this.resetSearch);
     }
 
+    private initTagsFilter() {        
+        const tagsValue = this.routeHelper.getTags();
+
+        if (tagsValue) {
+            const tags = tagsValue.split("|");
+            const tagItems = [];
+            if (tags && tags.length > 0) {
+                for (let i = 0; i < tags.length; i++) {
+                    const tag = tags[i];
+                    const tagContract: TagContract = Utils.armifyContract("tags", {
+                        id: `/tags/${tag}`,
+                        name: tag
+                    });
+                    tagItems.push(new Tag(tagContract));
+
+                }
+                this.selection(tagItems);
+                if (this.onChange) {
+                    this.onChange(this.selection());
+                    this.onDismiss.notifySubscribers();
+                }
+            }
+        }
+    }
+
     public async loadPageOfTags(): Promise<void> {
         const pageOfTags = await this.tagService.getTags(this.scope(), this.pattern());
         const tags = pageOfTags.value.filter(tag => !this.selection().map(x => x.id).includes(tag.id));
@@ -66,6 +99,7 @@ export class TagInput {
 
     public addTag(tag: Tag): void {
         this.selection.push(tag);
+        this.routeHelper.setHashParameter("tags", this.selection().map(t => t.name).join("|"));
 
         if (this.onChange) {
             this.onChange(this.selection());
@@ -75,6 +109,7 @@ export class TagInput {
 
     public removeTag(tag: Tag): void {
         this.selection.remove(tag);
+        this.routeHelper.setHashParameter("tags", this.selection().map(t => t.name).join("|"));
 
         if (this.onChange) {
             this.onChange(this.selection());

diff --git a/src/routing/routeHelper.ts b/src/routing/routeHelper.ts
@@ -12,13 +12,33 @@ export class RouteHelper {
         return params.get(name);
     }
 
+    public setHashParameter(name: string, value: string): void {
+        const route = this.router.getCurrentRoute();
+        const params = new URLSearchParams(route.hash ? `?${route.hash}` : "");
+
+        if(value) {
+            params.set(name, value);
+        } else {
+            params.delete(name);
+        }
+
+        this.router.navigateTo(`#${params.toString()}`);
+    }
+
     /**
      * Returns ARM resource name of the API specified in hash parameter of the current route, e.g. "httpbin".
      */
     public getApiName(): string {
         return this.getHashParameter("api");
     }
 
+    /**
+     * Returns ARM resource name of the API specified in hash parameter of the current route, e.g. "httpbin".
+     */
+    public getTags(): string {
+        return this.getHashParameter("tags");
+    }
+
     /**
      * Returns ARM resource name of the operation specified in hash parameter of the current route, e.g. "status".
      */