#### 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
- Prepares for the Cloud API change, together with a fallback for the old API to avoid problems during migration.
- This PR should be merged before the https://github.com/enso-org/cloud-v2/pull/1236 PR is _deployed_.
#### New documentation panel:
- Shows documentation of currently-entered method.
- Open/close with Ctrl+D or the extended menu.
- Renders markdown; supports WYSIWYG editing.
- Formatting can be added by typing the same markdown special characters that will appear in the source code, e.g.:
- `# Heading`
- `## Subheading`
- `*emphasis*`
- Panel left edge can be dragged to resize similarly to visualization container.
https://github.com/enso-org/enso/assets/1047859/6feb5d23-1525-48f7-933e-c9371312decf
#### Node comments are now markdown:
#### Top bar extended menu improvements:
- Now closes after any menu action except +/- buttons, and on defocus/Esc.
- Editor/doc-panel buttons now colored to indicate whether editor/panel is open.
https://github.com/enso-org/enso/assets/1047859/345af322-c1a8-4717-8ffc-a5c919494fedCloses#9786.
# Important Notes
New APIs:
- `DocumentationEditor` component: Lazily-loads and instantiates the implementation component (`MilkdownEditor`).
- `AstDocumentation` component: Connects a `DocumentationEditor` to the documentation of an `Ast` node.
- `ResizeHandles` component: Supports reuse of the resize handles used by the visualization container.
- `graphStore.undoManager`: Facade for the Y.UndoManager in the project store.
Now that #9815 has landed, we can finally bump electron-builder to the latest release. As this brings in python3 support out-of-the-box, workaround of the runtime-bump on macOS runners can be removed.
This PR introduces a new installer and uninstaller for the Windows platform.
Both are written in Rust and compiled to a single executable. The executable has no dependencies (other than what is included in the Windows), links the C++ runtime statically if needed.
The change is motivated by numerous issues with with the `electron-builder`-generated installers. The new installer should behave better, not have issues with long paths and unblock the `electron-builder` upgrade (which will significantly simplify the workflow definitions).
To build an installer, one needs to provide the unpacked application (generated by `electron-builder`) and the `electron-builder` configuration (with a few minor extensions). Code signing is also supported.
Fixes#8520
If the websocket is closed not by us, we automatically try to reconnect with it, and initialize the protocol again. **Restoring state (execution contexts, attached visualizations) is not part of this PR**.
It's a part of making IDE work after hibernation (or LS crash).
# Important Notes
It required somewhat heavy refactoring:
1. I decided to use an existing implementation of reconnecting websocket. Replaced (later discovered by me) our implementation.
2. The LanguageServer class now handles both reconnecting and re-initializing - that make usage of it simpler (no more `Promise<LanguageServer>` - each method will just wait for (re)connection and initialization.
3. The stuff in `net` src's module was partially moved to shared's counterpart (with tests). Merged `exponentialBackoff` implementations, which also brought me to
4. Rewriting LS client, so it returns Result instead of throwing, what is closer our desired state, and allows us using exponentialBackoff method without any wrappers.
Fixes#9492
Implemented generic component for flawless size-based transitions, then used it for hiding arguments and dropdown animation. That replaced the `max-size`-based CSS animation that caused original issue. Refactored dropdown positioning to avoid further issues related to animation overflow clipping. The dropdown also got a bit of a lift to fit closer to styles in current Figma designs.
https://github.com/enso-org/enso/assets/919491/e85fd68c-b2e8-4d58-90e1-4fd7b33f1c9b
- Fix#9619
- Fix issue causing the full path to be shown on Windows.
Additional changes:
- Add `npm run watch:windows` script to `lib/client` for developing on Electron.
# Important Notes
Testing instructions:
- Should ideally be tested on Windows. All the following should work:
- Creating, opening and deleting top-level projects
- Creating folders
- Creating, opening and deleting nested projects
- Uploading and deleting top level and nested files
- Moving folders, files and projects
- 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.
Closes#8680
The color picker is triggered by new Circular menu item or by keyboard shortcut (set to `Mod+Shift+C` for **C**olor).
The color picker affects *selected* nodes, so it works nicely both in cases when we use Circular menu on a single node a shortcut with multiple selected nodes.
Color is only changed when the user selects a new one inside the color picker, but there is no specific way to reset default color (you would have to recreate the node).
https://github.com/enso-org/enso/assets/6566674/a4497bea-f432-486d-85f8-f2772ba5694f
- 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.
Removes a bulk of rust crates that we no longer need, but that added significant install, build and testing time to the Rust parser.
Most significantly, removed `enso-web` and `enso-shapely`, and got rid of many no longer necessary `#![feature]`s. Moved two still used proc-macros from shapely to prelude. The last remaining usage of `web-sys` is within the logger (`console.log`), but we may actually want to keep that one.
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`
Removes the old GUI1 code base and reduces the Rust code footprint by removing unused code.
# Important Notes
Updates build scripts and reformats part of the codebase with the autoformatter.
- 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.
- Synchronize Y.Js clients by AST (implements #8237).
- Before committing an edit, insert any parentheses-nodes needed for the concrete syntax to reflect tree structure (fixes#8884).
- Move `externalId` and all node metadata into a Y.Map owned by each `Ast`. This allows including metadata changes in an edit, enables Y.Js merging of changes to different metadata fields, and will enable the use of Y.Js objects in metadata. (Implements #8804.)
### Important Notes
- Metadata is now set and retrieved through accessors on the `Ast` objects.
- Since some metadata edits need to take effect in real time (e.g. node dragging), new lower-overhead APIs (`commitDirect`, `skipTreeRepair`) are provided for careful use in certain cases.
- The client is now bundled as ESM.
- The build script cleans up git-untracked generated files in an outdated location, which fixes lint errors related to `src/generated` that may occur when switching branches.
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
- Fix https://github.com/enso-org/cloud-v2/issues/828
- Fix appearance of search bar on small screens
- Close https://github.com/enso-org/cloud-v2/issues/830
- Rename "Data Connector" back to "Secret" for now
- Fix "create secret" endpoint
- Add "update secret" endpoint
- Repurpose "create secret" modal to also be usable for updating secrets
- Add new context menu option for editing secrets
- Add new shortcut (<kbd>Ctrl</kbd>+<kbd>E</kbd>) for editing secrets
- Add double-click trigger for editing secrets
- Fix https://github.com/enso-org/cloud-v2/issues/831
- Add the redirect, that was previously missing (only present in the very old dashboard)
- Fix https://github.com/enso-org/cloud-v2/issues/835
- Fix search query not updating when clicking label in sidebar
- Fix search query breaking when clicking a suggested label, after tabbing into a selection
- Fix https://github.com/enso-org/cloud-v2/issues/839
- Make search query refresh when pressing <kbd>Enter</kbd>
- Fix some buggy behavior when applying autocomplete
# Important Notes
None
- 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/822
- Implements the following actions and their associated keyboard shortcuts
- "Duplicate"
- "Copy" and "Copy All" (= copy all selected items)
- "Paste" and "Paste All" (with copied assets - cut-and-paste already worked previously)
# Important Notes
None
- 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.
Implements #8525
[Screencast from 18-12-23 14:40:29.webm](https://github.com/enso-org/enso/assets/1428930/c7db2a9d-0020-4bce-b44c-d6712df58098)
# Important Notes
Previously, we re-used the API from the dashboard. But this mechanism is brittle and is currently even broken with the new GUI. So instead, I just used the Vue equivalent toast API, which seems easier to use.
- Closes https://github.com/enso-org/cloud-v2/issues/804
- The GUI should now properly configure deep links and auth settings, among other things, because the logic has been ported over from the GUI1 runner.
- The porting was very basic; it may be a good idea to refactor it later, but that is out of scope of this PR.
- This also means that `runner/` should be safe to remove along with GUI1 in the future, as all code relevant to GUI2 now resides in `app/gui2/runner`.
# Important Notes
- The built `ide2` has been tested on Windows, but should also be tested on macOS.
- Should *also* be fully tested in `npm run dev`.
- 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
