feat: Add additional values in info panel key-value element (#2904)

Author: mtrezza

README.md

@@ -949,6 +949,7 @@ A text item that consists of a key and a value. The value can optionally be link
 | `value`         | String  | -           | No       | The value text to display.                                                                                                                                                                              |
 | `url`           | String  | `undefined` | Yes      | The URL that will be opened in a new browser tab when clicking on the value text. It can be set to an absolute URL or a relative URL in which case the base URL is `<PROTOCOL>://<HOST>/<MOUNT_PATH>/`. |
 | `isRelativeUrl` | Boolean | `false`     | Yes      | Set this to `true` when linking to another dashboard page, in which case the base URL for the relative URL will be `<PROTOCOL>://<HOST>/<MOUNT_PATH>/apps/<APP_NAME>/`.                                 |
+| `values`        | Array   | -           | Yes      | Additional values to display after `value`. Each item is an object with `value`, optional `url` and `isRelativeUrl`.                                                                                    |
 | `style`         | Object  | -           | Yes      | The CSS style definition.                                                                                                                                                                               |
 
 Examples:
@@ -981,6 +982,17 @@ Examples:
 }
 ```
 
+```json
+{
+  "type": "keyValue",
+  "key": "Purchase Value",
+  "value": "123",
+  "url": "browser/Purchase",
+  "isRelativeUrl": true,
+  "values": [{ "value": "456" }]
+}
+```
+
 To navigate to a specific object using a relative URL, the query parameters must be URL encoded:
 
 ```js
@@ -1207,4 +1219,4 @@ As of April 5, 2017, Parse, LLC has transferred this code to the parse-community
 
 [license-svg]: https://img.shields.io/badge/license-BSD-lightgrey.svg
 [license-link]: LICENSE
-[open-collective-link]: https://opencollective.com/parse-server
+[open-collective-link]: https://opencollective.com/parse-server

src/components/AggregationPanel/AggregationPanelComponents.js

@@ -4,31 +4,46 @@ import Icon from 'components/Icon/Icon.react';
 import styles from './AggregationPanel.scss';
 
 // Text Element Component
-export const TextElement = ({ text, style}) => (
+export const TextElement = ({ text, style }) => (
   <div className="text-element" style={style}>
     <p>{text}</p>
   </div>
 );
 
 // Key-Value Element Component
 export const KeyValueElement = ({ item, appName, style, showNote }) => {
+  const values = Array.isArray(item.values)
+    ? [{ value: item.value, url: item.url, isRelativeUrl: item.isRelativeUrl }, ...item.values]
+    : [{ value: item.value, url: item.url, isRelativeUrl: item.isRelativeUrl }];
+
   const handleCopy = () => {
     copy(String(item.value));
     if (showNote) {
       showNote('Value copied to clipboard', false);
     }
   };
 
+  const renderValue = ({ value, url, isRelativeUrl }) => {
+    if (url) {
+      return (
+        <a href={isRelativeUrl ? `apps/${appName}/${url}` : url} target="_blank" rel="noreferrer">
+          {value}
+        </a>
+      );
+    }
+
+    return <span>{value}</span>;
+  };
+
   return (
     <div className={styles.keyValue} style={style}>
       {item.key}:
-      {item.url ? (
-        <a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank" rel="noreferrer">
-          {item.value}
-        </a>
-      ) : (
-        <span>{item.value}</span>
-      )}
+      {values.map((val, idx) => (
+        <React.Fragment key={idx}>
+          {idx > 0 && ' '}
+          {renderValue(val)}
+        </React.Fragment>
+      ))}
       <span className={styles.copyIcon} onClick={handleCopy}>
         <Icon name="clone-icon" width={12} height={12} fill="currentColor" />
       </span>