Complete the view-row layout for built-in APIs

Author: pimterry

extra-apis/ethereum.json

@@ -8,7 +8,8 @@
 			"url": "https://creativecommons.org/publicdomain/zero/1.0/legalcode"
 		},
 		"version": "0.0.0",
-		"x-httptoolkit-builtin-api": true
+		"x-httptoolkit-builtin-api": true,
+		"x-httptoolkit-short-name": "Eth"
 	},
 	"servers": [
 		{ "url": "http://localhost:8545" },

extra-apis/ipfs.json

@@ -8,7 +8,8 @@
     "x-logo": {
       "url": "https://raw.githubusercontent.com/ipfs/ipfs-docs/55fe8bc6a53ba3b9023951fb4b432efbbc81fba5/docs/.vuepress/public/images/ipfs-logo.svg"
     },
-    "x-httptoolkit-builtin-api": true
+    "x-httptoolkit-builtin-api": true,
+    "x-httptoolkit-short-name": "IPFS"
   },
   "servers": [
     {

src/components/view/view-event-list.tsx

@@ -320,7 +320,7 @@ const EventRow = observer((props: EventRowProps) => {
             failure={event}
         />;
     } else if (event.isHttp()) {
-        if (event.api?.isBuiltInApi) {
+        if (event.api?.isBuiltInApi && event.api.matchedOperation()) {
             return <BuiltInApiRow
                 index={index}
                 isSelected={isSelected}
@@ -554,9 +554,6 @@ const BuiltInApiRow = observer((p: {
     } = p.exchange;
     const api = p.exchange.api!; // Only shown for built-in APIs, so this must be set
 
-    // Quick hack, but it works for our only two current examples:
-    const name = api.service.name.split(' ')[0];
-
     return <TrafficEventListRow
         role="row"
         aria-label='row'
@@ -569,20 +566,27 @@ const BuiltInApiRow = observer((p: {
     >
         <RowPin pinned={pinned}/>
         <RowMarker category={category} title={describeEventCategory(category)} />
-        <EventTypeColumn>{ name }</EventTypeColumn>
+        <EventTypeColumn>
+            { api.service.shortName }: {
+                _.startCase(
+                    api.operation.name
+                    .replace('eth_', '') // One-off hack for Ethereum, but result looks much nicer.
+                )
+            }
+        </EventTypeColumn>
         <Source title={request.source.summary}>
             <Icon
                 {...request.source.icon}
                 fixedWidth={true}
             />
         </Source>
         <BuiltInApiRequestDetails>
-            { api.operation.name }({
+            {
                 api.request.parameters
-                    .filter(param => param.value !== undefined)
-                    .map(param => `${param.name}=${JSON.stringify(param.value)}`)
-                    .join(', ')
-            })
+                .filter(param => param.value !== undefined)
+                .map(param => `${param.name}=${JSON.stringify(param.value)}`)
+                .join(', ')
+            }
         </BuiltInApiRequestDetails>
     </TrafficEventListRow>
 });

src/model/api/api-interfaces.ts

@@ -40,6 +40,7 @@ export interface ApiExchange {
 }
 
 export interface ApiService {
+    readonly shortName: string;
     readonly name: string;
     readonly logoUrl?: string;
     readonly description?: Html;

src/model/api/jsonrpc.ts

@@ -121,11 +121,15 @@ export class JsonRpcApiService implements ApiService {
 
     constructor(api: OpenRpcMetadata) {
         this.name = api.spec.info.title;
+        this.shortName = api.spec.info['x-httptoolkit-short-name']
+            ?? this.name.split(' ')[0];
+
         this.logoUrl = api.spec.info['x-logo']?.url;
         this.description = fromMarkdown(api.spec.info.description);
         this.docsUrl = api.spec.externalDocs?.url;
     }
 
+    readonly shortName: string;
     readonly name: string;
     readonly logoUrl?: string | undefined;
     readonly description?: Html | undefined;

src/model/api/openapi-schema.ts

@@ -109,6 +109,9 @@ export const openApiSchema = {
         "x-httptoolkit-builtin-api": {
           "type": "boolean",
           "default": false
+        },
+        "x-httptoolkit-short-name": {
+          "type": "string"
         }
       },
       "additionalProperties": false

src/model/api/openapi.ts

@@ -318,11 +318,15 @@ class OpenApiService implements ApiService {
         const { info: service } = spec;
 
         this.name = service.title;
+        this.shortName = service['x-httptoolkit-short-name']
+            ?? this.name.split(' ')[0];
+
         this.logoUrl = service['x-logo']?.url;
         this.description = fromMarkdown(service.description);
         this.docsUrl = spec?.externalDocs?.url;
     }
 
+    public readonly shortName: string;
     public readonly name: string;
     public readonly logoUrl?: string;
     public readonly description?: Html;