feat: Add workspace with Refine vite project for demo

.gitignore

@@ -3,6 +3,8 @@ node_modules/
 bundles/
 PIG/bundles/
 Parse-Dashboard/public/bundles/
+Parse-Dashboard/public/v2/
+Parse-Dashboard/v2/
 Parse-Dashboard/parse-dashboard-config.json
 npm-debug.log
 .eslintcache
@@ -17,3 +19,6 @@ test_logs
 
 # visual studio code
 .vscode
+
+.history
+.turbo

Dockerfile

@@ -21,8 +21,25 @@ COPY . /src
 # Install remaining dev dependencies
 RUN npm ci
 
-# Run all webpack build steps
-RUN npm run prepare && npm run build
+############################################################
+# Build stage v2
+############################################################
+FROM node:lts-alpine AS v2-build
+
+RUN apk --no-cache add git
+WORKDIR /src
+
+# Copy package.json first to benefit from layer caching
+COPY v2/package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy src to have webpack config files ready for install
+COPY ./v2 ./
+
+# Run build step
+RUN npm run build
 
 ############################################################
 # Release stage
@@ -36,6 +53,7 @@ COPY --from=build /src/package*.json /src/
 
 # Copy compiled src dirs
 COPY --from=build /src/Parse-Dashboard/ /src/Parse-Dashboard/
+COPY --from=v2-build /Parse-Dashboard/public/v2 /src/Parse-Dashboard/public/v2
 
 USER node
 

Parse-Dashboard/app.js

@@ -36,13 +36,13 @@ function checkIfIconsExistForApps(apps, iconsFolder) {
     const iconName = currentApp.iconName;
     const path = iconsFolder + '/' + iconName;
 
-    fs.stat(path, function(err) {
+    fs.stat(path, function (err) {
       if (err) {
-        if ('ENOENT' == err.code) {// file does not exist
-          console.warn('Icon with file name: ' + iconName + ' couldn\'t be found in icons folder!');
+        if ('ENOENT' == err.code) {
+          // file does not exist
+          console.warn('Icon with file name: ' + iconName + " couldn't be found in icons folder!");
         } else {
-          console.log(
-            'An error occurd while checking for icons, please check permission!');
+          console.log('An error occurd while checking for icons, please check permission!');
         }
       } else {
         //every thing was ok so for example you can read it and send it to client
@@ -51,37 +51,43 @@ function checkIfIconsExistForApps(apps, iconsFolder) {
   }
 }
 
-module.exports = function(config, options) {
+module.exports = function (config, options) {
   options = options || {};
   const app = express();
   // Serve public files.
-  app.use(express.static(path.join(__dirname,'public')));
+  app.use(express.static(path.join(__dirname, 'public')));
 
   // Allow setting via middleware
   if (config.trustProxy && app.disabled('trust proxy')) {
     app.enable('trust proxy');
   }
 
   // wait for app to mount in order to get mountpath
-  app.on('mount', function() {
+  app.on('mount', function (parent) {
+    parent.use('/v2/', express.static(path.join(__dirname, 'v2')));
     const mountPath = getMount(app.mountpath);
     const users = config.users;
     const useEncryptedPasswords = config.useEncryptedPasswords ? true : false;
     const authInstance = new Authentication(users, useEncryptedPasswords, mountPath);
-    authInstance.initialize(app, { cookieSessionSecret: options.cookieSessionSecret, cookieSessionMaxAge: options.cookieSessionMaxAge });
+    authInstance.initialize(app, {
+      cookieSessionSecret: options.cookieSessionSecret,
+      cookieSessionMaxAge: options.cookieSessionMaxAge,
+    });
 
     // CSRF error handler
     app.use(function (err, req, res, next) {
-      if (err.code !== 'EBADCSRFTOKEN') {return next(err)}
+      if (err.code !== 'EBADCSRFTOKEN') {
+        return next(err);
+      }
 
       // handle CSRF token errors here
-      res.status(403)
-      res.send('form tampered with')
+      res.status(403);
+      res.send('form tampered with');
     });
 
     // Serve the configuration.
-    app.get('/parse-dashboard-config.json', function(req, res) {
-      const apps = config.apps.map((app) => Object.assign({}, app)); // make a copy
+    app.get('/parse-dashboard-config.json', function (req, res) {
+      const apps = config.apps.map(app => Object.assign({}, app)); // make a copy
       const response = {
         apps: apps,
         newFeaturesInLatestVersion: newFeaturesInLatestVersion,
@@ -96,12 +102,18 @@ module.exports = function(config, options) {
       if (!options.dev && !requestIsLocal) {
         if (!req.secure && !options.allowInsecureHTTP) {
           //Disallow HTTP requests except on localhost, to prevent the master key from being transmitted in cleartext
-          return res.send({ success: false, error: 'Parse Dashboard can only be remotely accessed via HTTPS' });
+          return res.send({
+            success: false,
+            error: 'Parse Dashboard can only be remotely accessed via HTTPS',
+          });
         }
 
         if (!users) {
           //Accessing the dashboard over the internet can only be done with username and password
-          return res.send({ success: false, error: 'Configure a user to access Parse Dashboard remotely' });
+          return res.send({
+            success: false,
+            error: 'Configure a user to access Parse Dashboard remotely',
+          });
         }
       }
       const authentication = req.user;
@@ -111,7 +123,7 @@ module.exports = function(config, options) {
       const isReadOnly = authentication && authentication.isReadOnly;
       // User is full read-only, replace the masterKey by the read-only one
       if (isReadOnly) {
-        response.apps = response.apps.map((app) => {
+        response.apps = response.apps.map(app => {
           app.masterKey = app.readOnlyMasterKey;
           if (!app.masterKey) {
             throw new Error('You need to provide a readOnlyMasterKey to use read-only features.');
@@ -131,7 +143,7 @@ module.exports = function(config, options) {
                 app.masterKey = app.readOnlyMasterKey;
               }
               return isSame;
-            })
+            });
           });
         }
         // They provided correct auth
@@ -167,13 +179,15 @@ module.exports = function(config, options) {
         }
       } catch (e) {
         // Directory doesn't exist or something.
-        console.warn('Iconsfolder at path: ' + config.iconsFolder +
-          ' not found!');
+        console.warn('Iconsfolder at path: ' + config.iconsFolder + ' not found!');
       }
     }
 
-    app.get('/login', csrf(), function(req, res) {
-      const redirectURL = req.url.includes('?redirect=') && req.url.split('?redirect=')[1].length > 1 && req.url.split('?redirect=')[1];
+    app.get('/login', csrf(), function (req, res) {
+      const redirectURL =
+        req.url.includes('?redirect=') &&
+        req.url.split('?redirect=')[1].length > 1 &&
+        req.url.split('?redirect=')[1];
       if (!users || (req.user && req.user.isAuthenticated)) {
         return res.redirect(`${mountPath}${redirectURL || 'apps'}`);
       }
@@ -182,7 +196,7 @@ module.exports = function(config, options) {
       if (errors && errors.length) {
         errors = `<div id="login_errors" style="display: none;">
           ${errors.join(' ')}
-        </div>`
+        </div>`;
       }
       res.send(`<!DOCTYPE html>
       <html>
@@ -205,7 +219,7 @@ module.exports = function(config, options) {
     });
 
     // For every other request, go to index.html. Let client-side handle the rest.
-    app.get('/*', function(req, res) {
+    app.get('/*', function (req, res, next) {
       if (users && (!req.user || !req.user.isAuthenticated)) {
         const redirect = req.url.replace('/login', '');
         if (redirect.length > 1) {
@@ -216,7 +230,8 @@ module.exports = function(config, options) {
       if (users && req.user && req.user.matchingUsername) {
         res.append('username', req.user.matchingUsername);
       }
-      res.send(`<!DOCTYPE html>
+      if (!req.path.startsWith('/v2')) {
+        res.send(`<!DOCTYPE html>
       <html>
         <head>
           <link rel="shortcut icon" type="image/x-icon" href="${mountPath}favicon.ico" />
@@ -232,8 +247,33 @@ module.exports = function(config, options) {
         </body>
       </html>
       `);
+      } else {
+        if (options.dev) {
+          next();
+        } else {
+          res.send(`<!doctype html>
+        <html lang="en">
+          <head>
+          <base href="${mountPath}v2/"/>
+          <meta charset="UTF-8" />
+            <link rel="icon" type="image/svg+xml" href="${mountPath}v2/vite.svg" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <title>Express serve</title>
+            <script type="module" crossorigin src="${mountPath}v2/index.bundle.js"></script>
+            <link rel="stylesheet" crossorigin href="${mountPath}v2/index.bundle.css">
+            <script>
+              PARSE_DASHBOARD_PATH = "${mountPath}";
+          </script>
+          </head>
+          <body>
+            <div id="root"></div>
+          </body>
+        </html>
+      `);
+        }
+      }
     });
   });
 
   return app;
-}
+};