Improve API UI for JSON-RPC enums & all API object params

Author: pimterry

src/components/view/http/http-api-card.tsx

@@ -132,6 +132,33 @@ const getDetailsWithWarnings = (details: Html | undefined, warnings: string[]) =
     details && <ExternalContent key='details' content={details} />
 ].filter(d => !!d);
 
+
+const ObjectParamContainer = styled.div`
+    display: grid;
+    grid-template-columns: fit-content(30%) auto;
+    grid-gap: 5px;
+    margin-bottom: 10px;
+`;
+
+const ObjectParamKey = styled.div`
+    font-family: ${p => p.theme.monoFontFamily};
+    word-break: break-all;
+    text-align: right;
+`;
+
+const ObjectParamValue = styled.pre`
+    font-family: ${p => p.theme.monoFontFamily};
+    word-break: break-all;
+    white-space: pre-wrap;
+`;
+
+const ObjectParamDetails = (p: { value: object }) => <ObjectParamContainer>{
+    Object.entries(p.value).map(([key, value], i) => [
+        <ObjectParamKey key={`${i}-key`}>{ key }:</ObjectParamKey>,
+        <ObjectParamValue key={`${i}-value`}>{ value }</ObjectParamValue>
+    ])
+}</ObjectParamContainer>;
+
 const ApiRequestDetails = (props: {
     api: ApiExchange
 }) => {
@@ -210,6 +237,10 @@ const ApiRequestDetails = (props: {
 
                         <CollapsibleSectionBody>
                             { getDetailsWithWarnings(param.description, param.warnings) }
+                            { param.type === 'object' && Object.keys(param).length > 1
+                                ? <ObjectParamDetails value={param.value as object} />
+                                : null
+                            }
                             <ParamMetadata param={param}/>
                         </CollapsibleSectionBody>
                     </CollapsibleSection>

src/model/api/jsonrpc.ts

@@ -174,28 +174,34 @@ export class JsonRpcApiRequest implements ApiRequest {
         const { methodSpec, parsedBody } = rpcMethod;
 
         this.parameters = (methodSpec.params as ContentDescriptorObject[])
-            .map((param: ContentDescriptorObject, i: number) => ({
-                name: param.name,
-                description: fromMarkdown([
-                    param.summary,
-                    param.description,
-                    (param.schema as JSONSchemaObject)?.title
-                ].filter(x => !!x).join('\n\n')),
-                in: 'body',
-                required: !!param.required,
-                deprecated: !!param.deprecated,
-                value: parsedBody.params[i],
-                defaultValue: (param.schema as JSONSchemaObject).default,
-                warnings: [
-                    ...(param.deprecated ? [`The '${param.name}' parameter is deprecated.`] : []),
-                    ...(param.required &&
-                        parsedBody.params[i] === undefined &&
-                        (param.schema as JSONSchemaObject).default === undefined
-                        ? [`The '${param.name}' parameter is required.`]
-                        : []
-                    )
-                ]
-            }));
+            .map((param: ContentDescriptorObject, i: number) => {
+                const schema = param.schema as JSONSchemaObject | undefined;
+
+                return {
+                    name: param.name,
+                    description: fromMarkdown([
+                        param.summary,
+                        param.description,
+                        schema?.title
+                    ].filter(x => !!x).join('\n\n')),
+                    in: 'body',
+                    required: !!param.required,
+                    deprecated: !!param.deprecated,
+                    type: schema?.type,
+                    value: parsedBody.params[i],
+                    defaultValue: schema?.default,
+                    enum: schema?.enum || (schema?.items as SchemaObject | undefined)?.enum,
+                    warnings: [
+                        ...(param.deprecated ? [`The '${param.name}' parameter is deprecated.`] : []),
+                        ...(param.required &&
+                            parsedBody.params[i] === undefined &&
+                            (schema && schema.default === undefined)
+                            ? [`The '${param.name}' parameter is required.`]
+                            : []
+                        )
+                    ]
+                };
+            });
     }
 
     parameters: ApiParameter[];