feat: Add info panel keyValue item parameter isRelativeUrl to link to dashboard pages (#2646)

Author: mtrezza

README.md

@@ -71,6 +71,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
       - [Video Item](#video-item)
       - [Audio Item](#audio-item)
       - [Button Item](#button-item)
+      - [Panel Item](#panel-item)
   - [Browse as User](#browse-as-user)
   - [Change Pointer Key](#change-pointer-key)
     - [Limitations](#limitations)
@@ -929,12 +930,13 @@ Example:
 
 A text item that consists of a key and a value. The value can optionally be linked to a URL.
 
-| Parameter | Value  | Optional | Description                                                                       |
-|-----------|--------|----------|-----------------------------------------------------------------------------------|
-| `type`    | String | No       | Must be `"keyValue"`.                                                             |
-| `key`     | String | No       | The key text to display.                                                          |
-| `value`   | String | No       | The value text to display.                                                        |
-| `url`     | String | Yes      | The URL that will be opened in a new browser tab when clicking on the value text. |
+| Parameter       | Value   | Default     | Optional | Description                                                                                                                                                                                             |
+|-----------------|---------|-------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `type`          | String  | -           | No       | Must be `"keyValue"`.                                                                                                                                                                                   |
+| `key`           | String  | -           | No       | The key text to display.                                                                                                                                                                                |
+| `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>/`.                                 |
 
 Examples:
 
@@ -951,7 +953,17 @@ Examples:
   "type": "keyValue",
   "key": "Last purchase ID",
   "value": "123",
-  "url": "https://example.com/purchaseDetails?purchaseId=012345"
+  "url": "https://example.com/purchaseDetails?purchaseId=123"
+}
+```
+
+```json
+{
+  "type": "keyValue",
+  "key": "Last purchase ID",
+  "value": "123",
+  "url": "browser/_User",
+  "isRelativeUrl": true
 }
 ```
 
@@ -1082,6 +1094,26 @@ Example:
 }
 ```
 
+#### Panel Item
+
+A sub-panel whose data is loaded on-demand by expanding the item.
+
+| Parameter           | Value  | Optional | Description                                                                                                                                       |
+|---------------------|--------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
+| `type`              | String | No       | Must be `"infoPanel"`.                                                                                                                            |
+| `title`             | String | No       | The title to display in the expandable headline.                                                                                                  |
+| `cloudCodeFunction` | String | No       | The Cloud Code Function to call which receives the selected object in the data browser and returns the response to be displayed in the sub-panel. |
+
+Example:
+
+```json
+{
+  "type": "panel",
+  "text": "Purchase History",
+  "cloudCodeFunction": "getUserPurchaseHistory"
+}
+```
+
 ## Browse as User
 
 ▶️ *Core > Browser > Browse*

src/components/AggregationPanel/AggregationPanel.js

@@ -21,6 +21,7 @@ const AggregationPanel = ({
   showNote,
   setSelectedObjectId,
   selectedObjectId,
+  appName,
   depth = 0,
   cloudCodeFunction = null,
   panelTitle = null,
@@ -89,7 +90,7 @@ const AggregationPanel = ({
             case 'text':
               return <TextElement key={idx} text={item.text} />;
             case 'keyValue':
-              return <KeyValueElement key={idx} item={item} />;
+              return <KeyValueElement key={idx} item={item} appName={appName} />;
             case 'table':
               return <TableElement key={idx} columns={item.columns} rows={item.rows} />;
             case 'image':

src/components/AggregationPanel/AggregationPanelComponents.js

@@ -9,10 +9,10 @@ export const TextElement = ({ text }) => (
 );
 
 // Key-Value Element Component
-export const KeyValueElement = ({ item }) => (
+export const KeyValueElement = ({ item, appName }) => (
   <div className={styles.keyValue}>
     {item.key}:
-    {item.url ? <a href={item.url} target="_blank">{item.value}</a> : <span>{item.value}</span>}
+    {item.url ? <a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank">{item.value}</a> : <span>{item.value}</span>}
   </div>
 );
 

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -609,6 +609,7 @@ export default class DataBrowser extends React.Component {
                   setErrorAggregatedData={this.props.setErrorAggregatedData}
                   setSelectedObjectId={this.setSelectedObjectId}
                   selectedObjectId={this.state.selectedObjectId}
+                  appName = {this.props.appName}
                 />
               </div>
             </ResizableBox>