From 59d6287b78ece199ced90923461c0e1180943b8a Mon Sep 17 00:00:00 2001 From: Manuel <5673677+mtrezza@users.noreply.github.com> Date: Tue, 15 Jul 2025 12:43:50 +0200 Subject: [PATCH 1/6] feat: support multiple values in KeyValueElement --- .../AggregationPanelComponents.js | 49 +++++++++++++++---- 1 file changed, 40 insertions(+), 9 deletions(-) diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js index 2d2fcd3cb1..02ea731fbf 100644 --- a/src/components/AggregationPanel/AggregationPanelComponents.js +++ b/src/components/AggregationPanel/AggregationPanelComponents.js @@ -4,7 +4,7 @@ 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 }) => (

{text}

@@ -12,23 +12,54 @@ export const TextElement = ({ text, style}) => ( // Key-Value Element Component export const KeyValueElement = ({ item, appName, style, showNote }) => { + const values = Array.isArray(item.value) ? item.value : [item.value]; + const urls = Array.isArray(item.url) + ? item.url + : typeof item.url !== 'undefined' + ? [item.url] + : []; + const isRelativeUrls = Array.isArray(item.isRelativeUrl) + ? item.isRelativeUrl + : typeof item.isRelativeUrl !== 'undefined' + ? [item.isRelativeUrl] + : []; + const handleCopy = () => { - copy(String(item.value)); + copy(values.join(' ')); if (showNote) { showNote('Value copied to clipboard', false); } }; + const renderValue = (value, idx) => { + const url = urls[idx]; + const isRelative = isRelativeUrls[idx]; + + if (url) { + return ( + + {value} + + ); + } + + return {value}; + }; + return (
{item.key}: - {item.url ? ( - - {item.value} - - ) : ( - {item.value} - )} + {values.map((val, idx) => ( + + {idx > 0 && ' '} + {renderValue(val, idx)} + + ))} From 487adcb61748df77cb924cdf68e7041c0054fbb9 Mon Sep 17 00:00:00 2001 From: Manuel <5673677+mtrezza@users.noreply.github.com> Date: Tue, 15 Jul 2025 14:44:04 +0200 Subject: [PATCH 2/6] feat: support additional values --- .../AggregationPanelComponents.js | 32 +++++-------------- 1 file changed, 8 insertions(+), 24 deletions(-) diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js index 02ea731fbf..e3c4eddbc3 100644 --- a/src/components/AggregationPanel/AggregationPanelComponents.js +++ b/src/components/AggregationPanel/AggregationPanelComponents.js @@ -12,43 +12,27 @@ export const TextElement = ({ text, style }) => ( // Key-Value Element Component export const KeyValueElement = ({ item, appName, style, showNote }) => { - const values = Array.isArray(item.value) ? item.value : [item.value]; - const urls = Array.isArray(item.url) - ? item.url - : typeof item.url !== 'undefined' - ? [item.url] - : []; - const isRelativeUrls = Array.isArray(item.isRelativeUrl) - ? item.isRelativeUrl - : typeof item.isRelativeUrl !== 'undefined' - ? [item.isRelativeUrl] - : []; + 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(values.join(' ')); + copy(String(item.value)); if (showNote) { showNote('Value copied to clipboard', false); } }; - const renderValue = (value, idx) => { - const url = urls[idx]; - const isRelative = isRelativeUrls[idx]; - + const renderValue = ({ value, url, isRelativeUrl }) => { if (url) { return ( - + {value} ); } - return {value}; + return {value}; }; return ( @@ -57,7 +41,7 @@ export const KeyValueElement = ({ item, appName, style, showNote }) => { {values.map((val, idx) => ( {idx > 0 && ' '} - {renderValue(val, idx)} + {renderValue(val)} ))} From 9de68b73fe96d850ff2d9f63142fe37328ed044b Mon Sep 17 00:00:00 2001 From: Manuel <5673677+mtrezza@users.noreply.github.com> Date: Tue, 15 Jul 2025 15:22:56 +0200 Subject: [PATCH 3/6] feat: support multiple key value entries --- README.md | 16 +++++++++-- .../AggregationPanelComponents.js | 27 ++++++++++++++++--- 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 0d4381b291..b90b7f26c6 100644 --- a/README.md +++ b/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 `:////`. | | `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 `:////apps//`. | | `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 \ No newline at end of file diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js index e3c4eddbc3..2afc4eba97 100644 --- a/src/components/AggregationPanel/AggregationPanelComponents.js +++ b/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); } From 830a21630f824b769b2830b899afa4e36e5a3d67 Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Tue, 15 Jul 2025 15:26:57 +0200 Subject: [PATCH 4/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b90b7f26c6..9158af4484 100644 --- a/README.md +++ b/README.md @@ -981,6 +981,7 @@ Examples: "isRelativeUrl": true } ``` + ```json { "type": "keyValue", @@ -992,7 +993,6 @@ Examples: } ``` - To navigate to a specific object using a relative URL, the query parameters must be URL encoded: ```js From e32efc0589288915dd18d787708c08aa155ee61e Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Tue, 15 Jul 2025 15:28:59 +0200 Subject: [PATCH 5/6] Update AggregationPanelComponents.js --- .../AggregationPanelComponents.js | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js index 2afc4eba97..e3c4eddbc3 100644 --- a/src/components/AggregationPanel/AggregationPanelComponents.js +++ b/src/components/AggregationPanel/AggregationPanelComponents.js @@ -12,31 +12,12 @@ export const TextElement = ({ text, style }) => ( // Key-Value Element Component export const KeyValueElement = ({ item, appName, style, showNote }) => { - 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 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 = () => { - const copyValue = Array.isArray(item.value) ? item.value[0] : item.value; - copy(String(copyValue)); + copy(String(item.value)); if (showNote) { showNote('Value copied to clipboard', false); } From 683f26a84349e90dec005b1e1579e44df8a0a7b8 Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Tue, 15 Jul 2025 15:33:26 +0200 Subject: [PATCH 6/6] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9158af4484..f93f49f368 100644 --- a/README.md +++ b/README.md @@ -946,10 +946,10 @@ 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 | 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`. | +| `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 `:////`. | | `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 `:////apps//`. | +| `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: