diff --git a/src/components/operations/operation-details/ko/runtime/authorization.html b/src/components/operations/operation-details/ko/runtime/authorization.html index 06e060a6b..cd09ff5b7 100644 --- a/src/components/operations/operation-details/ko/runtime/authorization.html +++ b/src/components/operations/operation-details/ko/runtime/authorization.html @@ -1,94 +1,90 @@ -

Authorization - -

+
+ +

+ Authorization + +

+ - - -
-
- -
-
-
- + +
+
+
-
-
- -
-
- -
-
-
- +
+
+ +
-
-
-
- -
-
-
- - + +
+
+ +
+
+
+ +
-
-
-
+
+
+ +
+
+
+ + +
+
-
-
- +
+
+
+
+
+ +
-
- - + + - -
-
- -
-
-
- - + + + + + + - + + + + - - - - - +
-
- - + +
\ No newline at end of file diff --git a/src/components/operations/operation-details/ko/runtime/authorization.ts b/src/components/operations/operation-details/ko/runtime/authorization.ts index 6acd2525c..81ab56375 100644 --- a/src/components/operations/operation-details/ko/runtime/authorization.ts +++ b/src/components/operations/operation-details/ko/runtime/authorization.ts @@ -35,7 +35,6 @@ export class Authorization { public readonly authorizationError: ko.Observable; public readonly products: ko.Observable; public readonly selectedSubscriptionKey: ko.Observable; - public readonly collapsedAuth: ko.Observable; private deleteAuthorizationHeader: boolean = false; constructor( @@ -45,7 +44,6 @@ export class Authorization { private readonly apiService: ApiService, private readonly productService: ProductService, ) { - this.collapsedAuth = ko.observable(false); this.authorizationServer = ko.observable(); this.selectedGrantType = ko.observable(); this.api = ko.observable(); @@ -456,8 +454,4 @@ export class Authorization { this.updateRequestSummary(); } } - - public collapseAuth(): void { - this.collapsedAuth(!this.collapsedAuth()); - } } \ No newline at end of file diff --git a/src/components/operations/operation-details/ko/runtime/graphql-console.html b/src/components/operations/operation-details/ko/runtime/graphql-console.html index 61a12b638..a58deff02 100644 --- a/src/components/operations/operation-details/ko/runtime/graphql-console.html +++ b/src/components/operations/operation-details/ko/runtime/graphql-console.html @@ -33,131 +33,124 @@ params="{ api: api, authorizationServer: authorizationServer, headers: headers, queryParameters: queryParameters }"> -

Parameters - -

- - -
-
-
-
-
- - +
+ +

+ Parameters + +

+ + + +
+
+
+
+
+ + +
-
-
-
- - - -
- - - - - - - - +
+
+ + +
+ + + + + + + + + +
+ +
+ +
+
- -
- -
-
-
- + - - - Add parameter - - + + + Add parameter + +
-

Headers - -

- - -
-
-
-
-
- - +
+ +

+ Headers + +

+ + + +
+
+
+
+
+ + +
-
-
-
- - - - +
- - + + + + +
+ + +
+
-
-
- -
- + +
+ +
+
-
-
- + - - Add header - - + + Add header + +
@@ -172,21 +165,16 @@

Explorer

-
- - -
- - - - + + + + +
diff --git a/src/components/operations/operation-details/ko/runtime/graphql-console.ts b/src/components/operations/operation-details/ko/runtime/graphql-console.ts index 884a8aa02..8cfa36b00 100644 --- a/src/components/operations/operation-details/ko/runtime/graphql-console.ts +++ b/src/components/operations/operation-details/ko/runtime/graphql-console.ts @@ -56,11 +56,6 @@ export class GraphqlConsole { public readonly document: ko.Observable; public readonly sendingRequest: ko.Observable; public readonly working: ko.Observable; - public readonly collapsedHeaders: ko.Observable; - public readonly collapsedQuery: ko.Observable; - public readonly collapsedMutation: ko.Observable; - public readonly collapsedSubscription: ko.Observable; - public readonly collapsedParameters: ko.Observable; public readonly queryParameters: ko.ObservableArray; public readonly headers: ko.ObservableArray; public readonly editorErrors: ko.ObservableArray; @@ -88,11 +83,6 @@ export class GraphqlConsole { private readonly logger: Logger ) { this.working = ko.observable(true); - this.collapsedHeaders = ko.observable(true); - this.collapsedQuery = ko.observable(true); - this.collapsedMutation = ko.observable(true); - this.collapsedSubscription = ko.observable(true); - this.collapsedParameters = ko.observable(true); this.editorErrors = ko.observableArray([]); this.api = ko.observable(); this.sendingRequest = ko.observable(false); @@ -482,7 +472,7 @@ export class GraphqlConsole { } /** - * + * * @param nodes list of root nodes to generate from * @param level level for indent * @returns string of generated node, for example: @@ -538,7 +528,7 @@ export class GraphqlConsole { } /** - * + * * @param node root node, either query, mutation, or subscription * @returns list of variable as string to parse in document. For example, ($lim: Int!) */ @@ -576,15 +566,6 @@ export class GraphqlConsole { return gqlFieldName; } - public collapse(collapsible: string): void { - this[collapsible](!this[collapsible]()); - } - - public collapsedType(type: string): boolean { - const varName = "collapsed" + type; - return this[varName](); - } - private availableOperations(): void { _.forEach(this.graphDocService.availableTypes(), (type) => { const node = this.operationNodes[this.graphDocService.typeIndexer()[type]](); diff --git a/src/components/operations/operation-details/ko/runtime/operation-console.html b/src/components/operations/operation-details/ko/runtime/operation-console.html index 211103bd4..e8ee2b092 100644 --- a/src/components/operations/operation-details/ko/runtime/operation-console.html +++ b/src/components/operations/operation-details/ko/runtime/operation-console.html @@ -86,466 +86,442 @@

Host

params="{ api: $component.api, authorizationServer: $component.authorizationServer, consoleOperation: $component.consoleOperation, updateRequestSummary: $component.updateRequestSummary}"> -

Parameters - -

- - -
-
-
- -
-
-
- - - - -
- - +
+ +

+ Parameters + +

+ + + +
+
+
+ +
+
+
+ + + + +
+ + +
+
-
-
-
-
-
-
-
- - +
+
+
+
+
+ + +
-
-
-
- - - -
- - - - - - - - - +
+
+ + +
+ + + + + + + + + + +
+ +
+ +
+
- -
- -
-
-
- - - - - Add parameter - - - -

Headers - -

+ - - - Headers are not supported in the test console for WebSocket APIs. - + + + Add parameter + + + +
+ +

+ Headers + +

+ + + + Headers are not supported in the test console for WebSocket APIs. + - - -
-
-
-
-
- - + + +
+
+
+
+
+ + +
-
-
-
- - - - -
- - +
+
+ + - - - + +
+ + + + + + + + +
-
-
+ +
+ +
+
- -
- -
-
-
- + - - Add header - - - + + Add header + + +
+
+ +

+ Body + +

+ + + + + Add body + + -

Body - -

- - - - - Add body - - - - -
-
- -
-
- -
- - -
- -
- - + +
+
+
-
- - +
+ +
+ + +
+ +
+ + +
+
+ + +
-
- -
-
- -
-
-
- + +
+
+ +
+
+
+ +
+
+
+ + +
-
- - - -
-
- - - - -
- - - - - - -
- - -
-
- -
+ +
- -
- -
- - + + data-bind="textInput: request.body"> - - - - + + +
-
- -
- -
- - + + +
+
+ +
+
+ +
+ +
+ + + + + + + + + +
+
+ +
+ +
+ +
-

HTTP request - - + + +
+
+ + +
-

- - 

-            
-            
-            
+                
+                

+                
+                
+            
         

         
 
         
         

-            
WebSocket request
-                
-                    
+                
+
+                

+                    

+                        
+                        
+                    

                 

-            

 
-            
-            

-            
-            
-            
Payload

-            

-                

-                    
-                    
-                

-                

-                    
-                    
-                

-            

-            

-                
-                
+                
+                

                 
-                
-                
-                
-                
-            

-
-            

-                

-                    
+                
+                
Payload

+                

+                    

+                        
+                        
+                    

+                    

+                        
+                        
+                    

+                

+                

+                    
+                    
+                    
+                    
+                    
+                    
+                    
                 

-            

-            
 
-            
Output

-            
-            

-                

-                    
+                

+                    

+                        
+                    

                 

-            

+                
 
-            

-                

-                    

-                        
Name

-                        

-                        
Data

+                
Output

+                
+                

+                    

+                        
                     

                 

-                

-                    
-                    

-                        

-                        

-                        

-                            
+
+                

+                    

+                        

+                            
Name

+                            

+                            
Data

                         

-                        

+                    

+                    

+                        
+                        

+                            

+                            

+                            

+                                
+                            

+                            

+                            

                         

+                        
                     

-                    
                 

-            

-            
+                
 
-            
-            
Sent and received messages will appear here. Send a payload to begin.

-            
-            
+                
+                
Sent and received messages will appear here. Send a payload to begin.

+                
+            
         

         
 
diff --git a/src/components/operations/operation-details/ko/runtime/operation-console.ts b/src/components/operations/operation-details/ko/runtime/operation-console.ts
index af2233651..2ac058d6a 100644
--- a/src/components/operations/operation-details/ko/runtime/operation-console.ts
+++ b/src/components/operations/operation-details/ko/runtime/operation-console.ts
@@ -53,10 +53,6 @@ export class OperationConsole {
     public readonly isHostnameWildcarded: ko.Computed;
     public readonly hostnameSelectionEnabled: ko.Observable;
     public readonly wildcardSegment: ko.Observable;
-    public readonly collapsedParameters: ko.Observable;
-    public readonly collapsedHeaders: ko.Observable;
-    public readonly collapsedBody: ko.Observable;
-    public readonly collapsedRequest: ko.Observable;
     public isConsumptionMode: boolean;
     public templates: Object;
     public backendUrl: string;
@@ -118,11 +114,6 @@ export class OperationConsole {
         this.wsDataFormat = ko.observable("raw");
         this.wsLogItems = ko.observableArray([]);
 
-        this.collapsedParameters = ko.observable(false);
-        this.collapsedHeaders = ko.observable(false);
-        this.collapsedBody = ko.observable(false);
-        this.collapsedRequest = ko.observable(false);
-
         this.bodyStash = "";
 
         validation.rules["maxFileSize"] = {
@@ -682,22 +673,6 @@ export class OperationConsole {
         return this.routeHelper.getApiReferenceUrl(this.api().name);
     }
 
-    public collapseParameters(): void {
-        this.collapsedParameters(!this.collapsedParameters());
-    }
-
-    public collapseHeaders(): void {
-        this.collapsedHeaders(!this.collapsedHeaders());
-    }
-
-    public collapseBody(): void {
-        this.collapsedBody(!this.collapsedBody());
-    }
-
-    public collapseRequest(): void {
-        this.collapsedRequest(!this.collapsedRequest());
-    }
-
     public logCopyEvent(): void {
         this.logger.trackEvent("CodeSampleCopied", { language: this.selectedLanguage(), message: "Code sample copied to clipboard" });
     }
diff --git a/src/themes/website/styles/details.scss b/src/themes/website/styles/details.scss
new file mode 100644
index 000000000..5b964b8db
--- /dev/null
+++ b/src/themes/website/styles/details.scss
@@ -0,0 +1,21 @@
+details.details-styled {
+  summary {
+    list-style: none;
+    cursor: pointer;
+
+    i.icon-emb {
+      display: inline-block;
+      transition: transform .33s ease;
+    }
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  &[open] summary {
+    i.icon-emb {
+      transform: rotate(-180deg);
+    }
+  }
+}
diff --git a/src/themes/website/styles/styles.scss b/src/themes/website/styles/styles.scss
index 605676a80..e53c38155 100644
--- a/src/themes/website/styles/styles.scss
+++ b/src/themes/website/styles/styles.scss
@@ -29,3 +29,4 @@
 @import "panels.scss";
 @import "monaco.editor.scss";
 @import "gql.scss";
+@import "details.scss";