#### 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.
---
- Fix React DevTools not working in Firefox
- Fix selection of asset names when editing them, not working at all in Firefox
- Convert tick/cross buttons when editing assets, and the "plus" and "reload" buttons on the "shared with" column, "labels" column, and keyboard shortcuts table, to match more with the rest of the design
- Update clip path when the container resizes, so that the icons for hidden columns never overlap the actual table header
- Fix#10184
- Fix renames being committed even when cancelling
- Fix duplicate name detection - previously, all asset types only checked folders with the same name, not assets with the same name
- I'm not 100% sure this is the correct behavior still
- Stop using `kbd` (`aria.Keyboard`) to display keyboard shortcuts, since they should not be displayed in a monospace font.
- Fix "plus" and "reload" buttons going past the right side of their parent table cell
- Limit length of `PermissionDisplay` - if the username of a user with permission is too long, it uses a tooltip instead
- Update the username dynamically for all permissions owned by self, when changing username in the settings.
- This avoids having to fully invalidate the directory tree every time the username changes, given that nothing changes about the assets' metadata themselves.
- Cache children in the Drive tree
- This avoids loading spinners when closing a folder and immediately reopening it.
- Note that children are still re-fetched on reopen to ensure freshness
# Important Notes
- This MAY be split into multiple smaller PRs. However, I think it's better to QA as a single PR, to avoid duplicating work checking behavior that may be changed by a sibling PR (assuming the PR was split into multiple).
- 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
⚠️ This PR depends on #9896 and MUST NOT be merged before that one.
- Close#9898
- Move right menu to Drive View
- Use new icon for toggling the menu
- Move Search Bar into Drive View
- both of these changes come with free simplifications to the code.
- Refactor entire Top Bar to show pages as tabs
- Fix https://github.com/enso-org/cloud-v2/issues/1301
- Remove grey background from arrow icon visible when hovering over directory rows
# Important Notes
- Fonts containing slight variants have been added to make it match more closely with the Figma design. HOWEVER:
- They have been added in `app/gui2` instead of the Dashboard codebase, because that is where the existing Enso font is located.
- While it's definitely possible to put them in the Dashboard codebase, I think it's preferable to avoid that, otherwise we will have two separate mechanisms for loading/packaging fonts.
- However, this problem SHOULD go away if (if not when) the entrypoints for the desktop app (in `app/gui2`) and cloud.enso.org (in `app/ide-desktop/lib/dashboard`) are merged.
- Fix the appearance of the `tertiary` button variant
- Fix spinner for projects that are opening being misaligned by 1px
- Fix appearance of "Login with Google" and "Login with GitHub" icons in the Login page
- Fix#10279
- Switch to Local tab when on desktop app and user does not have an active plan
# Important Notes
None
- Close#9886
- Update style of buttons in Drive Bar
- Move "Home" page into a "Start" dialog
- Remove icons that are no longer needed
- Remove Backend Switcher in top bar - they have now been converted to categories
- Incidental changes
- Refactor Backend provider so that both Remote and Local backends are available.
- This was done because both Cloud and Local backends are now easily accessible by switching tabs - the Local backend no longer has its own views with the hidden category switcher
# 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.
#### Tl;dr
Closes: enso-org/cloud-v2#1132
This PR renames Connector to Datalink
---
#### Test Plan:
Everything should work as before, but instead of sending `connectorId` we send `dataLinkId` and endpoint now is `/datalink`
---
- Dashboard side of #9828
- Add tooltips for elements rendered by the Dashboard
# Important Notes
- The UI for the tooltips can be changed at any time.
- 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
- 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.
- 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`.
- Implement https://github.com/enso-org/cloud-v2/issues/961
- Allow directory management on Local backend
- Setting a custom root directory is currently *out of scope* of this PR.
- Listing directories
- Deleting directories and files
- Adjust project-related APIs to accept parent directory path (as required by PM when not interacting with root directory)
- QoL improvements related to testing this PR
- New watch script (`npm run watch2`, `npm run watch:linux`) in `app/ide-desktop/lib/client/`) for testing IDE2 on Electron without having to build the entire app
- Adjustments to `gui2`'s `vite.config.ts` to allow React HMR when doing dev in Electron
# Important Notes
- Support for deleting files and folders uses the API introduced by #9359 - so it will not work until that PR is merged in.
- Support for uploading files uses the API specified by #9360 - so it will not work until that issue is closed.
- Closes https://github.com/enso-org/cloud-v2/issues/861
- Adds a `getText` function and React Context to abstract away all text that is shown to users
The main immediate benefit is making all text much more discoverable - both being able to know of every piece of text used across the entire application, and making it a lot easier to refactor certain strings when needed rather than having to hunt for strings to replace (and potentially miss one).
The longer term benefit is that this will make it easy to add localization, by simply adding another JSON file with the same keys as the existing one, and adding a little bit of logic.
# Important Notes
None
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
- The invisible drop target below the assets table was absent, breaking both drag-n-drop of external files, and drag-n-drop of existing assets to the root directory.
# Important Notes
None
- 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`
- Fix issue where `playwright-report/` is being typechecked by `npm run typecheck` in the dashboard, causing CI to fail
- Attempt to fix flaky dashboard test
# Important Notes
To test that typechecking isn't completely broken, it's recommended to intentionally create a type error in the dashboard code base.
- Close https://github.com/enso-org/cloud-v2/issues/896
- Add new settings page for viewing and editing keyboard shortcuts
- Refactor shortcut manager to resemble GUI2's shortcuts module
- Minor refactor moving `dashboard/layouts/dashboard` to `dashboard/layouts`; and moving all moals to `dashboard/modals`
# Important Notes
- The modal for capturing keyboard shortcuts has not been tested on macOS.
- 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
- Remove unused `forceCreate` parameter from backend requests
- Also undo bad change to behavior of sorting assets:
- https://github.com/enso-org/enso/pull/7540#issuecomment-1683699696
- Fix https://github.com/enso-org/cloud-v2/issues/910
- Closing a project now doesn't close other projects.
- Unable to properly test, as I cannot get the second project to open
- Fix https://github.com/enso-org/cloud-v2/issues/908
- Use the `download` module that already exists to download the app...
- Add correct arrow icon for collapsing/expanding folders
- Turns out this icon had always existed, and I just didn't see it for the longest time
- Hide irrelevant parts of search bar on Local Backend
- The row of labels
- `no:`, `has:`, `label:`, `-label:`, `description:`, `-description:` (and their corresponding autocomplete entries)
- Also change text to say "Type to search for projects." because the other asset types mentioned do not (and will never) exist on the Local Backend.
- Fix search bar eating up `"` and ` ` keypresses
- Fix icons for Data Links and Secrets being swapped in `AssetIcon`
# Important Notes
- The fix for https://github.com/enso-org/cloud-v2/issues/908 has not been tested on Safari (I don't have a macOS machine.)
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
