Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 15, 2025
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
59d6287
feat: support multiple values in KeyValueElement
mtrezza Jul 15, 2025
487adcb
feat: support additional values
mtrezza Jul 15, 2025
9de68b7
feat: support multiple key value entries
mtrezza Jul 15, 2025
830a216
Update README.md
mtrezza Jul 15, 2025
e32efc0
Update AggregationPanelComponents.js
mtrezza Jul 15, 2025
683f26a
Update README.md
mtrezza Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Copy link

@coderabbitai coderabbitai bot Jul 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Fix Markdown table – too many columns due to un-escaped “|”.

The added value row now has 6 cells, which breaks the table rendering and triggers MD056.
Escape the internal pipe so it stays inside the “Type” cell and realign the columns.

-| `value`         | String | Array | -           | No       | The value text to display. Can be an array of values.                                                                                                                                                                              |
+| `value`         | String\|Array | - | No | The value text to display. Can be an array of values. |

This also removes the extra “Default” placeholder that was introduced by accident.
After the change markdownlint and LanguageTool warnings disappear and the table renders correctly.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
| `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. |
| `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. |
🧰 Tools
🪛 LanguageTool

[style] ~949-~949: To form a complete sentence, be sure to include a subject or ‘there’.
Context: ...| No | The value text to display. Can be an array of values. ...

(MISSING_IT_THERE)

🪛 markdownlint-cli2 (0.17.2)

949-949: Table column count
Expected: 5; Actual: 6; Too many cells, extra data will be missing

(MD056, table-column-count)

🤖 Prompt for AI Agents 
In README.md around lines 949 to 953, the Markdown table for the `value` row has
an unescaped pipe character in the "Type" column, causing the row to split into
six cells and breaking the table layout. To fix this, escape the internal pipe
character within the "Type" cell by prefixing it with a backslash, and remove
the unintended extra "Default" column placeholder. Then realign the columns so
the table renders correctly and passes markdownlint checks.

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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
52 changes: 43 additions & 9 deletions src/components/AggregationPanel/AggregationPanelComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,65 @@ 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 }) => {
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);
}
};

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>
Expand Down
Loading