enso/app/ide-desktop/lib/dashboard
somebody1234 2ec7817068
Refactor CSS; address some design issues (#9260)
- Implement https://github.com/enso-org/cloud-v2/issues/924
- Refactor all numbers out to CSS variables
- Implement some issues raised in the design meeting
- The columns selector now only contains *hidden* columns, rather than all of them.
- Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%)
- Easily configurable if we want to change it in the future, so the specific values don't matter too much for now.
- Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected
- Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented)
- Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>`
- Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected
- Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu.
- Fix regressions caused by CSS refactor
- Make keyboard selection indicator for asset rows rounded again
- Other misc. fixes and improvements
- Slightly modified styling of chat reaction bar
- Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab
- Animate rotation of column sort arrow when clicking on a column to change the sort order
- Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows
- Consistent icon for sort arrow for folders and the chat thread list
- Minor adjustment of styles for optional properties in the Data Link input

Not included in this PR:
- Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens)
- Potentially time-consuming to look for a library (and not quite trivial to implement ourselves)
- Columns sliding left as they expand and right as they collapse
- Also non-trivial, especially when taking into account horizontal scrolling.
- Fixing styles to closer resemble Figma design
- As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect
- However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though.

# Important Notes
None
2024-03-13 10:32:05 +00:00
..
e2e Refactor CSS; address some design issues (#9260) 2024-03-13 10:32:05 +00:00
src Refactor CSS; address some design issues (#9260) 2024-03-13 10:32:05 +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 Refactor CSS; address some design issues (#9260) 2024-03-13 10:32:05 +00:00
404.html More E2E tests; export default classes from modules (#8730) 2024-01-31 11:35:41 +00:00
esbuild-config.ts Refactor configuration keys out of repository (#8895) 2024-03-08 03:14:26 +00:00
index.html Add Stripe for Billing Support (#8841) 2024-02-22 19:56:36 +03:00
package.json Refactor CSS; address some design issues (#9260) 2024-03-13 10:32:05 +00:00
playwright.config.ts E2E test fixing and bring back reports (#9238) 2024-03-05 07:06:11 +00:00
postcss.config.js Change dashboard to use 2 spaces for indentation (#8798) 2024-01-22 21:26:15 +00:00
README.md Refactor configuration keys out of repository (#8895) 2024-03-08 03:14:26 +00:00
tailwind.config.js Refactor CSS; address some design issues (#9260) 2024-03-13 10:32:05 +00:00
tsconfig.json Fix typechecking (#9279) 2024-03-06 08:20:08 +00:00
vite.config.ts Refactor configuration keys out of repository (#8895) 2024-03-08 03:14:26 +00:00
vite.test.config.ts Refactor configuration keys out of repository (#8895) 2024-03-08 03:14:26 +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.

Cloud environment variables

These are environment variables related to the cloud backend. If these variables are not set, the build will still work, however access to the cloud backend will be disabled.

Note that ENSO_CLOUD_ENVIRONMENT may be set to instead load the files from a .env file. If ENSO_CLOUD_ENVIRONMENT is not set, or it is production or '', then variables are attempted to be read from .env. If it is set to any other value (say, foo), then it is loaded from .foo.env.

(While the convention in the Node.js ecosystem is to name the variants like .env.foo, .foo.env has been chosen here because .env should be more like a file extension. Visual Studio Code also understands .foo.env but not .env.foo.)

  • ENSO_CLOUD_REDIRECT: The domain (or localhost:8080) where the login link should redirect. Should include neither a path, nor a trailing slash.
  • ENSO_CLOUD_ENVIRONMENT: The name of backend environment matching the provided configuration keys. For most builds this should be production, meaning that requests go to the production cloud backend.
  • ENSO_CLOUD_API_URL: The root path for all API endpoints. Should not include a trailing slash.
  • ENSO_CLOUD_SENTRY_DSN: The Sentry Data Source Name (DSN) for this environment. This should normally be the same for all environments.
  • ENSO_CLOUD_STRIPE_KEY: Stripe's publishable client-side key.
  • ENSO_CLOUD_CHAT_URL: The URL for the WebSocket server serving as the chat backend.
  • ENSO_CLOUD_COGNITO_USER_POOL_ID: The ID of the Cognito user pool.
  • ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID: The client-side key of the Cognito user pool.
  • ENSO_CLOUD_COGNITO_DOMAIN: The domain which all Cognito requests should go to.
  • ENSO_CLOUD_COGNITO_REGION: The AWS region for which Cognito is configured. Should match the region of the domain in ENSO_CLOUD_COGNITO_DOMAIN.