feat: Add custom data views with aggregation query (#2888)

Author: mtrezza

README.md

@@ -75,6 +75,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
   - [Change Pointer Key](#change-pointer-key)
     - [Limitations](#limitations)
   - [CSV Export](#csv-export)
+  - [Views](#views)
 - [Contributing](#contributing)
 
 # Getting Started
@@ -1189,6 +1190,12 @@ This feature allows you to change how a pointer is represented in the browser. B
 This feature will take either selected rows or all rows of an individual class and saves them to a CSV file, which is then downloaded. CSV headers are added to the top of the file matching the column names.
 
 > ⚠️ There is currently a 10,000 row limit when exporting all data. If more than 10,000 rows are present in the class, the CSV file will only contain 10,000 rows.
+## Views
+
+▶️ *Core > Views*
+
+Views are saved queries that display aggregated data from your classes. Create a view by providing a name, selecting a class and defining an aggregation pipeline. Optionally enable the object counter to show how many items match the view. Saved views appear in the sidebar, where you can select, edit, or delete them.
+
 
 # Contributing
 

src/components/BrowserMenu/BrowserMenu.react.js

@@ -83,7 +83,10 @@ export default class BrowserMenu extends React.Component {
 BrowserMenu.propTypes = {
   icon: PropTypes.string.isRequired.describe('The name of the icon to place in the menu.'),
   title: PropTypes.string.isRequired.describe('The title text of the menu.'),
-  children: PropTypes.arrayOf(PropTypes.node).describe(
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).describe(
     'The contents of the menu when open. It should be a set of MenuItem and Separator components.'
   ),
 };

src/dashboard/Dashboard.js

@@ -44,6 +44,7 @@ import SlowQueries from './Analytics/SlowQueries/SlowQueries.react';
 import styles from 'dashboard/Apps/AppsIndex.scss';
 import UsersSettings from './Settings/UsersSettings.react';
 import Webhooks from './Data/Webhooks/Webhooks.react';
+import Views from './Data/Views/Views.react';
 import { AsyncStatus } from 'lib/Constants';
 import baseStyles from 'stylesheets/base.scss';
 import { get } from 'lib/AJAX';
@@ -270,6 +271,8 @@ export default class Dashboard extends React.Component {
 
         <Route path="cloud_code" element={<CloudCode />} />
         <Route path="cloud_code/*" element={<CloudCode />} />
+        <Route path="views/:name" element={<Views />} />
+        <Route path="views" element={<Views />} />
         <Route path="webhooks" element={<Webhooks />} />
 
         <Route path="jobs">{JobsRoute}</Route>

src/dashboard/DashboardView.react.js

@@ -76,6 +76,11 @@ export default class DashboardView extends React.Component {
       });
     }
 
+    coreSubsections.push({
+      name: 'Views',
+      link: '/views',
+    });
+
     //webhooks requires removal of heroku link code, then it should work.
     if (
       features.hooks &&

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

@@ -44,8 +44,7 @@ import { withRouter } from 'lib/withRouter';
 import { get } from 'lib/AJAX';
 import BrowserFooter from './BrowserFooter.react';
 
-const SELECTED_ROWS_MESSAGE =
-  'There are selected rows. Are you sure you want to leave this page?';
+const SELECTED_ROWS_MESSAGE = 'There are selected rows. Are you sure you want to leave this page?';
 
 function SelectedRowsNavigationPrompt({ when }) {
   const message = SELECTED_ROWS_MESSAGE;
@@ -119,7 +118,7 @@ function SelectedRowsNavigationPrompt({ when }) {
 }
 
 // The initial and max amount of rows fetched by lazy loading
-const BROWSER_LAST_LOCATION = 'brower_last_location';
+const BROWSER_LAST_LOCATION = 'browser_last_location';
 
 @subscribeTo('Schema', 'schema')
 @withRouter
@@ -386,6 +385,13 @@ class Browser extends DashboardView {
   }
   addLocation(appId) {
     if (window.localStorage) {
+      const currentSearch = this.props.location?.search;
+      if (currentSearch) {
+        const params = new URLSearchParams(currentSearch);
+        if (params.has('filters')) {
+          return;
+        }
+      }
       let pathname = null;
       const newLastLocations = [];
 
@@ -1505,22 +1511,17 @@ class Browser extends DashboardView {
 
             if (error.code === Parse.Error.AGGREGATE_ERROR) {
               if (error.errors.length == 1) {
-                errorDeletingNote =
-                  `Error deleting ${className} with id '${error.errors[0].object.id}'`;
+                errorDeletingNote = `Error deleting ${className} with id '${error.errors[0].object.id}'`;
               } else if (error.errors.length < toDeleteObjectIds.length) {
-                errorDeletingNote =
-                  `Error deleting ${error.errors.length} out of ${toDeleteObjectIds.length} ${className} objects`;
+                errorDeletingNote = `Error deleting ${error.errors.length} out of ${toDeleteObjectIds.length} ${className} objects`;
               } else {
-                errorDeletingNote =
-                  `Error deleting all ${error.errors.length} ${className} objects`;
+                errorDeletingNote = `Error deleting all ${error.errors.length} ${className} objects`;
               }
             } else {
               if (toDeleteObjectIds.length == 1) {
-                errorDeletingNote =
-                  `Error deleting ${className} with id '${toDeleteObjectIds[0]}'`;
+                errorDeletingNote = `Error deleting ${className} with id '${toDeleteObjectIds[0]}'`;
               } else {
-                errorDeletingNote =
-                  `Error deleting ${toDeleteObjectIds.length} ${className} objects`;
+                errorDeletingNote = `Error deleting ${toDeleteObjectIds.length} ${className} objects`;
               }
             }
 
@@ -2526,9 +2527,7 @@ class Browser extends DashboardView {
         <Helmet>
           <title>{pageTitle}</title>
         </Helmet>
-        <SelectedRowsNavigationPrompt
-          when={Object.keys(this.state.selection).length > 0}
-        />
+        <SelectedRowsNavigationPrompt when={Object.keys(this.state.selection).length > 0} />
         {browser}
         {notification}
         {extras}

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

@@ -574,7 +574,7 @@ export default class BrowserTable extends React.Component {
         id="browser-table"
         style={{
           right: rightValue,
-          'overflow-x': this.props.isResizing ? 'hidden' : 'auto',
+          overflowX: this.props.isResizing ? 'hidden' : 'auto',
         }}
       >
         <DataBrowserHeaderBar

src/dashboard/Data/Config/Config.scss

@@ -5,8 +5,8 @@
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  width: 25px;
-  height: 25px;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
   svg {
     fill: currentColor;

src/dashboard/Data/Views/CreateViewDialog.react.js

@@ -0,0 +1,111 @@
+import Dropdown from 'components/Dropdown/Dropdown.react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import Option from 'components/Dropdown/Option.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+import Checkbox from 'components/Checkbox/Checkbox.react';
+
+function isValidJSON(value) {
+  try {
+    JSON.parse(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export default class CreateViewDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      name: '',
+      className: '',
+      query: '[]',
+      showCounter: false,
+    };
+  }
+
+  valid() {
+    return (
+      this.state.name.length > 0 &&
+      this.state.className.length > 0 &&
+      isValidJSON(this.state.query)
+    );
+  }
+
+  render() {
+    const { classes, onConfirm, onCancel } = this.props;
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon="plus"
+        iconSize={40}
+        title="Create a new view?"
+        subtitle="Define a custom query to display data."
+        confirmText="Create"
+        cancelText="Cancel"
+        disabled={!this.valid()}
+        onCancel={onCancel}
+        onConfirm={() =>
+          onConfirm({
+            name: this.state.name,
+            className: this.state.className,
+            query: JSON.parse(this.state.query),
+            showCounter: this.state.showCounter,
+          })
+        }
+      >
+        <Field
+          label={<Label text="Name" />}
+          input={
+            <TextInput
+              value={this.state.name}
+              onChange={name => this.setState({ name })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Class" />}
+          input={
+            <Dropdown
+              value={this.state.className}
+              onChange={className => this.setState({ className })}
+            >
+              {classes.map(c => (
+                <Option key={c} value={c}>
+                  {c}
+                </Option>
+              ))}
+            </Dropdown>
+          }
+        />
+        <Field
+          label={
+            <Label
+              text="Query"
+              description="An aggregation pipeline that returns an array of items."
+            />
+          }
+          input={
+            <TextInput
+              multiline={true}
+              value={this.state.query}
+              onChange={query => this.setState({ query })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Show object counter" />}
+          input={
+            <Checkbox
+              checked={this.state.showCounter}
+              onChange={showCounter => this.setState({ showCounter })}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}

src/dashboard/Data/Views/DeleteViewDialog.react.js

@@ -0,0 +1,45 @@
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+
+export default class DeleteViewDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      confirmation: '',
+    };
+  }
+
+  valid() {
+    return this.state.confirmation === this.props.name;
+  }
+
+  render() {
+    return (
+      <Modal
+        type={Modal.Types.DANGER}
+        icon="warn-outline"
+        title="Delete view?"
+        subtitle="This action cannot be undone!"
+        disabled={!this.valid()}
+        confirmText="Delete"
+        cancelText="Cancel"
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onConfirm}
+      >
+        <Field
+          label={<Label text="Confirm this action" description="Enter the view name to continue." />}
+          input={
+            <TextInput
+              placeholder="View name"
+              value={this.state.confirmation}
+              onChange={confirmation => this.setState({ confirmation })}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}