Skip to content

Add modern dashboard skeleton #2874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: alpha
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,5 @@ test_logs

# visual studio code
.vscode
new-dashboard/node_modules/
new-dashboard/dist/
16 changes: 16 additions & 0 deletions Parse-Dashboard/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,22 @@ module.exports = function(config, options) {
`);
});

// Serve new dashboard static files
app.use('/new', express.static(path.join(__dirname, '../new-dashboard/dist')));
app.get('/new/*', function(req, res) {
if (users && (!req.user || !req.user.isAuthenticated)) {
const redirect = req.url.replace('/login', '').replace('/new', '');
if (redirect.length > 1) {
return res.redirect(`${mountPath}login?redirect=${redirect}`);
}
return res.redirect(`${mountPath}login`);
}
if (users && req.user && req.user.matchingUsername) {
res.append('username', req.user.matchingUsername);
}
res.sendFile(path.join(__dirname, '../new-dashboard/dist/index.html'));
});

// For every other request, go to index.html. Let client-side handle the rest.
app.get('/*', function(req, res) {
if (users && (!req.user || !req.user.isAuthenticated)) {
Expand Down
24 changes: 24 additions & 0 deletions new-dashboard/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
12 changes: 12 additions & 0 deletions new-dashboard/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
29 changes: 29 additions & 0 deletions new-dashboard/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
Comment on lines +11 to +15
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Missing eslint-plugin-react – many core React rules not enforced

react-hooks only validates hook usage; it does not cover standard React best-practice rules (prop-types, jsx-no-undef, etc.).
Add the main plugin:

-import reactHooks from 'eslint-plugin-react-hooks'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
 ...
       js.configs.recommended,
+      react.configs['recommended'],
       reactHooks.configs['recommended-latest'],

This tightens linting without additional maintenance.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
extends: [
js.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
// at the top of new-dashboard/eslint.config.js
-import reactHooks from 'eslint-plugin-react-hooks'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
...
// later in your config object
extends: [
js.configs.recommended,
+ react.configs['recommended'],
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
🤖 Prompt for AI Agents
In new-dashboard/eslint.config.js around lines 11 to 15, the ESLint
configuration extends react-hooks rules but is missing the main
eslint-plugin-react plugin, which enforces core React best-practice rules. To
fix this, add eslint-plugin-react to the plugins array and include
react.configs.recommended in the extends array to enable standard React linting
rules alongside react-hooks.

languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
13 changes: 13 additions & 0 deletions new-dashboard/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading
Loading