+ return () => clearInterval(interval);
+ }, []);
+
+ const renderTabs = () => {
+ return (
+
+ {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 6af6efbf0b..9c758e56e8 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/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 1f7ddcd2d5..88f0b98a24 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -14,6 +14,7 @@ import Notification from 'dashboard/Data/Browser/Notification.react';
import TableView from 'dashboard/TableView.react';
import tableStyles from 'dashboard/TableView.scss';
import * as ViewPreferences from 'lib/ViewPreferences';
+import ViewPreferencesManager from 'lib/ViewPreferencesManager';
import generatePath from 'lib/generatePath';
import stringCompare from 'lib/stringCompare';
import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore';
@@ -37,6 +38,7 @@ class Views extends TableView {
this.section = 'Core';
this.subsection = 'Views';
this._isMounted = false;
+ this.viewPreferencesManager = null; // Will be initialized when context is available
this.state = {
views: [],
counts: {},
@@ -83,49 +85,65 @@ class Views extends TableView {
}
}
- loadViews(app) {
- const views = ViewPreferences.getViews(app.applicationId);
- this.setState({ views, counts: {} }, () => {
- views.forEach(view => {
- if (view.showCounter) {
- if (view.cloudFunction) {
- // For Cloud Function views, call the function to get count
- Parse.Cloud.run(view.cloudFunction, {}, { useMasterKey: true })
- .then(res => {
- if (this._isMounted) {
- this.setState(({ counts }) => ({
- counts: { ...counts, [view.name]: Array.isArray(res) ? res.length : 0 },
- }));
- }
- })
- .catch(error => {
- if (this._isMounted) {
- this.showNote(`Request failed: ${error.message || 'Unknown error occurred'}`, true);
- }
- });
- } else if (view.query && Array.isArray(view.query)) {
- // For aggregation pipeline views, use existing logic
- new Parse.Query(view.className)
- .aggregate(view.query, { useMasterKey: true })
- .then(res => {
- if (this._isMounted) {
- this.setState(({ counts }) => ({
- counts: { ...counts, [view.name]: res.length },
- }));
- }
- })
- .catch(error => {
- if (this._isMounted) {
- this.showNote(`Request failed: ${error.message || 'Unknown error occurred'}`, true);
- }
- });
+ async loadViews(app) {
+ // Initialize ViewPreferencesManager if not already done or if app changed
+ if (!this.viewPreferencesManager || this.viewPreferencesManager.app !== app) {
+ this.viewPreferencesManager = new ViewPreferencesManager(app);
+ }
+
+ try {
+ const views = await this.viewPreferencesManager.getViews(app.applicationId);
+ this.setState({ views, counts: {} }, () => {
+ views.forEach(view => {
+ if (view.showCounter) {
+ if (view.cloudFunction) {
+ // For Cloud Function views, call the function to get count
+ Parse.Cloud.run(view.cloudFunction, {}, { useMasterKey: true })
+ .then(res => {
+ if (this._isMounted) {
+ this.setState(({ counts }) => ({
+ counts: { ...counts, [view.name]: Array.isArray(res) ? res.length : 0 },
+ }));
+ }
+ })
+ .catch(error => {
+ if (this._isMounted) {
+ this.showNote(`Request failed: ${error.message || 'Unknown error occurred'}`, true);
+ }
+ });
+ } else if (view.query && Array.isArray(view.query)) {
+ // For aggregation pipeline views, use existing logic
+ new Parse.Query(view.className)
+ .aggregate(view.query, { useMasterKey: true })
+ .then(res => {
+ if (this._isMounted) {
+ this.setState(({ counts }) => ({
+ counts: { ...counts, [view.name]: res.length },
+ }));
+ }
+ })
+ .catch(error => {
+ if (this._isMounted) {
+ this.showNote(`Request failed: ${error.message || 'Unknown error occurred'}`, true);
+ }
+ });
+ }
}
+ });
+ if (this._isMounted) {
+ this.loadData(this.props.params.name);
}
});
- if (this._isMounted) {
- this.loadData(this.props.params.name);
- }
- });
+ } catch (error) {
+ console.error('Failed to load views from server, falling back to local storage:', error);
+ // Fallback to local storage
+ const views = ViewPreferences.getViews(app.applicationId);
+ this.setState({ views, counts: {} }, () => {
+ if (this._isMounted) {
+ this.loadData(this.props.params.name);
+ }
+ });
+ }
}
loadData(name) {
@@ -671,8 +689,15 @@ class Views extends TableView {
onConfirm={view => {
this.setState(
state => ({ showCreate: false, views: [...state.views, view] }),
- () => {
- ViewPreferences.saveViews(this.context.applicationId, this.state.views);
+ async () => {
+ if (this.viewPreferencesManager) {
+ try {
+ await this.viewPreferencesManager.saveViews(this.context.applicationId, this.state.views);
+ } catch (error) {
+ console.error('Failed to save views:', error);
+ this.showNote('Failed to save view changes', true);
+ }
+ }
this.loadViews(this.context);
}
);
@@ -699,8 +724,15 @@ class Views extends TableView {
newViews[state.editIndex] = view;
return { editView: null, editIndex: null, views: newViews };
},
- () => {
- ViewPreferences.saveViews(this.context.applicationId, this.state.views);
+ async () => {
+ if (this.viewPreferencesManager) {
+ try {
+ await this.viewPreferencesManager.saveViews(this.context.applicationId, this.state.views);
+ } catch (error) {
+ console.error('Failed to save views:', error);
+ this.showNote('Failed to save view changes', true);
+ }
+ }
this.loadViews(this.context);
}
);
@@ -719,8 +751,15 @@ class Views extends TableView {
const newViews = state.views.filter((_, i) => i !== state.deleteIndex);
return { deleteIndex: null, views: newViews };
},
- () => {
- ViewPreferences.saveViews(this.context.applicationId, this.state.views);
+ async () => {
+ if (this.viewPreferencesManager) {
+ try {
+ await this.viewPreferencesManager.saveViews(this.context.applicationId, this.state.views);
+ } catch (error) {
+ console.error('Failed to save views:', error);
+ this.showNote('Failed to save view changes', true);
+ }
+ }
if (this.props.params.name === name) {
const path = generatePath(this.context, 'views');
this.props.navigate(path);
diff --git a/src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js b/src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js
index 25b657b1e9..c7d8f11aaf 100644
--- a/src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js
+++ b/src/dashboard/Settings/DashboardSettings/DashboardSettings.react.js
@@ -17,6 +17,8 @@ import CodeSnippet from 'components/CodeSnippet/CodeSnippet.react';
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';
@@ -26,6 +28,8 @@ export default class DashboardSettings extends DashboardView {
super();
this.section = 'App Settings';
this.subsection = 'Dashboard Configuration';
+ this.viewPreferencesManager = null;
+ this.scriptManager = null;
this.state = {
createUserInput: false,
@@ -39,6 +43,8 @@ export default class DashboardSettings extends DashboardView {
message: null,
passwordInput: '',
passwordHidden: true,
+ migrationLoading: false,
+ storagePreference: 'local', // Will be updated in componentDidMount
copyData: {
data: '',
show: false,
@@ -52,6 +58,89 @@ export default class DashboardSettings extends DashboardView {
};
}
+ componentDidMount() {
+ this.initializeManagers();
+ }
+
+ initializeManagers() {
+ if (this.context) {
+ this.viewPreferencesManager = new ViewPreferencesManager(this.context);
+ this.scriptManager = new ScriptManager(this.context);
+ this.loadStoragePreference();
+ }
+ }
+
+ loadStoragePreference() {
+ if (this.viewPreferencesManager) {
+ const preference = this.viewPreferencesManager.getStoragePreference(this.context.applicationId);
+ this.setState({ storagePreference: preference });
+ }
+ }
+
+ handleStoragePreferenceChange(preference) {
+ if (this.viewPreferencesManager) {
+ this.viewPreferencesManager.setStoragePreference(this.context.applicationId, preference);
+ this.setState({ storagePreference: preference });
+
+ // Show a notification about the change
+ this.showNote(`Storage preference changed to ${preference === 'server' ? 'server' : 'browser'}`);
+ }
+ }
+
+ async migrateToServer() {
+ if (!this.viewPreferencesManager) {
+ this.showNote('ViewPreferencesManager not initialized');
+ return;
+ }
+
+ if (!this.viewPreferencesManager.isServerConfigEnabled()) {
+ this.showNote('Server configuration is not enabled for this app. Please add a "config" section to your app configuration.');
+ return;
+ }
+
+ this.setState({ migrationLoading: true });
+
+ try {
+ const result = await this.viewPreferencesManager.migrateToServer(this.context.applicationId);
+ if (result.success) {
+ if (result.viewCount > 0) {
+ this.showNote(`Successfully migrated ${result.viewCount} view(s) to server storage.`);
+ } else {
+ this.showNote('No views found to migrate.');
+ }
+ }
+ } catch (error) {
+ this.showNote(`Failed to migrate views: ${error.message}`);
+ } finally {
+ this.setState({ migrationLoading: false });
+ }
+ }
+
+ async deleteFromBrowser() {
+ if (!window.confirm('Are you sure you want to delete all dashboard settings from browser storage? This action cannot be undone.')) {
+ return;
+ }
+
+ if (!this.viewPreferencesManager) {
+ this.showNote('ViewPreferencesManager not initialized');
+ return;
+ }
+
+ 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 all dashboard settings from browser storage.');
+ }
+ }
+
getColumns() {
const data = ColumnPreferences.getAllPreferences(this.context.applicationId);
this.setState({
@@ -382,6 +471,64 @@ export default class DashboardSettings extends DashboardView {
}
/>
+ {this.viewPreferencesManager && this.scriptManager && this.viewPreferencesManager.isServerConfigEnabled() && (
+
+ )}
{this.state.copyData.show && copyData}
{this.state.createUserInput && createUserInput}
{this.state.newUser.show && userData}
diff --git a/src/lib/ParseApp.js b/src/lib/ParseApp.js
index 18e4ab02bc..318c07fe87 100644
--- a/src/lib/ParseApp.js
+++ b/src/lib/ParseApp.js
@@ -50,6 +50,7 @@ export default class ParseApp {
classPreference,
enableSecurityChecks,
cloudConfigHistoryLimit,
+ config,
}) {
this.name = appName;
this.createdAt = created_at ? new Date(created_at) : new Date();
@@ -79,6 +80,7 @@ export default class ParseApp {
this.scripts = scripts;
this.enableSecurityChecks = !!enableSecurityChecks;
this.cloudConfigHistoryLimit = cloudConfigHistoryLimit;
+ this.config = config;
if (!supportedPushLocales) {
console.warn(
diff --git a/src/lib/ScriptManager.js b/src/lib/ScriptManager.js
new file mode 100644
index 0000000000..3c9649e7d6
--- /dev/null
+++ b/src/lib/ScriptManager.js
@@ -0,0 +1,446 @@
+/*
+ * 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) {
+ // Check if a script with the same code already exists to prevent duplicates
+ const legacyScriptData = legacyScript[0];
+ const existingScript = (localScripts || []).find(script =>
+ script.code === legacyScriptData.code && script.name === 'Legacy Script'
+ );
+
+ if (!existingScript) {
+ // Assign order property to automatically open the legacy script as a tab
+ // Use order 0 to make it the first tab
+ legacyScriptData.order = 0;
+
+ // Mark as saved to prevent unnecessary unsaved change warnings
+ legacyScriptData.saved = true;
+
+ // If we have existing scripts, add the legacy script to them
+ if (localScripts && localScripts.length > 0) {
+ // Increment order of existing scripts to make room for legacy script at position 0
+ localScripts.forEach(script => {
+ if (script.order !== undefined && script.order !== null) {
+ script.order += 1;
+ }
+ });
+ localScripts = [...localScripts, ...legacyScript];
+ } else {
+ // If no existing scripts, use the legacy script
+ localScripts = legacyScript;
+ }
+
+ // Auto-save the legacy script to storage
+ this._saveScriptsToLocal(appId, localScripts);
+ }
+ }
+
+ 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();
+ }
+
+ /**
+ * Generates a unique ID for a new script/tab
+ * @returns {string} A UUID string
+ */
+ generateScriptId() {
+ return this._generateScriptId();
+ }
+
+ /**
+ * 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: scriptId, // Keep as string (UUID) instead of parsing as integer
+ ...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 saved since we're auto-importing it
+ const script = {
+ id: this._generateScriptId(),
+ name: 'Legacy Script',
+ code: legacyCode,
+ saved: true, // Mark as saved since this is a one-time migration
+ 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 using UUID
+ * @private
+ */
+ _generateScriptId() {
+ return crypto.randomUUID();
+ }
+}
+
+// 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`;
+}
diff --git a/src/lib/ServerConfigStorage.js b/src/lib/ServerConfigStorage.js
new file mode 100644
index 0000000000..edc5f5f367
--- /dev/null
+++ b/src/lib/ServerConfigStorage.js
@@ -0,0 +1,199 @@
+/*
+ * 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';
+
+/**
+ * Utility class for storing dashboard configuration on Parse Server
+ */
+export default class ServerConfigStorage {
+ constructor(app) {
+ this.app = app;
+ this.className = app.config?.className || 'DashboardConfig';
+
+ // Validate className is a non-empty string
+ if (typeof this.className !== 'string' || !this.className.trim()) {
+ throw new Error('Invalid className for ServerConfigStorage');
+ }
+ }
+
+ /**
+ * Stores a configuration value on the server
+ * @param {string} key - The configuration key
+ * @param {*} value - The configuration value
+ * @param {string} appId - The app ID
+ * @param {string | null} userId - The user ID (optional)
+ * @returns {Promise}
+ */
+ async setConfig(key, value, appId, userId = null) {
+ // First, try to find existing config object to update instead of creating duplicates
+ const query = new Parse.Query(this.className);
+ query.equalTo('appId', appId);
+ query.equalTo('key', key);
+
+ if (userId) {
+ query.equalTo('user', new Parse.User({ objectId: userId }));
+ } else {
+ query.doesNotExist('user');
+ }
+
+ let configObject = await query.first({ useMasterKey: true });
+
+ // If no existing object found, create a new one
+ if (!configObject) {
+ configObject = new Parse.Object(this.className);
+ configObject.set('appId', appId);
+ configObject.set('key', key);
+ if (userId) {
+ configObject.set('user', new Parse.User({ objectId: userId }));
+ }
+ }
+
+ // Set the value in the appropriate typed field based on value type
+ const valueType = this._getValueType(value);
+ this._clearAllValueFields(configObject);
+ configObject.set(valueType, value);
+
+ // Use master key for operations
+ return configObject.save(null, { useMasterKey: true });
+ }
+
+ /**
+ * Gets a configuration value from the server
+ * @param {string} key - The configuration key
+ * @param {string} appId - The app ID
+ * @param {string | null} userId - The user ID (optional)
+ * @returns {Promise<*>} The configuration value
+ */
+ async getConfig(key, appId, userId = null) {
+ const query = new Parse.Query(this.className);
+ query.equalTo('appId', appId);
+ query.equalTo('key', key);
+
+ if (userId) {
+ query.equalTo('user', new Parse.User({ objectId: userId }));
+ } else {
+ query.doesNotExist('user');
+ }
+
+ const result = await query.first({ useMasterKey: true });
+ if (!result) {
+ return null;
+ }
+
+ return this._extractValue(result);
+ }
+
+ /**
+ * Gets all configuration values for an app with a key prefix
+ * @param {string} keyPrefix - The key prefix to filter by
+ * @param {string} appId - The app ID
+ * @param {string | null} userId - The user ID (optional)
+ * @returns {Promise