Render "Property Bags" in result details. (#407)

* Render "Property Bags" in result details.

* Sample propertyBag log for testing convenience.

Co-authored-by: Eddy Nakamura <eddynaka@gmail.com>

samples/propertyBags.sarif

@@ -0,0 +1,46 @@
+{
+	"$schema": "https://schemastore.azurewebsites.net/schemas/json/sarif-2.1.0-rtm.5.json",
+	"version": "2.1.0",
+	"runs": [
+		{
+			"tool": {
+				"driver": {
+					"name": "NoNameScanner"
+				}
+			},
+			"results": [
+				{
+					"message": {
+						"text": "Result with property bag."
+					},
+					"properties": {
+						"tags": ["openSource"],
+						"sampleBoolean": true,
+						"sampleNumber": 12345,
+						"sampleString": "lorem ipsum",
+						"sampleArray": ["foo", "bar", "baz"],
+						"sampleObject": { "foo": "bar" },
+						"sampleNull": null,
+						"veryLongPropertyName" : "Very long string. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+					}
+				}
+			],
+			"columnKind": "utf16CodeUnits"
+		},
+		{
+			"tool": {
+				"driver": {
+					"name": "NoNameScanner"
+				}
+			},
+			"results": [
+				{
+					"message": {
+						"text": "Result without property bag."
+					}
+				}
+			],
+			"columnKind": "utf16CodeUnits"
+		}
+	]
+}

src/panel/details.scss

@@ -25,6 +25,7 @@
 
                 & > * {
                     &:nth-child(odd) {
+                        width: 100%; // For ellipsis.
                         color: rgb(139, 139, 139); // svSecondary.
                     }
                 }

src/panel/details.tsx

@@ -6,7 +6,7 @@
 import { autorun, computed, IObservableValue, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Component } from 'react';
+import { Component, Fragment } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Location, Result, StackFrame } from 'sarif';
 import { parseArtifactLocation, parseLocation, decodeFileUri } from '../shared';
@@ -100,7 +100,29 @@ interface DetailsProps { result: Result, height: IObservableValue<number> }
                                                                 }}>
                                                                 {result._log._uri.file}{result._log._uriUpgraded && ' (upgraded)'}
                                                             </a>
-                            {/* <span>Properties</span>		<span><pre><code>{JSON.stringify(selected.properties, null, '  ')}</code></pre></span> */}
+                            {(() => {
+                                // Rendering "tags" reserved for a future release.
+                                const { tags, ...rest } = result.properties ?? {};
+                                return <>
+                                    <span>&nbsp;</span><span></span>{/* Blank separator line */}
+                                    {Object.entries(rest).map(([key, value]) => {
+                                        return <Fragment key={key}>
+                                            <span className="ellipsis">{key}</span>
+                                            <span>{(() => {
+                                                if (value === null)
+                                                    return '—';
+                                                if (Array.isArray(value))
+                                                    return <span style={{ whiteSpace: 'pre' }}>{value.join('\n')}</span>;
+                                                if (typeof value === 'boolean')
+                                                    return JSON.stringify(value, null, 2);
+                                                if (typeof value === 'object')
+                                                    return <pre style={{ margin: 0, fontSize: '0.7rem' }}><code>{JSON.stringify(value, null, 2)}</code></pre>;
+                                                return value;
+                                            })()}</span>
+                                        </Fragment>;
+                                    })}
+                                </>;
+                            })()}
                         </div>
                     </div>
                 </Tab>