enso/app/ide-desktop/lib/dashboard
somebody1234 a7251eb8d4
Improve mouse and keyboard UX (#9100)
- Close https://github.com/enso-org/cloud-v2/issues/914
- Add selection brush for selecting multiple assets using mouse
- Port selection brush over from GUI2
- Support <kbd>Ctrl</kbd>-select to select multiple ranges
- Add various actions when *exactly one* asset is selected:
- <kbd>Enter</kbd> for various assets to trigger their double-click actions
- Projects are opened
- Directories are toggled open/closed
- Secrets show the "upsert secret modal"
- <kbd>ArrowLeft</kbd> now collapses the selected folder
- <kbd>ArrowRight</kbd> now expands the selected folder
- <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> change the selected asset to the previous/next asset
- The newly selected asset (technically: any asset that is the only selected asset, whether this is a result of a drag, mouse click, or keypress) is automatically smoothly scrolled to.
- Improvements to the search bar
- <kbd>Escape</kbd> cancels tabbing through suggestions (and discards the selected suggestion)
- <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> behave like <kbd>Shift</kbd>+<kbd>Tab</kbd> and <kbd>Tab</kbd> to move to the previous/next suggestion respectively
- <kbd>Shift</kbd>+<kbd>ArrowUp</kbd> and <kbd>Shift</kbd>+<kbd>ArrowDown</kbd> to select multiple assets using the keyboard
- <kbd>Ctrl</kbd>+<kbd>Space</kbd> to toggle assets using the keyboard
- <kbd>Escape</kbd> to deselect all assets
- Add CSS-only focus ring to highlight most recently selected item, but only when navigating via keyboard
- Enter and double-click to temporarily open the sidebar to edit a Data Link

Optional features that have not yet been implemented:
- Move the "update secret" modal to the sidebar as well

# Important Notes
None
2024-02-26 16:49:49 +00:00
..
e2e Move "change password" to settings (#9079) 2024-02-26 15:50:00 +00:00
src Improve mouse and keyboard UX (#9100) 2024-02-26 16:49:49 +00:00
.gitignore Dashboard tests (#7656) 2023-10-11 10:24:33 +00:00
.prettierignore More E2E tests; export default classes from modules (#8730) 2024-01-31 11:35:41 +00:00
.prettierrc.cjs Support for creating and editing Data Links (#8882) 2024-02-12 10:05:30 +00:00
404.html More E2E tests; export default classes from modules (#8730) 2024-01-31 11:35:41 +00:00
esbuild-config.ts Make (almost) all interfaces readonly (#8800) 2024-02-07 11:26:59 +00:00
index.html Add Stripe for Billing Support (#8841) 2024-02-22 19:56:36 +03:00
package.json Support for creating and editing Data Links (#8882) 2024-02-12 10:05:30 +00:00
playwright.config.ts Fix dashboard tests (#9050) 2024-02-19 11:47:48 +00:00
postcss.config.js Change dashboard to use 2 spaces for indentation (#8798) 2024-01-22 21:26:15 +00:00
README.md Use backend errors in toast notifications (#9078) 2024-02-26 14:51:44 +00:00
tailwind.config.js Improve mouse and keyboard UX (#9100) 2024-02-26 16:49:49 +00:00
tsconfig.json Support for creating and editing Data Links (#8882) 2024-02-12 10:05:30 +00:00
vite.config.ts Add Stripe for Billing Support (#8841) 2024-02-22 19:56:36 +03:00
vite.test.config.ts More E2E tests; export default classes from modules (#8730) 2024-01-31 11:35:41 +00:00
vitest.config.ts Change dashboard to use 2 spaces for indentation (#8798) 2024-01-22 21:26:15 +00:00

Dashboard

The dashboard is the entrypoint into the application. It includes project management, project sharing, and user accounts and authentication.

Folder structure

  • mock/: Overrides for specific files in src/ when running Playwright tests.
  • e2e/: Contains end-to-end tests.
  • **/__tests__/: Contains all unit tests. Unit tests MUST be in a __tests__/ subfolder, not beside (and not inside) the module they are testing.
  • src/: The dashboard application.
    • index.html: The sole HTML file used by this SPA. It imports the TS entry point.
    • authentication/src/: The main body of the app.
      • index.tsx: The TS entry point.
      • providers/: Contains React Contexts used by the main app.
      • components/: Contains the root component for the app.
      • dashboard/: The main body of the app. Directly in the folder, there are some utility modules that do not belong elsewhere.
        • components/: Contains all components used by the main app.
        • events/: Custom discriminated unions used to communicate messages between unrelated components.
      • authentication/: The authentication flow. This includes login, registration, and changing passwords.
        • components/: Contains all components used by the authentication flow.
        • providers/: Contains React Contexts required for authentication, and used by the main app.
  • index.html: The entrypoint, in the format required by Vite.
  • 404.html: A copy of the entrypoint. This is served on unknown routes by certain static hosting providers.
  • esbuild-config.ts: Configuration for ESBuild based on the environment variables. This is a dependency of esbuild-config.ts in sibling modules.