+ {renderToolbar()}
+
+
+ {renderTabs()}
(this.editor = editor)}
+ defaultValue={activeTab?.code || DEFAULT_CODE_EDITOR_VALUE}
+ ref={editorRef}
+ fontSize={14}
+ theme="monokai"
/>
-
-
- Console
-
-
-
- {window.localStorage && (
- this.saveCode()}
- progress={saving}
- />
- )}
-
-
-
-
- {results.map(({ log, name }, i) => (
-
- ))}
-
+
+ 💡 Shortcuts:
+ Ctrl/Cmd + Enter to run,{' '}
+ Ctrl/Cmd + S to save,{' '}
+ Ctrl/Cmd + L to clear console,{' '}
+ Ctrl + ↑/↓ for history
+
+ {results.length === 0 ? (
+
+ Console output will appear here...
+
+ Run your code to see results
+
+ ) : (
+ results.map(result => (
+
+ ))
+ )}
+
+
- );
- }
+
+ );
}
diff --git a/src/dashboard/Data/Playground/Playground.scss b/src/dashboard/Data/Playground/Playground.scss
index 6af6efbf0..9c758e56e 100644
--- a/src/dashboard/Data/Playground/Playground.scss
+++ b/src/dashboard/Data/Playground/Playground.scss
@@ -2,13 +2,256 @@
padding-top: 96px;
background-color: #002b36;
height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
}
-.console-ctn {
+.playground-content {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: hidden;
+}
+
+.editor-section {
+ position: relative;
+ border-bottom: 1px solid #169cee;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+
+ /* Ensure the code editor fills the container */
+ .ace_editor {
+ height: 100% !important;
+ }
+
+ /* Ensure the react-ace wrapper also fills the container */
+ & > div:not(.tab-bar) {
+ height: 100% !important;
+ flex: 1;
+ }
+}
+
+.tab-bar {
+ display: flex;
+ background: #073642;
+ border-bottom: 1px solid #169cee;
+ padding: 0 4px;
+ align-items: flex-end;
+ flex-shrink: 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+
+ /* Custom scrollbar for tab bar */
+ &::-webkit-scrollbar {
+ height: 4px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: #073642;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: #586e75;
+ border-radius: 2px;
+ }
+
+ &::-webkit-scrollbar-thumb:hover {
+ background: #657b83;
+ }
+}
+
+.tab-container {
display: flex;
align-items: center;
- justify-content: stretch;
+ flex-shrink: 0;
+ min-width: min-content;
+}
+
+.tab {
+ display: flex;
+ align-items: center;
+ padding: 4px 4px 4px 12px;
+ margin-right: 4px;
+ margin-bottom: -1px;
+ background: #2C2C35;
+ border: 1px solid #586e75;
+ border-bottom: none;
+ border-radius: 4px 4px 0 0;
+ cursor: pointer;
+ font-size: 12px;
+ color: #93a1a1;
+ transition: all 0.2s ease;
+ min-width: 80px;
+ max-width: 200px;
+ flex-shrink: 0;
+ white-space: nowrap;
+
+ &:hover {
+ background: #073642;
+ color: #fdf6e3;
+ }
+
+ &.tab-active {
+ background: #169cee;
+ color: #fdf6e3;
+ border-color: #169cee;
+ }
+
+ /* Drag and drop styles */
+ &.tab-dragging {
+ opacity: 0.5;
+ z-index: 1000;
+ cursor: grabbing;
+ }
+
+ &.tab-drag-over {
+ border-left: 3px solid #d33682;
+ background: rgba(211, 54, 130, 0.1);
+ }
+
+ /* Make tabs draggable */
+ &[draggable="true"] {
+ cursor: grab;
+
+ &:active {
+ cursor: grabbing;
+ }
+ }
+}
+
+.tab-name {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-right: 12px;
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: underline;
+ text-decoration-style: dotted;
+ }
+}
+
+.tab-rename-input {
+ flex: 1;
+ background: #fdf6e3;
+ border: 1px solid #169cee;
+ color: #002b36;
+ padding: 2px 4px;
+ margin: 0;
+ font-size: 12px;
+ font-family: inherit;
+ border-radius: 2px;
+ outline: none;
+ margin-right: 4px;
+
+ &:focus {
+ box-shadow: 0 0 0 2px rgba(22, 156, 238, 0.3);
+ }
+}
+
+.tab-close {
+ background: none;
+ border: none;
+ color: inherit;
+ cursor: pointer;
+ padding: 0;
+ width: 16px;
+ height: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 2px;
+ font-size: 14px;
+ line-height: 1;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+}
+
+.tab-new {
+ background: none;
+ border: 1px solid #586e75;
+ color: #93a1a1;
+ cursor: pointer;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ margin-left: 4px;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ &:hover {
+ background: #073642;
+ color: #fdf6e3;
+ border-color: #169cee;
+ }
+}
+
+.resize-handle {
+ height: 4px;
+ background: #169cee;
+ cursor: ns-resize;
+ position: relative;
+ user-select: none;
+
+ &:hover {
+ background: #2aa198;
+ }
+
+ &:active {
+ background: #cb4b16;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 40px;
+ height: 2px;
+ background: rgba(255, 255, 255, 0.8);
+ border-radius: 1px;
+ }
+}
+
+.editor-help {
+ display: none;
+ position: absolute;
+ bottom: 8px;
+ right: 12px;
+ background: rgba(0, 43, 54, 0.9);
+ color: #93a1a1;
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-family: monospace;
+ border: 1px solid #073642;
+
+ kbd {
+ background: #073642;
+ color: #839496;
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-size: 11px;
+ border: 1px solid #586e75;
+ margin: 0 2px;
+ }
+}
+
+.console-ctn {
+ display: flex;
flex-direction: column;
+ overflow: hidden;
& h3 {
height: 28px;
@@ -16,32 +259,193 @@
font-size: 16px;
font-weight: 700;
color: white;
+ margin: 0;
}
& > header {
- flex: 1;
- padding: 0 0 0 10px;
+ flex: none;
+ padding: 12px 16px;
background-color: #169cee;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
+ box-sizing: border-box;
+ position: sticky;
+ top: 0;
+ z-index: 10;
}
& > section {
+ flex: 1;
width: 100%;
+ overflow-y: auto;
+ background-color: #110D11;
+ }
+}
+
+.console-output {
+ padding: 2px 4px;
+ overflow-y: auto;
+ background-color: #110D11;
+ height: 100%;
+ font-size: 12px;
+ line-height: 1.2;
+}
+
+.console-empty {
+ text-align: center;
+ color: #586e75;
+ padding: 8px 6px;
+ font-style: italic;
+ font-size: 11px;
+ line-height: 1.2;
+
+ small {
+ color: #657b83;
+ font-size: 10px;
+ }
+}
+
+.console-entry {
+ margin-bottom: 2px;
+ padding: 4px 8px;
+ border-radius: 4px;
+
+ &.console-error {
+ color: #dc322f;
+ background-color: rgba(220, 50, 47, 0.05);
+ }
+
+ &.console-warn {
+ color: #b58900;
+ background-color: rgba(181, 137, 0, 0.05);
+ }
+
+ &.console-info {
+ color: #268bd2;
+ }
+
+ &.console-debug {
+ color: #6c71c4;
+ }
+
+ &.console-log {
+ color: #93a1a1;
+ }
+}
+
+.console-content {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+}
+
+.console-output-content {
+ flex: 1;
+ min-width: 0; // Allow content to shrink
+}
+
+.console-source {
+ flex-shrink: 0;
+ font-family: monospace;
+ font-size: 10px;
+ color: #657b83;
+ text-align: right;
+ min-width: 80px;
+ padding-left: 6px;
+ border-left: 1px solid #073642;
+ line-height: 1.2;
+
+ &:hover {
+ color: #839496;
}
}
+.console-source-unknown {
+ opacity: 0.5;
+}
+
+.console-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+ font-size: 12px;
+ font-family: monospace;
+ color: #93a1a1;
+}
+
+.console-icon {
+ font-size: 14px;
+}
+
+.console-type {
+ font-weight: 600;
+ text-transform: uppercase;
+ color: #839496;
+}
+
+.console-timestamp {
+ color: #657b83;
+ margin-left: auto;
+ font-size: 11px;
+}
+
.buttons-ctn {
display: flex;
justify-content: flex-end;
- padding: 15px;
align-items: center;
& > div {
display: flex;
justify-content: flex-end;
- width: 25%;
+ align-items: center;
+ gap: 8px;
}
}
+
+/* Custom scrollbar for console output */
+.console-output::-webkit-scrollbar {
+ width: 8px;
+}
+
+.console-output::-webkit-scrollbar-track {
+ background: #073642;
+}
+
+.console-output::-webkit-scrollbar-thumb {
+ background: #586e75;
+ border-radius: 4px;
+}
+
+.console-output::-webkit-scrollbar-thumb:hover {
+ background: #657b83;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .editor-help {
+ display: none;
+ }
+
+ .console-header {
+ font-size: 11px;
+ gap: 6px;
+ }
+
+ .resize-handle {
+ height: 12px; /* Make it larger on mobile for easier touch interaction */
+ }
+}
+
+/* Prevent text selection during resize */
+.playground-content.resizing {
+ user-select: none;
+}
+
+/* Enhanced resize handle hover state */
+.resize-handle:hover::before {
+ width: 60px;
+ background: rgba(255, 255, 255, 1);
+}
diff --git a/src/lib/ScriptManager.js b/src/lib/ScriptManager.js
new file mode 100644
index 000000000..4bbb4bcb6
--- /dev/null
+++ b/src/lib/ScriptManager.js
@@ -0,0 +1,422 @@
+/*
+ * 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 ServerConfigStorage from './ServerConfigStorage';
+import { prefersServerStorage, setStoragePreference } from './StoragePreferences';
+
+const VERSION = 1;
+
+/**
+ * Script Manager for handling playground script storage with server-side storage support
+ */
+export default class ScriptManager {
+ constructor(app) {
+ this.app = app;
+ this.serverStorage = new ServerConfigStorage(app);
+ }
+
+ /**
+ * Gets scripts from either server or local storage based on configuration and user preference
+ * @param {string} appId - The application ID
+ * @returns {Promise
} Array of scripts
+ */
+ async getScripts(appId) {
+ // Check if server storage is enabled and user prefers it
+ if (this.serverStorage.isServerConfigEnabled() && prefersServerStorage(appId)) {
+ try {
+ const serverScripts = await this._getScriptsFromServer(appId);
+ // Always return server scripts (even if empty) when server storage is preferred
+ return serverScripts || [];
+ } catch (error) {
+ console.error('Failed to get scripts from server:', error);
+ // When server storage is preferred, return empty array instead of falling back to local
+ return [];
+ }
+ }
+
+ // Use local storage when server storage is not preferred
+ let localScripts = this._getScriptsFromLocal(appId);
+
+ // Always check for legacy single-script format and add it as a new unsaved tab
+ const legacyScript = this._getScriptFromLegacySingleFormat();
+ if (legacyScript && legacyScript.length > 0) {
+ // If we have existing scripts, add the legacy script to them
+ if (localScripts && localScripts.length > 0) {
+ localScripts = [...localScripts, ...legacyScript];
+ } else {
+ // If no existing scripts, use the legacy script
+ localScripts = legacyScript;
+ }
+ }
+
+ return localScripts || [];
+ }
+
+ /**
+ * Gets only the scripts that should be open (have an order property)
+ * @param {string} appId - The application ID
+ * @returns {Promise} Array of scripts that should be open, sorted by order
+ */
+ async getOpenScripts(appId) {
+ const allScripts = await this.getScripts(appId);
+ return allScripts
+ .filter(script => script.order !== undefined && script.order !== null)
+ .sort((a, b) => a.order - b.order);
+ }
+
+ /**
+ * Gets all saved scripts (including closed ones)
+ * @param {string} appId - The application ID
+ * @returns {Promise} Array of all saved scripts
+ */
+ async getAllSavedScripts(appId) {
+ const allScripts = await this.getScripts(appId);
+ return allScripts.filter(script => script.saved !== false);
+ }
+
+ /**
+ * Opens a script by setting its order property
+ * @param {string} appId - The application ID
+ * @param {number} scriptId - The script ID to open
+ * @param {number} order - The order position for the tab
+ * @returns {Promise}
+ */
+ async openScript(appId, scriptId, order) {
+ const allScripts = await this.getScripts(appId);
+ const updatedScripts = allScripts.map(script =>
+ script.id === scriptId
+ ? { ...script, order }
+ : script
+ );
+ await this.saveScripts(appId, updatedScripts);
+ }
+
+ /**
+ * Closes a script by removing its order property
+ * @param {string} appId - The application ID
+ * @param {number} scriptId - The script ID to close
+ * @returns {Promise}
+ */
+ async closeScript(appId, scriptId) {
+ const allScripts = await this.getScripts(appId);
+ const updatedScripts = allScripts.map(script =>
+ script.id === scriptId
+ ? { ...script, order: undefined }
+ : script
+ );
+ await this.saveScripts(appId, updatedScripts);
+ }
+
+ /**
+ * Updates the order of open scripts
+ * @param {string} appId - The application ID
+ * @param {Array} openScripts - Array of scripts with their new order
+ * @returns {Promise}
+ */
+ async updateScriptOrder(appId, openScripts) {
+ const allScripts = await this.getScripts(appId);
+ const openScriptIds = openScripts.map(script => script.id);
+
+ const updatedScripts = allScripts.map(script => {
+ const openScript = openScripts.find(os => os.id === script.id);
+ if (openScript) {
+ return { ...script, ...openScript };
+ } else if (openScriptIds.includes(script.id)) {
+ // Script was previously open but not in the new list, close it
+ return { ...script, order: undefined };
+ }
+ return script;
+ });
+
+ await this.saveScripts(appId, updatedScripts);
+ }
+
+ /**
+ * Completely deletes a script from storage
+ * @param {string} appId - The application ID
+ * @param {number} scriptId - The script ID to delete
+ * @returns {Promise}
+ */
+ async deleteScript(appId, scriptId) {
+ const allScripts = await this.getScripts(appId);
+ const updatedScripts = allScripts.filter(script => script.id !== scriptId);
+ await this.saveScripts(appId, updatedScripts);
+ }
+
+ /**
+ * Saves scripts to either server or local storage based on configuration and user preference
+ * @param {string} appId - The application ID
+ * @param {Array} scripts - Array of scripts to save
+ * @returns {Promise}
+ */
+ async saveScripts(appId, scripts) {
+ // Check if server storage is enabled and user prefers it
+ if (this.serverStorage.isServerConfigEnabled() && prefersServerStorage(appId)) {
+ // Use server storage - no fallback to local
+ return await this._saveScriptsToServer(appId, scripts);
+ }
+
+ // Use local storage when server storage is not preferred
+ return this._saveScriptsToLocal(appId, scripts);
+ }
+
+ /**
+ * Migrates scripts from local storage to server storage
+ * @param {string} appId - The application ID
+ * @returns {Promise<{success: boolean, scriptCount: number}>}
+ */
+ async migrateToServer(appId) {
+ if (!this.serverStorage.isServerConfigEnabled()) {
+ throw new Error('Server configuration is not enabled for this app');
+ }
+
+ // Get scripts from local storage only (legacy scripts are handled by getScripts as unsaved tabs)
+ const localScripts = this._getScriptsFromLocal(appId);
+
+ if (!localScripts || localScripts.length === 0) {
+ return { success: true, scriptCount: 0 };
+ }
+
+ try {
+ await this._saveScriptsToServer(appId, localScripts);
+ return { success: true, scriptCount: localScripts.length };
+ } catch (error) {
+ console.error('Failed to migrate scripts to server:', error);
+ throw error;
+ }
+ }
+
+ /**
+ * Deletes scripts from local storage
+ * @param {string} appId - The application ID
+ * @returns {boolean} True if deletion was successful
+ */
+ deleteFromBrowser(appId) {
+ try {
+ // Remove from new format
+ localStorage.removeItem(this._getLocalPath(appId));
+ return true;
+ } catch (error) {
+ console.error('Failed to delete scripts from browser:', error);
+ return false;
+ }
+ }
+
+ /**
+ * Sets the storage preference for the app
+ * @param {string} appId - The application ID
+ * @param {string} preference - The storage preference ('local' or 'server')
+ */
+ setStoragePreference(appId, preference) {
+ setStoragePreference(appId, preference);
+ }
+
+ /**
+ * Gets the current storage preference for the app
+ * @param {string} appId - The application ID
+ * @returns {string} The storage preference ('local' or 'server')
+ */
+ getStoragePreference(appId) {
+ return prefersServerStorage(appId) ? 'server' : 'local';
+ }
+
+ /**
+ * Checks if server configuration is enabled for this app
+ * @returns {boolean} True if server config is enabled
+ */
+ isServerConfigEnabled() {
+ return this.serverStorage.isServerConfigEnabled();
+ }
+
+ /**
+ * Gets scripts from server storage
+ * @private
+ */
+ async _getScriptsFromServer(appId) {
+ try {
+ const scriptConfigs = await this.serverStorage.getConfigsByPrefix('console.js.script.', appId);
+ const scripts = [];
+
+ Object.entries(scriptConfigs).forEach(([key, config]) => {
+ if (config && typeof config === 'object') {
+ // Extract script ID from key (console.js.script.{SCRIPT_ID})
+ const scriptId = key.replace('console.js.script.', '');
+
+ scripts.push({
+ id: parseInt(scriptId, 10),
+ ...config
+ });
+ }
+ });
+
+ return scripts;
+ } catch (error) {
+ console.error('Failed to get scripts from server:', error);
+ return [];
+ }
+ }
+
+ /**
+ * Saves scripts to server storage
+ * @private
+ */
+ async _saveScriptsToServer(appId, scripts) {
+ try {
+ // First, get existing scripts from server to know which ones to delete
+ const existingScriptConfigs = await this.serverStorage.getConfigsByPrefix('console.js.script.', appId);
+ const existingScriptIds = Object.keys(existingScriptConfigs).map(key =>
+ key.replace('console.js.script.', '')
+ );
+
+ // Delete scripts that are no longer in the new scripts array
+ const newScriptIds = scripts.map(script => script.id.toString());
+ const scriptsToDelete = existingScriptIds.filter(id => !newScriptIds.includes(id));
+
+ await Promise.all(
+ scriptsToDelete.map(id =>
+ this.serverStorage.deleteConfig(`console.js.script.${id}`, appId)
+ )
+ );
+
+ // Save or update current scripts
+ await Promise.all(
+ scripts.map(script => {
+ const scriptConfig = { ...script };
+ delete scriptConfig.id; // Don't store ID in the config itself
+
+ // Remove null and undefined values to keep the storage clean
+ Object.keys(scriptConfig).forEach(key => {
+ if (scriptConfig[key] === null || scriptConfig[key] === undefined) {
+ delete scriptConfig[key];
+ }
+ });
+
+ return this.serverStorage.setConfig(
+ `console.js.script.${script.id}`,
+ scriptConfig,
+ appId
+ );
+ })
+ );
+ } catch (error) {
+ console.error('Failed to save scripts to server:', error);
+ throw error;
+ }
+ }
+
+ /**
+ * Gets scripts from local storage (original implementation)
+ * @private
+ */
+ _getScriptsFromLocal(appId) {
+ let entry;
+ try {
+ entry = localStorage.getItem(this._getLocalPath(appId)) || '[]';
+ } catch {
+ entry = '[]';
+ }
+ try {
+ return JSON.parse(entry);
+ } catch {
+ return [];
+ }
+ }
+
+ /**
+ * Gets script from the legacy single-script format
+ * @private
+ */
+ _getScriptFromLegacySingleFormat() {
+ try {
+ const legacyCode = localStorage.getItem('parse-dashboard-playground-code');
+
+ if (legacyCode && legacyCode.trim()) {
+ // Create a script with the legacy code, marked as unsaved
+ const script = {
+ id: this._generateScriptId({ name: 'Legacy Script', code: legacyCode }),
+ name: 'Legacy Script',
+ code: legacyCode,
+ saved: false, // Mark as unsaved so user can choose to save it
+ lastModified: Date.now()
+ };
+
+ // Clean up the old storage key immediately after reading
+ localStorage.removeItem('parse-dashboard-playground-code');
+
+ return [script];
+ }
+ } catch {
+ // Ignore errors
+ }
+ return [];
+ }
+
+ /**
+ * Saves scripts to local storage (original implementation)
+ * @private
+ */
+ _saveScriptsToLocal(appId, scripts) {
+ try {
+ localStorage.setItem(this._getLocalPath(appId), JSON.stringify(scripts));
+ } catch {
+ // ignore write errors
+ }
+ }
+
+ /**
+ * Gets the local storage path for scripts
+ * @private
+ */
+ _getLocalPath(appId) {
+ return `ParseDashboard:${VERSION}:${appId}:Scripts`;
+ }
+
+ /**
+ * Generates a unique ID for a script
+ * @private
+ */
+ _generateScriptId(script) {
+ // Use a hash of the script name and code as a fallback ID
+ const str = `${script.name || 'script'}-${script.code || ''}`;
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ const char = str.charCodeAt(i);
+ hash = ((hash << 5) - hash) + char;
+ hash = hash & hash; // Convert to 32bit integer
+ }
+ return Math.abs(hash);
+ }
+}
+
+// Legacy API compatibility - these functions will work with local storage only
+// for backward compatibility
+export function getScripts(appId) {
+ let entry;
+ try {
+ entry = localStorage.getItem(path(appId)) || '[]';
+ } catch {
+ entry = '[]';
+ }
+ try {
+ return JSON.parse(entry);
+ } catch {
+ return [];
+ }
+}
+
+export function saveScripts(appId, scripts) {
+ try {
+ localStorage.setItem(path(appId), JSON.stringify(scripts));
+ } catch {
+ // ignore write errors
+ }
+}
+
+function path(appId) {
+ return `ParseDashboard:${VERSION}:${appId}:Scripts`;
+}
From a552d1f4257b39da678ec2801c244432704c07ff Mon Sep 17 00:00:00 2001
From: semantic-release-bot
Date: Mon, 4 Aug 2025 13:20:02 +0000
Subject: [PATCH 05/13] chore(release): 7.4.0-alpha.2 [skip ci]
# [7.4.0-alpha.2](https://github.com/parse-community/parse-dashboard/compare/7.4.0-alpha.1...7.4.0-alpha.2) (2025-08-04)
### Features
* Modernize JavaScript console with tabs and server-side storage of scripts ([#2962](https://github.com/parse-community/parse-dashboard/issues/2962)) ([6e0c7f2](https://github.com/parse-community/parse-dashboard/commit/6e0c7f25b16fdfc0a34123359a8512c26252f269))
---
changelogs/CHANGELOG_alpha.md | 7 +++++++
package-lock.json | 4 ++--
package.json | 2 +-
3 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/changelogs/CHANGELOG_alpha.md b/changelogs/CHANGELOG_alpha.md
index 2703b8aeb..d5969b0fb 100644
--- a/changelogs/CHANGELOG_alpha.md
+++ b/changelogs/CHANGELOG_alpha.md
@@ -1,3 +1,10 @@
+# [7.4.0-alpha.2](https://github.com/parse-community/parse-dashboard/compare/7.4.0-alpha.1...7.4.0-alpha.2) (2025-08-04)
+
+
+### Features
+
+* Modernize JavaScript console with tabs and server-side storage of scripts ([#2962](https://github.com/parse-community/parse-dashboard/issues/2962)) ([6e0c7f2](https://github.com/parse-community/parse-dashboard/commit/6e0c7f25b16fdfc0a34123359a8512c26252f269))
+
# [7.4.0-alpha.1](https://github.com/parse-community/parse-dashboard/compare/7.3.0...7.4.0-alpha.1) (2025-08-03)
diff --git a/package-lock.json b/package-lock.json
index 418c37421..5c4bb8870 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "parse-dashboard",
- "version": "7.4.0-alpha.1",
+ "version": "7.4.0-alpha.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "parse-dashboard",
- "version": "7.4.0-alpha.1",
+ "version": "7.4.0-alpha.2",
"license": "SEE LICENSE IN LICENSE",
"dependencies": {
"@babel/runtime": "7.27.4",
diff --git a/package.json b/package.json
index 6130da56f..a67ffceb5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "parse-dashboard",
- "version": "7.4.0-alpha.1",
+ "version": "7.4.0-alpha.2",
"repository": {
"type": "git",
"url": "https://github.com/parse-community/parse-dashboard"
From 8c8d0849521eccd23e590c57ca91069bb32c5035 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Mon, 4 Aug 2025 21:58:40 +0200
Subject: [PATCH 06/13] fix: Legacy script in JavaScript console not imported
to modern console (#2963)
---
.../Data/Playground/Playground.react.js | 185 +++++++++++++++---
.../DashboardSettings.react.js | 33 +++-
src/lib/ScriptManager.js | 66 +++++--
3 files changed, 229 insertions(+), 55 deletions(-)
diff --git a/src/dashboard/Data/Playground/Playground.react.js b/src/dashboard/Data/Playground/Playground.react.js
index 8ba356101..459cc684f 100644
--- a/src/dashboard/Data/Playground/Playground.react.js
+++ b/src/dashboard/Data/Playground/Playground.react.js
@@ -1,6 +1,7 @@
import React, { useState, useRef, useEffect, useContext, useCallback, useMemo } from 'react';
import ReactJson from 'react-json-view';
import Parse from 'parse';
+import { useBeforeUnload } from 'react-router-dom';
import CodeEditor from 'components/CodeEditor/CodeEditor.react';
import Toolbar from 'components/Toolbar/Toolbar.react';
@@ -176,11 +177,11 @@ export default function Playground() {
const containerRef = useRef(null);
// Tab management state
+ const initialTabId = useMemo(() => crypto.randomUUID(), []);
const [tabs, setTabs] = useState([
- { id: 1, name: 'Tab 1', code: DEFAULT_CODE_EDITOR_VALUE }
+ { id: initialTabId, name: 'Tab 1', code: DEFAULT_CODE_EDITOR_VALUE }
]);
- const [activeTabId, setActiveTabId] = useState(1);
- const [nextTabId, setNextTabId] = useState(2);
+ const [activeTabId, setActiveTabId] = useState(initialTabId);
const [renamingTabId, setRenamingTabId] = useState(null);
const [renamingValue, setRenamingValue] = useState('');
const [savedTabs, setSavedTabs] = useState([]); // All saved tabs including closed ones
@@ -235,8 +236,6 @@ export default function Playground() {
if (tabsToOpen.length > 0) {
setTabs(tabsToOpen);
- const maxId = Math.max(...allScripts.map(tab => tab.id));
- setNextTabId(maxId + 1);
// Set active tab to the first one
setActiveTabId(tabsToOpen[0].id);
@@ -249,8 +248,6 @@ export default function Playground() {
const firstScript = { ...allScripts[0], order: 0 };
setTabs([firstScript]);
setActiveTabId(firstScript.id);
- const maxId = Math.max(...allScripts.map(tab => tab.id));
- setNextTabId(maxId + 1);
// Save it as open
await scriptManagerRef.current.openScript(context.applicationId, firstScript.id, 0);
@@ -258,17 +255,17 @@ export default function Playground() {
setSavedTabs(allScripts.filter(script => script.saved !== false));
} else {
// Fallback to default tab if no scripts exist
- setTabs([{ id: 1, name: 'Tab 1', code: DEFAULT_CODE_EDITOR_VALUE, order: 0 }]);
- setActiveTabId(1);
- setNextTabId(2);
+ const defaultTabId = crypto.randomUUID();
+ setTabs([{ id: defaultTabId, name: 'Tab 1', code: DEFAULT_CODE_EDITOR_VALUE, order: 0 }]);
+ setActiveTabId(defaultTabId);
}
}
} catch (error) {
console.warn('Failed to load scripts via ScriptManager:', error);
// Fallback to default tab if loading fails
- setTabs([{ id: 1, name: 'Tab 1', code: DEFAULT_CODE_EDITOR_VALUE, order: 0 }]);
- setActiveTabId(1);
- setNextTabId(2);
+ const defaultTabId = crypto.randomUUID();
+ setTabs([{ id: defaultTabId, name: 'Tab 1', code: DEFAULT_CODE_EDITOR_VALUE, order: 0 }]);
+ setActiveTabId(defaultTabId);
}
// Load other data from localStorage
@@ -317,18 +314,19 @@ export default function Playground() {
// Tab management functions
const createNewTab = useCallback(() => {
+ const newTabId = crypto.randomUUID();
+ const tabCount = tabs.length + 1;
const newTab = {
- id: nextTabId,
- name: `Tab ${nextTabId}`,
+ id: newTabId,
+ name: `Tab ${tabCount}`,
code: '', // Start with empty code instead of default value
saved: false, // Mark as unsaved initially
order: tabs.length // Assign order as the last position
};
const updatedTabs = [...tabs, newTab];
setTabs(updatedTabs);
- setActiveTabId(nextTabId);
- setNextTabId(nextTabId + 1);
- }, [tabs, nextTabId]);
+ setActiveTabId(newTabId);
+ }, [tabs]);
const closeTab = useCallback(async (tabId) => {
if (tabs.length <= 1) {
@@ -591,11 +589,6 @@ export default function Playground() {
setTabs(updatedTabs);
setActiveTabId(savedTab.id);
- // Update nextTabId if necessary
- if (savedTab.id >= nextTabId) {
- setNextTabId(savedTab.id + 1);
- }
-
// Save the open state through ScriptManager
if (scriptManagerRef.current && context?.applicationId) {
try {
@@ -604,7 +597,151 @@ export default function Playground() {
console.error('Failed to open script:', error);
}
}
- }, [tabs, nextTabId, switchTab, context?.applicationId]);
+ }, [tabs, switchTab, context?.applicationId]);
+
+ // Navigation confirmation for unsaved changes
+ useBeforeUnload(
+ useCallback(
+ (event) => {
+ // Check for unsaved changes across all tabs
+ let hasChanges = false;
+
+ for (const tab of tabs) {
+ // Check if tab is marked as unsaved (like legacy scripts)
+ if (tab.saved === false) {
+ hasChanges = true;
+ break;
+ }
+
+ // Get current content for the tab
+ let currentContent = '';
+ if (tab.id === activeTabId && editorRef.current) {
+ // For active tab, get content from editor
+ currentContent = editorRef.current.value;
+ } else {
+ // For inactive tabs, use stored code
+ currentContent = tab.code;
+ }
+
+ // Find the saved version of this tab
+ const savedTab = savedTabs.find(saved => saved.id === tab.id);
+
+ if (!savedTab) {
+ // If tab was never saved, it has unsaved changes if it has any content
+ if (currentContent.trim() !== '') {
+ hasChanges = true;
+ break;
+ }
+ } else {
+ // Compare current content with saved content
+ if (currentContent !== savedTab.code) {
+ hasChanges = true;
+ break;
+ }
+ }
+ }
+
+ if (hasChanges) {
+ const message = 'You have unsaved changes in your playground tabs. Are you sure you want to leave?';
+ event.preventDefault();
+ event.returnValue = message;
+ return message;
+ }
+ },
+ [tabs, activeTabId, savedTabs]
+ )
+ );
+
+ // Handle navigation confirmation for internal route changes
+ useEffect(() => {
+ const checkForUnsavedChanges = () => {
+ // Check for unsaved changes across all tabs
+ for (const tab of tabs) {
+ // Check if tab is marked as unsaved (like legacy scripts)
+ if (tab.saved === false) {
+ return true;
+ }
+
+ // Get current content for the tab
+ let currentContent = '';
+ if (tab.id === activeTabId && editorRef.current) {
+ // For active tab, get content from editor
+ currentContent = editorRef.current.value;
+ } else {
+ // For inactive tabs, use stored code
+ currentContent = tab.code;
+ }
+
+ // Find the saved version of this tab
+ const savedTab = savedTabs.find(saved => saved.id === tab.id);
+
+ if (!savedTab) {
+ // If tab was never saved, it has unsaved changes if it has any content
+ if (currentContent.trim() !== '') {
+ return true;
+ }
+ } else {
+ // Compare current content with saved content
+ if (currentContent !== savedTab.code) {
+ return true;
+ }
+ }
+ }
+ return false;
+ };
+
+ const handleLinkClick = (event) => {
+ if (event.defaultPrevented) {
+ return;
+ }
+ if (event.button !== 0) {
+ return;
+ }
+ if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
+ return;
+ }
+
+ const anchor = event.target.closest('a[href]');
+ if (!anchor || anchor.target === '_blank') {
+ return;
+ }
+
+ const href = anchor.getAttribute('href');
+ if (!href || href === '#') {
+ return;
+ }
+
+ // Check if it's an internal navigation (starts with / or #)
+ if (href.startsWith('/') || href.startsWith('#')) {
+ if (checkForUnsavedChanges()) {
+ const message = 'You have unsaved changes in your playground tabs. Are you sure you want to leave?';
+ if (!window.confirm(message)) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+ }
+ };
+
+ const handlePopState = () => {
+ if (checkForUnsavedChanges()) {
+ const message = 'You have unsaved changes in your playground tabs. Are you sure you want to leave?';
+ if (!window.confirm(message)) {
+ window.history.go(1);
+ }
+ }
+ };
+
+ // Add event listeners
+ document.addEventListener('click', handleLinkClick, true);
+ window.addEventListener('popstate', handlePopState);
+
+ // Cleanup event listeners
+ return () => {
+ document.removeEventListener('click', handleLinkClick, true);
+ window.removeEventListener('popstate', handlePopState);
+ };
+ }, [tabs, activeTabId, savedTabs]);
// Focus input when starting to rename
useEffect(() => {
diff --git a/src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js b/src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js
index 4e2cd7b0f..c7d8f11aa 100644
--- a/src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js
+++ b/src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js
@@ -18,6 +18,7 @@ import Notification from 'dashboard/Data/Browser/Notification.react';
import * as ColumnPreferences from 'lib/ColumnPreferences';
import * as ClassPreferences from 'lib/ClassPreferences';
import ViewPreferencesManager from 'lib/ViewPreferencesManager';
+import ScriptManager from 'lib/ScriptManager';
import bcrypt from 'bcryptjs';
import * as OTPAuth from 'otpauth';
import QRCode from 'qrcode';
@@ -28,6 +29,7 @@ export default class DashboardSettings extends DashboardView {
this.section = 'App Settings';
this.subsection = 'Dashboard Configuration';
this.viewPreferencesManager = null;
+ this.scriptManager = null;
this.state = {
createUserInput: false,
@@ -57,12 +59,13 @@ export default class DashboardSettings extends DashboardView {
}
componentDidMount() {
- this.initializeViewPreferencesManager();
+ this.initializeManagers();
}
- initializeViewPreferencesManager() {
+ initializeManagers() {
if (this.context) {
this.viewPreferencesManager = new ViewPreferencesManager(this.context);
+ this.scriptManager = new ScriptManager(this.context);
this.loadStoragePreference();
}
}
@@ -123,11 +126,18 @@ export default class DashboardSettings extends DashboardView {
return;
}
- const success = this.viewPreferencesManager.deleteFromBrowser(this.context.applicationId);
- if (success) {
- this.showNote('Successfully deleted views from browser storage.');
+ if (!this.scriptManager) {
+ this.showNote('ScriptManager not initialized');
+ return;
+ }
+
+ const viewsSuccess = this.viewPreferencesManager.deleteFromBrowser(this.context.applicationId);
+ const scriptsSuccess = this.scriptManager.deleteFromBrowser(this.context.applicationId);
+
+ if (viewsSuccess && scriptsSuccess) {
+ this.showNote('Successfully deleted dashboard settings from browser storage.');
} else {
- this.showNote('Failed to delete views from browser storage.');
+ this.showNote('Failed to delete all dashboard settings from browser storage.');
}
}
@@ -461,13 +471,16 @@ export default class DashboardSettings extends DashboardView {
}
/>
- {this.viewPreferencesManager && this.viewPreferencesManager.isServerConfigEnabled() && (
+ {this.viewPreferencesManager && this.scriptManager && this.viewPreferencesManager.isServerConfigEnabled() && (