enso/app/ide-desktop/lib/dashboard
Sergei Garin 37cc980082
Offline Mode Support (#10317)
#### Tl;dr
Closes: enso-org/cloud-v2#1283
This PR significantly reimplements Offline mode

<details><summary>Demo Presentation</summary>
<p>


https://github.com/enso-org/enso/assets/61194245/752d0423-9c0a-43ba-91e3-4a6688f77034


</p>
</details>

---

#### Context:
Offline mode is one of the core features of the dashboard. Unfortunately, after adding new features and a few refactoring,  we lost the ability to work offline.
This PR should bring this functionality back, with a few key differences:
1. We require users to sign in before using the dashboard even in local mode.
2. Once a user is logged in, we allow him to work with local files
3. If a user closes the dashboard, and then open it, he can continue using it in offline mode


#### This Change:
What does this change do in the larger context? Specific details to highlight for review:
1. Reimplements `<AuthProvider />` functionality, now it implemented on top of `<Suspense />` and ReactQuery
2. Reimplements Backend module flow, now remote backend is always created, You no longer need to check if the RemoteBackend is present
3. Introduces new `<Suspense />` component, which is aware of offline status
4. Introduce new offline-related hooks
5. Add a banner to the form if it's unable to submit it offline
6. Refactor `InviteUserDialog` to the new `<Form />` component
7. Fixes redirect bug when the app doesn't redirect a user to the dashboard after logging in
8. Fixes strange behavior when `/users/me` could stuck into infinite refetch
9. Redesign the Cloud table for offline mode.
10. Adds blocking UI dialog when a user clicks "log out" button

#### Test Plan:
This PR requires thorough QA on the login flow across the browser and IDE. All redirect logic must stay unchanged.

---
2024-06-21 07:14:40 +00:00
..
docs Fix various issues on the Dashboard (#10256) 2024-06-20 18:30:24 +00:00
e2e Offline Mode Support (#10317) 2024-06-21 07:14:40 +00:00
src Offline Mode Support (#10317) 2024-06-21 07:14:40 +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 Listing versions on file results in 403 flood (#9531) 2024-03-27 10:29:45 +00:00
404.html Update dashboard to design v122 (Part 1) (#9896) 2024-06-12 10:20:07 +00:00
esbuild-config.ts Refactor configuration keys out of repository (#8895) 2024-03-08 03:14:26 +00:00
favicon.ico Keyboard navigation between components (#9499) 2024-04-05 07:21:02 +00:00
index.html Fix various issues on the Dashboard (#10256) 2024-06-20 18:30:24 +00:00
package.json Offline Mode Support (#10317) 2024-06-21 07:14:40 +00:00
playwright.config.ts Update dashboard to design v122 (Part 1) (#9896) 2024-06-12 10:20:07 +00:00
postcss.config.js Change dashboard to use 2 spaces for indentation (#8798) 2024-01-22 21:26:15 +00:00
README.md Fix various issues on the Dashboard (#10256) 2024-06-20 18:30:24 +00:00
tailwind.config.js Fix various issues on the Dashboard (#10256) 2024-06-20 18:30:24 +00:00
tsconfig.json Improve Invitation flow (#9928) 2024-05-22 18:26:02 +00:00
vite.config.ts Fix broken login flow (#9965) 2024-05-22 16:56:42 +03:00
vite.test.config.ts Offline Mode Support (#10317) 2024-06-21 07:14:40 +00:00
vitest.config.ts Rename Connector to Datalinks (#9948) 2024-05-20 08:45:55 +00:00

Dashboard

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

Further documentation

Further documentation is provided in the docs/ folder:

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.