#### Tl;dr
Closes: enso-org/cloud-v2#1186
This PR significantly improves the invitation UX and add ability to view/resend/copy/delete invitations
<details><summary>Demo Presentation</summary>
<p>
https://github.com/enso-org/enso/assets/61194245/62124243-50ce-47e1-bcac-789463b5e755
</p>
</details>
---
#### Context:
#### This Change:
What the change does in the larger context? Specific details to highlight for review:
1. Redesign the Invitation dialog
2. Add the ability to edit emails after typing ` `
3. Adds ability to use different separators: `<space>`, `<semicolon>`, `<colon>` or `<newline>`
4. Shows Invitation on the `members` page in settings.
5. Adds ability to remove, resend, copy or delete invitations
6. Improve the UI of dialogs, buttons
#### Test Plan:
Go over how you plan to test it. Your test plan should be more thorough the riskier the change is. For major changes, I like to describe how I E2E tested it and will monitor the rollout.
---
This PR provides initial support for `Form` component and is supposed to be a first step in the long run.
Over the next iterations, we're going to continue adding new features that support `<Form />` out of the box(inputs, checkboxes, and so on)
Current PR is focused on providing the first version of Form component
As a tech stack, we chose:
1. `react-hook-form` for being mature and feature-complete and performant
2. Zod as validation library instead of ajv(that is present in the project already) for smaller bundle size, simpler and ts-friendly configuration, and better support
- 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.
This PR removes enso-pack (ensogl-pack) crate.
It still keeps the `enso-runner` JS package, as it is used for CLI argument parser and logger. The runner should be probably refactored (and possible removed altogether).
# Important Notes
I've temporarily extracted the `enso-runner` to `lib/js` directory, as I wanted to avoid keeping pure JS library under `lib/rust`. Attempts at integrating this with `app/ide-desktop` and family caused too much trouble for this PR. The expectation is that the package will be removed or moved elsewhere soon anyway.
- 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`
- Improved performance by batching simulatenous node edits, including metadata updates when dragging many selected nodes together.
- Updated Vue to new version, allowing us to use `defineModel`.
- Fixed#9161
- Unified all handling of auto-blur by making `useAutoBlur` cheap to register - all logic goes through a single window event handler.
- Combined all `ResizeObserver`s into one.
- Fixed the behaviour of repeated toast messages. Now only the latest compilation status is visible at any given time, and the errors disappear once compilation passes.
- Actually fixed broken interaction of node and visualization widths. There no longer is a style feedback loop and the visible node backdrop width no longer jumps or randomly fails to update.
- Close https://github.com/enso-org/cloud-v2/issues/734
- Add modal to create a new Data Link
- Add the same input to the asset right panel
- Add entries on context menu and Drive Bar
- The shortcut is <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>N</kbd>
- Add (and use) corresponding backend endpoints
# Important Notes
- All UI is currently generated based off of a single-source-of-truth JSON Schema file.
- JSON Schema was chosen for a few reasons:
- trivial to parse (it's plain JSON)
- sufficiently powerful (supports unions (used in the initial schema), objects, and singleton/literal types)
- but still quite simple (this makes it easier to implement various utilities for, because there are fewer cases to cover)
- Note that it is definitely possible to change this. The original suggestion was a TypeScript file, which can definitely be done even using just the `typescript` package itself - I just prefer to avoid adding another step in the build process, especially one that depends on the `typescript` package at runtime.
- Note also that we *do* actually bundle transpilers as part of the visualization loading code in GUI2 - so for now at least, the size of the dependency isn't a primary concern, but rather just the mental overhead of having another dependency for this one specific task.
- Close#8911
- Add dashboard unit tests to GUI2 CI
- Add dashboard E2E tests to GUI2 CI
- Fix (minor) issues in dashboard unit tests
# Important Notes
None
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
- Significantly flattens directory structure of `lib/dashboard/`
# Important Notes
- Basic testing done on:
- dashboard's `npm run dev` which (since quite recently) uses Vite.
- specifically: `npm run dev` in `app/ide-desktop/lib/dashboard`, OR `npm run dashboard:dev` in `app/ide-desktop`
- dashboard's bundle script (`npm run build`) which uses ESBuild.
- GUI2's own entry point (GUI2's `npm run dev`).
- `./run ide build`
- `./run ide watch`
- `./run ide2 build`
- `./run gui watch`
- Closes https://github.com/enso-org/cloud-v2/issues/782
- `owner:` to do exact matches against owner username
- `label:` (already existed)
- `name:` to do exact matches against asset name (exact match; case insensitive; the glob character `*` matches 0 or more characters)
- negated searches (`-owner:`, `-label:`, `-:` for negating keywords)
- Related changes that were not explicitly requested:
- add `no:`, `-no:`, `has:` and `-has:` to filter for assets that lack a specific field. Currently this only works for labels, because most (if not all) other fields cannot be empty.
- `label:a,b,c` to OR results together. `label:a label:b` ANDs results as usual.
- shift-click labels to add/remove it to the last search term as an OR
- clicking labels now cycles them from: absent -> present (positive) -> present (negative)
- Unrelated changes
- Switches unit tests to use `vitest`
# Important Notes
Some other suggestions have been added in the original issue, but currently intentionally left out to avoid prematurely over-engineering this feature.
- Closes https://github.com/enso-org/cloud-v2/issues/629
- Project Description/Settings sidebar
# Important Notes
⚠️ This is blocked by backend support for asset descriptions.
When the sidebar is opening, there is one jumpy animation:
- The search bar switches from being centered in the screen, to having an equal gap between itself and its siblings
- Fixes https://github.com/enso-org/cloud-v2/issues/781
- Implement parser for search query
- Change all UI (labels column, labels side panel, searcher in top bar) to use search query parser
- Change "remove label from asset" to right click
- Also add a tooltip to notify user that right click removes the label
- Change click action on label on asset, to toggle the label from the search
- Stop sending the list of labels for filtering on the server side
Unrelated changes:
- Switch dashboard dev server to use Vite. All other servers should be unaffected.
- `ide watch` works
- `ide build` works
- `gui watch` works
- `dashboard build` works
# Important Notes
There are quite a lot of new interactions with the search bar which should probably all be tested.
- Closes#8179
# Important Notes
- ⚠️ These tests are currently *not run* on any CI workflow.
- There is some unused code for mocking the PM. This has been intentionally kept, as this may be useful in the future.
Note that this may be useful for testing the dashboard, however the dashboard is currently only tested in cloud mode
- that is, without the backend switcher, and with only the remote backend available. As such, currently it uses HTTP API mocks, and no PM mock.
- Adds a download button in the user menu
# Important Notes
- The "upgrade to" button will be absent when the user already has a plan, as the only place where an "upgrade to" button shows up is the cloud view, when the user's account has not yet been enabled.
- The upgrade button currently links to https://enso.org/pricing - which does not yet exist. This is intentional, as another PR would be required to switch the URL, if we were to initially point to the one at https://enso-org.github.io.
- The pricing page would still not work, as that requires payment functionality, which is not yet complete
- Closes https://github.com/enso-org/cloud-v2/issues/720
- Integrate Sentry with React and React Router.
# Important Notes
This is currently BROKEN as it requires the Sentry DSN, otherwise no requests are part of a transaction. Not sure how feasible this is unfortunately, especially as (I'm assuming) it will be different for each backend...
... I guess worst case it can be configured via an environment variable like some other build-time defines.
Also the sampling rates should be checked.
Disables visual tests, because they are occasionally flaky (e.g. the recent issues with lint CI action).
This is very bad as it would cause every PR to (potentially) cause other PRs to fail, if the flaky test is not caught in the CI runs in the offending PR.
# Important Notes
None
- Implements https://github.com/enso-org/cloud-v2/issues/631
- Tests for dashboard (`app/ide-desktop/lib/dashboard/`):
- End-to-end tests
- Unit tests
- Component tests
The purpose of this PR is to introduce the testing framework - more tests can be added later in separate PRs.
# Important Notes
To test, run `npm run test` in `app/ide-desktop`, or `app/ide-desktop/lib/dashboard/`. All tests should pass.
Individual test types can be run using `npm run test-unit`, `npm run test-component` and `npm run test-e2e` in `app/ide-desktop/lib/dashboard/`.
Individual end-to-end tests can be run using `npx playwright test -c playwright-e2e.config.ts test-e2e/<file name>.spec.ts` in `app/ide-desktop/lib/dashboard/`.
End-to-end tests require internet access to pass (for things like fonts).
This PR *does* check in screenshots to guard against visual regessions (and/or to make visual changes obvious)
# Important Notes
- Binary LS endpoint is not yet handled.
- The parsing of provided source is not entirely correct, as each line (including imports) is treated as node. The usage of actual enso AST for nodes is not yet implemented.
- Modifications to the graph state are not yet synchronized back to the language server.
- Closes#7498
- Validation regex previously disallowed non-ASCII characters, now fixed
- Changes every password input to use the correct regex. For old/new passwords, it uses the regular input. For password confirmations, it uses the new password, converted to a regex. This makes it so that the password confirmation input's validation only succeeds when it exactly matches the new password.
# Important Notes
None
* Set translucency options
* Vibrancy on Windows
* Use explicit background image instead of vibrancy
* Attempt to fix `ide build`
* Fix lint warning
* Remove background from authentication flow
* Fix background image and position
---------
Co-authored-by: Paweł Buchowski <pawel.buchowski@enso.org>
This PR consists of two primary changes:
1. I've replaced `react-hot-toast` with `react-toastify` library. Both serve the same purpose — sending popup notifications (so-called "toasts"). However, the latter comes with a richer feature set that matches our requirements much better.
2. I've exposed the relevant API surface to the Rust. Now Rust code can easily send notifications.
### Important Notes
At this point, no attempt at customizing style of notifications was made (other than selecting the "light" theme).
Likely we should consider this soon after integration as a separate task.
- Fixes#6168
- Removes `enso-copy-plugin` in favor of an inline plugin
- It was only used in one place anyway
- It is probably necessary since I've "fixed" it by adding all files as entrypoints (I'm not quite sure why it wasn't working with the fix with `enso-copy-plugin`...)
- Adds live reload (back) to `content/`
# Important Notes
To QA:
Mandatory:
- `./run gui watch --skip-version-check --skip-wasm-opt`
Recommended:
- `npm run watch-dashboard`
- `./run ide watch --skip-version-check --skip-wasm-opt --backend-source release --backend-release latest`
- and with `--ide-option -authentication`
- `./run ide build --skip-version-check --skip-wasm-opt --backend-source release --backend-release latest`
- `Enso` and `Enso -authentication`
- Fixes prettier config to include `.tsx`
- `prettier -w .` has been run in `app/ide-desktop`
- `prettier -w .` has also been run in `pack/js`, however there were no changes.
# Important Notes
After this is merged, a PR SHOULD be created to add the following file to the root directory:
`.git-blame-ignore-revs`
```
# <name of the commit for this PR>
<hash of the commit for this PR>
```
This makes `git blame` ignore the commit, which is a good idea since this PR only does formatting changes.
2nd PR for IDE/Cloud authorization with cognito. This PR introduces boilerplate react app + some amplify code to fetch the access token + username of the currently logged in user, if they are already authenticated.
Registration + Login + Set Username + Forgot Password flows are to be added in next PRs to keep the changes reviewable.
