+ );
}
export default DataBrowserHeader;
diff --git a/src/components/FileTree/FileTree.react.js b/src/components/FileTree/FileTree.react.js
index fbfe0970c5..99892d438c 100644
--- a/src/components/FileTree/FileTree.react.js
+++ b/src/components/FileTree/FileTree.react.js
@@ -6,7 +6,7 @@
* the root directory of this source tree.
*/
import Icon from 'components/Icon/Icon.react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
import React from 'react';
import styles from 'components/FileTree/FileTree.scss';
diff --git a/src/components/Popover/Popover.react.js b/src/components/Popover/Popover.react.js
index 39a58890e4..4c0aa5b4a6 100644
--- a/src/components/Popover/Popover.react.js
+++ b/src/components/Popover/Popover.react.js
@@ -62,7 +62,14 @@ export default class Popover extends React.Component {
this._popoverLayer.setAttribute('data-popover-type', this.props['data-popover-type']);
}
- document.body.addEventListener('click', this._checkExternalClick);
+ // Register the external-click listener on the next tick. Under React's
+ // root-level event delegation (React 17+/createRoot), the click that opens
+ // this popover is still bubbling to document.body when this component mounts,
+ // so registering synchronously would let that same click trigger
+ // onExternalClick and close the popover immediately (menus never open).
+ this._externalClickTimer = setTimeout(() => {
+ document.body.addEventListener('click', this._checkExternalClick);
+ }, 0);
}
setPosition(position) {
@@ -72,11 +79,63 @@ export default class Popover extends React.Component {
}
componentWillUnmount() {
- document.body.removeChild(this._popoverWrapper);
+ clearTimeout(this._externalClickTimer);
+ // Remove via parentNode (not document.body) so this can't throw if the
+ // wrapper was moved/detached, and null the reference so a reused instance
+ // (StrictMode / Activity remount) re-creates and re-appends the wrapper in
+ // componentDidMount instead of skipping it via the `!this._popoverWrapper`
+ // guard and rendering into a detached node.
+ if (this._popoverWrapper && this._popoverWrapper.parentNode) {
+ this._popoverWrapper.parentNode.removeChild(this._popoverWrapper);
+ }
+ this._popoverWrapper = null;
document.body.removeEventListener('click', this._checkExternalClick);
}
_checkExternalClick(e) {
+ // A click whose target detached from the DOM during this same click — React
+ // 19 flushes discrete updates synchronously, so an element that swaps/removes
+ // itself on click (e.g. an icon that toggles) is already gone by the time
+ // this document-level listener runs — breaks the hasAncestor() walk below:
+ // its ancestor chain no longer reaches the popover. Decide inside-vs-outside
+ // from composedPath() instead, which preserves the event's dispatch-time path
+ // even after the target detaches.
+ if (!e.target.isConnected) {
+ // composedPath() is only populated during dispatch; this native listener
+ // runs in the click's bubble phase, so it is valid here. It preserves the
+ // event's dispatch-time ancestors even after the target detaches, so apply
+ // the same inside-vs-outside criteria as the connected branch below (this
+ // popover's wrapper/portal layer, a nested parentContentId, an inner
+ // popover, or a chrome dropdown) against the captured path. Checking only
+ // this popover's own layer would wrongly close it when the detached target
+ // came from a nested popover (e.g. an Autocomplete suggestion), which lives
+ // in its own portal layer.
+ const path = typeof e.composedPath === 'function' ? e.composedPath() : [];
+ if (path.length === 0) {
+ // composedPath unavailable/empty — fall back to the prior "don't close".
+ return;
+ }
+ const { contentId } = this.props;
+ const wrapper = contentId ? document.getElementById(contentId) : this._popoverLayer;
+ const clickedInside = path.some(
+ node =>
+ node === wrapper ||
+ (node instanceof Element &&
+ ((contentId && node.dataset.parentContentId === contentId) ||
+ node.getAttribute('data-popover-type') === 'inner' ||
+ node.classList.contains('chromeDropdown')))
+ );
+ if (clickedInside) {
+ return;
+ }
+ // A genuine outside click whose target merely happened to detach: close.
+ // Returning here also avoids the parentNode/closest reads below, which
+ // would throw on a fully detached node.
+ if (this.props.onExternalClick) {
+ this.props.onExternalClick(e);
+ }
+ return;
+ }
const { contentId } = this.props;
const popoverWrapper = contentId ? document.getElementById(contentId) : this._popoverLayer;
const isChromeDropdown = e.target.parentNode.classList.contains('chromeDropdown');
diff --git a/src/components/Sidebar/AppsMenu.react.js b/src/components/Sidebar/AppsMenu.react.js
index 9ab134565c..adcd262e29 100644
--- a/src/components/Sidebar/AppsMenu.react.js
+++ b/src/components/Sidebar/AppsMenu.react.js
@@ -8,7 +8,7 @@
import AppBadge from 'components/AppBadge/AppBadge.react';
import AppName from 'components/Sidebar/AppName.react';
import html from 'lib/htmlString';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
import React from 'react';
import styles from 'components/Sidebar/Sidebar.scss';
import baseStyles from 'stylesheets/base.scss';
diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js
index c609ff1cff..6f66873ee7 100644
--- a/src/components/Sidebar/SidebarHeader.react.js
+++ b/src/components/Sidebar/SidebarHeader.react.js
@@ -6,7 +6,7 @@
* the root directory of this source tree.
*/
import Icon from 'components/Icon/Icon.react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
import React from 'react';
import styles from 'components/Sidebar/Sidebar.scss';
// get the package.json environment variable
diff --git a/src/components/Sidebar/SidebarSection.react.js b/src/components/Sidebar/SidebarSection.react.js
index 5744d74266..781eef835c 100644
--- a/src/components/Sidebar/SidebarSection.react.js
+++ b/src/components/Sidebar/SidebarSection.react.js
@@ -6,7 +6,7 @@
* the root directory of this source tree.
*/
import Icon from 'components/Icon/Icon.react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
import React from 'react';
import styles from 'components/Sidebar/Sidebar.scss';
diff --git a/src/components/Sidebar/SidebarSubItem.react.js b/src/components/Sidebar/SidebarSubItem.react.js
index 214889a5ec..6de20919d5 100644
--- a/src/components/Sidebar/SidebarSubItem.react.js
+++ b/src/components/Sidebar/SidebarSubItem.react.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
import React from 'react';
import styles from 'components/Sidebar/Sidebar.scss';
import Icon from 'components/Icon/Icon.react';
diff --git a/src/components/Toolbar/Toolbar.react.js b/src/components/Toolbar/Toolbar.react.js
index 4afd681527..eb0b8053cd 100644
--- a/src/components/Toolbar/Toolbar.react.js
+++ b/src/components/Toolbar/Toolbar.react.js
@@ -9,7 +9,7 @@ import PropTypes from 'lib/PropTypes';
import React from 'react';
import Icon from 'components/Icon/Icon.react';
import styles from 'components/Toolbar/Toolbar.scss';
-import { useNavigate, useNavigationType, NavigationType } from 'react-router-dom';
+import { useNavigate, useNavigationType, NavigationType } from 'react-router';
const Toolbar = props => {
const action = useNavigationType();
diff --git a/src/dashboard/AppData.react.js b/src/dashboard/AppData.react.js
index 1bc2c6de60..4d7d4d40a1 100644
--- a/src/dashboard/AppData.react.js
+++ b/src/dashboard/AppData.react.js
@@ -9,7 +9,7 @@ import React from 'react';
import AppSelector from 'dashboard/AppSelector.react';
import AppsManager from 'lib/AppsManager';
import { CurrentApp } from 'context/currentApp';
-import { Outlet, useNavigate, useParams } from 'react-router-dom';
+import { Outlet, useNavigate, useParams } from 'react-router';
function AppData() {
const navigate = useNavigate();
diff --git a/src/dashboard/Apps/AppsIndex.react.js b/src/dashboard/Apps/AppsIndex.react.js
index 6927e77f8c..23bfba9250 100644
--- a/src/dashboard/Apps/AppsIndex.react.js
+++ b/src/dashboard/Apps/AppsIndex.react.js
@@ -17,7 +17,7 @@ import styles from 'dashboard/Apps/AppsIndex.scss';
import baseStyles from 'stylesheets/base.scss';
import AppBadge from 'components/AppBadge/AppBadge.react';
import { withRouter } from 'lib/withRouter';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
function dash(value, content) {
if (value === undefined) {
diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index 311debf35c..22fea032ba 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -19,7 +19,9 @@ import Config from './Data/Config/Config.react';
import Explorer from './Analytics/Explorer/Explorer.react';
import FourOhFour from 'components/FourOhFour/FourOhFour.react';
import GeneralSettings from './Settings/GeneralSettings.react';
-import GraphQLConsole from './Data/ApiConsole/GraphQLConsole.react';
+// Lazily loaded so GraphiQL/Monaco is code-split out of the boot bundle and its
+// module body is not evaluated until the GraphQL console route is visited.
+const GraphQLConsole = React.lazy(() => import('./Data/ApiConsole/GraphQLConsole.react'));
import HostingSettings from './Settings/HostingSettings.react';
import Icon from 'components/Icon/Icon.react';
import JobEdit from 'dashboard/Data/Jobs/JobEdit.react';
@@ -50,7 +52,7 @@ import { AsyncStatus } from 'lib/Constants';
import baseStyles from 'stylesheets/base.scss';
import { get } from 'lib/AJAX';
import { setBasePath } from 'lib/AJAX';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router';
import { Helmet } from 'react-helmet';
import Playground from './Data/Playground/Playground.react';
import DashboardSettings from './Settings/DashboardSettings/DashboardSettings.react';
@@ -276,7 +278,20 @@ export default class Dashboard extends React.Component {
const ApiConsoleRoute = (
}>
} />
- } />
+
+
+
+ }
+ >
+
+
+ }
+ />
} />
} />
diff --git a/src/dashboard/Data/ApiConsole/ApiConsole.react.js b/src/dashboard/Data/ApiConsole/ApiConsole.react.js
index dda7c0dbfc..8504ea82d5 100644
--- a/src/dashboard/Data/ApiConsole/ApiConsole.react.js
+++ b/src/dashboard/Data/ApiConsole/ApiConsole.react.js
@@ -8,7 +8,7 @@
import React from 'react';
import CategoryList from 'components/CategoryList/CategoryList.react';
import DashboardView from 'dashboard/DashboardView.react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
import { withRouter } from 'lib/withRouter';
@withRouter
diff --git a/src/dashboard/Data/ApiConsole/GraphQLConsole.react.js b/src/dashboard/Data/ApiConsole/GraphQLConsole.react.js
index 90e575b922..b55fb53c89 100644
--- a/src/dashboard/Data/ApiConsole/GraphQLConsole.react.js
+++ b/src/dashboard/Data/ApiConsole/GraphQLConsole.react.js
@@ -6,7 +6,8 @@
* the root directory of this source tree.
*/
import React, { Component } from 'react';
-import GraphiQL from 'graphiql';
+import { GraphiQL } from 'graphiql';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
import EmptyState from 'components/EmptyState/EmptyState.react';
import Toolbar from 'components/Toolbar/Toolbar.react';
import styles from 'dashboard/Data/ApiConsole/ApiConsole.scss';
@@ -14,6 +15,19 @@ import { CurrentApp } from 'context/currentApp';
export default class GraphQLConsole extends Component {
static contextType = CurrentApp;
+
+ // Build (and memoize) the fetcher so re-renders don't recreate it. The static
+ // parseHeaders are injected on every request by createGraphiQLFetcher; Accept
+ // and Content-Type: application/json are set automatically.
+ getFetcher(graphQLServerURL, parseHeaders) {
+ const key = `${graphQLServerURL}:${JSON.stringify(parseHeaders)}`;
+ if (this._fetcherKey !== key) {
+ this._fetcherKey = key;
+ this._fetcher = createGraphiQLFetcher({ url: graphQLServerURL, headers: parseHeaders });
+ }
+ return this._fetcher;
+ }
+
render() {
const { applicationId, clientKey, graphQLServerURL, masterKey } = this.context;
let content;
@@ -39,20 +53,8 @@ export default class GraphQLConsole extends Component {
}
content = (
{
- const data = await fetch(graphQLServerURL, {
- method: 'POST',
- headers: {
- Accept: 'application/json',
- 'Content-Type': 'application/json',
- ...headers,
- },
- body: JSON.stringify(graphQLParams),
- });
- return data.json().catch(() => data.text());
- }}
+ fetcher={this.getFetcher(graphQLServerURL, parseHeaders)}
+ initialHeaders={JSON.stringify(parseHeaders, null, 2)}
/>
);
}
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 57dfe57af3..aac6b4efba 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -56,7 +56,7 @@ import { isFormResponse, executeScriptCallback } from 'lib/ScriptUtils';
import Parse from 'parse';
import React from 'react';
import { Helmet } from 'react-helmet';
-import { useBeforeUnload } from 'react-router-dom';
+import { useBeforeUnload } from 'react-router';
import BrowserFooter from './BrowserFooter.react';
const SELECTED_ROWS_MESSAGE = 'There are selected rows. Are you sure you want to leave this page?';
@@ -332,7 +332,10 @@ class Browser extends DashboardView {
this.action = new SidebarAction('Create a class', this.showCreateClass.bind(this));
}
- this.props.schema.dispatch(ActionTypes.FETCH).then(() => this.handleFetchedSchema());
+ this.props.schema
+ .dispatch(ActionTypes.FETCH)
+ .then(data => this.handleFetchedSchema(data))
+ .catch(error => console.error(error));
if (!this.props.params.className && this.props.schema.data.get('classes')) {
this.redirectToFirstClass(this.props.schema.data.get('classes'));
} else if (this.props.params.className) {
@@ -346,7 +349,9 @@ class Browser extends DashboardView {
window.addEventListener('mouseup', this.onMouseUpRowCheckBox);
get('/parse-dashboard-config.json').then(data => {
this.setState({ configData: data });
- this.classAndCloudFuntionMap(this.state.configData);
+ // Use the fetched `data` directly rather than this.state.configData: under
+ // React 18 automatic batching the setState above has not applied yet here.
+ this.classAndCloudFuntionMap(data);
});
// Fetch Cloud Config array params for context menu
@@ -428,7 +433,10 @@ class Browser extends DashboardView {
this.setState({ counts: {} });
Parse.Object._clearAllState();
- nextProps.schema.dispatch(ActionTypes.FETCH).then(() => this.handleFetchedSchema());
+ nextProps.schema
+ .dispatch(ActionTypes.FETCH)
+ .then(data => this.handleFetchedSchema(data))
+ .catch(error => console.error(error));
}
this.prefetchData(nextProps, nextContext);
}
@@ -1002,7 +1010,7 @@ class Browser extends DashboardView {
const msg = `${objectSaved.className} with id '${objectSaved.id}' created`;
this.showNote(msg, false);
- const state = { data: this.state.data };
+ const state = { data: this.state.data, showEditRowDialog: false };
const relation = this.state.relation;
if (relation) {
const parent = relation.parent;
@@ -1182,12 +1190,17 @@ class Browser extends DashboardView {
});
}
- async handleFetchedSchema() {
- if (this.state.computingClassCounts === false) {
+ async handleFetchedSchema(schemaData) {
+ // Prefer the schema state resolved from the FETCH/SET_CLP dispatch: under
+ // React 18 automatic batching, this.props.schema.data (a subscribeTo
+ // snapshot) may not reflect the freshly-loaded classes yet.
+ const data = schemaData || this.props.schema.data;
+ const classes = data.get('classes');
+ if (this.state.computingClassCounts === false && classes) {
this.setState({ computingClassCounts: true });
const promises = [];
- for (const parseClass of this.props.schema.data.get('classes')) {
+ for (const parseClass of classes) {
const [className] = parseClass;
const promise = this.context.getClassCount(className).then(count => {
this.setState(prevState => ({
@@ -1200,12 +1213,26 @@ class Browser extends DashboardView {
promises.push(promise);
}
- await Promise.all(promises);
-
- this.setState({
- clp: this.props.schema.data.get('CLPs').toJS(),
- computingClassCounts: false,
- });
+ try {
+ await Promise.all(promises);
+ } catch (error) {
+ // A rejected getClassCount must not abort the reset below: otherwise
+ // computingClassCounts stays latched true and the guard above blocks all
+ // future count/CLP updates (permanent deadlock).
+ console.error('Failed to fetch class counts', error);
+ } finally {
+ // Read the latest CLPs after the await: a concurrent SET_CLP during the
+ // count fetch is skipped by the computingClassCounts guard above, so using
+ // the captured `data` snapshot here would clobber that update. Fall back to
+ // the snapshot only if the live schema data is unavailable. Guard the read
+ // so a missing CLPs can't throw here and re-latch computingClassCounts.
+ const schema = this.props.schema.data || data;
+ const clps = schema && schema.get('CLPs');
+ this.setState({
+ ...(clps ? { clp: clps.toJS() } : {}),
+ computingClassCounts: false,
+ });
+ }
}
}
@@ -1836,12 +1863,18 @@ class Browser extends DashboardView {
}
handleCLPChange(clp) {
- const p = this.props.schema.dispatch(ActionTypes.SET_CLP, {
- className: this.props.params.className,
- clp,
- });
- p.then(() => this.handleFetchedSchema());
- return p;
+ // Return the chained promise (rather than a discarded side-effect chain) so
+ // the caller's .then/.catch covers both the dispatch and handleFetchedSchema,
+ // and a dispatch rejection can't leak as an unhandled rejection.
+ return this.props.schema
+ .dispatch(ActionTypes.SET_CLP, {
+ className: this.props.params.className,
+ clp,
+ })
+ .then(data => {
+ this.handleFetchedSchema(data);
+ return data;
+ });
}
updateRow(row, attr, value) {
@@ -3386,6 +3419,8 @@ class Browser extends DashboardView {
setRelation={this.setRelation}
handleShowAcl={this.handleShowAcl}
onClose={this.closeEditRowDialog}
+ onSaveNewRow={this.saveNewRow}
+ onAbortAddRow={this.abortAddRow}
updateRow={this.updateRow}
confirmAttachSelectedRows={this.confirmAttachSelectedRows}
schema={this.props.schema}
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index cbf52aba34..f0b5be7deb 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -777,6 +777,15 @@ export default class DataBrowser extends React.Component {
);
}
+ if (newVisibility && this.state.selectedObjectId) {
+ this.setShowAggregatedData(true);
+ this.handleCallCloudFunction(
+ this.state.selectedObjectId,
+ this.props.className,
+ this.props.app.applicationId
+ );
+ }
+
if (!newVisibility && this.state.selectedObjectId) {
if (this.props.errorAggregatedData != {}) {
this.props.setErrorAggregatedData({});
diff --git a/src/dashboard/Data/Browser/EditRowDialog.react.js b/src/dashboard/Data/Browser/EditRowDialog.react.js
index a275591ed4..119e94191a 100644
--- a/src/dashboard/Data/Browser/EditRowDialog.react.js
+++ b/src/dashboard/Data/Browser/EditRowDialog.react.js
@@ -224,8 +224,25 @@ export default class EditRowDialog extends React.Component {
}
render() {
- const { selectedObject, className, columns, onClose, schema, useMasterKey } = this.props;
+ const {
+ selectedObject,
+ className,
+ columns,
+ onClose,
+ schema,
+ useMasterKey,
+ onSaveNewRow,
+ onAbortAddRow,
+ } = this.props;
const { currentObject, openObjectPickers, expandedTextAreas } = this.state;
+ const isNewObject = !selectedObject.id;
+
+ const handleCancel = () => {
+ if (isNewObject) {
+ onAbortAddRow();
+ }
+ onClose();
+ };
const fields = columns.map(column => {
const { name, type, targetClass } = column;
@@ -495,10 +512,13 @@ export default class EditRowDialog extends React.Component {
)}
}
- onCancel={onClose}
+ onCancel={handleCancel}
+ cancelText={isNewObject ? 'Cancel' : 'Close'}
+ showContinue={isNewObject}
+ continueText="Add"
+ onContinue={onSaveNewRow}
onConfirm={this.openAcl}
confirmText="Edit ACL"
- cancelText="Close"
>
{fields}
diff --git a/src/dashboard/Data/Config/Config.react.js b/src/dashboard/Data/Config/Config.react.js
index 7daf827fb5..a4c2b814e0 100644
--- a/src/dashboard/Data/Config/Config.react.js
+++ b/src/dashboard/Data/Config/Config.react.js
@@ -28,6 +28,8 @@ import equal from 'fast-deep-equal';
import Notification from 'dashboard/Data/Browser/Notification.react';
import ServerConfigStorage from 'lib/ServerConfigStorage';
import { prefersServerStorage } from 'lib/StoragePreferences';
+import buildConfigTableData from 'lib/ConfigTableData';
+import { Map } from 'immutable';
@subscribeTo('Config', 'config')
class Config extends TableView {
@@ -477,26 +479,9 @@ class Config extends TableView {
let data = undefined;
if (this.props.config.data) {
const params = this.props.config.data.get('params');
- const masterKeyOnlyParams = this.props.config.data.get('masterKeyOnly') || {};
+ const masterKeyOnlyParams = this.props.config.data.get('masterKeyOnly') || Map();
if (params) {
- data = [];
- params.forEach((value, param) => {
- const masterKeyOnly = masterKeyOnlyParams.get(param) || false;
- const type = typeof value;
- if (type === 'object' && value.__type == 'File') {
- value = Parse.File.fromJSON(value);
- } else if (type === 'object' && value.__type == 'GeoPoint') {
- value = new Parse.GeoPoint(value);
- }
- data.push({
- param: param,
- value: value,
- masterKeyOnly: masterKeyOnly,
- });
- });
- data.sort((object1, object2) => {
- return object1.param.localeCompare(object2.param);
- });
+ data = buildConfigTableData(params, masterKeyOnlyParams);
}
}
return data;
diff --git a/src/dashboard/Data/Jobs/JobsData.react.js b/src/dashboard/Data/Jobs/JobsData.react.js
index f06189165a..218d828360 100644
--- a/src/dashboard/Data/Jobs/JobsData.react.js
+++ b/src/dashboard/Data/Jobs/JobsData.react.js
@@ -7,7 +7,7 @@
*/
import React from 'react';
import { CurrentApp } from 'context/currentApp';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
export default class JobsData extends React.Component {
static contextType = CurrentApp;
diff --git a/src/dashboard/Data/Playground/Playground.react.js b/src/dashboard/Data/Playground/Playground.react.js
index 8af5e953f1..5ce027a41d 100644
--- a/src/dashboard/Data/Playground/Playground.react.js
+++ b/src/dashboard/Data/Playground/Playground.react.js
@@ -1,7 +1,7 @@
import React, { useState, useRef, useEffect, useContext, useCallback, useMemo } from 'react';
-import ReactJson from 'react-json-view';
+import ReactJson from '@microlink/react-json-view';
import Parse from 'parse';
-import { useBeforeUnload } from 'react-router-dom';
+import { useBeforeUnload } from 'react-router';
import CodeEditor from 'components/CodeEditor/CodeEditor.react';
import Toolbar from 'components/Toolbar/Toolbar.react';
diff --git a/src/dashboard/Push/PushDetails.react.js b/src/dashboard/Push/PushDetails.react.js
index 7d4ac7e3d4..8bb073482b 100644
--- a/src/dashboard/Push/PushDetails.react.js
+++ b/src/dashboard/Push/PushDetails.react.js
@@ -29,7 +29,7 @@ import tableStyles from 'components/Table/Table.scss';
import Toggle from 'components/Toggle/Toggle.react';
import Toolbar from 'components/Toolbar/Toolbar.react';
import { Directions } from 'lib/Constants';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
import { tableInfoBuilder } from 'lib/PushUtils';
import generatePath from 'lib/generatePath';
import { withRouter } from 'lib/withRouter';
@@ -460,7 +460,7 @@ class PushDetails extends DashboardView {
isFlowView = true;
const headline = statistics.confidence_interval
- ? 'Group {statistics.winner} is the winner!'
+ ? `Group ${statistics.winner} is the winner!`
: 'Not enough data to automatically determine the winner';
const subline = [];
const launchGroupFragment = 'These devices are outside test groups A & B.';
@@ -485,11 +485,13 @@ class PushDetails extends DashboardView {
}
if (pushDetails.launch_info && pushDetails.launch_info.recipient_count) {
-
- Your Launch Group is {pushDetails.launch_info.percent}% (approximately{' '}
- {prettyNumber(pushDetails.launch_info.recipient_count)}) of the devices
- in this campaign. {launchGroupFragment}
-
;
+ subline.push(
+
+ Your Launch Group is {pushDetails.launch_info.percent}% (approximately{' '}
+ {prettyNumber(pushDetails.launch_info.recipient_count)}) of the devices
+ in this campaign. {launchGroupFragment}
+
+ );
} else {
subline.push(
diff --git a/src/dashboard/Settings/GeneralSettings.react.js b/src/dashboard/Settings/GeneralSettings.react.js
index e522656260..5d726bacb6 100644
--- a/src/dashboard/Settings/GeneralSettings.react.js
+++ b/src/dashboard/Settings/GeneralSettings.react.js
@@ -36,7 +36,7 @@ import Toolbar from 'components/Toolbar/Toolbar.react';
import unique from 'lib/unique';
import validateAndSubmitConnectionString from 'lib/validateAndSubmitConnectionString';
import styles from 'dashboard/Settings/GeneralSettings.scss';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
import { withRouter } from 'lib/withRouter';
const DEFAULT_SETTINGS_LABEL_WIDTH = 62;
diff --git a/src/dashboard/index.js b/src/dashboard/index.js
index 8336cde9ae..eaa334c820 100644
--- a/src/dashboard/index.js
+++ b/src/dashboard/index.js
@@ -10,14 +10,17 @@ import 'regenerator-runtime/runtime';
import Immutable from 'immutable';
import installDevTools from 'immutable-devtools';
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import Dashboard from './Dashboard';
import registerServiceWorker from '../registerServiceWorker';
+// GraphiQL 5 uses Monaco; register its web workers once before the app mounts.
+import 'graphiql/setup-workers/webpack';
+import 'graphiql/style.css';
require('stylesheets/fonts.scss');
-require('graphiql/graphiql.min.css');
installDevTools(Immutable);
const path = window.PARSE_DASHBOARD_PATH || '/';
-ReactDOM.render(, document.getElementById('browser_mount'));
+const root = createRoot(document.getElementById('browser_mount'));
+root.render();
registerServiceWorker();
diff --git a/src/lib/ConfigTableData.js b/src/lib/ConfigTableData.js
new file mode 100644
index 0000000000..ec01f350d7
--- /dev/null
+++ b/src/lib/ConfigTableData.js
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import Parse from 'parse';
+
+export default function buildConfigTableData(params, masterKeyOnlyParams) {
+ const data = [];
+ params.forEach((value, param) => {
+ const masterKeyOnly = masterKeyOnlyParams?.get?.(param) || false;
+ const type = typeof value;
+ if (type === 'object' && value !== null && value.__type == 'File') {
+ value = Parse.File.fromJSON(value);
+ } else if (type === 'object' && value !== null && value.__type == 'GeoPoint') {
+ value = new Parse.GeoPoint(value);
+ }
+ data.push({
+ param: param,
+ value: value,
+ masterKeyOnly: masterKeyOnly,
+ });
+ });
+ data.sort((object1, object2) => {
+ return object1.param.localeCompare(object2.param);
+ });
+ return data;
+}
diff --git a/src/lib/stores/StoreManager.js b/src/lib/stores/StoreManager.js
index d5e275af6e..d94b1ecbe1 100644
--- a/src/lib/stores/StoreManager.js
+++ b/src/lib/stores/StoreManager.js
@@ -47,6 +47,10 @@ export function getStore(name) {
for (const id in storeData.subscribers) {
storeData.subscribers[id](result);
}
+ // Resolve with the new state so callers can react to freshly-loaded
+ // data without reading a subscribeTo snapshot that (under React 18
+ // automatic batching) has not been applied yet.
+ return result;
});
} else {
if (storeData.isGlobal) {
diff --git a/src/lib/tests/BrowserCell.test.js b/src/lib/tests/BrowserCell.test.js
index e2ea22b589..870ef28804 100644
--- a/src/lib/tests/BrowserCell.test.js
+++ b/src/lib/tests/BrowserCell.test.js
@@ -9,42 +9,37 @@ jest.dontMock('../../components/BrowserCell/BrowserCell.react');
jest.mock('idb-keyval');
import React from 'react';
-import renderer from 'react-test-renderer';
+import { renderComponent } from './renderWithAct';
const BrowserCell = require('../../components/BrowserCell/BrowserCell.react').default;
describe('BrowserCell', () => {
describe('Required fields', () => {
it('should not highlight 0 value', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
expect(component.props.className).not.toContain('required');
});
it('should not highlight false value', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
expect(component.props.className).not.toContain('required');
});
it('should not highlight empty string value', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
expect(component.props.className).not.toContain('required');
});
it('should highlight null value', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
expect(component.props.className).toContain('required');
});
it('should highlight undefined value', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
expect(component.props.className).toContain('required');
});
diff --git a/src/lib/tests/BrowserRow.test.js b/src/lib/tests/BrowserRow.test.js
index a75dca43b9..7eb820466c 100644
--- a/src/lib/tests/BrowserRow.test.js
+++ b/src/lib/tests/BrowserRow.test.js
@@ -2,7 +2,7 @@ jest.dontMock('../../components/BrowserRow/BrowserRow.react');
jest.mock('idb-keyval');
import React from 'react';
-import renderer from 'react-test-renderer';
+import { renderComponent } from './renderWithAct';
const BrowserRow = require('../../components/BrowserRow/BrowserRow.react').default;
const defaultProps = {
@@ -57,30 +57,26 @@ const defaultProps = {
describe('BrowserRow', () => {
describe('Row highlight', () => {
it('should not apply highlight styles when isHighlighted is false', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
// Row div should not have highlight background
expect(component.props.style.background).toBeUndefined();
});
it('should not apply highlight styles when isHighlighted is undefined', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
expect(component.props.style.background).toBeUndefined();
});
it('should apply subtle blue tint to row div when isHighlighted is true', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
expect(component.props.style.background).toBe('#eef4fb');
});
it('should apply stronger blue to checkbox cell when isHighlighted is true', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
// First child is the checkbox span
const checkboxCell = component.children[0];
@@ -88,8 +84,7 @@ describe('BrowserRow', () => {
});
it('should apply stronger blue to row number cell when isHighlighted is true', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
// Second child is the row number span (when showRowNumber is true)
const rowNumberCell = component.children[1];
@@ -97,8 +92,7 @@ describe('BrowserRow', () => {
});
it('should use default background on checkbox cell when not highlighted', () => {
- const component = renderer
- .create()
+ const component = renderComponent()
.toJSON();
const checkboxCell = component.children[0];
expect(checkboxCell.props.style.background).toBe('#ffffff');
diff --git a/src/lib/tests/Button.test.js b/src/lib/tests/Button.test.js
index 4d0d8ff91d..82d076a642 100644
--- a/src/lib/tests/Button.test.js
+++ b/src/lib/tests/Button.test.js
@@ -8,12 +8,12 @@
jest.dontMock('../../components/Button/Button.react');
import React from 'react';
-import renderer from 'react-test-renderer';
+import { renderComponent } from './renderWithAct';
const Button = require('../../components/Button/Button.react').default;
describe('Button', () => {
it('has a default state', () => {
- const component = renderer.create().toJSON();
+ const component = renderComponent().toJSON();
expect(component.type).toBe('button');
expect(component.props.className).toBe('button unselectable');
expect(component.children[0].type).toBe('span');
@@ -21,50 +21,44 @@ describe('Button', () => {
});
it('can be primary', () => {
- const component = renderer.create().toJSON();
+ const component = renderComponent().toJSON();
expect(component.type).toBe('button');
expect(component.props.className).toBe('button unselectable primary');
});
it('can be colored', () => {
- const component = renderer.create().toJSON();
+ const component = renderComponent().toJSON();
expect(component.type).toBe('button');
expect(component.props.className).toBe('button unselectable red');
});
it('can be colored and primary', () => {
- const component = renderer
- .create()
- .toJSON();
+ const component = renderComponent().toJSON();
expect(component.type).toBe('button');
expect(component.props.className).toBe('button unselectable primary red');
});
it('can be disabled', () => {
- const component = renderer
- .create()
- .toJSON();
+ const component = renderComponent().toJSON();
expect(component.type).toBe('button');
expect(component.props.className).toBe('button unselectable disabled');
});
it('special-cases white disabled buttons', () => {
- const component = renderer
- .create()
- .toJSON();
+ const component = renderComponent().toJSON();
expect(component.type).toBe('button');
expect(component.props.className).toBe('button unselectable disabled white');
});
it('can indidate progress', () => {
- const component = renderer.create().toJSON();
+ const component = renderComponent().toJSON();
expect(component.type).toBe('button');
expect(component.props.className).toBe('button unselectable progress');
});
it('can override width', () => {
- const component = renderer.create().toJSON();
+ const component = renderComponent().toJSON();
expect(component.type).toBe('button');
expect(component.props.style.width).toBe('300px');
});
diff --git a/src/lib/tests/Config.tableData.test.js b/src/lib/tests/Config.tableData.test.js
new file mode 100644
index 0000000000..8a7bc7560a
--- /dev/null
+++ b/src/lib/tests/Config.tableData.test.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+jest.dontMock('../ConfigTableData');
+
+const { Map } = require('immutable');
+const Parse = require('parse');
+const buildConfigTableData = require('../ConfigTableData').default;
+
+describe('buildConfigTableData', () => {
+ it('keeps null param values without throwing', () => {
+ const params = Map({ nullParam: null, other: 'ok' });
+ const masterKeyOnly = Map();
+
+ expect(() => buildConfigTableData(params, masterKeyOnly)).not.toThrow();
+ expect(buildConfigTableData(params, masterKeyOnly)).toEqual([
+ { param: 'nullParam', value: null, masterKeyOnly: false },
+ { param: 'other', value: 'ok', masterKeyOnly: false },
+ ]);
+ });
+
+ it('tolerates missing masterKeyOnly metadata', () => {
+ const params = Map({ nullParam: null, other: 'ok' });
+
+ expect(() => buildConfigTableData(params, {})).not.toThrow();
+ expect(() => buildConfigTableData(params, undefined)).not.toThrow();
+ expect(buildConfigTableData(params, {})).toEqual([
+ { param: 'nullParam', value: null, masterKeyOnly: false },
+ { param: 'other', value: 'ok', masterKeyOnly: false },
+ ]);
+ });
+
+ it('converts serialized File and GeoPoint values', () => {
+ const params = Map({
+ avatar: {
+ __type: 'File',
+ name: 'photo.png',
+ url: 'https://example.com/photo.png',
+ },
+ location: {
+ __type: 'GeoPoint',
+ latitude: 40.0,
+ longitude: -30.0,
+ },
+ });
+ const masterKeyOnly = Map({ avatar: true });
+
+ const data = buildConfigTableData(params, masterKeyOnly);
+
+ expect(data).toHaveLength(2);
+ expect(data[0].param).toBe('avatar');
+ expect(data[0].masterKeyOnly).toBe(true);
+ expect(data[0].value).toBeInstanceOf(Parse.File);
+ expect(data[0].value.name()).toBe('photo.png');
+ expect(data[1].param).toBe('location');
+ expect(data[1].masterKeyOnly).toBe(false);
+ expect(data[1].value).toBeInstanceOf(Parse.GeoPoint);
+ expect(data[1].value.latitude).toBe(40.0);
+ expect(data[1].value.longitude).toBe(-30.0);
+ });
+});
diff --git a/src/lib/tests/ConfigConflictDiff.test.js b/src/lib/tests/ConfigConflictDiff.test.js
index 93addd2e69..3490b25dbc 100644
--- a/src/lib/tests/ConfigConflictDiff.test.js
+++ b/src/lib/tests/ConfigConflictDiff.test.js
@@ -1,7 +1,7 @@
jest.dontMock('../../dashboard/Data/Config/ConfigConflictDiff.react');
import React from 'react';
-import renderer from 'react-test-renderer';
+import { renderComponent } from './renderWithAct';
const ConfigConflictDiff = require('../../dashboard/Data/Config/ConfigConflictDiff.react').default;
// Mock the diff library
@@ -29,7 +29,7 @@ jest.mock('diff', () => ({
describe('ConfigConflictDiff', () => {
it('renders a diff for changed string values', () => {
- const component = renderer.create(
+ const component = renderComponent(
{
});
it('renders a diff for changed object values', () => {
- const component = renderer.create(
+ const component = renderComponent(
{
});
it('renders empty state when values are identical', () => {
- const component = renderer.create(
+ const component = renderComponent(
{
});
it('renders a diff for boolean values', () => {
- const component = renderer.create(
+ const component = renderComponent(
{
});
it('renders a diff for number values', () => {
- const component = renderer.create(
+ const component = renderComponent(
{
+ const options = { hostname: '127.0.0.1', port, path, method, headers: { ...headers } };
+
+ if (body) {
+ const bodyStr = JSON.stringify(body);
+ options.headers['Content-Type'] = 'application/json';
+ options.headers['Content-Length'] = Buffer.byteLength(bodyStr);
+ }
+
+ const req = http.request(options, (res) => {
+ let data = '';
+ res.on('data', (chunk) => (data += chunk));
+ res.on('end', () => {
+ let json = null;
+ try {
+ json = JSON.parse(data);
+ } catch {
+ // not JSON
+ }
+ resolve({ status: res.statusCode, body: json, raw: data });
+ });
+ });
+
+ req.on('error', reject);
+
+ if (body) {
+ req.write(JSON.stringify(body));
+ }
+ req.end();
+ });
+}
+
+/**
+ * Build a dashboard config without users, which is the configuration that
+ * limits no-auth access to localhost.
+ */
+function noUserConfig(overrides = {}) {
+ return {
+ apps: [
+ {
+ serverURL: 'http://localhost:1337/parse',
+ appId: 'testAppId',
+ masterKey: MASTER_KEY,
+ appName: 'TestApp',
+ },
+ ],
+ agent: {
+ models: [
+ {
+ name: 'test-model',
+ provider: 'openai',
+ model: 'gpt-4',
+ apiKey: 'fake-api-key-for-testing',
+ },
+ ],
+ },
+ ...overrides,
+ };
+}
+
+/**
+ * Start the dashboard mounted in a parent app, as the CLI and the express
+ * middleware integration both do.
+ */
+function startDashboard(config, options = {}, peerAddress) {
+ return new Promise((resolve) => {
+ const parseDashboard = require('../../../Parse-Dashboard/app.js');
+ const parentApp = express();
+ if (peerAddress !== undefined) {
+ parentApp.use((req, _res, next) => {
+ Object.defineProperty(req.connection, 'remoteAddress', {
+ value: peerAddress.value,
+ writable: true,
+ configurable: true,
+ });
+ next();
+ });
+ }
+ parentApp.use(
+ '/',
+ parseDashboard(config, { cookieSessionSecret: SESSION_SECRET, ...options })
+ );
+
+ const server = parentApp.listen(0, () => resolve({ server, port: server.address().port }));
+ });
+}
+
+function stopDashboard(server) {
+ return new Promise((resolve) => (server ? server.close(resolve) : resolve()));
+}
+
+describe('Config endpoint locality — requests forwarded by a same-host proxy', () => {
+ let server;
+ let port;
+
+ beforeAll(async () => {
+ ({ server, port } = await startDashboard(noUserConfig(), { allowInsecureHTTP: true }));
+ });
+
+ afterAll(() => stopDashboard(server));
+
+ it('does not return the master key for a request carrying X-Forwarded-For', async () => {
+ const res = await makeRequest(port, {
+ path: '/parse-dashboard-config.json',
+ headers: { 'X-Forwarded-For': '203.0.113.7' },
+ });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.body.error).toBe('Configure a user to access Parse Dashboard remotely');
+ });
+
+ it('does not return the master key for a request carrying X-Real-IP', async () => {
+ const res = await makeRequest(port, {
+ path: '/parse-dashboard-config.json',
+ headers: { 'X-Real-IP': '203.0.113.7' },
+ });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.body.error).toBe('Configure a user to access Parse Dashboard remotely');
+ });
+
+ it('does not return the master key for a request carrying X-Forwarded-Host', async () => {
+ const res = await makeRequest(port, {
+ path: '/parse-dashboard-config.json',
+ headers: { 'X-Forwarded-Host': 'dashboard.example.com' },
+ });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.body.error).toBe('Configure a user to access Parse Dashboard remotely');
+ });
+
+ it('does not return the master key for a request carrying only X-Forwarded-Proto', async () => {
+ const res = await makeRequest(port, {
+ path: '/parse-dashboard-config.json',
+ headers: { 'X-Forwarded-Proto': 'https' },
+ });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.body.error).toBe('Configure a user to access Parse Dashboard remotely');
+ });
+
+ it('does not return the master key for a request carrying only X-Forwarded-Port', async () => {
+ const res = await makeRequest(port, {
+ path: '/parse-dashboard-config.json',
+ headers: { 'X-Forwarded-Port': '443' },
+ });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.body.error).toBe('Configure a user to access Parse Dashboard remotely');
+ });
+
+ it('does not return the master key for a request carrying a Forwarded header', async () => {
+ const res = await makeRequest(port, {
+ path: '/parse-dashboard-config.json',
+ headers: { Forwarded: 'for=203.0.113.7;proto=https;host=dashboard.example.com' },
+ });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.body.error).toBe('Configure a user to access Parse Dashboard remotely');
+ });
+});
+
+describe('Config endpoint locality — requests forwarded by a same-host proxy over HTTPS', () => {
+ let server;
+ let port;
+
+ beforeAll(async () => {
+ ({ server, port } = await startDashboard(noUserConfig({ trustProxy: 1 })));
+ });
+
+ afterAll(() => stopDashboard(server));
+
+ it('does not return the master key when the proxy reports a secure connection', async () => {
+ const res = await makeRequest(port, {
+ path: '/parse-dashboard-config.json',
+ headers: { 'X-Forwarded-For': '203.0.113.7', 'X-Forwarded-Proto': 'https' },
+ });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.body.error).toBe('Configure a user to access Parse Dashboard remotely');
+ });
+
+ it('does not return the master key when a proxy is trusted but sends no forwarding headers', async () => {
+ const res = await makeRequest(port, { path: '/parse-dashboard-config.json' });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.body.error).toBeDefined();
+ });
+});
+
+describe('Config endpoint locality — genuine localhost requests', () => {
+ let server;
+ let port;
+
+ beforeAll(async () => {
+ ({ server, port } = await startDashboard(noUserConfig()));
+ });
+
+ afterAll(() => stopDashboard(server));
+
+ it('returns the master key for a loopback request without forwarding headers', async () => {
+ const res = await makeRequest(port, { path: '/parse-dashboard-config.json' });
+
+ expect(res.status).toBe(200);
+ expect(res.body.apps[0].masterKey).toBe(MASTER_KEY);
+ });
+});
+
+describe('Config endpoint locality — configured deployments behind a proxy', () => {
+ let server;
+ let port;
+
+ const withUsers = {
+ apps: [
+ {
+ serverURL: 'http://localhost:1337/parse',
+ appId: 'testAppId',
+ masterKey: MASTER_KEY,
+ appName: 'TestApp',
+ },
+ ],
+ users: [{ user: 'admin', pass: 'admin' }],
+ };
+
+ beforeAll(async () => {
+ ({ server, port } = await startDashboard(withUsers));
+ });
+
+ afterAll(() => stopDashboard(server));
+
+ // The HTTPS requirement is keyed on the connection, not on the client, so a
+ // proxy terminating TLS on this host keeps working without `trustProxy`.
+ it('does not impose the HTTPS requirement on a proxy terminating TLS on this host', async () => {
+ const res = await makeRequest(port, {
+ path: '/parse-dashboard-config.json',
+ headers: { 'X-Forwarded-For': '203.0.113.7', 'X-Forwarded-Proto': 'https' },
+ });
+
+ expect(res.raw).not.toContain(MASTER_KEY);
+ expect(res.raw).not.toContain('can only be remotely accessed via HTTPS');
+ expect(res.status).toBe(401);
+ });
+});
+
+describe('Config endpoint locality — loopback addresses beyond 127.0.0.1', () => {
+ const servers = [];
+
+ afterAll(() => Promise.all(servers.map(({ server }) => stopDashboard(server))));
+
+ async function get(peerValue) {
+ const started = await startDashboard(noUserConfig(), {}, { value: peerValue });
+ servers.push(started);
+ return makeRequest(started.port, { path: '/parse-dashboard-config.json' });
+ }
+
+ it('treats any 127.0.0.0/8 address as originating on this host', async () => {
+ const res = await get('127.0.0.2');
+ expect(res.body.apps[0].masterKey).toBe(MASTER_KEY);
+ });
+
+ it('treats an IPv4-mapped 127.0.0.0/8 address as originating on this host', async () => {
+ const res = await get('::ffff:127.0.0.2');
+ expect(res.body.apps[0].masterKey).toBe(MASTER_KEY);
+ });
+
+ it('does not fail when the peer address is unavailable', async () => {
+ const res = await get(undefined);
+ expect(res.status).toBe(200);
+ expect(res.raw).not.toContain(MASTER_KEY);
+ });
+});
+
+describe('Agent endpoint locality — requests forwarded by a same-host proxy', () => {
+ let server;
+ let port;
+
+ beforeAll(async () => {
+ ({ server, port } = await startDashboard(noUserConfig(), { allowInsecureHTTP: true }));
+ });
+
+ afterAll(() => stopDashboard(server));
+
+ it('rejects a forwarded request in no-user mode', async () => {
+ const res = await makeRequest(port, {
+ method: 'POST',
+ path: '/apps/TestApp/agent',
+ body: { message: 'List all classes', modelName: 'test-model' },
+ headers: { 'X-Forwarded-For': '203.0.113.7' },
+ });
+
+ expect(res.status).toBe(401);
+ expect(res.body.error).toBe('Configure a user to access Parse Dashboard remotely');
+ });
+});
diff --git a/src/lib/tests/ScriptResponseModal.test.js b/src/lib/tests/ScriptResponseModal.test.js
index 7f1105e25c..4797f5f2c6 100644
--- a/src/lib/tests/ScriptResponseModal.test.js
+++ b/src/lib/tests/ScriptResponseModal.test.js
@@ -24,8 +24,8 @@ jest.mock('../../components/Popover/Popover.react', () => {
};
});
-import React from 'react';
-import renderer from 'react-test-renderer';
+import React, { act } from 'react';
+import { renderComponent } from './renderWithAct';
const ScriptResponseModal = require('../../dashboard/Data/Browser/ScriptResponseModal.react').default;
const defaultProps = {
@@ -40,7 +40,7 @@ describe('ScriptResponseModal', () => {
const form = {
elements: [{ element: 'checkbox', name: 'confirmed', label: 'Confirm' }],
};
- const component = renderer.create();
+ const component = renderComponent();
const instance = component.getInstance();
expect(instance.state.formData.confirmed).toBe(false);
});
@@ -49,7 +49,7 @@ describe('ScriptResponseModal', () => {
const form = {
elements: [{ element: 'checkbox', name: 'confirmed', label: 'Confirm', default: true }],
};
- const component = renderer.create();
+ const component = renderComponent();
const instance = component.getInstance();
expect(instance.state.formData.confirmed).toBe(true);
});
@@ -63,7 +63,7 @@ describe('ScriptResponseModal', () => {
description: 'Please confirm',
}],
};
- const tree = renderer.create().toJSON();
+ const tree = renderComponent().toJSON();
expect(JSON.stringify(tree)).toContain('Please confirm');
});
});
@@ -73,7 +73,7 @@ describe('ScriptResponseModal', () => {
const form = {
elements: [{ element: 'toggle', name: 'enabled', label: 'Enable' }],
};
- const component = renderer.create();
+ const component = renderComponent();
const instance = component.getInstance();
expect(instance.state.formData.enabled).toBe(false);
});
@@ -82,7 +82,7 @@ describe('ScriptResponseModal', () => {
const form = {
elements: [{ element: 'toggle', name: 'enabled', label: 'Enable', default: true }],
};
- const component = renderer.create();
+ const component = renderComponent();
const instance = component.getInstance();
expect(instance.state.formData.enabled).toBe(true);
});
@@ -96,7 +96,7 @@ describe('ScriptResponseModal', () => {
description: 'Toggle this feature',
}],
};
- const tree = renderer.create().toJSON();
+ const tree = renderComponent().toJSON();
expect(JSON.stringify(tree)).toContain('Toggle this feature');
});
@@ -110,7 +110,7 @@ describe('ScriptResponseModal', () => {
labelFalse: 'Disabled',
}],
};
- const tree = renderer.create().toJSON();
+ const tree = renderComponent().toJSON();
const json = JSON.stringify(tree);
expect(json).toContain('Enabled');
expect(json).toContain('Disabled');
@@ -122,7 +122,7 @@ describe('ScriptResponseModal', () => {
const form = {
elements: [{ element: 'textInput', name: 'reason', label: 'Reason' }],
};
- const component = renderer.create();
+ const component = renderComponent();
const instance = component.getInstance();
expect(instance.state.formData.reason).toBe('');
});
@@ -131,7 +131,7 @@ describe('ScriptResponseModal', () => {
const form = {
elements: [{ element: 'textInput', name: 'reason', label: 'Reason', default: 'N/A' }],
};
- const component = renderer.create();
+ const component = renderComponent();
const instance = component.getInstance();
expect(instance.state.formData.reason).toBe('N/A');
});
@@ -145,7 +145,7 @@ describe('ScriptResponseModal', () => {
placeholder: 'Enter reason...',
}],
};
- const tree = renderer.create().toJSON();
+ const tree = renderComponent().toJSON();
expect(JSON.stringify(tree)).toContain('Enter reason...');
});
@@ -158,7 +158,7 @@ describe('ScriptResponseModal', () => {
description: 'Provide a reason',
}],
};
- const tree = renderer.create().toJSON();
+ const tree = renderComponent().toJSON();
expect(JSON.stringify(tree)).toContain('Provide a reason');
});
});
@@ -173,7 +173,7 @@ describe('ScriptResponseModal', () => {
items: [{ title: 'Admin', value: 'admin' }, { title: 'User', value: 'user' }],
}],
};
- const component = renderer.create();
+ const component = renderComponent();
const instance = component.getInstance();
expect(instance.state.formData.role).toBe('admin');
});
@@ -189,7 +189,7 @@ describe('ScriptResponseModal', () => {
{ element: 'textInput', name: 'reason', default: 'test' },
],
};
- const component = renderer.create();
+ const component = renderComponent();
const instance = component.getInstance();
expect(instance.state.formData).toEqual({
role: 'admin',
@@ -209,11 +209,13 @@ describe('ScriptResponseModal', () => {
{ element: 'textInput', name: 'reason', default: 'hello' },
],
};
- const component = renderer.create(
+ const component = renderComponent(
);
const instance = component.getInstance();
- instance.handleConfirm();
+ act(() => {
+ instance.handleConfirm();
+ });
expect(onConfirm).toHaveBeenCalledWith({ confirmed: true, reason: 'hello' });
});
});
diff --git a/src/lib/tests/e2e/dashboard.e2e.test.js b/src/lib/tests/e2e/dashboard.e2e.test.js
index de860c573a..5aed58664f 100644
--- a/src/lib/tests/e2e/dashboard.e2e.test.js
+++ b/src/lib/tests/e2e/dashboard.e2e.test.js
@@ -49,12 +49,77 @@ describe('dashboard e2e', () => {
await browser.close();
server.close();
}, 20_000);
+
+ it('mounts the login entry into #login_mount when users are configured', async () => {
+ const mount = '/dashboard';
+ // The login page is only served when users are configured (see Parse-Dashboard/app.js).
+ const settingsWithUsers = {
+ ...dashboardSettings,
+ cookieSessionSecret: 'e2e-login-test-secret',
+ users: [{ user: 'admin', pass: 'admin' }],
+ };
+ const app = express();
+ app.use(mount, ParseDashboard(settingsWithUsers));
+ // Listen on an ephemeral port and reject on error so a busy/leaked port
+ // fails fast instead of hanging until the test timeout.
+ const server = await new Promise((resolve, reject) => {
+ // Bind explicitly to 127.0.0.1 (matched by the goto below) so the server
+ // and Puppeteer agree on the interface — Node 17+ verbatim DNS can resolve
+ // `localhost` to ::1 while the server binds IPv4, causing ECONNREFUSED.
+ const s = app.listen(0, '127.0.0.1', () => resolve(s)).on('error', reject);
+ });
+ const port = server.address().port;
+ // try/finally (with puppeteer launched inside) so a regression (empty mount)
+ // or a launch failure fails cleanly instead of leaking the browser/server.
+ let browser;
+ try {
+ // Bound every Puppeteer op below the 20s Jest timeout (see the timeout arg
+ // to the test): a hang must reject in time for the finally block to close
+ // the browser and server. If Jest aborts at 20s first, the finally never
+ // runs and the Express server leaks (EADDRINUSE in later runs).
+ browser = await puppeteer.launch({ args: ['--no-sandbox'], timeout: 15_000 });
+ const page = await browser.newPage();
+ await page.goto(`http://127.0.0.1:${port}${mount}/login`, { timeout: 15_000 });
+ await page.waitForSelector('#login_mount', { timeout: 10_000 });
+ // React must actually render into the mount node. This guards the login entry
+ // point against the React 19 removal of ReactDOM.render (it uses createRoot);
+ // a regression there leaves #login_mount empty (blank page) rather than failing the build.
+ await page.waitForFunction(
+ () => {
+ const el = document.getElementById('login_mount');
+ return !!el && el.childElementCount > 0;
+ },
+ { timeout: 10_000 }
+ );
+ const childCount = await page.evaluate(
+ () => document.getElementById('login_mount').childElementCount
+ );
+ expect(childCount).toBeGreaterThan(0);
+ } finally {
+ // Nested finally + awaited close so a browser.close() failure cannot skip
+ // server.close() and leak the Express server (which would hang the run).
+ try {
+ if (browser) {
+ await browser.close();
+ }
+ } finally {
+ await new Promise((resolve, reject) => {
+ // Force-close lingering connections first so server.close() can't hang
+ // waiting on a socket left open by a failed browser teardown.
+ if (server.closeAllConnections) {
+ server.closeAllConnections();
+ }
+ server.close(err => (err ? reject(err) : resolve()));
+ });
+ }
+ }
+ }, 20_000);
});
describe('Config options', () => {
it('should start with port option', async () => {
const result = await startParseDashboardAndGetOutput(['--port', '4041']);
- expect(result).toContain('The dashboard is now available at http://0.0.0.0:4041/');
+ expect(result).toContain('The dashboard is now available at http://localhost:4041/');
});
it('should reject to start if config and other options are combined', async () => {
diff --git a/src/lib/tests/renderWithAct.js b/src/lib/tests/renderWithAct.js
new file mode 100644
index 0000000000..ec6f9687de
--- /dev/null
+++ b/src/lib/tests/renderWithAct.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import { act } from 'react';
+import renderer from 'react-test-renderer';
+
+// act() imported from 'react' expects the host to declare an act environment;
+// react-test-renderer's own act() used to set this implicitly. Declare it once
+// here so the concurrent renderer flushes without an "environment not
+// configured to support act" warning.
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+// Shared test helper. React 19's react-test-renderer renders concurrently, so
+// create() must run inside act() for toJSON()/getInstance() to reflect the
+// flushed render rather than returning null. (act is imported from 'react', its
+// canonical location in React 19.)
+export function renderComponent(element) {
+ let component;
+ act(() => {
+ component = renderer.create(element);
+ });
+ return component;
+}
diff --git a/src/lib/withRouter.js b/src/lib/withRouter.js
index 83950ae75f..ce411f66c1 100644
--- a/src/lib/withRouter.js
+++ b/src/lib/withRouter.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { useParams, useNavigate, useOutletContext, useLocation } from 'react-router-dom';
+import { useParams, useNavigate, useOutletContext, useLocation } from 'react-router';
export function withRouter(Component) {
function render(props) {
diff --git a/src/login/index.js b/src/login/index.js
index d81494fcfe..c3966d9602 100644
--- a/src/login/index.js
+++ b/src/login/index.js
@@ -7,11 +7,12 @@
*/
import Login from './Login';
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
require('stylesheets/fonts.scss');
// App entry point
const path = window.PARSE_DASHBOARD_PATH || '/';
-ReactDOM.render(, document.getElementById('login_mount'));
+const root = createRoot(document.getElementById('login_mount'));
+root.render();
diff --git a/src/parse-interface-guide/PIG.react.js b/src/parse-interface-guide/PIG.react.js
index 1c7fdd82fa..6b009772ac 100644
--- a/src/parse-interface-guide/PIG.react.js
+++ b/src/parse-interface-guide/PIG.react.js
@@ -6,7 +6,7 @@
* the root directory of this source tree.
*/
import * as ComponentsMap from 'parse-interface-guide/ComponentsMap';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
import Icon from 'components/Icon/Icon.react';
import PropsTable from 'parse-interface-guide/PropsTable.react';
import React from 'react';
diff --git a/src/parse-interface-guide/index.js b/src/parse-interface-guide/index.js
index 83fac6c3d8..07aea0a96c 100644
--- a/src/parse-interface-guide/index.js
+++ b/src/parse-interface-guide/index.js
@@ -5,10 +5,11 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
-import Routes from './routes';
+import routes from './routes';
// App entry point
-ReactDOM.render(Routes, document.getElementById('browser_mount'));
+const root = createRoot(document.getElementById('browser_mount'));
+root.render(routes);
diff --git a/src/parse-interface-guide/routes.js b/src/parse-interface-guide/routes.js
index e478254e5b..51a6214127 100644
--- a/src/parse-interface-guide/routes.js
+++ b/src/parse-interface-guide/routes.js
@@ -7,7 +7,7 @@
*/
import PIG from 'parse-interface-guide/PIG.react';
import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router';
const routes = (
diff --git a/src/quickstart/index.js b/src/quickstart/index.js
index fe2b4ad3d3..eaa28fe630 100644
--- a/src/quickstart/index.js
+++ b/src/quickstart/index.js
@@ -7,10 +7,11 @@
*/
import Quickstart from 'quickstart/Quickstart.react';
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
require('stylesheets/fonts.scss');
// App entry point
-ReactDOM.render(, document.getElementById('quickstart_mount'));
+const root = createRoot(document.getElementById('quickstart_mount'));
+root.render();
diff --git a/webpack/base.config.js b/webpack/base.config.js
index f4fedef00c..61f3ecfd24 100644
--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -20,15 +20,27 @@ module.exports = {
context: path.join(__dirname, '../src'),
output: {
filename: '[name].bundle.js',
- publicPath: 'bundles/',
+ // 'auto' derives the public path from the executing script's URL at runtime.
+ // Required so Monaco's dynamically-emitted *.worker.js chunks (GraphiQL 5)
+ // resolve correctly instead of doubling the relative 'bundles/' segment; it
+ // also fixes lazy-chunk loading from deep SPA routes.
+ publicPath: 'auto',
assetModuleFilename: 'img/[hash][ext]',
},
resolve: {
- modules: [__dirname, path.join(__dirname, '../src'), path.join(__dirname, '../node_modules')],
+ modules: [
+ __dirname,
+ path.join(__dirname, '../src'),
+ path.join(__dirname, '../node_modules'),
+ // Relative entry enables node-style walk-up so webpack can resolve deps
+ // that npm nests (e.g. graphiql's @graphiql/react, react-helmet's
+ // react-side-effect) instead of hoisting under React 19 peer ranges.
+ 'node_modules',
+ ],
fullySpecified: false,
alias: {
- 'react/jsx-runtime': require.resolve('react/jsx-runtime.js'),
- 'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime.js'),
+ 'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+ 'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
},
},
resolveLoader: {
@@ -77,6 +89,12 @@ module.exports = {
test: /\.jpg$/,
type: 'asset/resource',
},
+ {
+ // Monaco (via GraphiQL 5) ships a codicon icon font; without a font
+ // asset rule css-loader fails to parse its url(codicon.ttf) reference.
+ test: /\.(ttf|woff2?)$/,
+ type: 'asset/resource',
+ },
{
test: /\.flow$/,
type: 'asset/source',