Fixed non-working anchors for definitions, made multiple complex sche…

…mas more readable (#2389) * Fixed non-working anchors for definitions, made multiple complex schemas more readable * Changed the logic of scrolling to the definition
Azure · Feb 8, 2024 · 1f68f15 · 1f68f15
1 parent 95d7ba7
commit 1f68f15
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/components/operations/operation-details/ko/runtime/operation-details.ts b/src/components/operations/operation-details/ko/runtime/operation-details.ts
@@ -176,8 +176,11 @@ export class OperationDetails {
         const apiName = this.routeHelper.getApiName();
         const operationName = this.routeHelper.getOperationName();
         const graphName = this.routeHelper.getGraphName();
+        const definitionName = this.routeHelper.getDefinitionName();
 
-        if (this.enableScrollTo && (operationName || graphName)) {
+        if (definitionName) {
+            this.scrollToDefinition();
+        } else if (this.enableScrollTo && (operationName || graphName)) {
             this.scrollToOperation();
         }
 
@@ -458,6 +461,12 @@ export class OperationDetails {
         headerElement && headerElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
     }
 
+    private scrollToDefinition() {
+        const definitionId = this.router.getHash();
+        const definitionElement = document.getElementById(definitionId);
+        definitionElement && definitionElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
+    }
+
     @OnDestroyed()
     public dispose(): void {
         this.router.removeRouteChangeListener(this.onRouteChange);

diff --git a/src/components/operations/operation-details/ko/runtime/type-definition-object.html b/src/components/operations/operation-details/ko/runtime/type-definition-object.html
@@ -51,7 +51,7 @@
                     <span data-bind="text: property.type.combinationType"></span>:
                 </div>
                 <!-- ko foreach: { data: property.type.combination, as: 'item' } -->
-                <!-- ko if: $index() > 0 -->,
+                <!-- ko if: $index() > 0 -->,<br>
                 <!-- /ko -->
                 <!-- ko if: item.displayAs === 'reference' -->
                 <a class="text-monospace"

diff --git a/src/routing/routeHelper.ts b/src/routing/routeHelper.ts
@@ -67,6 +67,13 @@ export class RouteHelper {
         return this.getHashParameter("graph");
     }
 
+    /**
+     * Returns ARM resource name of the definition specified in hash parameter of the current route, e.g. "users".
+     */
+    public getDefinitionName(): string {
+        return this.getHashParameter("definition");
+    }
+
     /**
      * Returns URL of API details page depending on current route.
      * @param apiName ARM resource name of the API.