feat: Add Parse Server version compatibility detection (#3004)

Author: mtrezza

README.md

@@ -123,11 +123,14 @@ After starting the dashboard, you can visit http://localhost:4040 in your browse
 ## Compatibility
 
 ### Parse Server
-Parse Dashboard is compatible with the following Parse Server versions.
+Parse Dashboard is compatible with the following versions of Parse Server.
 
-| Parse Dashboard Version | Parse Server Version | Compatible |
-|-------------------------|----------------------|------------|
-| >=1.0                   | >= 2.1.4             | ✅ Yes      |
+| Parse Dashboard | Parse Server     |
+|-----------------|------------------|
+| >= 1.0.0        | >= 2.1.4 < 7.0.0 |
+| >= 8.0.0        | >= 7.0.0         |
+
+Parse Dashboard automatically checks the Parse Server version when connecting and displays a warning if the server version does not meet the minimum required version. The required Parse Server version is defined in the `supportedParseServerVersion` field in `package.json`.
 
 ### Node.js
 Parse Dashboard is continuously tested with the most recent releases of Node.js to ensure compatibility. We follow the [Node.js Long Term Support plan](https://github.com/nodejs/Release) and only test against versions that are officially supported and have not reached their end-of-life date.

package.json

@@ -21,6 +21,7 @@
     "Push Status Page",
     "Relation Editor"
   ],
+  "supportedParseServerVersion": ">=7.0.0",
   "keywords": [
     "parse",
     "dashboard"

src/dashboard/Apps/AppsIndex.react.js

@@ -82,25 +82,32 @@ const AppCard = ({ app, icon }) => {
 
   return (
     <li onClick={canBrowse} style={{ background: app.primaryBackgroundColor }}>
-      <a className={styles.icon}>
-        {icon ? (
-          <img src={'appicons/' + icon} width={56} height={56} />
-        ) : (
-          <Icon width={56} height={56} name="blank-app-outline" fill="#1E384D" />
-        )}
-      </a>
-      <div className={styles.details}>
-        <a className={styles.appname}>{app.name}</a>
-        {versionMessage}
+      <div className={styles.appCardContent}>
+        <a className={styles.icon}>
+          {icon ? (
+            <img src={'appicons/' + icon} width={56} height={56} />
+          ) : (
+            <Icon width={56} height={56} name="blank-app-outline" fill="#1E384D" />
+          )}
+        </a>
+        <div className={styles.details}>
+          <a className={styles.appname}>{app.name}</a>
+          {versionMessage}
+        </div>
+        <CountsSection className={styles.glance} title="At a glance">
+          <AppBadge production={app.production} />
+          <Metric number={dash(app.users, prettyNumber(app.users))} label="total users" />
+          <Metric
+            number={dash(app.installations, prettyNumber(app.installations))}
+            label="total installations"
+          />
+        </CountsSection>
       </div>
-      <CountsSection className={styles.glance} title="At a glance">
-        <AppBadge production={app.production} />
-        <Metric number={dash(app.users, prettyNumber(app.users))} label="total users" />
-        <Metric
-          number={dash(app.installations, prettyNumber(app.installations))}
-          label="total installations"
-        />
-      </CountsSection>
+      {!app.serverInfo.error && app.serverInfo.versionWarning && (
+        <div className={styles.versionWarning}>
+          ⚠️ {app.serverInfo.versionWarning}
+        </div>
+      )}
     </li>
   );
 };

src/dashboard/Apps/AppsIndex.scss

@@ -103,20 +103,24 @@
   margin: 0 auto;
 
   li {
-    display: flex;
     cursor: pointer;
     background: #193040;
     border-radius: 5px;
     margin: 14px 0;
-    padding: 0 9px;
-    height: 74px;
+    min-height: 74px;
 
     &:hover{
       background: #172C3B;
     }
   }
 }
 
+.appCardContent {
+  display: flex;
+  padding: 0 9px;
+  min-height: 74px;
+}
+
 .icon {
   display: block;
   float: left;
@@ -190,6 +194,17 @@
   @include ellipsis();
 }
 
+.versionWarning {
+  background: rgba(255, 152, 0, 0.15);
+  border-top: 1px solid rgba(255, 152, 0, 0.3);
+  color: #ff9800;
+  font-size: 11px;
+  padding: 8px 12px;
+  line-height: 1.4;
+  word-wrap: break-word;
+  border-radius: 0 0 5px 5px;
+}
+
 .edit {
   @include DosisFont;
   position: absolute;

src/dashboard/Dashboard.js

@@ -55,6 +55,8 @@ import { Helmet } from 'react-helmet';
 import Playground from './Data/Playground/Playground.react';
 import DashboardSettings from './Settings/DashboardSettings/DashboardSettings.react';
 import Security from './Settings/Security/Security.react';
+import semver from 'semver';
+import packageInfo from '../../package.json';
 
 const ShowSchemaOverview = false; //In progress features. Change false to true to work on this feature.
 
@@ -138,6 +140,19 @@ export default class Dashboard extends React.Component {
               .then(
                 serverInfo => {
                   app.serverInfo = serverInfo;
+
+                  // Check Parse Server version compatibility
+                  const supportedVersion = packageInfo.supportedParseServerVersion;
+                  const serverVersion = serverInfo.parseServerVersion;
+
+                  if (serverVersion && serverVersion !== 'unknown' && supportedVersion) {
+                    const cleanedVersion = semver.valid(semver.coerce(serverVersion));
+                    if (cleanedVersion && !semver.satisfies(cleanedVersion, supportedVersion)) {
+                      app.serverInfo.versionWarning =
+                        `Parse Server ${serverVersion} is not officially supported by this version of Parse Dashboard. You may encounter issues or reduced functionality. Supported Parse Server versions are ${supportedVersion}. Either upgrade Parse Server, or downgrade Parse Dashboard to a compatible version.`;
+                    }
+                  }
+
                   return app;
                 },
                 error => {