feat: Add Cloud Function as data source for views with optional text or file upload

README.md

@@ -79,6 +79,9 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
     - [Limitations](#limitations)
   - [CSV Export](#csv-export)
   - [Views](#views)
+    - [Data Sources](#data-sources)
+      - [Aggregation Pipeline](#aggregation-pipeline)
+      - [Cloud Function](#cloud-function)
     - [View Table](#view-table)
       - [Pointer](#pointer)
       - [Link](#link)
@@ -1260,11 +1263,38 @@ This feature will take either selected rows or all rows of an individual class a
 
 ▶️ *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.
+Views are saved queries that display data in a table format. Saved views appear in the sidebar, where you can select, edit, or delete them. Optionally you can enable the object counter to show in the sidebar how many items match the view.
 
 > [!Caution]
 > Values are generally rendered without sanitization in the resulting data table. If rendered values come from user input or untrusted data, make sure to remove potentially dangerous HTML or JavaScript, to prevent an attacker from injecting malicious code, to exploit vulnerabilities like Cross-Site Scripting (XSS).
 
+### Data Sources
+
+Views can pull their data from the following data sources.
+
+#### Aggregation Pipeline
+
+Display aggregated data from your classes using a MongoDB aggregation pipeline. Create a view by selecting a class and defining an aggregation pipeline.
+
+#### Cloud Function
+
+Display data returned by a Parse Cloud Function. Create a view specifying a Cloud Function that returns an array of objects. Cloud Functions enable custom business logic, computed fields, and complex data transformations.
+
+Cloud Function views can prompt users for text input and/or file upload when opened. Enable "Require text input" or "Require file upload" checkboxes when creating the view. The user provided data will then be available in the Cloud Function as parameters.
+
+Cloud Function example:
+
+```js
+Parse.Cloud.define("myViewFunction", request => {
+  const text = request.params.text;
+  const fileData = request.params.fileData;
+  return processDataWithTextAndFile(text, fileData);
+});
+```
+
+> [!Note]
+> Text and file data are ephemeral and only available to the Cloud Function during that request. Files are base64 encoded, increasing the data during transfer by ~33%.
+
 ### View Table
 
 When designing the aggregation pipeline, consider that some values are rendered specially in the output table.

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

@@ -0,0 +1,99 @@
+import Field from 'components/Field/Field.react';
+import FileInput from 'components/FileInput/FileInput.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import TextInput from 'components/TextInput/TextInput.react';
+import React from 'react';
+
+export default class CloudFunctionInputDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      textInput: '',
+      uploadedFile: null,
+    };
+  }
+
+  handleFileChange = (file) => {
+    this.setState({ uploadedFile: file });
+  };
+
+  handleConfirm = () => {
+    const { requireTextInput, requireFileUpload } = this.props;
+    const params = {};
+
+    if (requireTextInput) {
+      params.text = this.state.textInput;
+    }
+
+    if (requireFileUpload && this.state.uploadedFile) {
+      // For file uploads, we'll pass the raw file data
+      // The cloud function will receive this as base64 encoded data
+      const file = this.state.uploadedFile;
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (reader.result && typeof reader.result === 'string') {
+          params.fileData = {
+            name: file.name,
+            type: file.type,
+            size: file.size,
+            data: reader.result.split(',')[1], // Remove the data URL prefix
+          };
+        }
+        this.props.onConfirm(params);
+      };
+      reader.readAsDataURL(file);
+    } else {
+      this.props.onConfirm(params);
+    }
+  };
+
+  render() {
+    const { requireTextInput, requireFileUpload, onCancel } = this.props;
+
+    // Check if we have all required inputs
+    const hasRequiredText = !requireTextInput || this.state.textInput.trim().length > 0;
+    const hasRequiredFile = !requireFileUpload || this.state.uploadedFile !== null;
+    const isValid = hasRequiredText && hasRequiredFile;
+
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon="gear"
+        iconSize={40}
+        title="Cloud Function Input"
+        subtitle="Provide the required input for this view."
+        confirmText="Send"
+        cancelText="Cancel"
+        disabled={!isValid}
+        onCancel={onCancel}
+        onConfirm={this.handleConfirm}
+      >
+        {requireTextInput && (
+          <Field
+            label={<Label text="Text" />}
+            input={
+              <TextInput
+                multiline
+                value={this.state.textInput}
+                onChange={textInput => this.setState({ textInput })}
+                placeholder="Enter text here..."
+              />
+            }
+          />
+        )}
+        {requireFileUpload && (
+          <Field
+            label={<Label text="File Upload" />}
+            input={
+              <FileInput
+                value={this.state.uploadedFile}
+                onChange={this.handleFileChange}
+              />
+            }
+          />
+        )}
+      </Modal>
+    );
+  }
+}

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

@@ -1,11 +1,22 @@
+import Checkbox from 'components/Checkbox/Checkbox.react';
 import Dropdown from 'components/Dropdown/Dropdown.react';
+import Option from 'components/Dropdown/Option.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';
+import React from 'react';
+
+/**
+ * The data source types available for views.
+ *
+ * @param {string} query An aggregation pipeline query data source.
+ * @param {string} cloudFunction A Cloud Function data source.
+ */
+const DataSourceTypes = {
+  query: 'query',
+  cloudFunction: 'cloudFunction'
+};
 
 function isValidJSON(value) {
   try {
@@ -22,17 +33,30 @@ export default class CreateViewDialog extends React.Component {
     this.state = {
       name: '',
       className: '',
+      dataSourceType: DataSourceTypes.query,
       query: '[]',
+      cloudFunction: '',
       showCounter: false,
+      requireTextInput: false,
+      requireFileUpload: false,
     };
   }
 
   valid() {
-    return (
-      this.state.name.length > 0 &&
-      this.state.className.length > 0 &&
-      isValidJSON(this.state.query)
-    );
+    if (this.state.dataSourceType === DataSourceTypes.query) {
+      return (
+        this.state.name.length > 0 &&
+        this.state.className.length > 0 &&
+        this.state.query.trim() !== '' &&
+        this.state.query !== '[]' &&
+        isValidJSON(this.state.query)
+      );
+    } else {
+      return (
+        this.state.name.length > 0 &&
+        this.state.cloudFunction.trim() !== ''
+      );
+    }
   }
 
   render() {
@@ -43,17 +67,20 @@ export default class CreateViewDialog extends React.Component {
         icon="plus"
         iconSize={40}
         title="Create a new view?"
-        subtitle="Define a custom query to display data."
+        subtitle="Define a data source 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),
+            className: this.state.dataSourceType === DataSourceTypes.query ? this.state.className : null,
+            query: this.state.dataSourceType === DataSourceTypes.query ? JSON.parse(this.state.query) : null,
+            cloudFunction: this.state.dataSourceType === DataSourceTypes.cloudFunction ? this.state.cloudFunction : null,
             showCounter: this.state.showCounter,
+            requireTextInput: this.state.dataSourceType === DataSourceTypes.cloudFunction ? this.state.requireTextInput : false,
+            requireFileUpload: this.state.dataSourceType === DataSourceTypes.cloudFunction ? this.state.requireFileUpload : false,
           })
         }
       >
@@ -67,32 +94,56 @@ export default class CreateViewDialog extends React.Component {
           }
         />
         <Field
-          label={<Label text="Class" />}
+          label={<Label text="Data Source" />}
           input={
             <Dropdown
-              value={this.state.className}
-              onChange={className => this.setState({ className })}
+              value={this.state.dataSourceType}
+              onChange={dataSourceType => this.setState({ dataSourceType })}
             >
-              {classes.map(c => (
-                <Option key={c} value={c}>
-                  {c}
-                </Option>
-              ))}
+              <Option value={DataSourceTypes.query}>Aggregation Pipeline</Option>
+              <Option value={DataSourceTypes.cloudFunction}>Cloud Function</Option>
             </Dropdown>
           }
         />
+        {this.state.dataSourceType === DataSourceTypes.query && (
+          <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."
+              text={this.state.dataSourceType === DataSourceTypes.query ? 'Query' : 'Cloud Function'}
+              description={
+                this.state.dataSourceType === DataSourceTypes.query
+                  ? 'An aggregation pipeline that returns an array of items.'
+                  : 'A Parse Cloud Function that returns an array of items.'
+              }
             />
           }
           input={
             <TextInput
-              multiline={true}
-              value={this.state.query}
-              onChange={query => this.setState({ query })}
+              multiline={this.state.dataSourceType === DataSourceTypes.query}
+              value={this.state.dataSourceType === DataSourceTypes.query ? this.state.query : this.state.cloudFunction}
+              onChange={value =>
+                this.setState(
+                  this.state.dataSourceType === DataSourceTypes.query
+                    ? { query: value }
+                    : { cloudFunction: value }
+                )
+              }
             />
           }
         />
@@ -105,6 +156,28 @@ export default class CreateViewDialog extends React.Component {
             />
           }
         />
+        {this.state.dataSourceType === DataSourceTypes.cloudFunction && (
+          <>
+            <Field
+              label={<Label text="Require text input" description="When checked, users will be prompted to enter text when opening this view." />}
+              input={
+                <Checkbox
+                  checked={this.state.requireTextInput}
+                  onChange={requireTextInput => this.setState({ requireTextInput })}
+                />
+              }
+            />
+            <Field
+              label={<Label text="Require file upload" description="When checked, users will be prompted to upload a file when opening this view." />}
+              input={
+                <Checkbox
+                  checked={this.state.requireFileUpload}
+                  onChange={requireFileUpload => this.setState({ requireFileUpload })}
+                />
+              }
+            />
+          </>
+        )}
       </Modal>
     );
   }