We decided to hide the import button on a
document because it is confusing for the user to
have the possibility to import a document when he
is already in a document. The import button is
now only available on the document list page.
We will add back the button soon, but a import
will create a new sub-document instead.
Following the recommendations of the design team,
we lightly improved some UI/UX elements to be
more consistent and user-friendly before the
next release.
It includes the following changes:
- add a background to the grid
- add a fadein to the header buttons
- reduce the generic size icon
- add a title to the doc item
On some mobile devices, the CTA button on the
move modal was not visible due to a CSS issue.
This commit fixes the issue by adjusting the modal's
layout and ensuring that the CTA buttons are visible.
Keycloak's hostname, its client's redirect/web
origins, and Django's CSRF trusted origins were
hardcoded to localhost, so the dev stack was
only reachable from that exact origin.
It is now possible to run the dev stack depending
what is configured in the env files.
Depends the state, after deleted a doc, we were
automatically redirecting to the index page, which is
not always the desired behavior. This change stops
the automatic redirect after deleting a document,
allowing for more flexible navigation based on user
context.
We want to animate the header floating bar with
a Lottie animation. This commit adds the Lottie
dependency and implements the animation in the
HeaderFloatingBar component.
We change the way that the left panel is displayed
in mobile and tablet views. Now, the left panel will
be over the content when mobile, and will be displayed
as a side panel when tablet. We simplify the
overall structure of the left panel, and the way
the responsive behavior is handled.
We replace the header by a floating header, to have more
space for the content and in fine to have more
harmony between the doc and the doc-grid, in mobile view
or not.
The layout have to be adapted, as well the legacy home
page.
We want to use the floating bar in multiple places, so
we need to make it more generic and reusable.
This commit refactors the floating bar component
and its related components to achieve this goal.
We are now using the UserMenu component from
the ui-kit. It is a dropdown displaying the user's
name and email, along with a logout button and a
language picker. To fit the design of the user menu,
we adapted the LanguagePicker adn are now using the
ui-kit language picker component.
The floating waffle menu is positioned only on the bottom
left of the trigger button, so when positioned
on the bottom left, the floating menu is not visible.
This commit fixes the positioning.
We also added a patch to the ui-kit, so when
the patch is released, we can remove this patch
from the codebase.
During rolling deploys, multiple replicas serve
different builds of service-worker.js
(each build has a random buildId baked in).
This causes a controllerchange loop: the new SW
activates via skipWaiting, the page reloads, then the
next request may hit an older replica,triggering another
update and another reload — surfacing as a reload
every time the tab becomes visible.
We added a sessionStorage guard so a controllerchange
triggers at most one automatic reload per session; subsequent
flaps between versions are silently ignored, while legitimate
updates still cause a single reload automatically.
We added a sub button to create sub-documents
from the New button. This sub button is only visible
when the user is in a document, and it allows them to
create a new document that is a child of the current
document.
New create button for docs.
It is now a link button instead of a pure button,
meaning we can navigate to this new created doc
and open it in another tab by doing ctrl + click.
This new button has a dropdown menu that allows
users to import a docx file or a markdown file.
We removed the old import button.
The tree rerenders crazily, creating performance
issues, especially on big trees. To fix it properly
we will need a big refacto, on the uikit side.
Before doing that, we try to optimize the current
code by memoizing the tree view, and by using the
selected node from the url instead of the one
from the context.
We improve the treeitem link, we can now easily
opening a new tab by doing CTRL+Click.
react-arborist's scrollTo calls react-window's scrollToItem, which mutates
the internal scrollOffset state. When navigating to a deep item in a large
tree, this causes all items above the target to be removed from the DOM
(virtualized away), making the tree appear empty above the selected node.
We no-op it to prevent that — the panel's own overflow-y handles scrolling.
When we were visiting a public document, it was part of
our list of documents, and we couldn't leave it.
Now, we can leave a public document, and it will
be removed from our list of documents.
We coupled it with remove access to a document if
you had access to it, and you can also leave a
document without having to pass through the share
modal, which is a better user experience.
In the search modal, under the sub docs,
we now display the top parent of the doc, to give
more context to the user about the doc they are
looking for.
We refactorize the filters to get more flexibility
and avoid too much props drilling.
We don't maintain the test-e2e-other-browser job,
and it often fails due to various reasons.
To avoid unnecessary noise in our CI pipeline, we
will remove this job.
We are adding workflow_dispatch trigger to the e2e-tests
workflow, so that we can still run e2e tests on other
browsers when needed from the Github actions UI.
Changed:
- 💄(frontend) display emoji button on hover
Fixed:
- 🐛(backend) close thread DB connections to fix test teardown
OperationalError
- 🐛(frontend) fix crash when orphaned threads
- 🐛(backend) order trashbin response by most recently deleted
- 🐛(backend) stream document content with an async
iterator under ASGI
- 🐛(frontend) fix long titles in table of content
The app expect threads to always have
comments, but in some cases threads can end up without
comments, which causes crashes. This PR adds a
check to delete orphaned threads without comments
to avoid this issue.
Added:
- ✨(backend) support creating subdoc from file
- ✨(frontend) comment side panel
- ✨(buildpack) add PaaS deployment support, tested with Scalingo
- 🔧(backend) allow configuring settings
OIDC_OP_USER_ENDPOINT_FORMAT
- ⚡️(helm) create a dedicated svc and deployment for
yprovider converter
- ✨(backend) allow to leave a document
- ✨(frontend) add the presenter mode
- 📈(backend) create a utils to capture event with posthog
- 🔧(backend) new setting DOCUMENT_ALL_ENDPOINT_ENABLED
Changed:
- ♻️(backend) allow global search in sub documents
- ✨(backend) add a breadcrumb in the search response
- ♻️(frontend) move doc action buttons to fix toolbar
- ♿️(frontend) add aria-hidden to decorative avatar SVGs
in share modal
- 🏗️(frontend) move comments to its own folder feature
Fixed:
- 🐛(docs) run migration 0027 without superuser role
- 🐛(backend) prevent admins/owners from overwriting other
users comments
- 🐛(y-provider) return empty output when converting empty
Yjs document
- 🐛(backend) use computed_link_reach in
handle_onboarding_document
- 🐛(frontend) fix toolbar blocknote hidden
- 🐛(frontend) fix application crashes when using
GTranslate and zoom
- 🐛(frontend) fix emoji pdf not matching
- 🐛(backend) fix UnorderedObjectListWarning for
DocumentAskForAccess viewset
We bumped the Blocknote editor to version 0.51.4,
which includes several bug fixes and improvements,
particularly 1 bug fix about emoji on the side bar.
The feature "doc-editor" start to be quiete big,
and the comments related code is quite a lot.
We move all the comments related code to a new
folder "doc-comments" to make the code more
organized and easier to maintain.
The header could hide the formatting bar of the
blocknote editor. This commit improve the z-index
of the header to ensure that the formatting bar
is always visible.
Error boundary page is used when an error occurs
in the application, this page can have states still
set, causing side effects depend the component that
throw the error. In this case, the left panel is
still loaded and try to load the tree, but the
provider is not set, causing a crash error inside
the error boundary page.
We don't need the left panel in the error boundary
page, so we can just not load it to avoid this issue.
The emoji algorithm to find the emoji was not totally
correct, it could choose a bad family of emojis.
The first part of the emoji "code" is
what should be used first to find the "family" of the
emoji, we can then try to find the exact match in
that specific family.
Add wrapper to catch focus.
Benefit:
- The tooltip will show exactly in the middle of
the title input text
- When the user is click on the right side of the
doc title, the title get the focus and the cursor,
which is the expected behavior when editing a title.
We are modifying the doc header, we are moving elements
to a floating bar. In this case, we are moving the
doc toolbox to the floating bar.
We adapted the toolbox with the updated actions.
We update the doc header to use all empty space.
We moved the emoji part from the toolbox directly
to the header.
We remove the AlertPublic component and replace it
with a new visibility status in the DocHeaderInfo
component. This change simplifies the user interface
by providing a more direct indication of the
document's visibility status, whether it's public
or internal, without needing an additional alert
component.
We could still have 400 error when importing
".markdown", because the backend only accepts ".md"
for markdown files. We added another guard on
the extensions to prevent this error and make sure
the user send acceptable formats.
- improve semantics and aria attributes
- gives the focus to the panel when open or switching panels
- gives back the focus to the trigger element when closing the panel
On tablet, the place is too tight to have both
panels open at the same time. We have a fine-grained
control of the panel visibility to display panel
depend users interactions and responsive breakpoints.
Most of the application was switching to mobile
view at the medium breakpoint.
Medium breakpoint let enough place to display
most of the application features and it is more
user friendly to switch to mobile view at the
small breakpoint.
We are switching to mobile view at the small breakpoint
to give more place to the application features
and to be more user friendly.
Add comment side panel to the right panel.
We will be able to manage the threads of the
document and see the content of the comments in
a side panel.
The advantage of this approach is that we will
be able to:
- see the comments that have been removed because
of deleted text
- see the resolved comments
- see the unresolved comments
We need to include resolved threads in the queryset
of the ThreadViewSet, otherwise they won't be
included in the list of threads and we will not be
able to list resolved threads in the side panel.
A patch about tabindex was added to the codebase
to fix an accessibility issue. However, after
upgrading Cunningham, the issue seems to have been
resolved and the patch is no longer necessary.
Therefore, we are removing the patch to keep
our code clean and maintainable.
@hocuspocus made a major release, we need to do
a substantial refactor to be compatible with it.
This PR downgrades to the previous major release,
which is still compatible with our codebase,
until we have time to do the necessary refactor.
We observe some cases where the frontend and
backend versions can get out of sync, which can
cause issues.
To mitigate this, we want to implement a mechanism
that detects when the frontend and backend
versions are mismatched and triggers a
reload of the application to ensure they are in sync.
When a user change to another tab, after a delay of "inactivity"
we disconnect the user from the collaboration server.
When the user come back we reconnect to the server
again. It will reduce the connection to the collaboration
server and reduce outburst during reconnection during
a ingress ngnix restart.
When we load the comments we have to notify the
subscribers of the DocsThreadStore. This generates
a Yjs transaction that is currently treated as a
user-initiated content change that will trigger
a patch request when the doc will try to save.
We now update the transaction origin when we notify
the subscribers so that we can reliably identify
and ignore those transactions in the useSaveDoc
hook.
To improve security we sanitize the color used
for collaboration presence to ensure it's a valid
hex color. If the color is not valid, we generate
a random color instead. This prevents potential
issues with invalid color values being used in the UI.
We added a missing link in the onboarding step
description to direct users to ready-made templates f
or common use cases. This enhancement aims to improve
the user experience by providing easy access to
resources that can help users get started quickly
and customize their workflow efficiently.
Content is longer to load than other parts of the
editor because of the connection with websocket
to the collaboration server. To improve the user
experience, we add a skeleton on the content part
of the editor while the others parts are displayed.
The last version of UIKit has a bug that causes
the dnd tree to break. It is due to some
pointers event that are not properly handled.
We remove the pointer event in waiting for the
fix to be released.
We upgraded to mjml v5, which has some breaking changes.
By default the ubuntu font was loaded, with google
fonts, that is not GDPR compliant.
We switched to Inter, and uses fonts.bunny.net to
load the font, which is GDPR compliant.
The scroll of the table of content was calculated
on mount of the component, so when the editor height change,
the scroll of the table of content was not updated.
We added a observer to observe the height of the
editor and update the scroll of the table of
content when the height change.
We updated i18next to v26, which includes some
breaking changes. This commit adapts our types
to the new version, ensuring compatibility and
proper type checking throughout our codebase.
We upgraded Cunningham and ui-kit dependencies, which
introduced some breaking changes. This commit adapts
our code to these changes, ensuring compatibility
with the new versions of these libraries.
We upgraded djangorestframework, which includes a
change in the translation system. This change caused
the e2e test for the app impress language
to fail.
To fix this, we updated the test to work
with the new translation system.
We added a guard on the uuid format in our frontend
requests, this guard broke some of our e2e tests
because the mocked document id was not a valid uuid.
We improve overall SW requests fallback.
If the plugin fails we try to refetch the request
without the plugin modifications, meaning the
status code will be more in correlation with the
actual server response and not the plugin error.
We improved as well the cache fallback, if
the cache failed because a store was missing,
we delete the DB to be sure to have a DB in
correlation with the current app version.
We have added offline support for content.
When the content update fails, we save the new
content in the cache, and we will sync it later
with the SyncManager.
We cache the content of API responses in the service
worker, so that we can serve them when the user
is offline.
We also cache the ETag and Last-Modified headers,
so that we can make conditional requests to the
server and avoid downloading the content again if
it hasn't changed.
To improve the performance of loading document content,
we have implemented a dedicated endpoint for
fetching document content. This allows us to load
the document metadata and content separately.
We updated the different components to utilize
this new endpoint, ensuring that the document content is
fetched and updated correctly.
When no elements are present in the doc share
modals, a horizontal line is still displayed.
This PR removes this line when there are no elements
to display.
The app was doing a shallow reload when user
was coming from another tab and the user data
was staled. We stop to block the app during the
loading state, depend the response the app
will manage correctly its states.
When switching between a interlinking search to a
interlinking link, we could lose the position of
the interlinking. The interlinking was added at
the beginning of the document or where the cursor was.
We refactorize the interlinking to be only one type
of inline content, by doing so we do not lose the position
of the interlinking because we don't remove the interlinking search
to add the interlinking link, we just update the
interlinking search to be a interlinking link.
Depend the parent block, the modal search may be
clipped by the parent block. We now use the portal
to render the modal search, which will not be
affected by the parent block's clipping.
The Crisp button is very intrusive, it often overlaps
with element of the app.
We now show the Crisp modal
only when the user clicks on the "Get Support"
button in the help menu.
When multiple tabs were opened and a 401 error occurred,
the user was redirected to the login page, then
after login, the user was redirected to the page
where the last 401 error occurred.
We improved this behavior by saving the url per tab,
and after login, the user is redirected to the
last url of the current tab.
We had to maintains 2 jobs, test-e2e-chromium and
test-e2e-other-browser, in the impress-frontend
workflow.
By factorising the E2E tests into a separate
workflow, we can now maintain only one job for
each browser, which is much simpler and easier
to maintain.
We got cases where the last-run is empty, but the
last-failed flag is set to true. If that happens,
the workflow will fail because the last-run is empty.
We now check if the last-run is filled before
setting the last-failed flag.
When a media file is uploaded, the application
checks its status every 5 seconds until it
becomes 'ready'. If the user navigates away from
the page before the media is ready, the
application should stop checking the status to
avoid unnecessary API calls. This can be achieved
by using an AbortController to signal when the
component is unmounted, allowing the loop to
exit gracefully.
Added:
- 🚸(frontend) allow opening "@page" links with
ctrl/command/middle-mouse click
- ✅ E2E - Any instance friendly
Changed:
- ♻️(backend) do not paginate threads list response
- 💄(frontend) Use StyledLink for sub doc tree
Fixed:
- 🐛(frontend) Fix drop cursor creating columns
- 🐛 Fixed side effects between comments and versioning
We fixed 2 side effects between comments and versionning:
- When going from a version, it was not possible
to add a comment anymore. This was due to the fact
that the versionning was resetting the comment store.
- When restoring a version, we now reset the comment
store to avoid having comments that are not relevant
anymore.
Anthony LC