feat: support multiple key value entries

Author: mtrezza

README.md

@@ -946,7 +946,8 @@ A text item that consists of a key and a value. The value can optionally be link
 |-----------------|---------|-------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `type`          | String  | -           | No       | Must be `"keyValue"`.                                                                                                                                                                                   |
 | `key`           | String  | -           | No       | The key text to display.                                                                                                                                                                                |
-| `value`         | String  | -           | No       | The value text to display.                                                                                                                                                                              |
+| `value`         | String | Array | -           | No       | The value text to display. Can be an array of values.                                                                                                                                                                              |
+| `values`        | Array   | -           | Yes      | Additional values to display after `value`. Each item is an object with `value`, optional `url` and `isRelativeUrl`. |
 | `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>/`.                                 |
 | `style`         | Object  | -           | Yes      | The CSS style definition.                                                                                                                                                                               |
@@ -980,6 +981,17 @@ Examples:
   "isRelativeUrl": true
 }
 ```
+```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:
 
@@ -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

@@ -12,12 +12,31 @@ export const TextElement = ({ text, style }) => (
 
 // 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 }];
+  let values = [];
+
+  if (Array.isArray(item.value)) {
+    values = item.value.map((val, idx) => ({
+      value: val,
+      url: Array.isArray(item.url) ? item.url[idx] : item.url,
+      isRelativeUrl: Array.isArray(item.isRelativeUrl) ? item.isRelativeUrl[idx] : item.isRelativeUrl,
+    }));
+  } else {
+    values = [
+      {
+        value: item.value,
+        url: Array.isArray(item.url) ? item.url[0] : item.url,
+        isRelativeUrl: Array.isArray(item.isRelativeUrl) ? item.isRelativeUrl[0] : item.isRelativeUrl,
+      },
+    ];
+  }
+
+  if (Array.isArray(item.values)) {
+    values = values.concat(item.values);
+  }
 
   const handleCopy = () => {
-    copy(String(item.value));
+    const copyValue = Array.isArray(item.value) ? item.value[0] : item.value;
+    copy(String(copyValue));
     if (showNote) {
       showNote('Value copied to clipboard', false);
     }