From f58c461ab61e00d75a2051ca62d47b8cad010697 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 10 Apr 2026 16:45:22 +0530
Subject: [PATCH 1/5] implement server url & live query

---
 src/dashboard/Dashboard.js                    |   3 +
 src/dashboard/DashboardView.react.js          |   5 +
 .../ServerURLLiveQuery.react.js               | 578 ++++++++++++++++++
 .../ServerURLLiveQuery.scss                   |  95 +++
 src/lib/ParseApp.js                           |  20 +
 src/lib/serverInfo.js                         |   2 +
 6 files changed, 703 insertions(+)
 create mode 100644 src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
 create mode 100644 src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss

diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index b44e5163b..54a3d1f19 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -71,6 +71,7 @@ import Deployments from './Deployments/Deployments.react';
 import DeploymentDetails from './Deployments/DeploymentDetails.react';
 import { useAppPageTracking } from './instrument';
 import DomainSettings from './DomainSettings/DomainSettings.react';
+import ServerURLLiveQuery from './ServerURLLiveQuery/ServerURLLiveQuery.react';
 import CustomParseOptions from './CustomParseOptions/CustomParseOptions.react';
 
 const LazyGraphQLConsole = lazy(() => import('./Data/ApiConsole/GraphQLConsole.react'));
@@ -82,6 +83,7 @@ const LazyDatabaseProfile = lazy(() => import('./DatabaseProfiler/DatabaseProfil
 const LazyEmailVerification = lazy(() => import('./Notification/EmailVerification.react'));
 const LazyEmailPasswordReset = lazy(() => import('./Notification/EmailPasswordReset.react'));
 
+
 async function fetchHubUser() {
   try {
     // eslint-disable-next-line no-undef
@@ -511,6 +513,7 @@ class Dashboard extends React.Component {
         <Route path="server-settings/" element={<ServerSettings />} />
         <Route path="server-settings/:targetPage" element={<ServerSettings />} />
         <Route path="domain-settings" element={<DomainSettings />} />
+        <Route path="server-url-live-query" element={<ServerURLLiveQuery />} />
         <Route path="advanced-options" element={<CustomParseOptions />} />
 
         <Route path="index/:className" element={<IndexManager />} />
diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index 18d9e541b..1f673fd9d 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -266,6 +266,11 @@ export default class DashboardView extends React.Component {
       link: '/domain-settings',
     });
 
+    settingsSections.push({
+      name: 'Server URL & Live Query',
+      link: '/server-url-live-query',
+    });
+
     settingsSections.push({
       name: 'Environment Variables',
       link: '/settings/environment-variables',
diff --git a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
new file mode 100644
index 000000000..fc3422e29
--- /dev/null
+++ b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
@@ -0,0 +1,578 @@
+/*
+ * 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 AccountManager from 'lib/AccountManager';
+import React from 'react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+import { withRouter } from 'lib/withRouter';
+import DashboardView from 'dashboard/DashboardView.react';
+import B4aLoaderContainer from 'components/B4aLoaderContainer/B4aLoaderContainer.react';
+import FlowView from 'components/FlowView/FlowView.react';
+import styles from './ServerURLLiveQuery.scss';
+import EmptyGhostState from 'components/EmptyGhostState/EmptyGhostState.react';
+import Button from 'components/Button/Button.react';
+import B4aToggle from 'components/Toggle/B4aToggle.react';
+import Label from 'components/Label/Label.react';
+import Field from 'components/Field/Field.react';
+import TextInput from 'components/TextInput/TextInput.react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
+import B4aModal from 'components/B4aModal/B4aModal.react';
+import { amplitudeLogEvent } from 'lib/amplitudeEvents';
+import renderFlowFooterChanges from 'lib/renderFlowFooterChanges';
+
+const SIX_MONTHS_MS = 6 * 30 * 24 * 60 * 60 * 1000;
+
+const FOOTER_FIELD_OPTIONS = {
+  activated: { friendlyName: 'Back4App subdomain', type: 'boolean' },
+  subdomainName: { friendlyName: 'subdomain name', showTo: true },
+  currentDomain: { friendlyName: 'domain', showTo: true },
+  statusLiveQuery: { friendlyName: 'Live Query', type: 'boolean' },
+  schemasChoose: { friendlyName: 'Live Query classes' },
+};
+
+@withRouter
+class ServerURLLiveQuery extends DashboardView {
+  constructor() {
+    super();
+    this.section = 'App Settings';
+    this.subsection = 'Server URL & Live Query';
+    this.state = {
+      isLoading: true,
+      loadingError: null,
+
+      isUserVerified: false,
+      hasPermission: true,
+
+      isActivated: false,
+      currentSubdomain: '',
+      availableDomains: ['b4a.io'],
+      schema: [],
+      activatedLiveQuery: {},
+
+      initialFields: {
+        activated: false,
+        subdomainName: '',
+        currentDomain: 'b4a.io',
+        statusLiveQuery: false,
+        schemasChoose: {},
+      },
+
+      modal: null,
+    };
+
+    this._flowViewRef = React.createRef();
+    this.unblock = null;
+    this._onBeforeUnload = null;
+  }
+
+  _hasUnsavedChanges() {
+    if (this._flowViewRef.current) {
+      const { changes, saveState } = this._flowViewRef.current.state;
+      return Object.keys(changes || {}).length > 0 && saveState !== 'SAVING';
+    }
+    return false;
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+    this.loadData();
+
+    this._onBeforeUnload = (e) => {
+      if (this._hasUnsavedChanges()) {
+        e.preventDefault();
+        e.returnValue = '';
+        return '';
+      }
+    };
+    window.addEventListener('beforeunload', this._onBeforeUnload);
+
+    if (this.props.navigator && typeof this.props.navigator.block === 'function') {
+      this.unblock = this.props.navigator.block(tx => {
+        if (this._hasUnsavedChanges()) {
+          const unblock = this.unblock && this.unblock.bind(this);
+          const autoUnblockingTx = {
+            ...tx,
+            retry() {
+              if (unblock) {
+                unblock();
+              }
+              tx.retry();
+            },
+          };
+
+          const modal = (
+            <B4aModal
+              type={B4aModal.Types.DEFAULT}
+              showCancel={false}
+              width={380}
+              icon="b4a-warn-fill-icon"
+              iconSize={44}
+              iconFill="#cccccc"
+              title="Leave this page?"
+              subtitle="Changes you made may not be saved."
+              customFooter={
+                <div style={{ textAlign: 'center' }}>
+                  <Button
+                    color="white"
+                    width="auto"
+                    additionalStyles={{ border: '1px solid #ccc', color: '#303338', marginRight: 12 }}
+                    value="Cancel"
+                    onClick={() => this.setState({ modal: null })}
+                  />
+                  <Button
+                    primary={true}
+                    color="blue"
+                    width="auto"
+                    value="Leave"
+                    onClick={() => {
+                      this.setState({ modal: null });
+                      autoUnblockingTx.retry();
+                    }}
+                  />
+                </div>
+              }
+            />
+          );
+          this.setState({ modal });
+        } else {
+          if (this.unblock) {
+            this.unblock();
+          }
+          tx.retry();
+        }
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.unblock) {
+      this.unblock();
+    }
+    window.removeEventListener('beforeunload', this._onBeforeUnload);
+  }
+
+  async loadData() {
+    try {
+      const response = await this.context.getWebHostForLiveQuery();
+      await this.processSettings(response);
+    } catch (error) {
+      const message = typeof error === 'string'
+        ? error
+        : (error && error.message) || 'Failed to load settings';
+      this.setState({ loadingError: message });
+    } finally {
+      this.setState({ isLoading: false });
+    }
+  }
+
+  async processSettings(response) {
+    const { settings, schema: rawSchema, createdAt } = response;
+
+    const schema = Array.isArray(rawSchema)
+      ? rawSchema.map(s => ({ _id: s._id }))
+      : [];
+
+    let subdomainName = '';
+    let currentSubdomain = '';
+    let currentDomain = 'b4a.io';
+    let activated = false;
+    let isActivated = false;
+    let isUserVerified = false;
+    const schemasChoose = {};
+    let activatedLiveQuery = {};
+    let statusLiveQuery = false;
+
+    if (settings.subdomain) {
+      const subDomainName = settings.subdomain;
+      currentSubdomain = subDomainName;
+      subdomainName = subDomainName.replace(/\.(b4a|back4app|b4app)\.(app|io)$/, '');
+      currentDomain = this.updateAvailableDomains(subDomainName);
+    } else {
+      const appName = settings.appName || '';
+      subdomainName = appName.replace(/[^A-Z0-9]+/ig, '').toLowerCase();
+    }
+
+    activated = !!settings.activated;
+    isActivated = activated && !!settings.subdomain;
+
+    if (settings.liveQuery) {
+      activatedLiveQuery = settings.liveQuery;
+      if (settings.liveQuery.statusLiveQuery) {
+        statusLiveQuery = settings.liveQuery.statusLiveQuery;
+      }
+      if (settings.liveQuery.schemasChoose) {
+        Object.assign(schemasChoose, settings.liveQuery.schemasChoose);
+      }
+    }
+
+    const hasPermission = !settings.featuresPermission ||
+      settings.featuresPermission.webHostLiveQuery === 'Write';
+
+    if ((settings.activated && settings.subdomain) ||
+        (createdAt && ((new Date() - new Date(createdAt)) > SIX_MONTHS_MS))) {
+      isUserVerified = true;
+    }
+
+    if (!isUserVerified) {
+      try {
+        const plan = await this.context.getAppPlanData();
+        if (plan && plan.planName &&
+            plan.planName.indexOf('Free') < 0 &&
+            plan.planName.indexOf('Public') < 0) {
+          isUserVerified = true;
+        } else {
+          const currentUser = AccountManager.currentUser();
+          if (currentUser && currentUser.verification && currentUser.verification.cardValidation) {
+            isUserVerified = true;
+          }
+        }
+      } catch (planError) {
+        const currentUser = AccountManager.currentUser();
+        if (currentUser && currentUser.verification && currentUser.verification.cardValidation) {
+          isUserVerified = true;
+        }
+      }
+    }
+
+    this.setState({
+      isUserVerified,
+      hasPermission,
+      isActivated,
+      currentSubdomain,
+      schema,
+      activatedLiveQuery,
+      initialFields: {
+        activated,
+        subdomainName,
+        currentDomain,
+        statusLiveQuery,
+        schemasChoose,
+      },
+    });
+  }
+
+  updateAvailableDomains(appDomain) {
+    const domain = appDomain.substring(
+      appDomain.lastIndexOf('.', appDomain.lastIndexOf('.') - 1) + 1
+    );
+    const availableDomains = this.state.availableDomains.indexOf(domain) === -1
+      ? [...this.state.availableDomains, domain]
+      : this.state.availableDomains;
+    this.setState({ availableDomains });
+    return domain;
+  }
+
+  renderToolbar() {
+    return (
+      <Toolbar section="App Settings" subsection="Server URL & Live Query" />
+    );
+  }
+
+  filterVisibleChanges(changes) {
+    const { initialFields } = this.state;
+    const filtered = { ...changes };
+    const activated = changes.activated !== undefined
+      ? changes.activated
+      : initialFields.activated;
+
+    if (!activated) {
+      delete filtered.subdomainName;
+      delete filtered.currentDomain;
+      delete filtered.statusLiveQuery;
+      delete filtered.schemasChoose;
+    } else {
+      const statusLiveQuery = changes.statusLiveQuery !== undefined
+        ? changes.statusLiveQuery
+        : initialFields.statusLiveQuery;
+      if (!statusLiveQuery) {
+        delete filtered.schemasChoose;
+      }
+    }
+    return filtered;
+  }
+
+  renderForm({ fields, setField }) {
+    const toggleClass = (classId) => {
+      const schemasChoose = { ...fields.schemasChoose };
+      schemasChoose[classId] = !schemasChoose[classId];
+      setField('schemasChoose', schemasChoose);
+    };
+
+    return (
+      <div className={styles.formWrapper}>
+        <div className={styles.settingsContainer}>
+          <div className={styles.heading}>Server URL and Live Query</div>
+          <div className={styles.subheading}>
+            In this section, you can enable a custom Server URL that can be used for real-time database.
+          </div>
+
+          <Fieldset legend="Server URL" description="Activate a Back4App subdomain for your server URL.">
+            <Field
+              label={
+                <Label
+                  text="Activate your Back4App subdomain"
+                  dark={true}
+                  description="Toggle to enable or disable your server URL subdomain."
+                />
+              }
+              input={
+                <div style={{ width: '100%', padding: '0 1rem', textAlign: 'right' }}>
+                  <B4aToggle
+                    value={fields.activated}
+                    onChange={(value) => setField('activated', value)}
+                    type={B4aToggle.Types.YES_NO}
+                  />
+                </div>
+              }
+              theme={Field.Theme.BLUE}
+            />
+            {fields.activated && (
+              <Field
+                label={
+                  <Label
+                    text="Subdomain Name"
+                    dark={true}
+                    description="Enter your subdomain name"
+                  />
+                }
+                input={
+                  <div style={{
+                    display: 'flex',
+                    width: '100%',
+                    alignItems: 'center',
+                    padding: '0 1rem',
+                    justifyContent: 'space-between',
+                  }}>
+                    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flex: 1 }}>
+                      <TextInput
+                        value={fields.subdomainName}
+                        onChange={(name) => setField('subdomainName', name)}
+                        placeholder="yourapp"
+                      />
+                      <span style={{ color: '#fff', fontSize: '14px', fontWeight: 'normal' }}>.</span>
+                    </div>
+                    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                      {this.state.availableDomains.length > 1 ? (
+                        <select
+                          value={fields.currentDomain}
+                          onChange={(e) => setField('currentDomain', e.target.value)}
+                          style={{
+                            background: 'transparent',
+                            border: 'none',
+                            color: '#fff',
+                            fontSize: '14px',
+                            padding: '0.25rem',
+                            outline: 'none',
+                          }}
+                        >
+                          {this.state.availableDomains.map((domain) => (
+                            <option key={domain} value={domain}>
+                              {domain}
+                            </option>
+                          ))}
+                        </select>
+                      ) : (
+                        <span style={{ display: 'inline-block', marginLeft: '0.5rem' }}>
+                          {fields.currentDomain}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                }
+                theme={Field.Theme.BLUE}
+              />
+            )}
+          </Fieldset>
+
+          {fields.activated && (
+            <>
+              <hr className={styles.fieldHr} />
+              <Fieldset legend="Live Query" description="Enable Live Query to support real-time subscriptions on selected classes.">
+                <Field
+                  label={
+                    <Label
+                      text="Activate Live Query"
+                      dark={true}
+                      description="Toggle to enable or disable Live Query for your app."
+                    />
+                  }
+                  input={
+                    <div style={{ width: '100%', padding: '0 1rem', textAlign: 'right' }}>
+                      <B4aToggle
+                        value={fields.statusLiveQuery}
+                        onChange={(value) => setField('statusLiveQuery', value)}
+                        type={B4aToggle.Types.YES_NO}
+                      />
+                    </div>
+                  }
+                  theme={Field.Theme.BLUE}
+                />
+                {fields.statusLiveQuery && this.state.schema.length > 0 && (
+                  <Field
+                    label={
+                      <Label
+                        text="Live Query Classes"
+                        dark={true}
+                        description="Select which classes should support Live Query subscriptions."
+                      />
+                    }
+                    input={
+                      <div className={styles.classesList}>
+                        {this.state.schema.map((cls) => (
+                          <label key={cls._id} className={styles.classItem}>
+                            <input
+                              type="checkbox"
+                              checked={!!fields.schemasChoose[cls._id]}
+                              onChange={() => toggleClass(cls._id)}
+                            />
+                            <span>{cls._id}</span>
+                          </label>
+                        ))}
+                      </div>
+                    }
+                    theme={Field.Theme.BLUE}
+                  />
+                )}
+              </Fieldset>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  renderContent() {
+    const toolbar = this.renderToolbar();
+    const loading = this.state.isLoading;
+
+    let content = null;
+    if (loading) {
+      content = null;
+    } else if (this.state.loadingError) {
+      content = (
+        <div className={styles.ghostMessage}>
+          <EmptyGhostState
+            title="Error loading settings"
+            description={this.state.loadingError}
+          />
+        </div>
+      );
+    } else if (!this.state.isUserVerified) {
+      content = (
+        <div className={styles.formWrapper}>
+          <div className={styles.settingsContainer}>
+            <div className={styles.heading}>Server URL and Live Query</div>
+            <div className={styles.subheading}>
+              In this section, you can enable a custom Server URL that can be used for real-time database.
+            </div>
+            <Fieldset>
+              <Field
+                label={
+                  <Label
+                    text="Validate your card"
+                    dark={true}
+                    description="In order to enable this feature, you must validate your card."
+                  />
+                }
+                input={
+                  <div style={{ width: '100%', padding: '0 1rem', textAlign: 'right' }}>
+                    <a
+                      href="https://checkout.back4app.io/subscription/r4bsfi5CNH"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Button
+                        value="Validate Card"
+                        primary={true}
+                      />
+                    </a>
+                  </div>
+                }
+                theme={Field.Theme.BLUE}
+              />
+            </Fieldset>
+          </div>
+        </div>
+      );
+    } else {
+      const { initialFields, hasPermission } = this.state;
+
+      content = (
+        <div className={styles.mainContent}>
+          <FlowView
+            ref={this._flowViewRef}
+            initialFields={initialFields}
+            showFooter={changes => Object.keys(this.filterVisibleChanges(changes)).length > 0}
+            validate={() => {
+              if (!hasPermission) {
+                return 'use default';
+              }
+              return '';
+            }}
+            defaultFooterMessage={<span>You don&apos;t have permission to edit this feature.</span>}
+            hideButtonsOnDefaultMessage={true}
+            onSubmit={({ fields }) => {
+              const subdomainName = fields.subdomainName
+                ? fields.subdomainName.toLowerCase()
+                : fields.subdomainName;
+
+              return this.context.enableHostForLiveQuery({
+                currentSubdomain: this.state.currentSubdomain,
+                subdomainName: subdomainName + '.' + fields.currentDomain,
+                activated: fields.activated,
+              }).then(() => {
+                amplitudeLogEvent('Server URL configured');
+
+                let schemasChoose = fields.schemasChoose;
+                if (!fields.statusLiveQuery) {
+                  schemasChoose = {};
+                }
+
+                const hasExistingLiveQuery = Object.keys(this.state.activatedLiveQuery).length > 0;
+                if (fields.statusLiveQuery || hasExistingLiveQuery) {
+                  return this.context.setLiveQuery({
+                    statusLiveQuery: fields.statusLiveQuery,
+                    schemasChoose,
+                  }).then(() => amplitudeLogEvent('Live Query configured'));
+                }
+              }).catch(err => {
+                const message = typeof err === 'string' ? err : (err && err.message) || 'An error occurred';
+                throw { message };
+              });
+            }}
+            afterSave={({ resetFields }) => {
+              setTimeout(() => {
+                resetFields();
+                this.setState({ isLoading: true });
+                this.loadData();
+              }, 1200);
+            }}
+            footerContents={({ changes }) => {
+              const visibleChanges = this.filterVisibleChanges(changes);
+              return renderFlowFooterChanges(visibleChanges, initialFields, FOOTER_FIELD_OPTIONS);
+            }}
+            renderForm={this.renderForm.bind(this)}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <B4aLoaderContainer loading={loading}>
+          <div className={styles.content}>
+            {content}
+          </div>
+        </B4aLoaderContainer>
+        {toolbar}
+        {this.state.modal}
+      </div>
+    );
+  }
+}
+
+export default ServerURLLiveQuery;
diff --git a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss
new file mode 100644
index 000000000..3fa655e54
--- /dev/null
+++ b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss
@@ -0,0 +1,95 @@
+@import 'stylesheets/globals.scss';
+@import 'stylesheets/back4app.scss';
+
+.content {
+  @include SoraFont;
+  position: relative;
+  min-height: calc(#{$content-max-height} - #{$toolbar-height});
+  margin-top: $toolbar-height;
+  background: $dark;
+  color: $white;
+  & .ghostMessage {
+    padding-top: 3rem;
+  }
+  & .mainContent {
+    height: calc(#{$content-max-height} - #{$toolbar-height});
+    position: relative;
+    overflow: auto;
+  }
+}
+
+.formWrapper {
+  width: 100%;
+  padding: 0;
+  max-width: 800px;
+  margin: 0 auto;
+  margin-top: 5rem;
+}
+
+@media only screen and (max-width: 1200px) {
+  .formWrapper {
+    padding: 0 2rem;
+  }
+}
+
+.settingsContainer {
+  .heading {
+    @include InterFont;
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 140%;
+    margin-bottom: 0.5rem;
+  }
+  .subheading {
+    @include InterFont;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 140%;
+  }
+
+  .fieldHr {
+    margin: 4px 0;
+    border: 0;
+  }
+}
+
+.note {
+  color: $light-grey;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 140%;
+  margin-top: 0.5rem;
+}
+
+.classesList {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0.25rem 1rem;
+
+  & > .classItem {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.45rem 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.15s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    input[type='checkbox'] {
+      accent-color: $cta-green;
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+    }
+
+    span {
+      user-select: none;
+    }
+  }
+}
diff --git a/src/lib/ParseApp.js b/src/lib/ParseApp.js
index 03804ca91..b307b05e9 100644
--- a/src/lib/ParseApp.js
+++ b/src/lib/ParseApp.js
@@ -1406,6 +1406,26 @@ export default class ParseApp {
     })
   }
 
+  async getWebHostForLiveQuery() {
+    try {
+      // eslint-disable-next-line no-undef
+      const path = `${b4aSettings.BACK4APP_API_PATH}/parse-app/${this.slug}/webhostapp`;
+      return (await axios.get(path, { withCredentials: true })).data;
+    } catch (err) {
+      throw err.response && err.response.data && err.response.data.error ? err.response.data.error : err;
+    }
+  }
+
+  async enableHostForLiveQuery(hostSettings) {
+    try {
+      // eslint-disable-next-line no-undef
+      const path = `${b4aSettings.BACK4APP_API_PATH}/parse-app/${this.slug}/webhostapp`;
+      return (await axios.post(path, { hostSettings }, { withCredentials: true })).data;
+    } catch (err) {
+      throw err.response && err.response.data && err.response.data.error ? err.response.data.error : err;
+    }
+  }
+
   createTextIndexes() {
     return axios.post(`/parse-app/${this.slug}/index`, { index: { '$**': 'text' } }).catch(err => {
       throw err.response && err.response.data && err.response.data.error ? err.response.data.error : err
diff --git a/src/lib/serverInfo.js b/src/lib/serverInfo.js
index 4958d6295..a27bbf4e3 100644
--- a/src/lib/serverInfo.js
+++ b/src/lib/serverInfo.js
@@ -28,6 +28,8 @@ export const ALWAYS_ALLOWED_ROUTES = [
   'Social Auth',
   'Notification',
   'notification',
+  'server-url-live-query',
+  'Server URL & Live Query',
 ];
 
 export const canAccess = (serverInfo, route) => {

From fec0794149f10d756412fa67631f77e22893be82 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 10 Apr 2026 17:40:14 +0530
Subject: [PATCH 2/5] push to right

---
 src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss
index 3fa655e54..cbca88c18 100644
--- a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss
+++ b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss
@@ -76,6 +76,7 @@
     cursor: pointer;
     font-size: 14px;
     transition: background 0.15s;
+    justify-content: flex-end;
 
     &:hover {
       background: rgba(255, 255, 255, 0.05);

From fc90ee4a0558747588401abdb909108134bceedd Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 10 Apr 2026 18:39:46 +0530
Subject: [PATCH 3/5] fix classes

---
 .../ServerURLLiveQuery.react.js                | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
index fc3422e29..6e5c192fc 100644
--- a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
+++ b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
@@ -532,7 +532,7 @@ class ServerURLLiveQuery extends DashboardView {
                   schemasChoose = {};
                 }
 
-                const hasExistingLiveQuery = Object.keys(this.state.activatedLiveQuery).length > 0;
+                const hasExistingLiveQuery = this.state.activatedLiveQuery.statusLiveQuery !== undefined;
                 if (fields.statusLiveQuery || hasExistingLiveQuery) {
                   return this.context.setLiveQuery({
                     statusLiveQuery: fields.statusLiveQuery,
@@ -544,10 +544,22 @@ class ServerURLLiveQuery extends DashboardView {
                 throw { message };
               });
             }}
-            afterSave={({ resetFields }) => {
+            afterSave={({ fields, resetFields }) => {
               setTimeout(() => {
+                const savedSubdomain = fields.subdomainName
+                  ? fields.subdomainName.toLowerCase() + '.' + fields.currentDomain
+                  : this.state.currentSubdomain;
+
+                this.setState({
+                  isLoading: true,
+                  currentSubdomain: fields.activated ? savedSubdomain : this.state.currentSubdomain,
+                  isActivated: fields.activated && !!savedSubdomain,
+                  activatedLiveQuery: fields.statusLiveQuery
+                    ? { ...this.state.activatedLiveQuery, statusLiveQuery: fields.statusLiveQuery, schemasChoose: fields.schemasChoose }
+                    : this.state.activatedLiveQuery,
+                  initialFields: { ...fields },
+                });
                 resetFields();
-                this.setState({ isLoading: true });
                 this.loadData();
               }, 1200);
             }}

From 400be0d81e84461883e3821205efa6c6b9173031 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 10 Apr 2026 19:06:12 +0530
Subject: [PATCH 4/5] final fixes

---
 .../ServerURLLiveQuery.react.js                  |  4 ++--
 .../ServerURLLiveQuery/ServerURLLiveQuery.scss   | 16 +++++++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
index 6e5c192fc..ccee93863 100644
--- a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
+++ b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
@@ -423,14 +423,14 @@ class ServerURLLiveQuery extends DashboardView {
                     input={
                       <div className={styles.classesList}>
                         {this.state.schema.map((cls) => (
-                          <label key={cls._id} className={styles.classItem}>
+                          <div key={cls._id} className={styles.classItem}>
                             <input
                               type="checkbox"
                               checked={!!fields.schemasChoose[cls._id]}
                               onChange={() => toggleClass(cls._id)}
                             />
                             <span>{cls._id}</span>
-                          </label>
+                          </div>
                         ))}
                       </div>
                     }
diff --git a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss
index cbca88c18..b6b3d1bf2 100644
--- a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss
+++ b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.scss
@@ -71,26 +71,24 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.45rem 0.5rem;
-    border-radius: 4px;
-    cursor: pointer;
+    padding: 0.35rem 0;
     font-size: 14px;
-    transition: background 0.15s;
-    justify-content: flex-end;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.05);
-    }
+    max-width: 100%;
 
     input[type='checkbox'] {
       accent-color: $cta-green;
       cursor: pointer;
       width: 16px;
       height: 16px;
+      flex-shrink: 0;
     }
 
     span {
       user-select: none;
+      color: $white;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }

From fb0b7494b887664bcf35297849019269a713e93f Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 13 Apr 2026 22:00:33 +0530
Subject: [PATCH 5/5] persist list

---
 .../ServerURLLiveQuery.react.js               | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
index ccee93863..49eb02c9d 100644
--- a/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
+++ b/src/dashboard/ServerURLLiveQuery/ServerURLLiveQuery.react.js
@@ -545,23 +545,19 @@ class ServerURLLiveQuery extends DashboardView {
               });
             }}
             afterSave={({ fields, resetFields }) => {
-              setTimeout(() => {
-                const savedSubdomain = fields.subdomainName
-                  ? fields.subdomainName.toLowerCase() + '.' + fields.currentDomain
-                  : this.state.currentSubdomain;
-
-                this.setState({
-                  isLoading: true,
-                  currentSubdomain: fields.activated ? savedSubdomain : this.state.currentSubdomain,
-                  isActivated: fields.activated && !!savedSubdomain,
-                  activatedLiveQuery: fields.statusLiveQuery
-                    ? { ...this.state.activatedLiveQuery, statusLiveQuery: fields.statusLiveQuery, schemasChoose: fields.schemasChoose }
-                    : this.state.activatedLiveQuery,
-                  initialFields: { ...fields },
-                });
-                resetFields();
-                this.loadData();
-              }, 1200);
+              const savedSubdomain = fields.subdomainName
+                ? fields.subdomainName.toLowerCase() + '.' + fields.currentDomain
+                : this.state.currentSubdomain;
+
+              this.setState({
+                currentSubdomain: fields.activated ? savedSubdomain : this.state.currentSubdomain,
+                isActivated: fields.activated && !!savedSubdomain,
+                activatedLiveQuery: fields.statusLiveQuery
+                  ? { ...this.state.activatedLiveQuery, statusLiveQuery: fields.statusLiveQuery, schemasChoose: fields.schemasChoose }
+                  : this.state.activatedLiveQuery,
+                initialFields: { ...fields },
+              });
+              resetFields();
             }}
             footerContents={({ changes }) => {
               const visibleChanges = this.filterVisibleChanges(changes);