#### 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.
---
- PARTIALLY implements https://github.com/enso-org/cloud-v2/issues/1232
- Partially refactor E2E test actions into a state machine.
- The main goal of this is to _disallow_ invalid actions - for example going from a page to itself, which will fail at runtime, or trying to create a new Data Link on a page where that button is not accessible.
- An auxiliary goal is to have better namespacing of actions and better clarity:
- Previously, everything was a locator at the top level of a single module. This makes it very difficult to comprehend what kinds of actions are available.
- Note: There is also older `namespace`-based namespacing for the User and Organization settings pages, which were added before this refactor. They SHOULD be refactored to the new API, but I'm not sure whether it's worth spending the time right now.
- Add E2E tests for every input on the "user" settings page and the "organization" settings page.
- A skeletal E2E test for the Datalink modal has also been added - it does not actually test anything currently but should be sufficient for building upon.
# Important Notes
None
fixes#9730
Added a `logEvent` method to remote backend implementation in dashboard. Added an always-present remote backend instance that can be used for logging even when running a local project (intentional behavior).
# Important Notes
Because the backend implementation requires access to always fresh session token, the logger needs to be periodically updated on GUI side, so it can continue to function. To accomplish that, I simplified the app loading logic to treat GUI as an ordinary react component, so its props can be updated with normal react rendering flow. That refactor also removed the dynamic GUI asset loading code that was only needed for Rust GUI.
- Close https://github.com/enso-org/cloud-v2/issues/907
- Add a settings page for listing groups
- Add users list with drag-n-drop into user groups
- Show users below user groups
- Add delete button for users and user groups
Other changes:
- Add delete button for users on "Members" settings page. Note that it currently does not work as corresponding backend functionality is missing.
# Important Notes
None
- Updates the model types for the request/response bodies to match the backend.
- Renames `CreatePermissionRequestBody::userSubjects` to match `CreatePermissionRequestBody::actorsIds` on the backend
- Renames `UserInfo::organization_id` to camel case
- Adds `UserInfo::userId` field to match the backend
- Merges `SimpleUser` into `UserInfo`
Previously, `UserInfo`'s `OrganizationId` was serialized as `pk`. This
is not desired since `pk` is an implementation detail (relating to
DynamoDB). This commit renames the field to accurately reflect the type
of data it contains.
- Renames `User::id` to `User::organizationId`.
Previously, the user's organization ID was under the `id` field. As of
enso-cloud/cloud-v2#1098, this is no longer the case. The
`organizationId` field is no longer a user's primary identifier --
`userId` should be used for that purpose instead. So this field has been
renamed to `organizationId` to more clearly describe the purpose of the
field.
Affects the responses expected from the following endpoints:
- `PUT /users/me/picture`
- `PUT /users/me`
- `GET /users/me`
- `PUT /users/{userId}/usergroups`
- Adds `User::userId` field.
Previously, the user's organization ID was used to uniquely identify a
user. Now that multiple users can be invited to an organization, it is
no longer appropriate to use organization ID to uniquely refer to a
user. For this purpose, the backend has introduced the `userId` field.
Affects the responses expected from the following endpoints:
- `POST /users`
- `PUT /users/me/picture`
- `PUT /users/me`
- `GET /users/me`
- `PUT /users/{userId}/usergroups`
Removes the `user` param from `tryGetSingletonOwnerPermission`. This
param was previously required. It was required because a `userSubject`
was necessary to optimistically generate a `UserPermission`. With recent
refactors, a `userId` can be used in place of `userSubject` to generate
a `UserPermission`. The existing param `owner` provides the `userId`, so
the `user` param is redundant and can be removed.
- Removes `UserInfo` from the `FullUserSession`.
Previously, `UserInfo` in the `FullUserSession` was required to obtain a
`userSubject`. Now, `userSubject` has been deprecated in favour of
`userId`. `User` provides `userId`, and is present in the
`FullUserSession`. Thus, this commit removes `UserInfo` from the
`FullUserSession` since it is redundant.
- Renames `UserInfo` fields to `camelCase`
Previously, `UserInfo`'s fields were serialized as `snake_case`. This is
not desired since the convention for the frontend is to use `camelCase`
for field names where possible. This commit renames the fields to be
`camelCase`, now that the backend has been updated accordingly.
- Sorts by `userId` rather than `email`
- Compares by `userId` rather than `email`
- Extends `User` from `UserInfo`
After refactoring, `UserInfo` is now a subset of `User`. To remove
duplication, this commit modifies `User` to extend `UserInfo`.
This PR updates the model types for the request/response bodies to match the backend.
Some of these changes are for the (already merged) user groups PRs, (i.e., the switch to `actorsIds`):
- https://github.com/enso-org/cloud-v2/pull/926
- https://github.com/enso-org/cloud-v2/pull/939
Some of these changes are for the (yet to be merged) changes to the `User` types:
- https://github.com/enso-org/cloud-v2/pull/1073
Note that this PR must be **merged after the above PRs have been merged and deployed** to the backend.
- Rename `CreatePermissionRequestBody::userSubjects` to match `CreatePermissionRequestBody::actorsIds` on the backend
- Add `SimpleUser::organizationId` to match the backend
- Add `SimpleUser::userId` to match the backend
- Rename `UserInfo::pk` to `UserInfo::user_subject` to match the backend
- Rename `UserInfo::organization_id` to `UserInfo::pk` to match the backend
- Add `UserInfo::sk: UserId` to match the backend
- 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
- Close https://github.com/enso-org/cloud-v2/issues/866
- Remove *all* references to client keys and API base URLs from the codebase.
- The app can still be built by external contributors. *However*, the cloud backend (among some other things) will be completely disabled, as the required keys and base URLs will be missing.
- Add entry to `.gitignore` to allow `*.env` files in `app/ide-desktop/lib/dashboard/`
# Important Notes
- Tested (no `.env`; `.env` with prod backend; `.pbuchu.env`) on:
- `npm run dev` in `app/ide-desktop/lib/dashboard/`
- `./run ide build`
- `./run ide2 build`
- `./run gui watch`
- Close https://github.com/enso-org/cloud-v2/issues/893
- Remove "Change Password" modal
- Remove "Change Password" option from user menu
- Add "Change Password" section to "General -> Account" in settings
# Important Notes
None
This is not strictly necessary (as indicated by the fact that no actual logic needed to be changed), but it doesn't hurt to make this change.
- Make (almost) all `interface`s `readonly`
- Some of them are *not* readonly; this is intentional as those *do* need to be mutated
- A `no-restricted-syntax` lint rule has been added, but only for `interfaces` - it has been added neither for `classes` nor for `readonly T[]`
- A lint rule for `extends React.PropsWithChildren` instead of `extends Readonly<React.PropsWithChildren>` would be easy to add though...
# Important Notes
- There should be no logic changes, so QA shouldn't need to test anything in particular.
This is a prerequisite for adding a CI action for E2E tests.
- Fix E2E tests
- Remove visual regression testing (VRT) and associated fixtures (screenshots) for now
- Switch dashboard almost fully to Vite, from ESBuild, to match GUI2's build tooling.
- Add some new E2E tests:
- Creating assets
- Deleting assets
- Creating assets from the samples on the home page
- Sort assets
- Includes fixes for sorting:
- Group sorted assets by type again (regression) (see https://github.com/enso-org/cloud-v2/issues/554)
- Make sorting by title, case insensitive. This is because it is more intuitive for non-programmers if all items with uppercase names *aren't* separated from those with lowercase names - especially since the Windows FS is case-insensitive.
- Normalization of Unicode letters is *not* currently being done. It can potentially be added later.
- Double-clicking *anywhere* on a directory row now expands it. Previously it was only being expanded when double clicking
- Add recursive label adding/removal to mirror backend
- Note: The current implementation is not exactly the same as the backend's implementation.
- Fix https://github.com/enso-org/cloud-v2/issues/872
- Unset "saved project details" (for opening the last open project) if fetching it produces an error.
# Important Notes
- All tests pass. (run `npm run test:e2e` in `app/ide-desktop/lib/dashboard`)
- All `npm` commands should be run in `app/ide-desktop/lib/dashboard`. `dashboard:*` npm scripts have been removed from `app/ide-desktop` to prevent a mess.
- `npm run dev` confirmed to still work. Note that it has not been changed as it was already using Vite.
- `npm run build` now uses `vite build`. This has been tested using a local HTTP server that supports `404.html`.
- Other cases have been tested:
- `npm run test:e2e` works (all tests pass)
- `./run ide build` works
- `./run ide watch` works
- `./run ide2 build` works
- `./run gui watch` works
