mirror of
https://github.com/enso-org/enso.git
synced 2025-01-02 14:24:50 +03:00
9cf4847a34
- Close https://github.com/enso-org/cloud-v2/issues/982 - Add keyboard navigation via arrows between different components - This is achieved by a `Navigator2D` class which keeps track of the closest adjacent elements. Other changes: - Switch much of the codebase to use `react-aria-components` - This *should* (but does not necessarily) give us improved accessibility for free. - Refactor various common styles into styled components - `FocusArea` to perform automatic registration with `Navigator2D` - `Button` and `UnstyledButton` to let buttons participate in keyboard navigation - `HorizontalMenuBar` - used for buttons below the titles in the Drive page, Keyboard Shortcuts settings page, and Members List settings page - `SettingsPage` in the settings pages - `SettingsSection` in the settings page to wrap around `FocusArea` and the heading for each section - Add debugging utilities - Add debugging when `body` has the `data-debug` attribute: `document.body.dataset.debug = ''` - This adds rings around elements (all with different colors): - That are `FocusArea`s. `FocusArea` is a wrapper component that makes an element participate in `Navigator2D`. - That are `:focus`ed, and that are `:focus-visible` - That are `.focus-child`. This is because keyboard navigation via arrows ***ignores*** all focusable elements that are not `.focus-child`. - Debug `Navigator2D` neighbors when `body` has the `debug-navigator2d` attribute: `document.body.dataset.debugNavigator2d = ''` - This highlights neighbors of the currently focused element. This is a separate debug option because computing neighbors is potentially quite expensive. # Important Notes - ⚠️ Modals and the authentication flow are not yet fully tested. - Up+Down to navigate through suggestions has been disabled to improve UX when accidentally navigating upwards to the assets search bar. - There are a number of *known* issues with keyboard navigation. For the most part it's because a proper solution will be quite difficult. - Focus is lost when a column (from the extra columns selector) is toggled - because the button stops existing - It's not possible to navigate to the icons on the assets table - so it's current not possible to *hide* columns via the keyboard - Neighbors of the extra columns selector are not ideal (both when it is being navigated from, and when it is being navigated to) - The suggestions in the `AssetSearchBar` aren't *quite* fully integrated with arrow keyboard navigation. - This is *semi*-intentional. I think it makes a lot more sense to integrate them in, *however* it stays like this for now largely because I think pressing `ArrowUp` then `ArrowDown` from the assets table should return to the assets table - Likewise for the assets table. The reason here, however, is because we want multi-select. While `react-aria-components` has lists which support multi-select, it doesn't allow programmatic focus control, making it not particularly ideal, as we want to focus the topmost element when navigating in from above. - Clicking on the "New Folder" icon (and the like) do not focus on the newly created child. This one should be pretty easy to do, but I'm not sure whether it's the right thing to do. |
||
|---|---|---|
| .. | ||
| e2e | ||
| src | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc.cjs | ||
| 404.html | ||
| esbuild-config.ts | ||
| favicon.ico | ||
| index.html | ||
| package.json | ||
| playwright.config.ts | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| vite.config.ts | ||
| vite.test.config.ts | ||
| vitest.config.ts | ||
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 insrc/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 ReactContexts 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 ReactContexts 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 ofesbuild-config.tsin 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 (orlocalhost: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 beproduction, 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 inENSO_CLOUD_COGNITO_DOMAIN.