Fixed scroll to operation (#2200)

* Fixed scroll to operation in operation details * use id instead of class; fixed for graphql
Azure · Jun 5, 2023 · 53bfff2 · 53bfff2
1 parent 435f7b8
commit 53bfff2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/components/operations/operation-details/ko/runtime/operation-details.html b/src/components/operations/operation-details/ko/runtime/operation-details.html
@@ -9,7 +9,7 @@
 <div class="animation-fade-in">
     <div class="row flex flex-row">
         <div class="col-md-11  text-wrap">
-            <h2 class="operation-name">
+            <h2 id="operation-name">
                 <span data-bind="text: operation().displayName"></span>
             </h2>
         </div>
@@ -294,7 +294,7 @@ <h3>Definitions</h3>
 <!-- ko if: operation -->
 <div class="animation-fade-in row flex flex-row">
     <div class="col-md-11 text-wrap">
-        <h2 class="operation-name">
+        <h2 id="operation-name">
             <span data-bind="text: operation().displayName"></span>
         </h2>
     </div>
@@ -335,7 +335,7 @@ <h3>Protocol</h3>
 <div class="animation-fade-in">
     <div class="row flex flex-row">
         <div class="col-md-11 text-wrap">
-            <h2>GraphQL endpoint</h2>
+            <h2 id="operation-name">GraphQL endpoint</h2>
             <span class="monospace" data-bind="text: $component.requestUrlSample"></span>
         </div>
         <!-- ko if: $component.enableConsole -->

diff --git a/src/components/operations/operation-details/ko/runtime/operation-details.ts b/src/components/operations/operation-details/ko/runtime/operation-details.ts
@@ -147,6 +147,7 @@ export class OperationDetails {
     public async initialize(): Promise<void> {
         const apiName = this.routeHelper.getApiName();
         const operationName = this.routeHelper.getOperationName();
+        const graphName = this.routeHelper.getGraphName();
 
         this.selectedApiName(apiName);
         this.selectedOperationName(operationName);
@@ -158,11 +159,20 @@ export class OperationDetails {
         if (operationName) {
             await this.loadOperation(apiName, operationName);
         }
+
+        if (this.enableScrollTo && (operationName || graphName)) {
+            this.scrollToOperation();
+        }
     }
 
     private async onRouteChange(): Promise<void> {
         const apiName = this.routeHelper.getApiName();
         const operationName = this.routeHelper.getOperationName();
+        const graphName = this.routeHelper.getGraphName();
+
+        if (this.enableScrollTo && (operationName || graphName)) {
+            this.scrollToOperation();
+        }
 
         if (apiName && apiName !== this.selectedApiName()) {
             this.selectedApiName(apiName);
@@ -232,11 +242,6 @@ export class OperationDetails {
         this.tags(operationTags.map(tag => tag.name));
 
         this.working(false);
-
-        if (this.enableScrollTo) {
-            const headerElement = document.querySelector(".operation-header");
-            headerElement && headerElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
-        }
     }
 
     public async loadDefinitions(operation: Operation): Promise<void> {
@@ -423,6 +428,11 @@ export class OperationDetails {
         return this.routeHelper.getDefinitionAnchor(apiName, operationName, definition.name);
     }
 
+    private scrollToOperation() {
+        const headerElement = document.getElementById("operation-name");
+        headerElement && headerElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
+    }
+
     @OnDestroyed()
     public dispose(): void {
         this.router.removeRouteChangeListener(this.onRouteChange);