electron-rare/docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: electron-rare/docs:helm/demo-dev
Branches Tags
electron-rare/docs:main electron-rare/docs:improve-indexing-command electron-rare/docs:e2e/test-on-instance electron-rare/docs:renovate/pypi-requests-vulnerability electron-rare/docs:fix/revelant-pages-titles electron-rare/docs:feat/e2ee-without-e2esdk electron-rare/docs:i18n/add-languages-greek electron-rare/docs:fix/docs-grid-aria-list-pattrn electron-rare/docs:gh-pages electron-rare/docs:config/increase-memory-nodejs electron-rare/docs:fix/html-export-empty-heading electron-rare/docs:fix/docs-grid-aria-list-pattern electron-rare/docs:fix/error-page-translation electron-rare/docs:fix/voice-over-rejected electron-rare/docs:sbl-create-doc-accesses-before-content electron-rare/docs:sbl-fix-delete-document-request-conflict electron-rare/docs:fix/separator-keyboard-interact electron-rare/docs:sbl-search-public-docs electron-rare/docs:fix-search-not-authenticated electron-rare/docs:fix/search-modal-a11y electron-rare/docs:refacto/sub-docs-search electron-rare/docs:fix/shortcuts-vocalized electron-rare/docs:search-feature-flags-2 electron-rare/docs:helm-psycopg-pool electron-rare/docs:renovate/pypi-pyjwt-vulnerability electron-rare/docs:fix/search-modal-name electron-rare/docs:CI/improve-workflow-docker-publish electron-rare/docs:fix/cve-minimatch electron-rare/docs:search-feature-flags-c electron-rare/docs:change/rustfs electron-rare/docs:add/clean-command electron-rare/docs:sbl/user-reconciliation electron-rare/docs:feat/e2ee electron-rare/docs:fix/a11y-modal-focus-and-tree-actions electron-rare/docs:refacto/blocknote-ai electron-rare/docs:fix/access-docs-focus electron-rare/docs:sbl-proximity-search-fix electron-rare/docs:fix/modal-save-firefox electron-rare/docs:feature/docx-import-remastered electron-rare/docs:feature/doc-import.backup electron-rare/docs:responsive/formatting-toolbar-fixed electron-rare/docs:sbl-publiccode-fix electron-rare/docs:fix/tables-deletion electron-rare/docs:fix/a11y-axe-contrast-errors electron-rare/docs:feat/e2e-export-reference-pdf electron-rare/docs:renovate/min-age electron-rare/docs:pr/renovate/1596 electron-rare/docs:ui/fulltext-search electron-rare/docs:feature/doc-import-helm electron-rare/docs:feature/overwrite-docs electron-rare/docs:endpoint-new electron-rare/docs:fix/CI-space-left electron-rare/docs:indexer/markdown_content electron-rare/docs:index-to-search-batch-task electron-rare/docs:feature/custom-frontend-components electron-rare/docs:index-to-search-documentation electron-rare/docs:documentation/export-templates electron-rare/docs:release/3.8.21 electron-rare/docs:release/3.8.2 electron-rare/docs:feat/static-certificate-path electron-rare/docs:fix/1221-emoji-dropdown-idx electron-rare/docs:index-to-search-compose electron-rare/docs:index-to-search-nosignal electron-rare/docs:pr/dakshesh14/1293 electron-rare/docs:fix/accessibility-focus-options-menu electron-rare/docs:fix/tree-keyboard-expand-children electron-rare/docs:fix/duplicate-sub-page-read-access electron-rare/docs:improve-contributing-md electron-rare/docs:fix/1160-sub-doc-access electron-rare/docs:feat/comments electron-rare/docs:packages/common-package electron-rare/docs:anct electron-rare/docs:fix/1136-heading-order electron-rare/docs:feat/leave-doc electron-rare/docs:feat/add-duplicate-action-tree electron-rare/docs:feature/doc-dnd-save electron-rare/docs:fix-link_reach_role_and_add_ancestors_info electron-rare/docs:feat/no-websocket electron-rare/docs:pr/Comete99/1036 electron-rare/docs:hack2025/tldraw electron-rare/docs:hack2025/fix-custom-block electron-rare/docs:do-not-merge/hackathon-2025 electron-rare/docs:hack2025/add-endpoint-content electron-rare/docs:buildpack electron-rare/docs:track-posthog electron-rare/docs:poc-silent-login electron-rare/docs:feat/file-status-check electron-rare/docs:fix/docker-vulnerability electron-rare/docs:qbey/add-resource-server-mode electron-rare/docs:pr/Zorin95670/949 electron-rare/docs:fix/typo-correction electron-rare/docs:documentation-env-fixes electron-rare/docs:rename-documentation-folder electron-rare/docs:make-title-search-case-insensitive electron-rare/docs:documentation/signing-commit electron-rare/docs:fix/owner-access-check electron-rare/docs:poc/install-front-excluding-agpl electron-rare/docs:feature/cursor_rules electron-rare/docs:fix/782-ai-feature-flag electron-rare/docs:release/v2.7.0 electron-rare/docs:feature/doc-dnd-with-react-query electron-rare/docs:changelog-in-releases electron-rare/docs:qbey/oidc-token-storage-and-refresh electron-rare/docs:feature/add-page-tree electron-rare/docs:media-security electron-rare/docs:accessibility-clean electron-rare/docs:fix/create-doc-race-test electron-rare/docs:readme-update electron-rare/docs:feature/collab-long-polling electron-rare/docs:accessibility electron-rare/docs:hackathon/11-02 electron-rare/docs:test/other-type-cursor electron-rare/docs:feature/blocknote-ai electron-rare/docs:issue/improve-export-spacings electron-rare/docs:pr/AntoLC/611 electron-rare/docs:feature/custom-blocks electron-rare/docs:feautre/new-home electron-rare/docs:compose-production electron-rare/docs:feature/editor-multi-columns electron-rare/docs:bug/fix-flacky-test electron-rare/docs:feature/add-new-home electron-rare/docs:fix-warning electron-rare/docs:helm/production-example electron-rare/docs:fix/create-demo-unflushed electron-rare/docs:use-internal-llm electron-rare/docs:new-ui/fix-ui electron-rare/docs:new-ui/invitation-modal-invite electron-rare/docs:feature/crisp-integration electron-rare/docs:new-ui/new-doc-header electron-rare/docs:add-favorite-documents electron-rare/docs:new-ui/doclist electron-rare/docs:feature/add-sentry electron-rare/docs:new-ui/new-layout electron-rare/docs:helm/demo-dev electron-rare/docs:main-opendesk electron-rare/docs:feature/add-alert-block electron-rare/docs:feature/localization electron-rare/docs:converter electron-rare/docs:docs-ia-env electron-rare/docs:install-p-py electron-rare/docs:feature/text-to-yjsbase64 electron-rare/docs:sccon electron-rare/docs:feature/back-read-yjs-doc electron-rare/docs:feature/ai-blocknote-back electron-rare/docs:feat/opendesk-theme electron-rare/docs:e2e-hackathon-2024 electron-rare/docs:e2ee-hackathon-2024 electron-rare/docs:add-is-e2ee-flag electron-rare/docs:feature/public-editable
electron-rare/docs:v4.8.4-preprod electron-rare/docs:v4.8.4 electron-rare/docs:v4.8.3 electron-rare/docs:v4.8.3-preprod electron-rare/docs:v4.8.2-preprod electron-rare/docs:v4.8.2 electron-rare/docs:v4.8.1-preprod electron-rare/docs:v4.8.1 electron-rare/docs:v4.8.0-psycopgpool electron-rare/docs:v4.8.0-preprod electron-rare/docs:v4.8.0 electron-rare/docs:v4.7.0-preprod electron-rare/docs:v4.7.0 electron-rare/docs:v4.6.0 electron-rare/docs:v4.6.0-preprod electron-rare/docs:v4.5.0-preprod electron-rare/docs:v4.5.0 electron-rare/docs:v4.4.0-preprod electron-rare/docs:v4.4.0 electron-rare/docs:v4.3.0-preprod electron-rare/docs:v4.3.0 electron-rare/docs:v4.2.0-preprod electron-rare/docs:v4.2.0 electron-rare/docs:v4.1.0-preprod electron-rare/docs:v4.1.0 electron-rare/docs:v4.0.0-preprod electron-rare/docs:v4.0.0 electron-rare/docs:v3.10.0-preprod electron-rare/docs:v3.10.0 electron-rare/docs:v3.9.0-preprod electron-rare/docs:v3.9.0 electron-rare/docs:v3.8.21 electron-rare/docs:v3.8.21-preprod electron-rare/docs:v3.8.2-preprod electron-rare/docs:v3.8.2 electron-rare/docs:v3.8.1-preprod electron-rare/docs:v3.8.1 electron-rare/docs:v3.8.0-preprod electron-rare/docs:v3.8.0 electron-rare/docs:v3.7.0-preprod electron-rare/docs:v3.7.0 electron-rare/docs:v3.6.0 electron-rare/docs:v3.6.0-preprod electron-rare/docs:v3.5.0-preprod electron-rare/docs:v3.5.0 electron-rare/docs:v3.4.2-preprod electron-rare/docs:v.3.4.2 electron-rare/docs:v3.4.2 electron-rare/docs:v3.4.1-preprod electron-rare/docs:v3.4.1 electron-rare/docs:v3.4.0 electron-rare/docs:v3.4.0-preprod electron-rare/docs:v3.3.0-preprod electron-rare/docs:v3.3.0 electron-rare/docs:v3.2.1 electron-rare/docs:v3.2.1-preprod electron-rare/docs:v3.2.0-preprod electron-rare/docs:v3.2.0 electron-rare/docs:v3.1.0 electron-rare/docs:v3.1.0-preprod electron-rare/docs:v3.0.0 electron-rare/docs:v3.0.0-preprod electron-rare/docs:v2.7.0-preprod electron-rare/docs:v2.6.0 electron-rare/docs:v2.6.0-preprod electron-rare/docs:v2.5.0 electron-rare/docs:v2.5.0-preprod electron-rare/docs:v2.4.0 electron-rare/docs:v2.4.0-preprod electron-rare/docs:v2.3.0 electron-rare/docs:v2.3.0-preprod electron-rare/docs:v2.2.0 electron-rare/docs:v2.2.0-preprod electron-rare/docs:v2.1.0 electron-rare/docs:v2.1.0-preprod electron-rare/docs:v2.0.1 electron-rare/docs:v2.0.1-preprod electron-rare/docs:v2.0.0 electron-rare/docs:v2.0.0-preprod electron-rare/docs:docs-0.0.1-debug electron-rare/docs:docs-0.0.1 electron-rare/docs:v1.10.0 electron-rare/docs:v1.10.0-preprod electron-rare/docs:v1.9.0 electron-rare/docs:v1.9.0-preprod electron-rare/docs:v1.8.2 electron-rare/docs:v1.8.2-preprod electron-rare/docs:v1.8.1 electron-rare/docs:v1.8.1-preprod electron-rare/docs:v1.8.0 electron-rare/docs:v1.8.0-preprod electron-rare/docs:v1.7.0 electron-rare/docs:v1.7.0-preprod electron-rare/docs:preprod electron-rare/docs:vdemo electron-rare/docs:production electron-rare/docs:v1.6.0 electron-rare/docs:v1.6.0-preprod electron-rare/docs:v-demo electron-rare/docs:v1.5.1-preprod electron-rare/docs:v1.5.1 electron-rare/docs:v1.5.0 electron-rare/docs:v1.5.0-preprod electron-rare/docs:v1.4.0 electron-rare/docs:v1.4.0-preprod electron-rare/docs:v1.3.0 electron-rare/docs:v1.3.0-preprod electron-rare/docs:v1.2.1 electron-rare/docs:v1.2.0 electron-rare/docs:v1.2.0-preprod electron-rare/docs:v1.1.0 electron-rare/docs:v1.1.0-preprod electron-rare/docs:v1.0.0 electron-rare/docs:v1.0.0-preprod electron-rare/docs:v0.1.0-coming-soon electron-rare/docs:v0.1.0-demo electron-rare/docs:v0.1.0 electron-rare/docs:v0.1.0-test
...
pull from: electron-rare/docs:new-ui/invitation-modal-invite
Branches Tags
electron-rare/docs:improve-indexing-command electron-rare/docs:e2e/test-on-instance electron-rare/docs:renovate/pypi-requests-vulnerability electron-rare/docs:fix/revelant-pages-titles electron-rare/docs:main electron-rare/docs:feat/e2ee-without-e2esdk electron-rare/docs:i18n/add-languages-greek electron-rare/docs:fix/docs-grid-aria-list-pattrn electron-rare/docs:gh-pages electron-rare/docs:config/increase-memory-nodejs electron-rare/docs:fix/html-export-empty-heading electron-rare/docs:fix/docs-grid-aria-list-pattern electron-rare/docs:fix/error-page-translation electron-rare/docs:fix/voice-over-rejected electron-rare/docs:sbl-create-doc-accesses-before-content electron-rare/docs:sbl-fix-delete-document-request-conflict electron-rare/docs:fix/separator-keyboard-interact electron-rare/docs:sbl-search-public-docs electron-rare/docs:fix-search-not-authenticated electron-rare/docs:fix/search-modal-a11y electron-rare/docs:refacto/sub-docs-search electron-rare/docs:fix/shortcuts-vocalized electron-rare/docs:search-feature-flags-2 electron-rare/docs:helm-psycopg-pool electron-rare/docs:renovate/pypi-pyjwt-vulnerability electron-rare/docs:fix/search-modal-name electron-rare/docs:CI/improve-workflow-docker-publish electron-rare/docs:fix/cve-minimatch electron-rare/docs:search-feature-flags-c electron-rare/docs:change/rustfs electron-rare/docs:add/clean-command electron-rare/docs:sbl/user-reconciliation electron-rare/docs:feat/e2ee electron-rare/docs:fix/a11y-modal-focus-and-tree-actions electron-rare/docs:refacto/blocknote-ai electron-rare/docs:fix/access-docs-focus electron-rare/docs:sbl-proximity-search-fix electron-rare/docs:fix/modal-save-firefox electron-rare/docs:feature/docx-import-remastered electron-rare/docs:feature/doc-import.backup electron-rare/docs:responsive/formatting-toolbar-fixed electron-rare/docs:sbl-publiccode-fix electron-rare/docs:fix/tables-deletion electron-rare/docs:fix/a11y-axe-contrast-errors electron-rare/docs:feat/e2e-export-reference-pdf electron-rare/docs:renovate/min-age electron-rare/docs:pr/renovate/1596 electron-rare/docs:ui/fulltext-search electron-rare/docs:feature/doc-import-helm electron-rare/docs:feature/overwrite-docs electron-rare/docs:endpoint-new electron-rare/docs:fix/CI-space-left electron-rare/docs:indexer/markdown_content electron-rare/docs:index-to-search-batch-task electron-rare/docs:feature/custom-frontend-components electron-rare/docs:index-to-search-documentation electron-rare/docs:documentation/export-templates electron-rare/docs:release/3.8.21 electron-rare/docs:release/3.8.2 electron-rare/docs:feat/static-certificate-path electron-rare/docs:fix/1221-emoji-dropdown-idx electron-rare/docs:index-to-search-compose electron-rare/docs:index-to-search-nosignal electron-rare/docs:pr/dakshesh14/1293 electron-rare/docs:fix/accessibility-focus-options-menu electron-rare/docs:fix/tree-keyboard-expand-children electron-rare/docs:fix/duplicate-sub-page-read-access electron-rare/docs:improve-contributing-md electron-rare/docs:fix/1160-sub-doc-access electron-rare/docs:feat/comments electron-rare/docs:packages/common-package electron-rare/docs:anct electron-rare/docs:fix/1136-heading-order electron-rare/docs:feat/leave-doc electron-rare/docs:feat/add-duplicate-action-tree electron-rare/docs:feature/doc-dnd-save electron-rare/docs:fix-link_reach_role_and_add_ancestors_info electron-rare/docs:feat/no-websocket electron-rare/docs:pr/Comete99/1036 electron-rare/docs:hack2025/tldraw electron-rare/docs:hack2025/fix-custom-block electron-rare/docs:do-not-merge/hackathon-2025 electron-rare/docs:hack2025/add-endpoint-content electron-rare/docs:buildpack electron-rare/docs:track-posthog electron-rare/docs:poc-silent-login electron-rare/docs:feat/file-status-check electron-rare/docs:fix/docker-vulnerability electron-rare/docs:qbey/add-resource-server-mode electron-rare/docs:pr/Zorin95670/949 electron-rare/docs:fix/typo-correction electron-rare/docs:documentation-env-fixes electron-rare/docs:rename-documentation-folder electron-rare/docs:make-title-search-case-insensitive electron-rare/docs:documentation/signing-commit electron-rare/docs:fix/owner-access-check electron-rare/docs:poc/install-front-excluding-agpl electron-rare/docs:feature/cursor_rules electron-rare/docs:fix/782-ai-feature-flag electron-rare/docs:release/v2.7.0 electron-rare/docs:feature/doc-dnd-with-react-query electron-rare/docs:changelog-in-releases electron-rare/docs:qbey/oidc-token-storage-and-refresh electron-rare/docs:feature/add-page-tree electron-rare/docs:media-security electron-rare/docs:accessibility-clean electron-rare/docs:fix/create-doc-race-test electron-rare/docs:readme-update electron-rare/docs:feature/collab-long-polling electron-rare/docs:accessibility electron-rare/docs:hackathon/11-02 electron-rare/docs:test/other-type-cursor electron-rare/docs:feature/blocknote-ai electron-rare/docs:issue/improve-export-spacings electron-rare/docs:pr/AntoLC/611 electron-rare/docs:feature/custom-blocks electron-rare/docs:feautre/new-home electron-rare/docs:compose-production electron-rare/docs:feature/editor-multi-columns electron-rare/docs:bug/fix-flacky-test electron-rare/docs:feature/add-new-home electron-rare/docs:fix-warning electron-rare/docs:helm/production-example electron-rare/docs:fix/create-demo-unflushed electron-rare/docs:use-internal-llm electron-rare/docs:new-ui/fix-ui electron-rare/docs:new-ui/invitation-modal-invite electron-rare/docs:feature/crisp-integration electron-rare/docs:new-ui/new-doc-header electron-rare/docs:add-favorite-documents electron-rare/docs:new-ui/doclist electron-rare/docs:feature/add-sentry electron-rare/docs:new-ui/new-layout electron-rare/docs:helm/demo-dev electron-rare/docs:main-opendesk electron-rare/docs:feature/add-alert-block electron-rare/docs:feature/localization electron-rare/docs:converter electron-rare/docs:docs-ia-env electron-rare/docs:install-p-py electron-rare/docs:feature/text-to-yjsbase64 electron-rare/docs:sccon electron-rare/docs:feature/back-read-yjs-doc electron-rare/docs:feature/ai-blocknote-back electron-rare/docs:feat/opendesk-theme electron-rare/docs:e2e-hackathon-2024 electron-rare/docs:e2ee-hackathon-2024 electron-rare/docs:add-is-e2ee-flag electron-rare/docs:feature/public-editable
electron-rare/docs:v4.8.4-preprod electron-rare/docs:v4.8.4 electron-rare/docs:v4.8.3 electron-rare/docs:v4.8.3-preprod electron-rare/docs:v4.8.2-preprod electron-rare/docs:v4.8.2 electron-rare/docs:v4.8.1-preprod electron-rare/docs:v4.8.1 electron-rare/docs:v4.8.0-psycopgpool electron-rare/docs:v4.8.0-preprod electron-rare/docs:v4.8.0 electron-rare/docs:v4.7.0-preprod electron-rare/docs:v4.7.0 electron-rare/docs:v4.6.0 electron-rare/docs:v4.6.0-preprod electron-rare/docs:v4.5.0-preprod electron-rare/docs:v4.5.0 electron-rare/docs:v4.4.0-preprod electron-rare/docs:v4.4.0 electron-rare/docs:v4.3.0-preprod electron-rare/docs:v4.3.0 electron-rare/docs:v4.2.0-preprod electron-rare/docs:v4.2.0 electron-rare/docs:v4.1.0-preprod electron-rare/docs:v4.1.0 electron-rare/docs:v4.0.0-preprod electron-rare/docs:v4.0.0 electron-rare/docs:v3.10.0-preprod electron-rare/docs:v3.10.0 electron-rare/docs:v3.9.0-preprod electron-rare/docs:v3.9.0 electron-rare/docs:v3.8.21 electron-rare/docs:v3.8.21-preprod electron-rare/docs:v3.8.2-preprod electron-rare/docs:v3.8.2 electron-rare/docs:v3.8.1-preprod electron-rare/docs:v3.8.1 electron-rare/docs:v3.8.0-preprod electron-rare/docs:v3.8.0 electron-rare/docs:v3.7.0-preprod electron-rare/docs:v3.7.0 electron-rare/docs:v3.6.0 electron-rare/docs:v3.6.0-preprod electron-rare/docs:v3.5.0-preprod electron-rare/docs:v3.5.0 electron-rare/docs:v3.4.2-preprod electron-rare/docs:v.3.4.2 electron-rare/docs:v3.4.2 electron-rare/docs:v3.4.1-preprod electron-rare/docs:v3.4.1 electron-rare/docs:v3.4.0 electron-rare/docs:v3.4.0-preprod electron-rare/docs:v3.3.0-preprod electron-rare/docs:v3.3.0 electron-rare/docs:v3.2.1 electron-rare/docs:v3.2.1-preprod electron-rare/docs:v3.2.0-preprod electron-rare/docs:v3.2.0 electron-rare/docs:v3.1.0 electron-rare/docs:v3.1.0-preprod electron-rare/docs:v3.0.0 electron-rare/docs:v3.0.0-preprod electron-rare/docs:v2.7.0-preprod electron-rare/docs:v2.6.0 electron-rare/docs:v2.6.0-preprod electron-rare/docs:v2.5.0 electron-rare/docs:v2.5.0-preprod electron-rare/docs:v2.4.0 electron-rare/docs:v2.4.0-preprod electron-rare/docs:v2.3.0 electron-rare/docs:v2.3.0-preprod electron-rare/docs:v2.2.0 electron-rare/docs:v2.2.0-preprod electron-rare/docs:v2.1.0 electron-rare/docs:v2.1.0-preprod electron-rare/docs:v2.0.1 electron-rare/docs:v2.0.1-preprod electron-rare/docs:v2.0.0 electron-rare/docs:v2.0.0-preprod electron-rare/docs:docs-0.0.1-debug electron-rare/docs:docs-0.0.1 electron-rare/docs:v1.10.0 electron-rare/docs:v1.10.0-preprod electron-rare/docs:v1.9.0 electron-rare/docs:v1.9.0-preprod electron-rare/docs:v1.8.2 electron-rare/docs:v1.8.2-preprod electron-rare/docs:v1.8.1 electron-rare/docs:v1.8.1-preprod electron-rare/docs:v1.8.0 electron-rare/docs:v1.8.0-preprod electron-rare/docs:v1.7.0 electron-rare/docs:v1.7.0-preprod electron-rare/docs:preprod electron-rare/docs:vdemo electron-rare/docs:production electron-rare/docs:v1.6.0 electron-rare/docs:v1.6.0-preprod electron-rare/docs:v-demo electron-rare/docs:v1.5.1-preprod electron-rare/docs:v1.5.1 electron-rare/docs:v1.5.0 electron-rare/docs:v1.5.0-preprod electron-rare/docs:v1.4.0 electron-rare/docs:v1.4.0-preprod electron-rare/docs:v1.3.0 electron-rare/docs:v1.3.0-preprod electron-rare/docs:v1.2.1 electron-rare/docs:v1.2.0 electron-rare/docs:v1.2.0-preprod electron-rare/docs:v1.1.0 electron-rare/docs:v1.1.0-preprod electron-rare/docs:v1.0.0 electron-rare/docs:v1.0.0-preprod electron-rare/docs:v0.1.0-coming-soon electron-rare/docs:v0.1.0-demo electron-rare/docs:v0.1.0 electron-rare/docs:v0.1.0-test

58 Commits
helm/demo-dev ... new-ui/invitation-modal-invite

Author SHA1 Message Date
Nathan Panchout c64e4ea4e2 wip 2024-11-28 20:53:28 +01:00
Nathan Panchout 5d92c481eb wip 2024-11-28 20:30:18 +01:00
Nathan Panchout dc80cd3a02 wip 2024-11-27 15:51:41 +01:00
Nathan Panchout c928a08fc5 wip 2024-11-27 13:18:49 +01:00
Nathan Panchout bc8fd309ed 💄(frontend) update doc export modal 
In the new interface, the export modal changes a little.

- We put the buttons on the right
- We remove the alert
- We transform the radio into select
 2024-11-27 11:22:52 +01:00
Nathan Panchout 49d2b749dd ✅(frontend) adapt all tests related to the new header 
Since we no longer use an editable div but an input, we must
modify the tests accordingly
 2024-11-27 11:22:52 +01:00
Nathan Panchout fe6671764a ✨(frontend) update doc header ui 
Modification of the header style to be consistent with the new UI :
- We replace the option menu with the DropdownMenu component
- We add a dowload button
- We put an input in place of an editable div.
 2024-11-27 11:22:52 +01:00
Nathan Panchout ca421944dd 🔥(frontend) remove files from bad rebase 
We had already deleted this file but it must have reappeared
with a bad rebase
 2024-11-27 11:22:52 +01:00
Nathan Panchout a1f20ec817 💄(frontend) add dropdown option for DocGridItem 
Implement dropdown menu with functionality to delete a document
from the list
 2024-11-27 11:03:51 +01:00
Nathan Panchout 5515951da0 ✅(frontend) update tests to align with the new interface changes 
- Adjust selectors and assertions to reflect updates in the UI layout and
design.
- Ensure all modified tests maintain compatibility with the updated structure.
- Fix any broken test cases caused by the redesign.
 2024-11-27 11:03:51 +01:00
Nathan Panchout 80de80de30 💄(frontend) update DocsGrid component 
Implement the new version of  the DocsGrid  component
 2024-11-27 11:03:51 +01:00
Nathan Panchout 5a178dd96b 🔧(frontend) update cunningham configuration 
- update primary colors,and spacing.
- update tertiary button
 2024-11-27 11:03:51 +01:00
Nathan Panchout 2ef1d371ae ➕(frontend) add react-intersection-observer package 
- Install `react-intersection-observer` to manage element visibility detection.
- Enables features like lazy loading, animations on scroll, and triggering
events when elements appear in the viewport.
 2024-11-27 11:03:51 +01:00
Nathan Panchout 9f9e35a047 💄(frontend) updating the header and leftpanel for responsive 
Previously we added a left panel. We now need to adapt the layout
so that it becomesresponsive.

We therefore add a burger menu on the left on mobile which,
when clicked, deploys the left-panel over all the content.
 2024-11-27 11:03:51 +01:00
Nathan Panchout 58564f8d25 🔥(frontend) remove unused components due to new interface 
Deleted two components that were no longer needed following the
implementation of the new interface. This cleanup helps streamline
he codebase and avoid unnecessary maintenance.
 2024-11-27 11:03:51 +01:00
Nathan Panchout 79ca65ef85 💄(frontend) updating the header and leftpanel for responsive 
Previously we added a left panel. We now need to adapt the layout
so that it becomesresponsive.

We therefore add a burger menu on the left on mobile which,
when clicked, deploys the left-panel over all the content.
 2024-11-27 11:03:51 +01:00
Anthony LC ba317db972 build image with main-new-ui branch 2024-11-27 11:03:51 +01:00
Nathan Panchout 92081b0dde ✅(frontend) update tests 
Some minor changes have been integrated into the list of documents.
The tests must therefore be adapted accordingly.
 2024-11-27 11:03:51 +01:00
Nathan Panchout 4fd74b6cf1 💄(frontend) add left panel 
In the new interface there is a new left panel. We implement it and add it
to the MainLayout
 2024-11-27 11:03:51 +01:00
Nathan Panchout e5a89111bd 💄(frontend) add cunningham tokens 
In order to use the spaces and grays of the DSFR,
we update the cunningham.ts file
 2024-11-27 11:03:51 +01:00
Nathan Panchout ebd2e4ee87 ✨(frontend) implement new UI 
This branch is a transition branch to gradually merge the new UI.
 2024-11-27 11:03:51 +01:00
Anthony LC 2194301716 🔖(minor) release 1.8.0 
Added:
- 🌐(backend) add german translation
- 🌐(frontend) Add German translation
- ✨(frontend) Add a broadcast store
- ✨(backend) whitelist pod's IP address
- ✨(backend) config endpoint
- ✨(frontend) config endpoint
- ✨(frontend) add sentry
- ✨(frontend) add crisp chatbot

Changed:
- 🚸(backend) improve users similarity search and
sort results
- ♻️(frontend) simplify stores
- ✨(frontend) update $css Box props type to add
styled components RuleSet
- ✅(CI) trivy continue on error

Fixed:
- 🔧(backend) fix logging for docker and make it
configurable by envar
- 🦺(backend) add comma to sub regex
- 🐛(editor) collaborative user tag hidden when
read only
- 🐛(frontend) users have view access when revoked
- 🐛(frontend) fix placeholder editable when double clicks
 2024-11-27 09:47:42 +01:00
Anthony LC 0348894ab8 🐛(frontend) fix rerender title with broadcasting 
The title was not rerendering on other clients
when the title was updated by one client.
This commit fixes the issue.
We set a min width for the title as well, it
will fix the issue with strange behavior when
people were double clicking.
 2024-11-26 18:15:18 +01:00
Anthony LC 9b17d8bea1 🚨(frontend) remove Crisp warning 
Remove the Crisp warning that was being displayed
on the console in our environments.
 2024-11-26 18:15:18 +01:00
Anthony LC 69d6b6f934 ✅(CI) trivy continue on error 
Trivy is extremly flaky,
we need to continue on error to avoid
blocking the pipeline.
We still keep the check, to see if there are any
vulnerabilities, but we don't want to block
the pipeline.
 2024-11-26 11:53:11 +01:00
Anthony LC 6c106374fa ✨(frontend) add crisp chatbot 
Integrate Crisp chatbot for immediate user support access.

This enables real-time interaction, enhancing user experience
by providing quick assistance.
 2024-11-25 17:06:02 +01:00
Anthony LC af039d045d 🔧(backend) add CRISP_WEBSITE_ID setting 
Add setting CRISP_WEBSITE_ID. This setting is
used to configure the Crisp chat widget.
It will be available to the conf endpoint, to
be used by the frontend.
 2024-11-25 17:06:02 +01:00
Anthony LC 4c9caf09ba ⬆️(CI) upgrade upload-artifact@v3 to v4 
Upload artifact v3 is deprecated soon, so we need
to upgrade it to v4.
 2024-11-25 13:16:06 +01:00
Anthony LC 3fd02adbec 💄(frontend) remove Blocknote fix 
A recent upgrade of Blocknote to 0.19.2 fixed
a issue that we were solving. We removed our
fix as it is no longer needed.
 2024-11-25 13:16:06 +01:00
Anthony LC 90dac3cd15 🏷️(frontend) update typescript types 
We updated typescript to 5.7.2.
Some types were deprecated and we had to update them.
 2024-11-25 13:16:06 +01:00
Anthony LC d0307ee6d9 ⬆️(dependencies) update js dependencies 2024-11-25 13:16:06 +01:00
Anthony LC 09d02b7ced 🚚(frontend) move conf api urls to api folder 
Previous refacto let only the api urls in the conf
file, so better to move it to the api folder.
 2024-11-25 09:46:14 +01:00
Anthony LC 56a26d9663 🧪(CI) pass trivy security 
The trivy security blocked the deploiement.
It says that we have a vulnerability because
we are using the cross-spawn@7.0.3 package, but
we are not, we are using the cross-spawn@7.0.6 package.
We will bypass this security check in the docker-hub.yml
file in waiting for another solution.
 2024-11-25 09:46:14 +01:00
Anthony LC 42f809f6d4 ♻️(frontend) get collaboration server url from config endpoint 
We centralized the configuration on the backend
side, it is easier to manage and we can change
the configuration without having to rebuild the
frontend.
We now use the config endpoint to get the collaboration
server url, we refacto to remove the frontend env
occurences and to adapt with the new way to get the
collaboration server url.
 2024-11-25 09:46:14 +01:00
Anthony LC 7d64c82987 ♻️(frontend) get media url from config endpoint 
We centralized the configuration on the backend
side, it is easier to manage and we can change
the configuration without having to rebuild the
frontend.
We now use the config endpoint to get the media url,
we refacto to remove the frontend env occurences
and to adapt with the new way to get the media url.
 2024-11-25 09:46:14 +01:00
Anthony LC 6252227bb6 ♻️(frontend) get theme from config endpoint 
We centralized the configuration on the backend
side, it is easier to manage and we can change
the configuration without having to rebuild the
frontend.
We now use the config endpoint to get the theme,
we refacto to remove the frontend env occurences
and to adapt with the new way to get the theme.
 2024-11-25 09:46:14 +01:00
Anthony LC e9ac393a8f ✨(frontend) add sentry 
In order to monitor the frontend, we are adding
sentry.
 2024-11-25 09:46:14 +01:00
Anthony LC 5b1745f991 ✨(frontend) add config provider 
Add a ConfigProvider to the frontend to provide
configuration to the app.
The configuration is loaded from the config
endpoint, we will use react-query cache capabilities
to store the configuration.
 2024-11-25 09:46:14 +01:00
Anthony LC 0e55bf5c43 🔒️(helm) allow server host and whitelist pod IP for health checks 
In a Kubernetes environment, we need to whitelist the pod's IP address
to allow health checks to pass. This ensures that Kubernetes liveness and
readiness probes can access the application to verify its health.
 2024-11-22 13:01:55 +01:00
Samuel Paccoud - DINUM 9f66f73501 🔧(backend) fix logging for docker and make it configurable by envar 
Logs were not made to the console so it was hard to debug in k8s.
We propose a ready made logging configuration that sends everything
to the console and allow adjusting log levels with environment
variables.
 2024-11-20 11:51:20 +01:00
Samuel Paccoud - DINUM c3da28b07f ⏪️(helm) bring back helm chart 
This is a revert of 1da5a removing actual deployments and keeping
only the dev environment in Tilt.

The clean-up was a bit heavy handed. We should keep the Helm
chart to the development repository and move away only the
deployment configuration.
 2024-11-20 11:51:20 +01:00
Anthony LC b035b96dec ⬆️(CI) bump python version in backend test 
We were testing the backend with python 3.10.0, but
actually the backend was running with python 3.12.6.
We bump the python version in the backend test to match
the running version of the backend.
 2024-11-20 09:51:08 +01:00
Anthony LC 9623ac4141 🩹(backend) get current release from pyproject.toml 
"get_release" was returning NA, we fixed it by
getting the version from pyproject.toml, to do so we
use tomllib
Since tomllib is a native library from Python 3.11,
we bump the required version to 3.11 on the pyproject.toml.
 2024-11-20 09:51:08 +01:00
Anthony LC c8edbd285b 🔧(backend) add FRONTEND_THEME setting 
The frontend need to know the theme to be used,
so we need to add a new setting to the backend,
in order to expose this value to the frontend.
 2024-11-20 09:51:08 +01:00
Anthony LC 016597d5a2 🔧(backend) add COLLABORATION_SERVER_URL setting 
The frontend need to know the collab server url,
so we need to add a new setting to the backend,
in order to expose this value to the frontend.
If the setting is not defined, the frontend current
domain will be used as the base url.
In production this setting do not need to be defined
since we have nginx capturing the ws requests,
but in development we need to define it to target
the collaboration server.
 2024-11-20 09:51:08 +01:00
Anthony LC 52dea8fa2f 🔧(backend) add MEDIA_BASE_URL setting 
The frontend need to know the base url for the
media files, so we need to add a new setting
to the backend, in order to expose this value
to the frontend.
If the setting is not defined, the frontend current
domain will be used as the base url.
In production this setting do not need to be defined
since we have nginx capturing the media requests,
but in development we need to define it to target
the nginx server.
 2024-11-20 09:51:08 +01:00
Anthony LC 0a37a8ea6d ✨(backend) add public endpoint /api/v1.0/config/ 
Add public endpoint /api/v1.0/config/ to
share some public configuration values.
 2024-11-20 09:51:08 +01:00
Anthony LC c1404ef904 ⬆️(dependencies) bump cross-spawn from 7.0.3 to 7.0.6 
Bumps cross-spawn from 7.0.3 to 7.0.6.

---
updated-dependencies:
- dependency-name: cross-spawn
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
 2024-11-20 09:24:34 +01:00
renovate[bot] 2c0fce61df ⬆️(dependencies) update js dependencies 2024-11-18 17:25:16 +01:00
Nathan Panchout bbe9b6b6cf ✨(frontend) add styledCss props to Box component 
In order to facilitate DX and not to use a string in the code for the css.
We add the $styledCss props to the Box component.
This object comes from Styled component
 2024-11-15 10:33:56 +01:00
Anthony LC 23231563c9 💄(frontend) text color on Blocknote code block options 
The options for the code block in the Blocknote
editor was not visible. We changed the text color
to make it visible.
A fix will be made to the code block options in the
next blocknote release.
 2024-11-14 17:36:11 +01:00
Anthony LC d75c8668c5 🚨(frontend) blocknote cast to Dictionnary 
The last Blocknote upgrade (0.19.0) gives us
a warning with the dictionnary typing.
We cast it to the correct type to remove the warning.
 2024-11-14 17:36:11 +01:00
Anthony LC f266232b5a ♻️(frontend) use next/router instead of next/navigation 
The last upgrade of next.js gives a warning
when we were using next/navigation with the
pages router.
This commit fixes this issue.
 2024-11-14 17:36:11 +01:00
Anthony LC a8362e8e88 ⬆️(dependencies) update js dependencies 2024-11-14 17:36:11 +01:00
Anthony LC e4dfae1905 ♻️(frontend) simplify useDocStore 
We moved the editor store to its own store in the previous
commit. This change allow us to simplify useDocStore.
 2024-11-13 15:25:29 +01:00
Anthony LC a09e740648 ♻️(frontend) move editor store to useEditorStore 
Previous changes migrated the editor store to
doc-management, we move it back doc-editor and
simplify it.
 2024-11-13 15:25:29 +01:00
Anthony LC 5ee6a43f08 ✨(frontend) add useBroadcastStore 
Add the useBroadcastStore.
It will give us the ability to easily
broadcast actions to all connected clients.

In this case, we requery the doc to everyone
when a change relative to the doc rights is made.
 2024-11-09 10:21:24 +01:00
Anthony LC 8bd83cbfcd 🚚(frontend) move useDocStore to doc-management 
We want to make more accessible the doc store
to every feature, so we move it to the
doc-management folder.
 2024-11-09 10:21:24 +01:00
186 changed files with 11503 additions and 5538 deletions
Expand all files Collapse all files
.github/workflows/docker-hub.yml
+7
View File
@@ -6,8 +6,12 @@ on:
push:
branches:
- 'main'
- 'main-new-ui'
tags:
- 'v*'
pull_request:
branches:
- 'main'
env:
DOCKER_USER: 1001:127
@@ -52,6 +56,7 @@ jobs:
with:
docker-build-args: '--target backend-production -f Dockerfile'
docker-image-name: 'docker.io/lasuite/impress-backend:${{ github.sha }}'
continue-on-error: true
-
name: Build and push
uses: docker/build-push-action@v6
@@ -102,6 +107,7 @@ jobs:
with:
docker-build-args: '-f src/frontend/Dockerfile --target frontend-production'
docker-image-name: 'docker.io/lasuite/impress-frontend:${{ github.sha }}'
continue-on-error: true
-
name: Build and push
uses: docker/build-push-action@v6
@@ -153,6 +159,7 @@ jobs:
with:
docker-build-args: '-f src/frontend/Dockerfile --target y-provider'
docker-image-name: 'docker.io/lasuite/impress-frontend:${{ github.sha }}'
continue-on-error: true
-
name: Build and push
uses: docker/build-push-action@v6
.github/workflows/helmfile-linter.yaml
+22
View File
@@ -0,0 +1,22 @@
name: Helmfile lint
run-name: Helmfile lint
on:
pull_request:
branches:
- 'main'
jobs:
helmfile-lint:
runs-on: ubuntu-latest
container:
image: ghcr.io/helmfile/helmfile:latest
steps:
-
uses: numerique-gouv/action-helmfile-lint@main
with:
app-id: ${{ secrets.APP_ID }}
age-key: ${{ secrets.SOPS_PRIVATE }}
private-key: ${{ secrets.PRIVATE_KEY }}
helmfile-src: "src/helm"
repositories: "impress,secrets"
.github/workflows/impress-frontend.yml
+2 -2
View File
@@ -99,7 +99,7 @@ jobs:
- name: Run e2e tests
run: cd src/frontend/ && yarn e2e:test --project='chromium'
- uses: actions/upload-artifact@v3
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-chromium-report
@@ -133,7 +133,7 @@ jobs:
- name: Run e2e tests
run: cd src/frontend/ && yarn e2e:test --project=firefox --project=webkit
- uses: actions/upload-artifact@v3
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-other-report
.github/workflows/impress.yml
+4 -2
View File
@@ -107,7 +107,9 @@ jobs:
- name: Install Python
uses: actions/setup-python@v3
with:
python-version: "3.10"
python-version: "3.12.6"
- name: Upgrade pip and setuptools
run: pip install --upgrade pip setuptools
- name: Install development dependencies
run: pip install --user .[dev]
- name: Check code formatting with ruff
@@ -199,7 +201,7 @@ jobs:
- name: Install Python
uses: actions/setup-python@v3
with:
python-version: "3.10"
python-version: "3.12.6"
- name: Install development dependencies
run: pip install --user .[dev]
CHANGELOG.md
+26 -2
View File
@@ -9,19 +9,42 @@ and this project adheres to
## [Unreleased]
## [1.8.0] - 2024-11-25
## Added
- 🌐(backend) add german translation #259
- 🌐(frontend) Add German translation #255
- ✨(frontend) Add a broadcast store #387
- ✨(frontend) WIP: New ui
- 💄(frontend) Add left panel #420
- 💄(frontend) updating the header and leftpanel for responsive #421
- ✨(backend) config endpoint #425
- 💄(frontend) update DocsGrid component #431
- ✨(backend) whitelist pod's IP address #443
- ✨(backend) config endpoint #425
- ✨(frontend) config endpoint #424
- ✨(frontend) add sentry #424
- ✨(frontend) add crisp chatbot #450
- 💄(frontend) update DocsGridOptions component #432
- 💄(frontend) update DocHeader ui #446
## Changed
- 🚸(backend) improve users similarity search and sort results #391
- 🌐(backend) add german translation #259
- ♻️(frontend) simplify stores #402
- ✨(frontend) update $css Box props type to add styled components RuleSet #423
- ✅(CI) trivy continue on error #453
## Fixed
- 🔧(backend) fix logging for docker and make it configurable by envar #427
- 🦺(backend) add comma to sub regex #408
- 🐛(editor) collaborative user tag hidden when read only #385
- 🐛(frontend) users have view access when revoked #387
- 🐛(frontend) fix placeholder editable when double clicks #454
## [1.7.0] - 2024-10-24
@@ -253,7 +276,8 @@ and this project adheres to
- 🚀 Impress, project to manage your documents easily and collaboratively.
[unreleased]: https://github.com/numerique-gouv/impress/compare/v1.7.0...main
[unreleased]: https://github.com/numerique-gouv/impress/compare/v1.8.0...main
[v1.8.0]: https://github.com/numerique-gouv/impress/releases/v1.8.0
[v1.7.0]: https://github.com/numerique-gouv/impress/releases/v1.7.0
[v1.6.0]: https://github.com/numerique-gouv/impress/releases/v1.6.0
[1.5.1]: https://github.com/numerique-gouv/impress/releases/v1.5.1
env.d/development/common.dist
+13
View File
@@ -4,6 +4,12 @@ DJANGO_SECRET_KEY=ThisIsAnExampleKeyForDevPurposeOnly
DJANGO_SETTINGS_MODULE=impress.settings
DJANGO_SUPERUSER_PASSWORD=admin
# Logging
# Set to DEBUG level for dev only
LOGGING_LEVEL_HANDLERS_CONSOLE=INFO
LOGGING_LEVEL_LOGGERS_ROOT=INFO
LOGGING_LEVEL_LOGGERS_APP=INFO
# Python
PYTHONPATH=/app
@@ -21,6 +27,7 @@ STORAGES_STATICFILES_BACKEND=django.contrib.staticfiles.storage.StaticFilesStora
AWS_S3_ENDPOINT_URL=http://minio:9000
AWS_S3_ACCESS_KEY_ID=impress
AWS_S3_SECRET_ACCESS_KEY=password
MEDIA_BASE_URL=http://localhost:8083
# OIDC
OIDC_OP_JWKS_ENDPOINT=http://nginx:8083/realms/impress/protocol/openid-connect/certs
@@ -44,3 +51,9 @@ OIDC_AUTH_REQUEST_EXTRA_PARAMS={"acr_values": "eidas1"}
AI_BASE_URL=https://openaiendpoint.com
AI_API_KEY=password
AI_MODEL=llama
# Collaboration
COLLABORATION_SERVER_URL=ws://localhost:4444
# Frontend
FRONTEND_THEME=dsfr
src/backend/core/api/viewsets.py
+30
View File
@@ -26,11 +26,13 @@ from rest_framework import (
mixins,
pagination,
status,
views,
viewsets,
)
from rest_framework import (
response as drf_response,
)
from rest_framework.permissions import AllowAny
from core import enums, models
from core.services.ai_services import AIService
@@ -886,3 +888,31 @@ class InvitationViewset(
invitation.document.email_invitation(
language, invitation.email, invitation.role, self.request.user
)
class ConfigView(views.APIView):
"""API ViewSet for sharing some public settings."""
permission_classes = [AllowAny]
def get(self, request):
"""
GET /api/v1.0/config/
Return a dictionary of public settings.
"""
array_settings = [
"COLLABORATION_SERVER_URL",
"CRISP_WEBSITE_ID",
"ENVIRONMENT",
"FRONTEND_THEME",
"MEDIA_BASE_URL",
"LANGUAGES",
"LANGUAGE_CODE",
"SENTRY_DSN",
]
dict_settings = {}
for setting in array_settings:
if hasattr(settings, setting):
dict_settings[setting] = getattr(settings, setting)
return drf_response.Response(dict_settings)
src/backend/core/tests/test_api_config.py
+45
View File
@@ -0,0 +1,45 @@
"""
Test config API endpoints in the Impress core app.
"""
from django.test import override_settings
import pytest
from rest_framework.status import (
HTTP_200_OK,
)
from rest_framework.test import APIClient
from core import factories
pytestmark = pytest.mark.django_db
@override_settings(
COLLABORATION_SERVER_URL="http://testcollab/",
CRISP_WEBSITE_ID="123",
FRONTEND_THEME="test-theme",
MEDIA_BASE_URL="http://testserver/",
SENTRY_DSN="https://sentry.test/123",
)
@pytest.mark.parametrize("is_authenticated", [False, True])
def test_api_config(is_authenticated):
"""Anonymous users should be allowed to get the configuration."""
client = APIClient()
if is_authenticated:
user = factories.UserFactory()
client.force_login(user)
response = client.get("/api/v1.0/config/")
assert response.status_code == HTTP_200_OK
assert response.json() == {
"COLLABORATION_SERVER_URL": "http://testcollab/",
"CRISP_WEBSITE_ID": "123",
"ENVIRONMENT": "test",
"FRONTEND_THEME": "test-theme",
"LANGUAGES": [["en-us", "English"], ["fr-fr", "French"], ["de-de", "German"]],
"LANGUAGE_CODE": "en-us",
"MEDIA_BASE_URL": "http://testserver/",
"SENTRY_DSN": "https://sentry.test/123",
}
src/backend/core/urls.py
+1
View File
@@ -55,4 +55,5 @@ urlpatterns = [
]
),
),
path(f"api/{settings.API_VERSION}/config/", viewsets.ConfigView.as_view()),
]
src/backend/impress/settings.py
+69 -32
View File
@@ -10,8 +10,9 @@ For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""
import json
import os
import tomllib
from socket import gethostbyname, gethostname
from django.utils.translation import gettext_lazy as _
@@ -27,19 +28,12 @@ DATA_DIR = os.path.join("/", "data")
def get_release():
"""
Get the current release of the application
By release, we mean the release from the version.json file à la Mozilla [1]
(if any). If this file has not been found, it defaults to "NA".
[1]
https://github.com/mozilla-services/Dockerflow/blob/master/docs/version_object.md
"""
# Try to get the current release from the version.json file generated by the
# CI during the Docker image build
try:
with open(os.path.join(BASE_DIR, "version.json"), encoding="utf8") as version:
return json.load(version)["version"]
except FileNotFoundError:
with open(os.path.join(BASE_DIR, "pyproject.toml"), "rb") as f:
pyproject_data = tomllib.load(f)
return pyproject_data["project"]["version"]
except (FileNotFoundError, KeyError):
return "NA" # Default: not available
@@ -56,7 +50,7 @@ class Base(Configuration):
You may also want to override default configuration by setting the following environment
variables:
* DJANGO_SENTRY_DSN
* SENTRY_DSN
* DB_NAME
* DB_HOST
* DB_PASSWORD
@@ -104,6 +98,9 @@ class Base(Configuration):
STATIC_ROOT = os.path.join(DATA_DIR, "static")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(DATA_DIR, "media")
MEDIA_BASE_URL = values.Value(
None, environ_name="MEDIA_BASE_URL", environ_prefix=None
)
SITE_ID = 1
@@ -372,7 +369,22 @@ class Base(Configuration):
CORS_ALLOWED_ORIGIN_REGEXES = values.ListValue([])
# Sentry
SENTRY_DSN = values.Value(None, environ_name="SENTRY_DSN")
SENTRY_DSN = values.Value(None, environ_name="SENTRY_DSN", environ_prefix=None)
# Collaboration
COLLABORATION_SERVER_URL = values.Value(
None, environ_name="COLLABORATION_SERVER_URL", environ_prefix=None
)
# Frontend
FRONTEND_THEME = values.Value(
None, environ_name="FRONTEND_THEME", environ_prefix=None
)
# Crisp
CRISP_WEBSITE_ID = values.Value(
None, environ_name="CRISP_WEBSITE_ID", environ_prefix=None
)
# Easy thumbnails
THUMBNAIL_EXTENSION = "webp"
@@ -482,6 +494,42 @@ class Base(Configuration):
environ_prefix=None,
)
# Logging
# We want to make it easy to log to console but by default we log production
# to Sentry and don't want to log to console.
LOGGING = {
"version": 1,
"disable_existing_loggers": False,
"handlers": {
"console": {
"class": "logging.StreamHandler",
"level": values.Value(
"ERROR",
environ_name="LOGGING_LEVEL_HANDLERS_CONSOLE",
environ_prefix=None,
),
},
},
# Override root logger to send it to console
"root": {
"handlers": ["console"],
"level": values.Value(
"INFO", environ_name="LOGGING_LEVEL_LOGGERS_ROOT", environ_prefix=None
),
},
"loggers": {
"core": {
"handlers": ["console"],
"level": values.Value(
"INFO",
environ_name="LOGGING_LEVEL_LOGGERS_APP",
environ_prefix=None,
),
"propagate": False,
},
},
}
# pylint: disable=invalid-name
@property
def ENVIRONMENT(self):
@@ -577,23 +625,6 @@ class Development(Base):
class Test(Base):
"""Test environment settings"""
LOGGING = values.DictValue(
{
"version": 1,
"disable_existing_loggers": False,
"handlers": {
"console": {
"class": "logging.StreamHandler",
},
},
"loggers": {
"impress": {
"handlers": ["console"],
"level": "DEBUG",
},
},
}
)
PASSWORD_HASHERS = [
"django.contrib.auth.hashers.MD5PasswordHasher",
]
@@ -624,7 +655,13 @@ class Production(Base):
"""
# Security
ALLOWED_HOSTS = values.ListValue(None)
# Add allowed host from environment variables.
# The machine hostname is added by default,
# it makes the application pingable by a load balancer on the same machine by example
ALLOWED_HOSTS = [
*values.ListValue([], environ_name="ALLOWED_HOSTS"),
gethostbyname(gethostname()),
]
CSRF_TRUSTED_ORIGINS = values.ListValue([])
SECURE_BROWSER_XSS_FILTER = True
SECURE_CONTENT_TYPE_NOSNIFF = True
src/backend/pyproject.toml
+4 -3
View File
@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
[project]
name = "impress"
version = "1.7.0"
version = "1.8.0"
authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
classifiers = [
"Development Status :: 5 - Production/Stable",
@@ -17,13 +17,13 @@ classifiers = [
"License :: OSI Approved :: MIT License",
"Natural Language :: English",
"Programming Language :: Python :: 3",
"Programming Language :: Python :: 3.10",
"Programming Language :: Python :: 3.12",
]
description = "An application to print markdown to pdf from a set of managed templates."
keywords = ["Django", "Contacts", "Templates", "RBAC"]
license = { file = "LICENSE" }
readme = "README.md"
requires-python = ">=3.10"
requires-python = ">=3.12"
dependencies = [
"boto3==1.35.44",
"Brotli==1.1.0",
@@ -127,6 +127,7 @@ select = [
[tool.ruff.lint.isort]
section-order = ["future","standard-library","django","third-party","impress","first-party","local-folder"]
sections = { impress=["core"], django=["django"] }
extra-standard-library = ["tomllib"]
[tool.ruff.lint.per-file-ignores]
"**/tests/*" = ["S", "SLF"]
src/frontend/Dockerfile
-9
View File
@@ -61,18 +61,9 @@ FROM impress AS impress-builder
WORKDIR /home/frontend/apps/impress
ARG FRONTEND_THEME
ENV NEXT_PUBLIC_THEME=${FRONTEND_THEME}
ARG Y_PROVIDER_URL
ENV NEXT_PUBLIC_Y_PROVIDER_URL=${Y_PROVIDER_URL}
ARG API_ORIGIN
ENV NEXT_PUBLIC_API_ORIGIN=${API_ORIGIN}
ARG MEDIA_URL
ENV NEXT_PUBLIC_MEDIA_URL=${MEDIA_URL}
ARG SW_DEACTIVATED
ENV NEXT_PUBLIC_SW_DEACTIVATED=${SW_DEACTIVATED}
src/frontend/apps/e2e/__tests__/app-impress/common.ts
+31 -22
View File
@@ -36,18 +36,25 @@ export const createDoc = async (
await page
.getByRole('button', {
name: 'Create a new document',
name: 'New doc',
})
.click();
await page.getByRole('heading', { name: 'Untitled document' }).click();
await page.keyboard.type(randomDocs[i]);
await page.getByText('Created at ').click();
const input = page.getByRole('textbox', { name: 'doc title input' });
await input.click();
await input.fill(randomDocs[i]);
await input.blur();
}
return randomDocs;
};
export const verifyDocName = async (page: Page, docName: string) => {
const input = page.getByRole('textbox', { name: 'doc title input' });
await expect(input).toBeVisible();
await expect(input).toHaveText(docName);
};
export const addNewMember = async (
page: Page,
index: number,
@@ -60,7 +67,9 @@ export const addNewMember = async (
response.status() === 200,
);
const inputSearch = page.getByLabel(/Find a member to add to the document/);
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
// Select a new user
await inputSearch.fill(fillText);
@@ -72,17 +81,19 @@ export const addNewMember = async (
}[];
// Choose user
await page.getByRole('option', { name: users[index].email }).click();
await page.getByTestId(`search-user-row-${users[index].email}`).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('option', { name: role }).click();
await page.getByRole('button', { name: 'Validate' }).click();
await expect(
page.getByText(`User ${users[index].email} added to the document.`),
).toBeVisible();
await page.getByRole('button', { name: 'Invite' }).click();
const list = page.getByTestId('doc-share-quick-search');
const newUser = list.getByTestId(
`doc-share-member-row-${users[index].email}`,
);
await expect(newUser).toBeVisible();
return users[index].email;
};
@@ -97,24 +108,22 @@ export const goToGridDoc = async (
const header = page.locator('header').first();
await header.locator('h2').getByText('Docs').click();
const datagrid = page.getByLabel('Datagrid of the documents page 1');
const datagridTable = datagrid.getByRole('table');
const docsGrid = page.getByTestId('docs-grid');
await expect(docsGrid).toBeVisible();
await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
const rows = datagridTable.getByRole('row');
const rows = docsGrid.getByRole('row');
expect(await rows.count()).toEqual(20);
const row = title
? rows.filter({
hasText: title,
})
: rows.nth(nthRow);
const docTitleCell = row.getByRole('cell').nth(1);
const docTitle = await docTitleCell.textContent();
await expect(row).toBeVisible();
const docTitleContent = row.locator('[aria-describedby="doc-title"]').first();
const docTitle = await docTitleContent.textContent();
expect(docTitle).toBeDefined();
await row.getByRole('link').first().click();
src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
+161
View File
@@ -0,0 +1,161 @@
import path from 'path';
import { expect, test } from '@playwright/test';
import { createDoc, verifyDocName } from './common';
const config = {
CRISP_WEBSITE_ID: null,
COLLABORATION_SERVER_URL: 'ws://localhost:4444',
ENVIRONMENT: 'development',
FRONTEND_THEME: 'dsfr',
MEDIA_BASE_URL: 'http://localhost:8083',
LANGUAGES: [
['en-us', 'English'],
['fr-fr', 'French'],
['de-de', 'German'],
],
LANGUAGE_CODE: 'en-us',
SENTRY_DSN: null,
};
test.describe('Config', () => {
test('it checks the config api is called', async ({ page }) => {
const responsePromise = page.waitForResponse(
(response) =>
response.url().includes('/config/') && response.status() === 200,
);
await page.goto('/');
const response = await responsePromise;
expect(response.ok()).toBeTruthy();
expect(await response.json()).toStrictEqual(config);
});
test('it checks that sentry is trying to init from config endpoint', async ({
page,
}) => {
await page.route('**/api/v1.0/config/', async (route) => {
const request = route.request();
if (request.method().includes('GET')) {
await route.fulfill({
json: {
...config,
SENTRY_DSN: 'https://sentry.io/123',
},
});
} else {
await route.continue();
}
});
const invalidMsg = 'Invalid Sentry Dsn: https://sentry.io/123';
const consoleMessage = page.waitForEvent('console', {
timeout: 5000,
predicate: (msg) => msg.text().includes(invalidMsg),
});
await page.goto('/');
expect((await consoleMessage).text()).toContain(invalidMsg);
});
test('it checks that theme is configured from config endpoint', async ({
page,
}) => {
const responsePromise = page.waitForResponse(
(response) =>
response.url().includes('/config/') && response.status() === 200,
);
await page.goto('/');
const response = await responsePromise;
expect(response.ok()).toBeTruthy();
const jsonResponse = await response.json();
expect(jsonResponse.FRONTEND_THEME).toStrictEqual('dsfr');
const footer = page.locator('footer').first();
// alt 'Gouvernement Logo' comes from the theme
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
});
test('it checks that media server is configured from config endpoint', async ({
page,
browserName,
}) => {
await page.goto('/');
await createDoc(page, 'doc-media', browserName, 1);
const fileChooserPromise = page.waitForEvent('filechooser');
await page.locator('.bn-block-outer').last().fill('/');
await page.getByText('Resizable image with caption').click();
await page.getByText('Upload image').click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(
path.join(__dirname, 'assets/logo-suite-numerique.png'),
);
const image = page.getByRole('img', { name: 'logo-suite-numerique.png' });
await expect(image).toBeVisible();
// Check src of image
expect(await image.getAttribute('src')).toMatch(
/http:\/\/localhost:8083\/media\/.*\/attachments\/.*.png/,
);
});
test('it checks that collaboration server is configured from config endpoint', async ({
page,
browserName,
}) => {
const webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
return webSocket.url().includes('ws://localhost:4444/');
});
await page.goto('/');
const randomDoc = await createDoc(
page,
'doc-collaboration',
browserName,
1,
);
await verifyDocName(page, randomDoc[0]);
const webSocket = await webSocketPromise;
expect(webSocket.url()).toContain('ws://localhost:4444/');
});
test('it checks that Crisp is trying to init from config endpoint', async ({
page,
}) => {
await page.route('**/api/v1.0/config/', async (route) => {
const request = route.request();
if (request.method().includes('GET')) {
await route.fulfill({
json: {
...config,
CRISP_WEBSITE_ID: '1234',
},
});
} else {
await route.continue();
}
});
await page.goto('/');
await expect(
page.locator('#crisp-chatbox').getByText('Invalid website'),
).toBeVisible();
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
+5 -8
View File
@@ -18,14 +18,11 @@ test.describe('Doc Create', () => {
const header = page.locator('header').first();
await header.locator('h2').getByText('Docs').click();
const datagrid = page.getByLabel('Datagrid of the documents page 1');
const datagridTable = datagrid.getByRole('table');
await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
await expect(datagridTable.getByText(docTitle)).toBeVisible({
timeout: 5000,
});
const docsGrid = page.getByTestId('docs-grid');
await expect(docsGrid).toBeVisible();
await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
await expect(docsGrid.getByText(docTitle)).toBeVisible();
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
+16 -9
View File
@@ -2,7 +2,12 @@ import path from 'path';
import { expect, test } from '@playwright/test';
import { createDoc, goToGridDoc, mockedDocument } from './common';
import {
createDoc,
goToGridDoc,
mockedDocument,
verifyDocName,
} from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
@@ -90,7 +95,7 @@ test.describe('Doc Editor', () => {
});
const randomDoc = await createDoc(page, 'doc-editor', browserName, 1);
await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
await verifyDocName(page, randomDoc[0]);
const webSocket = await webSocketPromise;
expect(webSocket.url()).toContain('ws://localhost:4444/');
@@ -110,7 +115,7 @@ test.describe('Doc Editor', () => {
}) => {
const randomDoc = await createDoc(page, 'doc-markdown', browserName, 1);
await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
await verifyDocName(page, randomDoc[0]);
const editor = page.locator('.ProseMirror');
await editor.click();
@@ -135,7 +140,7 @@ test.describe('Doc Editor', () => {
}) => {
// Check the first doc
const [firstDoc] = await createDoc(page, 'doc-switch-1', browserName, 1);
await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
await verifyDocName(page, firstDoc);
const editor = page.locator('.ProseMirror');
await editor.click();
@@ -144,7 +149,8 @@ test.describe('Doc Editor', () => {
// Check the second doc
const [secondDoc] = await createDoc(page, 'doc-switch-2', browserName, 1);
await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
await verifyDocName(page, secondDoc);
await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
await editor.click();
await editor.fill('Hello World Doc 2');
@@ -154,7 +160,7 @@ test.describe('Doc Editor', () => {
await goToGridDoc(page, {
title: firstDoc,
});
await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
await verifyDocName(page, firstDoc);
await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
});
@@ -165,7 +171,7 @@ test.describe('Doc Editor', () => {
}) => {
// Check the first doc
const [doc] = await createDoc(page, 'doc-saves-change', browserName, 1);
await expect(page.locator('h2').getByText(doc)).toBeVisible();
await verifyDocName(page, doc);
const editor = page.locator('.ProseMirror');
await editor.click();
@@ -176,7 +182,7 @@ test.describe('Doc Editor', () => {
nthRow: 2,
});
await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
await verifyDocName(page, secondDoc);
await goToGridDoc(page, {
title: doc,
@@ -191,7 +197,8 @@ test.describe('Doc Editor', () => {
// Check the first doc
const doc = await goToGridDoc(page);
await expect(page.locator('h2').getByText(doc)).toBeVisible();
await verifyDocName(page, doc);
const editor = page.locator('.ProseMirror');
await editor.click();
src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
+40 -11
View File
@@ -3,13 +3,44 @@ import cs from 'convert-stream';
import jsdom from 'jsdom';
import pdf from 'pdf-parse';
import { createDoc } from './common';
import { createDoc, verifyDocName } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test.describe('Doc Export', () => {
test('it check if all elements are visible', async ({
page,
browserName,
}) => {
await createDoc(page, 'doc-editor', browserName, 1);
await page
.getByRole('button', {
name: 'download',
})
.click();
await expect(
page
.locator('div')
.filter({ hasText: /^Download$/ })
.first(),
).toBeVisible();
await expect(
page.getByText(
'Upload your docs to a Microsoft Word, Open Office or PDF document',
),
).toBeVisible();
await expect(
page.getByRole('combobox', { name: 'Template' }),
).toBeVisible();
await expect(page.getByRole('combobox', { name: 'Format' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Close the modal' }),
).toBeVisible();
await expect(page.getByRole('button', { name: 'Download' })).toBeVisible();
});
test('it converts the doc to pdf with a template integrated', async ({
page,
browserName,
@@ -20,15 +51,14 @@ test.describe('Doc Export', () => {
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
});
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await verifyDocName(page, randomDoc);
await page.locator('.ProseMirror.bn-editor').click();
await page.locator('.ProseMirror.bn-editor').fill('Hello World');
await page.getByLabel('Open the document options').click();
await page
.getByRole('button', {
name: 'Export',
name: 'download',
})
.click();
@@ -57,19 +87,19 @@ test.describe('Doc Export', () => {
return download.suggestedFilename().includes(`${randomDoc}.docx`);
});
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await verifyDocName(page, randomDoc);
await page.locator('.ProseMirror.bn-editor').click();
await page.locator('.ProseMirror.bn-editor').fill('Hello World');
await page.getByLabel('Open the document options').click();
await page
.getByRole('button', {
name: 'Export',
name: 'download',
})
.click();
await page.getByText('Docx').click();
await page.getByRole('combobox', { name: 'Format' }).click();
await page.getByRole('option', { name: 'Word / Open Office' }).click();
await page
.getByRole('button', {
@@ -97,7 +127,7 @@ test.describe('Doc Export', () => {
await route.continue();
});
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await verifyDocName(page, randomDoc);
await page.locator('.bn-block-outer').last().fill('Hello World');
await page.locator('.bn-block-outer').last().click();
@@ -190,10 +220,9 @@ test.describe('Doc Export', () => {
.click();
// Download
await page.getByLabel('Open the document options').click();
await page
.getByRole('button', {
name: 'Export',
name: 'download',
})
.click();
src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
+178 -264
View File
@@ -1,264 +1,14 @@
import { expect, test } from '@playwright/test';
type SmallDoc = {
id: string;
title: string;
};
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test.describe('Documents Grid', () => {
test('checks all the elements are visible', async ({ page }) => {
await expect(page.locator('h2').getByText('Documents')).toBeVisible();
const datagrid = page
.getByLabel('Datagrid of the documents page 1')
.getByRole('table');
const thead = datagrid.locator('thead');
await expect(thead.getByText(/Document name/i)).toBeVisible();
await expect(thead.getByText(/Created at/i)).toBeVisible();
await expect(thead.getByText(/Updated at/i)).toBeVisible();
await expect(thead.getByText(/Your role/i)).toBeVisible();
await expect(thead.getByText(/Members/i)).toBeVisible();
const row1 = datagrid.getByRole('row').nth(1).getByRole('cell');
const docName = await row1.nth(1).textContent();
expect(docName).toBeDefined();
const docCreatedAt = await row1.nth(2).textContent();
expect(docCreatedAt).toBeDefined();
const docUpdatedAt = await row1.nth(3).textContent();
expect(docUpdatedAt).toBeDefined();
const docRole = await row1.nth(4).textContent();
expect(
docRole &&
['Administrator', 'Owner', 'Reader', 'Editor'].includes(docRole),
).toBeTruthy();
const docUserNumber = await row1.nth(5).textContent();
expect(docUserNumber).toBeDefined();
// Open the document
await row1.nth(1).click();
await expect(page.locator('h2').getByText(docName!)).toBeVisible();
});
[
{
nameColumn: 'Document name',
ordering: 'title',
cellNumber: 1,
orderDefault: '',
orderDesc: '&ordering=-title',
orderAsc: '&ordering=title',
defaultColumn: false,
},
{
nameColumn: 'Created at',
ordering: 'created_at',
cellNumber: 2,
orderDefault: '',
orderDesc: '&ordering=-created_at',
orderAsc: '&ordering=created_at',
defaultColumn: false,
},
{
nameColumn: 'Updated at',
ordering: 'updated_at',
cellNumber: 3,
orderDefault: '&ordering=-updated_at',
orderDesc: '&ordering=updated_at',
orderAsc: '',
defaultColumn: true,
},
].forEach(
({
nameColumn,
ordering,
cellNumber,
orderDefault,
orderDesc,
orderAsc,
defaultColumn,
}) => {
test(`checks datagrid ordering ${ordering}`, async ({ page }) => {
const responsePromise = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1${orderDefault}`) &&
response.status() === 200,
);
const responsePromiseOrderingDesc = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1${orderDesc}`) &&
response.status() === 200,
);
const responsePromiseOrderingAsc = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1${orderAsc}`) &&
response.status() === 200,
);
// Checks the initial state
const datagrid = page.getByLabel('Datagrid of the documents page 1');
const datagridTable = datagrid.getByRole('table');
const thead = datagridTable.locator('thead');
const response = await responsePromise;
expect(response.ok()).toBeTruthy();
const docNameRow1 = datagridTable
.getByRole('row')
.nth(1)
.getByRole('cell')
.nth(cellNumber);
const docNameRow2 = datagridTable
.getByRole('row')
.nth(2)
.getByRole('cell')
.nth(cellNumber);
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
// Initial state
await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/);
const initialDocNameRow1 = await docNameRow1.textContent();
const initialDocNameRow2 = await docNameRow2.textContent();
expect(initialDocNameRow1).toBeDefined();
expect(initialDocNameRow2).toBeDefined();
// Ordering ASC
await thead.getByText(nameColumn).click();
const responseOrderingAsc = await responsePromiseOrderingAsc;
expect(responseOrderingAsc.ok()).toBeTruthy();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/);
const textDocNameRow1Asc = await docNameRow1.textContent();
const textDocNameRow2Asc = await docNameRow2.textContent();
const compare = (comp1: string, comp2: string) => {
const comparisonResult = comp1.localeCompare(comp2, 'en', {
caseFirst: 'false',
ignorePunctuation: true,
});
// eslint-disable-next-line playwright/no-conditional-in-test
return defaultColumn ? comparisonResult >= 0 : comparisonResult <= 0;
};
expect(
textDocNameRow1Asc &&
textDocNameRow2Asc &&
compare(textDocNameRow1Asc, textDocNameRow2Asc),
).toBeTruthy();
// Ordering Desc
await thead.getByText(nameColumn).click();
const responseOrderingDesc = await responsePromiseOrderingDesc;
expect(responseOrderingDesc.ok()).toBeTruthy();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
await expect(docNameRow1).toHaveText(/.*/);
await expect(docNameRow2).toHaveText(/.*/);
const textDocNameRow1Desc = await docNameRow1.textContent();
const textDocNameRow2Desc = await docNameRow2.textContent();
expect(
textDocNameRow1Desc &&
textDocNameRow2Desc &&
compare(textDocNameRow2Desc, textDocNameRow1Desc),
).toBeTruthy();
});
},
);
test('checks the pagination', async ({ page }) => {
const responsePromisePage1 = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1`) &&
response.status() === 200,
);
const responsePromisePage2 = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=2`) &&
response.status() === 200,
);
const datagridPage1 = page
.getByLabel('Datagrid of the documents page 1')
.getByRole('table');
const responsePage1 = await responsePromisePage1;
expect(responsePage1.ok()).toBeTruthy();
await expect(
datagridPage1.getByRole('row').nth(1).getByRole('cell').nth(1),
).toHaveText(/.*/);
await page.getByLabel('Go to page 2').click();
const datagridPage2 = page
.getByLabel('Datagrid of the documents page 2')
.getByRole('table');
const responsePage2 = await responsePromisePage2;
expect(responsePage2.ok()).toBeTruthy();
await expect(
datagridPage2.getByRole('row').nth(1).getByRole('cell').nth(1),
).toHaveText(/.*/);
});
test('it deletes the document', async ({ page }) => {
const datagrid = page
.getByLabel('Datagrid of the documents page 1')
.getByRole('table');
const docRow = datagrid.getByRole('row').nth(1).getByRole('cell');
const docName = await docRow.nth(1).textContent();
await docRow
.getByRole('button', {
name: 'Delete the document',
})
.click();
await expect(
page.locator('h2').getByText(`Deleting the document "${docName}"`),
).toBeVisible();
await page
.getByRole('button', {
name: 'Confirm deletion',
})
.click();
await expect(
page.getByText('The document has been deleted.'),
).toBeVisible();
await expect(datagrid.getByText(docName!)).toBeHidden();
});
});
test.describe('Documents Grid mobile', () => {
test.use({ viewport: { width: 500, height: 1200 } });
@@ -326,19 +76,183 @@ test.describe('Documents Grid mobile', () => {
await page.goto('/');
const datagrid = page.getByLabel('Datagrid of the documents page 1');
const tableDatagrid = datagrid.getByRole('table');
const docsGrid = page.getByTestId('docs-grid');
await expect(docsGrid).toBeVisible();
await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
const rows = tableDatagrid.getByRole('row');
const rows = docsGrid.getByRole('row');
const row = rows.filter({
hasText: 'My mocked document',
});
await expect(row.getByRole('cell').nth(0)).toHaveText('My mocked document');
await expect(row.getByRole('cell').nth(1)).toHaveText('Public');
await expect(
row.locator('[aria-describedby="doc-title"]').nth(0),
).toHaveText('My mocked document');
});
});
test.describe('Document grid item options', () => {
test('it deletes the document', async ({ page }) => {
let docs: SmallDoc[] = [];
const response = await page.waitForResponse(
(response) =>
response.url().includes('documents/?page=1') &&
response.status() === 200,
);
const result = await response.json();
docs = result.results as SmallDoc[];
const button = page.getByTestId(`docs-grid-actions-button-${docs[0].id}`);
await expect(button).toBeVisible();
await button.click();
const removeButton = page.getByTestId(
`docs-grid-actions-remove-${docs[0].id}`,
);
await expect(removeButton).toBeVisible();
await removeButton.click();
await expect(
page.locator('h2').getByText(`Deleting the document "${docs[0].title}"`),
).toBeVisible();
await page
.getByRole('button', {
name: 'Confirm deletion',
})
.click();
const refetchResponse = await page.waitForResponse(
(response) =>
response.url().includes('documents/?page=1') &&
response.status() === 200,
);
const resultRefetch = await refetchResponse.json();
expect(resultRefetch.count).toBe(result.count - 1);
await expect(page.getByTestId('main-layout-loader')).toBeHidden();
await expect(
page.getByText('The document has been deleted.'),
).toBeVisible();
await expect(button).toBeHidden();
});
test("it checks if the delete option is disabled if we don't have the destroy capability", async ({
page,
}) => {
await page.route('*/**/api/v1.0/documents/?page=1', async (route) => {
await route.fulfill({
json: {
results: [
{
id: 'mocked-document-id',
content: '',
title: 'Mocked document',
accesses: [],
abilities: {
destroy: false, // Means not owner
link_configuration: false,
versions_destroy: false,
versions_list: true,
versions_retrieve: true,
accesses_manage: false, // Means not admin
update: false,
partial_update: false, // Means not editor
retrieve: true,
},
link_reach: 'restricted',
created_at: '2021-09-01T09:00:00Z',
},
],
},
});
});
await page.goto('/');
const button = page.getByTestId(
`docs-grid-actions-button-mocked-document-id`,
);
await expect(button).toBeVisible();
await button.click();
const removeButton = page.getByTestId(
`docs-grid-actions-remove-mocked-document-id`,
);
await expect(removeButton).toBeVisible();
await removeButton.isDisabled();
});
});
test.describe('Documents Grid', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('checks all the elements are visible', async ({ page }) => {
let docs: SmallDoc[] = [];
await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
const response = await page.waitForResponse(
(response) =>
response.url().includes('documents/?page=1') &&
response.status() === 200,
);
const result = await response.json();
docs = result.results as SmallDoc[];
await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
await expect(page.locator('h4').getByText('All docs')).toBeVisible();
const thead = page.getByTestId('docs-grid-header');
await expect(thead.getByText(/Name/i)).toBeVisible();
await expect(thead.getByText(/Updated at/i)).toBeVisible();
await Promise.all(
docs.map(async (doc) => {
await expect(
page.getByTestId(`docs-grid-name-${doc.id}`),
).toBeVisible();
}),
);
});
test('checks the infinite scroll', async ({ page }) => {
let docs: SmallDoc[] = [];
const responsePromisePage1 = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1`) &&
response.status() === 200,
);
const responsePromisePage2 = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=2`) &&
response.status() === 200,
);
const responsePage1 = await responsePromisePage1;
expect(responsePage1.ok()).toBeTruthy();
let result = await responsePage1.json();
docs = result.results as SmallDoc[];
await Promise.all(
docs.map(async (doc) => {
await expect(
page.getByTestId(`docs-grid-name-${doc.id}`),
).toBeVisible();
}),
);
await page.getByTestId('infinite-scroll-trigger').scrollIntoViewIfNeeded();
const responsePage2 = await responsePromisePage2;
result = await responsePage2.json();
docs = result.results as SmallDoc[];
await Promise.all(
docs.map(async (doc) => {
await expect(
page.getByTestId(`docs-grid-name-${doc.id}`),
).toBeVisible();
}),
);
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
+53 -119
View File
@@ -6,6 +6,7 @@ import {
mockedAccesses,
mockedDocument,
mockedInvitations,
verifyDocName,
} from './common';
test.beforeEach(async ({ page }) => {
@@ -59,88 +60,35 @@ test.describe('Doc Header', () => {
const card = page.getByLabel(
'It is the card information about the document.',
);
await expect(card.locator('a').getByText('home')).toBeVisible();
await expect(card.locator('h2').getByText('Mocked document')).toBeVisible();
await expect(card.getByText('Public')).toBeVisible();
await expect(
card.getByText('Created at 09/01/2021, 11:00 AM'),
).toBeVisible();
await expect(
card.getByText('Owners: Super Owner / super2@owner.com'),
).toBeVisible();
await expect(card.getByText('Your role: Owner')).toBeVisible();
const docTitle = card.getByRole('textbox', { name: 'doc title input' });
await expect(docTitle).toBeVisible();
await expect(card.getByText('Public document')).toBeVisible();
await expect(card.getByText('Owner ·')).toBeVisible();
await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Open the document options' }),
).toBeVisible();
});
test('it updates the title doc', async ({ page, browserName }) => {
const [randomDoc] = await createDoc(page, 'doc-update', browserName, 1);
await page.getByRole('heading', { name: randomDoc }).fill(' ');
await page.getByText('Created at').click();
await expect(
page.getByRole('heading', { name: 'Untitled document' }),
).toBeVisible();
});
test('it updates the title doc from editor heading', async ({ page }) => {
await page
.getByRole('button', {
name: 'Create a new document',
})
.click();
const docHeader = page.getByLabel(
'It is the card information about the document.',
);
await expect(
docHeader.getByRole('heading', { name: 'Untitled document', level: 2 }),
).toBeVisible();
const editor = page.locator('.ProseMirror');
await editor.locator('h1').click();
await page.keyboard.type('Hello World', { delay: 100 });
await expect(
docHeader.getByRole('heading', { name: 'Hello World', level: 2 }),
).toBeVisible();
await expect(
page.getByText('Document title updated successfully'),
).toBeVisible();
await docHeader
.getByRole('heading', { name: 'Hello World', level: 2 })
.fill('Top World');
await editor.locator('h1').fill('Super World');
await expect(
docHeader.getByRole('heading', { name: 'Top World', level: 2 }),
).toBeVisible();
await editor.locator('h1').fill('');
await docHeader
.getByRole('heading', { name: 'Top World', level: 2 })
.fill(' ');
await page.getByText('Created at').click();
await expect(
docHeader.getByRole('heading', { name: 'Untitled document', level: 2 }),
).toBeVisible();
await createDoc(page, 'doc-update', browserName, 1);
const docTitle = page.getByRole('textbox', { name: 'doc title input' });
await expect(docTitle).toBeVisible();
await docTitle.fill('Hello World');
await docTitle.blur();
await verifyDocName(page, 'Hello World');
});
test('it deletes the doc', async ({ page, browserName }) => {
const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await page.getByLabel('Open the document options').click();
await page
.getByRole('button', {
.getByRole('option', {
name: 'Delete document',
})
.click();
@@ -159,9 +107,7 @@ test.describe('Doc Header', () => {
page.getByText('The document has been deleted.'),
).toBeVisible();
await expect(
page.getByRole('button', { name: 'Create a new document' }),
).toBeVisible();
await expect(page.getByRole('button', { name: 'New do' })).toBeVisible();
const row = page
.getByLabel('Datagrid of the documents page 1')
@@ -195,16 +141,13 @@ test.describe('Doc Header', () => {
await goToGridDoc(page);
await expect(
page.locator('h2').getByText('Mocked document'),
).toHaveAttribute('contenteditable');
await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await page.getByLabel('Open the document options').click();
await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Delete document' }),
).toBeHidden();
page.getByRole('option', { name: 'Delete document' }),
).toBeDisabled();
// Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } });
@@ -218,29 +161,22 @@ test.describe('Doc Header', () => {
name: 'Visibility',
}),
).not.toHaveAttribute('disabled');
await expect(shareModal.getByText('Search by email')).toBeVisible();
const invitationCard = shareModal.getByLabel('List invitation card');
await expect(
invitationCard.getByText('test@invitation.test'),
).toBeVisible();
await expect(
invitationCard.getByRole('combobox', { name: 'Role' }),
).toBeEnabled();
await expect(
invitationCard.getByRole('button', {
name: 'delete',
}),
).toBeEnabled();
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
await expect(inputSearch).toBeVisible();
const member = shareModal
.getByTestId('doc-share-member-row-test@accesses.test')
.first();
await expect(member.getByText('test@accesses.test')).toBeVisible();
await expect(member.getByLabel('doc-role-dropdown')).toBeVisible();
await member.getByRole('button', { name: 'more_vert' }).click();
const memberCard = shareModal.getByLabel('List members card');
await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
await expect(
memberCard.getByRole('combobox', { name: 'Role' }),
).toBeEnabled();
await expect(
memberCard.getByRole('button', {
name: 'delete',
page.getByRole('option', {
name: 'Delete',
}),
).toBeEnabled();
});
@@ -273,16 +209,12 @@ test.describe('Doc Header', () => {
await goToGridDoc(page);
await expect(
page.locator('h2').getByText('Mocked document'),
).toHaveAttribute('contenteditable');
await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await page.getByLabel('Open the document options').click();
await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Delete document' }),
).toBeHidden();
page.getByRole('option', { name: 'Delete document' }),
).toBeDisabled();
// Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } });
@@ -296,12 +228,17 @@ test.describe('Doc Header', () => {
name: 'Visibility',
}),
).toHaveAttribute('disabled');
await expect(shareModal.getByText('Search by email')).toBeHidden();
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
await expect(inputSearch).toBeHidden();
const invitationCard = shareModal.getByLabel('List invitation card');
await expect(
invitationCard.getByText('test@invitation.test'),
).toBeVisible();
const invitationRow = shareModal.getByTestId(
`doc-share-invitation-row-test@invitation.test`,
);
await expect(invitationRow).toBeVisible();
await expect(
invitationCard.getByRole('combobox', { name: 'Role' }),
).toHaveAttribute('disabled');
@@ -351,16 +288,12 @@ test.describe('Doc Header', () => {
await goToGridDoc(page);
await expect(
page.locator('h2').getByText('Mocked document'),
).not.toHaveAttribute('contenteditable');
await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
await page.getByLabel('Open the document options').click();
await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
await expect(
page.getByRole('button', { name: 'Delete document' }),
).toBeHidden();
).toBeDisabled();
// Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } });
@@ -414,7 +347,7 @@ test.describe('Doc Header', () => {
// create page and navigate to it
await page
.getByRole('button', {
name: 'Create a new document',
name: 'New doc',
})
.click();
@@ -449,7 +382,7 @@ test.describe('Doc Header', () => {
// create page and navigate to it
await page
.getByRole('button', {
name: 'Create a new document',
name: 'New doc',
})
.click();
@@ -501,6 +434,7 @@ test.describe('Documents Header mobile', () => {
await goToGridDoc(page);
await page.getByLabel('Open the document options').click();
await page.getByRole('button', { name: 'Share' }).click();
await expect(page.getByLabel('Share modal')).toBeVisible();
src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts
+88 -160
View File
@@ -16,163 +16,82 @@ test.describe('Document create member', () => {
await page.getByRole('button', { name: 'Share' }).click();
const inputSearch = page.getByLabel(/Find a member to add to the document/);
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
await expect(inputSearch).toBeVisible();
// Select user 1
// Select user 1 and verify tag
await inputSearch.fill('user');
const response = await responsePromise;
const users = (await response.json()).results as {
email: string;
full_name: string;
}[];
await page.getByRole('option', { name: users[0].email }).click();
const list = page.getByTestId('doc-share-add-member-list');
await expect(list).toBeHidden();
const quickSearchContent = page.getByTestId('doc-share-quick-search');
await quickSearchContent
.getByTestId(`search-user-row-${users[0].email}`)
.click();
// Select user 2
await expect(list).toBeVisible();
await expect(
list.getByTestId(`doc-share-add-member-${users[0].email}`),
).toBeVisible();
await expect(list.getByText(`${users[0].full_name}`)).toBeVisible();
// Select user 2 and verify tag
await inputSearch.fill('user');
await page.getByRole('option', { name: users[1].email }).click();
await quickSearchContent
.getByTestId(`search-user-row-${users[1].email}`)
.click();
// Select email
await expect(
list.getByTestId(`doc-share-add-member-${users[1].email}`),
).toBeVisible();
await expect(list.getByText(`${users[1].full_name}`)).toBeVisible();
// Select email and verify tag
const email = randomName('test@test.fr', browserName, 1)[0];
await inputSearch.fill(email);
await page.getByRole('option', { name: email }).click();
// Check user 1 tag
await expect(
page.getByText(`${users[0].email}`, { exact: true }),
).toBeVisible();
await expect(page.getByLabel(`Remove ${users[0].email}`)).toBeVisible();
// Check user 2 tag
await expect(
page.getByText(`${users[1].email}`, { exact: true }),
).toBeVisible();
await expect(page.getByLabel(`Remove ${users[1].email}`)).toBeVisible();
// Check invitation tag
await expect(page.getByText(email, { exact: true })).toBeVisible();
await expect(page.getByLabel(`Remove ${email}`)).toBeVisible();
await quickSearchContent.getByText(email).click();
await expect(list.getByText(email)).toBeVisible();
// Check roles are displayed
await page.getByRole('combobox', { name: /Choose a role/ }).click();
await list.getByLabel('doc-role-dropdown').click();
await expect(page.getByRole('option', { name: 'Reader' })).toBeVisible();
await expect(page.getByRole('option', { name: 'Editor' })).toBeVisible();
await expect(page.getByRole('option', { name: 'Owner' })).toBeVisible();
await expect(
page.getByRole('option', { name: 'Administrator' }),
).toBeVisible();
await expect(page.getByRole('option', { name: 'Owner' })).toBeVisible();
});
test('it sends a new invitation and adds a new user', async ({
page,
browserName,
}) => {
const responsePromiseSearchUser = page.waitForResponse(
(response) =>
response.url().includes('/users/?q=user') && response.status() === 200,
);
await createDoc(page, 'user-invitation', browserName, 1);
await page.getByRole('button', { name: 'Share' }).click();
const inputSearch = page.getByLabel(/Find a member to add to the document/);
const email = randomName('test@test.fr', browserName, 1)[0];
await inputSearch.fill(email);
await page.getByRole('option', { name: email }).click();
// Select a new user
await inputSearch.fill('user');
const responseSearchUser = await responsePromiseSearchUser;
const [user] = (await responseSearchUser.json()).results as {
email: string;
}[];
await page.getByRole('option', { name: user.email }).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).click();
// Validate
await page.getByRole('option', { name: 'Administrator' }).click();
await page.getByRole('button', { name: 'Invite' }).click();
const responsePromiseCreateInvitation = page.waitForResponse(
(response) =>
response.url().includes('/invitations/') && response.status() === 201,
);
const responsePromiseAddUser = page.waitForResponse(
(response) =>
response.url().includes('/accesses/') && response.status() === 201,
);
await page.getByRole('button', { name: 'Validate' }).click();
// Check invitation sent
await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
const responseCreateInvitation = await responsePromiseCreateInvitation;
expect(responseCreateInvitation.ok()).toBeTruthy();
expect(
responseCreateInvitation.request().headers()['content-language'],
).toBe('en-us');
// Check invitation added
await expect(
quickSearchContent.getByText('Pending invitations'),
).toBeVisible();
await expect(quickSearchContent.getByText(email).first()).toBeVisible();
// Check user added
await expect(page.getByText('Share with 3 users')).toBeVisible();
await expect(
page.getByText(`User ${user.email} added to the document.`),
quickSearchContent.getByText(users[0].full_name).first(),
).toBeVisible();
const responseAddUser = await responsePromiseAddUser;
expect(responseAddUser.ok()).toBeTruthy();
expect(responseAddUser.request().headers()['content-language']).toBe(
'en-us',
);
const listInvitation = page.getByLabel('List invitation card');
await expect(listInvitation.locator('li').getByText(email)).toBeVisible();
await expect(
listInvitation.locator('li').getByText('Invited'),
quickSearchContent.getByText(users[0].email).first(),
).toBeVisible();
const listMember = page.getByLabel('List members card');
await expect(listMember.locator('li').getByText(user.email)).toBeVisible();
});
test('it try to add twice the same user', async ({ page, browserName }) => {
const responsePromiseSearchUser = page.waitForResponse(
(response) =>
response.url().includes('/users/?q=user') && response.status() === 200,
);
await createDoc(page, 'user-twice', browserName, 1);
await page.getByRole('button', { name: 'Share' }).click();
const inputSearch = page.getByLabel(/Find a member to add to the document/);
await inputSearch.fill('user');
const responseSearchUser = await responsePromiseSearchUser;
const [user] = (await responseSearchUser.json()).results as {
email: string;
}[];
await page.getByRole('option', { name: user.email }).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).click();
await page.getByRole('option', { name: 'Owner' }).click();
const responsePromiseAddMember = page.waitForResponse(
(response) =>
response.url().includes('/accesses/') && response.status() === 201,
);
await page.getByRole('button', { name: 'Validate' }).click();
await expect(
page.getByText(`User ${user.email} added to the document.`),
quickSearchContent.getByText(users[1].email).first(),
).toBeVisible();
await expect(
quickSearchContent.getByText(users[1].full_name).first(),
).toBeVisible();
const responseAddMember = await responsePromiseAddMember;
expect(responseAddMember.ok()).toBeTruthy();
await inputSearch.fill('user');
await expect(page.getByText('Loading...')).toBeHidden();
await expect(page.getByRole('option', { name: user.email })).toBeHidden();
});
test('it try to add twice the same invitation', async ({
@@ -183,32 +102,35 @@ test.describe('Document create member', () => {
await page.getByRole('button', { name: 'Share' }).click();
const inputSearch = page.getByLabel(/Find a member to add to the document/);
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
const [email] = randomName('test@test.fr', browserName, 1);
await inputSearch.fill(email);
await page.getByRole('option', { name: email }).click();
await page.getByTestId(`search-user-row-${email}`).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('option', { name: 'Owner' }).click();
const responsePromiseCreateInvitation = page.waitForResponse(
(response) =>
response.url().includes('/invitations/') && response.status() === 201,
);
await page.getByRole('button', { name: 'Validate' }).click();
await page.getByRole('button', { name: 'Invite' }).click();
// Check invitation sent
await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
const responseCreateInvitation = await responsePromiseCreateInvitation;
expect(responseCreateInvitation.ok()).toBeTruthy();
await inputSearch.fill(email);
await page.getByRole('option', { name: email }).click();
await page.getByTestId(`search-user-row-${email}`).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).click();
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('option', { name: 'Owner' }).click();
const responsePromiseCreateInvitationFail = page.waitForResponse(
@@ -216,7 +138,7 @@ test.describe('Document create member', () => {
response.url().includes('/invitations/') && response.status() === 400,
);
await page.getByRole('button', { name: 'Validate' }).click();
await page.getByRole('button', { name: 'Invite' }).click();
await expect(
page.getByText(`"${email}" is already invited to the document.`),
).toBeVisible();
@@ -237,16 +159,17 @@ test.describe('Document create member', () => {
await page.getByRole('button', { name: 'Partager' }).click();
const inputSearch = page.getByLabel(
/Trouver un membre à ajouter au document/,
);
const inputSearch = page.getByRole('combobox', {
name: 'Trouver un membre à ajouter au document',
});
const email = randomName('test@test.fr', browserName, 1)[0];
await inputSearch.fill(email);
await page.getByRole('option', { name: email }).click();
await page.getByTestId(`search-user-row-${email}`).click();
// Choose a role
await page.getByRole('combobox', { name: /Choisissez un rôle/ }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('option', { name: 'Administrateur' }).click();
const responsePromiseCreateInvitation = page.waitForResponse(
@@ -254,10 +177,10 @@ test.describe('Document create member', () => {
response.url().includes('/invitations/') && response.status() === 201,
);
await page.getByRole('button', { name: 'Valider' }).click();
await page.getByRole('button', { name: 'Invite' }).click();
// Check invitation sent
await expect(page.getByText(`Invitation envoyée à ${email}`)).toBeVisible();
const responseCreateInvitation = await responsePromiseCreateInvitation;
expect(responseCreateInvitation.ok()).toBeTruthy();
expect(
@@ -270,14 +193,17 @@ test.describe('Document create member', () => {
await page.getByRole('button', { name: 'Share' }).click();
const inputSearch = page.getByLabel(/Find a member to add to the document/);
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
const email = randomName('test@test.fr', browserName, 1)[0];
await inputSearch.fill(email);
await page.getByRole('option', { name: email }).click();
await page.getByTestId(`search-user-row-${email}`).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('option', { name: 'Administrator' }).click();
const responsePromiseCreateInvitation = page.waitForResponse(
@@ -285,26 +211,28 @@ test.describe('Document create member', () => {
response.url().includes('/invitations/') && response.status() === 201,
);
await page.getByRole('button', { name: 'Validate' }).click();
await page.getByRole('button', { name: 'Invite' }).click();
// Check invitation sent
await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
const responseCreateInvitation = await responsePromiseCreateInvitation;
expect(responseCreateInvitation.ok()).toBeTruthy();
const listInvitation = page.getByLabel('List invitation card');
const li = listInvitation.locator('li').filter({
hasText: email,
});
await expect(li.getByText(email)).toBeVisible();
const listInvitation = page.getByTestId('doc-share-quick-search');
const userInvitation = listInvitation.getByTestId(
`doc-share-invitation-row-${email}`,
);
await expect(userInvitation).toBeVisible();
await li.getByRole('combobox', { name: /Role/ }).click();
await li.getByRole('option', { name: 'Reader' }).click();
await expect(page.getByText(`The role has been updated.`)).toBeVisible();
await li.getByText('delete').click();
await expect(
page.getByText(`The invitation has been removed.`),
).toBeVisible();
await expect(listInvitation.locator('li').getByText(email)).toBeHidden();
await userInvitation.getByLabel('doc-role-dropdown').click();
await page.getByRole('option', { name: 'Reader' }).click();
const moreActions = userInvitation.getByRole('button', {
name: 'more_vert',
});
await moreActions.click();
await page.getByRole('option', { name: 'delete Delete' }).click();
await expect(userInvitation).toBeHidden();
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts
+90 -106
View File
@@ -1,8 +1,6 @@
import { expect, test } from '@playwright/test';
import { waitForElementCount } from '../helpers';
import { addNewMember, createDoc, goToGridDoc } from './common';
import { addNewMember, createDoc, goToGridDoc, verifyDocName } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
@@ -15,10 +13,11 @@ test.describe('Document list members', () => {
async (route) => {
const request = route.request();
const url = new URL(request.url());
const pageId = url.searchParams.get('page');
const pageId = url.searchParams.get('page') ?? '1';
const accesses = {
count: 100,
next: 'http://anything/?page=2',
count: 40,
next: +pageId < 2 ? 'http://anything/?page=2' : undefined,
previous: null,
results: Array.from({ length: 20 }, (_, i) => ({
id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -48,25 +47,20 @@ test.describe('Document list members', () => {
);
await goToGridDoc(page);
await page.getByRole('button', { name: 'Share' }).click();
const list = page.getByLabel('List members card').locator('ul');
await expect(list.locator('li')).toHaveCount(20);
await list.getByText(`impress@impress.world-page-${1}-18`).hover();
await page.mouse.wheel(0, 10);
const prefix = 'doc-share-member-row';
const elements = page.locator(`[data-testid^="${prefix}"]`);
const loadMore = page.getByTestId('load-more-members');
await waitForElementCount(list.locator('li'), 21, 10000);
await expect(elements).toHaveCount(20);
await expect(page.getByText(`Impress World Page 1-16`)).toBeVisible();
expect(await list.locator('li').count()).toBeGreaterThan(20);
await expect(list.getByText(`Impress World Page 1-16`)).toBeVisible();
await expect(
list.getByText(`impress@impress.world-page-1-16`),
).toBeVisible();
await expect(list.getByText(`Impress World Page 2-15`)).toBeVisible();
await expect(
list.getByText(`impress@impress.world-page-2-15`),
).toBeVisible();
await loadMore.click();
await expect(elements).toHaveCount(40);
await expect(page.getByText(`Impress World Page 2-15`)).toBeVisible();
await expect(loadMore).toBeHidden();
});
test('it checks a big list of invitations', async ({ page }) => {
@@ -75,10 +69,10 @@ test.describe('Document list members', () => {
async (route) => {
const request = route.request();
const url = new URL(request.url());
const pageId = url.searchParams.get('page');
const pageId = url.searchParams.get('page') ?? '1';
const accesses = {
count: 100,
next: 'http://anything/?page=2',
count: 40,
next: +pageId < 2 ? 'http://anything/?page=2' : null,
previous: null,
results: Array.from({ length: 20 }, (_, i) => ({
id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -105,130 +99,120 @@ test.describe('Document list members', () => {
);
await goToGridDoc(page);
await page.getByRole('button', { name: 'Share' }).click();
const list = page.getByLabel('List invitation card').locator('ul');
await expect(list.locator('li')).toHaveCount(20);
await list.getByText(`impress@impress.world-page-${1}-18`).hover();
await page.mouse.wheel(0, 10);
const prefix = 'doc-share-invitation';
const elements = page.locator(`[data-testid^="${prefix}"]`);
const loadMore = page.getByTestId('load-more-invitations');
await waitForElementCount(list.locator('li'), 21, 10000);
await expect(elements).toHaveCount(20);
await expect(
page.getByText(`impress@impress.world-page-1-16`).first(),
).toBeVisible();
expect(await list.locator('li').count()).toBeGreaterThan(20);
await loadMore.click();
await expect(elements).toHaveCount(40);
await expect(
list.getByText(`impress@impress.world-page-1-16`),
).toBeVisible();
await expect(
list.getByText(`impress@impress.world-page-2-15`),
page.getByText(`impress@impress.world-page-2-16`).first(),
).toBeVisible();
await expect(loadMore).toBeHidden();
});
test('it checks the role rules', async ({ page, browserName }) => {
const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
const list = page.getByLabel('List members card').locator('ul');
await expect(list.getByText(`user@${browserName}.e2e`)).toBeVisible();
const soleOwner = list.getByText(
const list = page.getByTestId('doc-share-quick-search');
await expect(list).toBeVisible();
const currentUser = list.getByTestId(
`doc-share-member-row-user@chromium.e2e`,
);
const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
await expect(currentUser).toBeVisible();
await expect(currentUserRole).toBeVisible();
await currentUserRole.click();
const soloOwner = page.getByText(
`You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.`,
);
await expect(soloOwner).toBeVisible();
await list.click();
const newUserEmail = await addNewMember(page, 0, 'Owner');
const newUser = list.getByTestId(`doc-share-member-row-${newUserEmail}`);
const newUserRoles = newUser.getByLabel('doc-role-dropdown');
await expect(soleOwner).toBeVisible();
await expect(newUser).toBeVisible();
const username = await addNewMember(page, 0, 'Owner');
await currentUserRole.click();
await expect(soloOwner).toBeHidden();
await list.click();
await expect(list.getByText(username)).toBeVisible();
await expect(soleOwner).toBeHidden();
const otherOwner = list.getByText(
const otherOwner = page.getByText(
`You cannot update the role or remove other owner.`,
);
await newUserRoles.click();
await expect(otherOwner).toBeVisible();
await list.click();
const SelectRoleCurrentUser = list
.locator('li')
.filter({
hasText: `user@${browserName}.e2e`,
})
.getByRole('combobox', { name: 'Role' });
await SelectRoleCurrentUser.click();
await currentUserRole.click();
await page.getByRole('option', { name: 'Administrator' }).click();
await expect(page.getByText('The role has been updated')).toBeVisible();
await list.click();
await expect(currentUserRole).toBeVisible();
const shareModal = page.getByLabel('Share modal');
// Admin still have the right to share
await expect(
shareModal.getByRole('combobox', {
name: 'Visibility',
}),
).not.toHaveAttribute('disabled');
await SelectRoleCurrentUser.click();
await currentUserRole.click();
await page.getByRole('option', { name: 'Reader' }).click();
await expect(page.getByText('The role has been updated')).toBeVisible();
// Reader does not have the right to share
await expect(
shareModal.getByRole('combobox', {
name: 'Visibility',
}),
).toHaveAttribute('disabled');
await list.click();
await expect(currentUserRole).toBeHidden();
});
test('it checks the delete members', async ({ page, browserName }) => {
const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
const list = page.getByLabel('List members card').locator('ul');
const list = page.getByTestId('doc-share-quick-search');
const nameMyself = `user@${browserName}.e2e`;
await expect(list.getByText(nameMyself)).toBeVisible();
const emailMyself = `user@${browserName}.e2e`;
const mySelf = list.getByTestId(`doc-share-member-row-${emailMyself}`);
const mySelfMoreActions = mySelf.getByRole('button', { name: 'more_vert' });
const userOwner = await addNewMember(page, 0, 'Owner');
await expect(list.getByText(userOwner)).toBeVisible();
const userOwnerEmail = await addNewMember(page, 0, 'Owner');
const userOwner = list.getByTestId(
`doc-share-member-row-${userOwnerEmail}`,
);
const userOwnerMoreActions = userOwner.getByRole('button', {
name: 'more_vert',
});
const userReader = await addNewMember(page, 0, 'Reader');
await expect(list.getByText(userReader)).toBeVisible();
const userReaderEmail = await addNewMember(page, 0, 'Reader');
const userReader = list.getByTestId(
`doc-share-member-row-${userReaderEmail}`,
);
const userReaderMoreActions = userReader.getByRole('button', {
name: 'more_vert',
});
await list
.locator('li')
.filter({
hasText: userReader,
})
.getByText('delete')
.click();
await expect(mySelf).toBeVisible();
await expect(userOwner).toBeVisible();
await expect(userReader).toBeVisible();
await expect(list.getByText(userReader)).toBeHidden();
await expect(userOwnerMoreActions).toBeVisible();
await expect(userReaderMoreActions).toBeVisible();
await expect(mySelfMoreActions).toBeVisible();
await list
.locator('li')
.filter({
hasText: nameMyself,
})
.getByText('delete')
.click();
await expect(list.getByText(nameMyself)).toBeHidden();
await userReaderMoreActions.click();
await page.getByRole('option', { name: 'Delete' }).click();
await expect(userReader).toBeHidden();
await mySelfMoreActions.click();
await page.getByRole('option', { name: 'Delete' }).click();
await expect(
page.getByText('The member has been removed from the document').first(),
page.getByText('You do not have permission to perform this action.'),
).toBeVisible();
await expect(
page.getByRole('heading', { name: 'Share', level: 3 }),
).toBeHidden();
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-routing.spec.ts
+2 -2
View File
@@ -9,7 +9,7 @@ test.describe('Doc Routing', () => {
test('Check the presence of the meta tag noindex', async ({ page }) => {
const buttonCreateHomepage = page.getByRole('button', {
name: 'Create a new document',
name: 'New doc',
});
await expect(buttonCreateHomepage).toBeVisible();
@@ -27,7 +27,7 @@ test.describe('Doc Routing', () => {
await expect(page).toHaveURL('/');
const buttonCreateHomepage = page.getByRole('button', {
name: 'Create a new document',
name: 'New doc',
});
await expect(buttonCreateHomepage).toBeVisible();
src/frontend/apps/e2e/__tests__/app-impress/doc-table-content.spec.ts
+4 -3
View File
@@ -1,6 +1,6 @@
import { expect, test } from '@playwright/test';
import { createDoc, goToGridDoc } from './common';
import { createDoc, goToGridDoc, verifyDocName } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
@@ -17,7 +17,7 @@ test.describe('Doc Table Content', () => {
1,
);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await verifyDocName(page, randomDoc);
await page.getByLabel('Open the document options').click();
await page
@@ -36,6 +36,7 @@ test.describe('Doc Table Content', () => {
await page.getByRole('button', { name: 'Strike' }).click();
await page.locator('.bn-block-outer').first().click();
await editor.click();
await page.locator('.bn-block-outer').last().click();
// Create space to fill the viewport
@@ -107,7 +108,7 @@ test.describe('Doc Table Content', () => {
1,
);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await verifyDocName(page, randomDoc);
await expect(page.getByLabel('Open the panel')).toBeHidden();
const editor = page.locator('.ProseMirror');
src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts
+12 -7
View File
@@ -1,6 +1,11 @@
import { expect, test } from '@playwright/test';
import { createDoc, goToGridDoc, mockedDocument } from './common';
import {
createDoc,
goToGridDoc,
mockedDocument,
verifyDocName,
} from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
@@ -10,7 +15,7 @@ test.describe('Doc Version', () => {
test('it displays the doc versions', async ({ page, browserName }) => {
const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await verifyDocName(page, randomDoc);
await page.getByLabel('Open the document options').click();
await page
@@ -79,12 +84,12 @@ test.describe('Doc Version', () => {
await goToGridDoc(page);
await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
await verifyDocName(page, 'Mocked document');
await page.getByLabel('Open the document options').click();
await expect(
page.getByRole('button', { name: 'Version history' }),
).toBeHidden();
).toBeDisabled();
await page.getByRole('button', { name: 'Table of content' }).click();
@@ -95,12 +100,12 @@ test.describe('Doc Version', () => {
test('it restores the doc version', async ({ page, browserName }) => {
const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await verifyDocName(page, randomDoc);
await page.locator('.bn-block-outer').last().click();
await page.locator('.bn-block-outer').last().fill('Hello');
expect(true).toBe(true);
await goToGridDoc(page, {
title: randomDoc,
});
@@ -152,7 +157,7 @@ test.describe('Doc Version', () => {
}) => {
const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await verifyDocName(page, randomDoc);
const editor = page.locator('.ProseMirror');
await editor.locator('.bn-block-outer').last().click();
src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
+47 -36
View File
@@ -1,6 +1,6 @@
import { expect, test } from '@playwright/test';
import { createDoc, keyCloakSignIn } from './common';
import { createDoc, keyCloakSignIn, verifyDocName } from './common';
const browsersName = ['chromium', 'webkit', 'firefox'];
@@ -85,7 +85,7 @@ test.describe('Doc Visibility: Restricted', () => {
1,
);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await verifyDocName(page, docTitle);
const urlDoc = page.url();
@@ -111,7 +111,7 @@ test.describe('Doc Visibility: Restricted', () => {
const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await verifyDocName(page, docTitle);
const urlDoc = page.url();
@@ -139,26 +139,26 @@ test.describe('Doc Visibility: Restricted', () => {
const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
const inputSearch = page.getByLabel(/Find a member to add to the document/);
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
const otherBrowser = browsersName.find((b) => b !== browserName);
const username = `user@${otherBrowser}.e2e`;
await inputSearch.fill(username);
await page.getByRole('option', { name: username }).click();
await page.getByTestId(`search-user-row-${username}`).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('option', { name: 'Administrator' }).click();
await page.getByRole('button', { name: 'Validate' }).click();
await expect(
page.getByText(`User ${username} added to the document.`),
).toBeVisible();
await page.getByRole('button', { name: 'Invite' }).click();
await page.locator('.c__modal__backdrop').click({
position: { x: 0, y: 0 },
@@ -176,7 +176,7 @@ test.describe('Doc Visibility: Restricted', () => {
await page.goto(urlDoc);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await verifyDocName(page, docTitle);
await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
});
});
@@ -198,7 +198,7 @@ test.describe('Doc Visibility: Public', () => {
1,
);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -227,10 +227,14 @@ test.describe('Doc Visibility: Public', () => {
position: { x: 0, y: 0 },
});
const cardContainer = page.getByLabel(
'It is the card information about the document.',
);
await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
await expect(
page
.getByLabel('It is the card information about the document.')
.getByText('Public', { exact: true }),
cardContainer.getByText('Public document', { exact: true }),
).toBeVisible();
const urlDoc = page.url();
@@ -261,7 +265,7 @@ test.describe('Doc Visibility: Public', () => {
const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -290,10 +294,14 @@ test.describe('Doc Visibility: Public', () => {
position: { x: 0, y: 0 },
});
const cardContainer = page.getByLabel(
'It is the card information about the document.',
);
await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
await expect(
page
.getByLabel('It is the card information about the document.')
.getByText('Public', { exact: true }),
cardContainer.getByText('Public document', { exact: true }),
).toBeVisible();
const urlDoc = page.url();
@@ -308,7 +316,7 @@ test.describe('Doc Visibility: Public', () => {
await page.goto(urlDoc);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await verifyDocName(page, docTitle);
await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
await expect(
page.getByText('Read only, you cannot edit this document'),
@@ -333,7 +341,7 @@ test.describe('Doc Visibility: Authenticated', () => {
1,
);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -385,7 +393,7 @@ test.describe('Doc Visibility: Authenticated', () => {
1,
);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -426,15 +434,17 @@ test.describe('Doc Visibility: Authenticated', () => {
page.getByText('Read only, you cannot edit this document'),
).toBeVisible();
const shareModal = page.getByLabel('Share modal');
await expect(
shareModal.getByRole('combobox', {
page.getByRole('combobox', {
name: 'Visibility',
}),
).toHaveAttribute('disabled');
await expect(shareModal.getByText('Search by email')).toBeHidden();
await expect(shareModal.getByLabel('List members card')).toBeHidden();
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
await expect(inputSearch).toBeHidden();
});
test('It checks a authenticated doc in editable mode', async ({
@@ -451,7 +461,7 @@ test.describe('Doc Visibility: Authenticated', () => {
1,
);
await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
await page
@@ -498,20 +508,21 @@ test.describe('Doc Visibility: Authenticated', () => {
await page.goto(urlDoc);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await verifyDocName(page, docTitle);
await page.getByRole('button', { name: 'Share' }).click();
await expect(
page.getByText('Read only, you cannot edit this document'),
).toBeHidden();
const shareModal = page.getByLabel('Share modal');
await expect(
shareModal.getByRole('combobox', {
page.getByRole('combobox', {
name: 'Visibility',
}),
).toHaveAttribute('disabled');
await expect(shareModal.getByText('Search by email')).toBeHidden();
await expect(shareModal.getByLabel('List members card')).toBeHidden();
const inputSearch = page.getByRole('combobox', {
name: 'Find a member to add to the document',
});
await expect(inputSearch).toBeHidden();
});
});
src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts
-77
View File
@@ -1,77 +0,0 @@
import { expect, test } from '@playwright/test';
import { goToGridDoc } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test.describe('Footer', () => {
test('checks all the elements are visible', async ({ page }) => {
const footer = page.locator('footer').first();
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
await expect(
footer.getByRole('link', { name: 'legifrance.gouv.fr' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'info.gouv.fr' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'service-public.fr' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'data.gouv.fr' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Legal Notice' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Personal data and cookies' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Accessibility' }),
).toBeVisible();
await expect(
footer.getByText(
'Unless otherwise stated, all content on this site is under licence',
),
).toBeVisible();
});
test('checks footer is not visible on doc editor', async ({ page }) => {
await expect(page.locator('footer')).toBeVisible();
await goToGridDoc(page);
await expect(page.locator('footer')).toBeHidden();
});
const legalPages = [
{ name: 'Legal Notice', url: '/legal-notice/' },
{ name: 'Personal data and cookies', url: '/personal-data-cookies/' },
{ name: 'Accessibility', url: '/accessibility/' },
];
for (const { name, url } of legalPages) {
test(`checks ${name} page`, async ({ page }) => {
const footer = page.locator('footer').first();
await footer.getByRole('link', { name }).click();
await expect(
page
.getByRole('heading', {
name,
})
.first(),
).toBeVisible();
await expect(page).toHaveURL(url);
});
}
});
src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
+4 -18
View File
@@ -75,29 +75,15 @@ test.describe('Header mobile', () => {
test('it checks the header when mobile', async ({ page }) => {
const header = page.locator('header').first();
await expect(header.getByLabel('Open the header menu')).toBeVisible();
await expect(
header.getByRole('link', { name: 'Docs Logo Docs' }),
).toBeVisible();
await expect(
header.getByRole('button', {
name: 'Les services de La Suite numérique',
}),
).toBeVisible();
await expect(
page.getByRole('button', {
name: 'Logout',
}),
).toBeHidden();
await expect(page.getByText('English')).toBeHidden();
await header.getByLabel('Open the header menu').click();
await expect(
page.getByRole('button', {
name: 'Logout',
}),
).toBeVisible();
await expect(page.getByText('English')).toBeVisible();
});
});
src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
+3 -15
View File
@@ -6,11 +6,7 @@ test.beforeEach(async ({ page }) => {
test.describe('Language', () => {
test('checks the language picker', async ({ page }) => {
await expect(
page.getByRole('button', {
name: 'Create a new document',
}),
).toBeVisible();
await expect(page.getByLabel('Logout')).toBeVisible();
const header = page.locator('header').first();
await header.getByRole('combobox').getByText('English').click();
@@ -19,11 +15,7 @@ test.describe('Language', () => {
header.getByRole('combobox').getByText('Français'),
).toBeVisible();
await expect(
page.getByRole('button', {
name: 'Créer un nouveau document',
}),
).toBeVisible();
await expect(page.getByLabel('Se déconnecter')).toBeVisible();
await header.getByRole('combobox').getByText('Français').click();
await header.getByRole('option', { name: 'Deutsch' }).click();
@@ -31,11 +23,7 @@ test.describe('Language', () => {
header.getByRole('combobox').getByText('Deutsch'),
).toBeVisible();
await expect(
page.getByRole('button', {
name: 'Neues Dokument erstellen',
}),
).toBeVisible();
await expect(page.getByLabel('Abmelden')).toBeVisible();
});
test('checks that backend uses the same language as the frontend', async ({
src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts
+48
View File
@@ -0,0 +1,48 @@
import { expect, test } from '@playwright/test';
test.describe('Left panel desktop', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('checks all the elements are visible', async ({ page }) => {
await expect(page.getByTestId('left-panel-desktop')).toBeVisible();
await expect(page.getByTestId('left-panel-mobile')).toBeHidden();
await expect(page.getByRole('button', { name: 'house' })).toBeVisible();
await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
});
});
test.describe('Left panel mobile', () => {
test.use({ viewport: { width: 500, height: 1200 } });
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test('checks all the desktop elements are hidden and all mobile elements are visible', async ({
page,
}) => {
await expect(page.getByTestId('left-panel-desktop')).toBeHidden();
await expect(page.getByTestId('left-panel-mobile')).not.toBeInViewport();
const header = page.locator('header').first();
const homeButton = page.getByRole('button', { name: 'house' });
const newDocButton = page.getByRole('button', { name: 'New doc' });
const languageButton = page.getByRole('combobox', { name: 'Language' });
const logoutButton = page.getByRole('button', { name: 'Logout' });
await expect(homeButton).not.toBeInViewport();
await expect(newDocButton).not.toBeInViewport();
await expect(languageButton).not.toBeInViewport();
await expect(logoutButton).not.toBeInViewport();
await header.getByLabel('Open the header menu').click();
await expect(page.getByTestId('left-panel-mobile')).toBeInViewport();
await expect(homeButton).toBeInViewport();
await expect(newDocButton).toBeInViewport();
await expect(languageButton).toBeInViewport();
await expect(logoutButton).toBeInViewport();
});
});
src/frontend/apps/e2e/package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "app-e2e",
"version": "1.7.0",
"version": "1.8.0",
"private": true,
"scripts": {
"lint": "eslint . --ext .ts",
@@ -12,7 +12,7 @@
"test:ui::chromium": "yarn test:ui --project=chromium"
},
"devDependencies": {
"@playwright/test": "1.48.1",
"@playwright/test": "1.49.0",
"@types/node": "*",
"@types/pdf-parse": "1.1.4",
"eslint-config-impress": "*",
src/frontend/apps/impress/.env
-3
View File
@@ -1,5 +1,2 @@
NEXT_PUBLIC_API_ORIGIN=
NEXT_PUBLIC_Y_PROVIDER_URL=
NEXT_PUBLIC_MEDIA_URL=
NEXT_PUBLIC_THEME=dsfr
NEXT_PUBLIC_SW_DEACTIVATED=
src/frontend/apps/impress/.env.development
-2
View File
@@ -1,4 +1,2 @@
NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
NEXT_PUBLIC_Y_PROVIDER_URL=ws://localhost:4444
NEXT_PUBLIC_MEDIA_URL=http://localhost:8083
NEXT_PUBLIC_SW_DEACTIVATED=true
src/frontend/apps/impress/.env.test
-1
View File
@@ -1,2 +1 @@
NEXT_PUBLIC_API_ORIGIN=http://test.jest
NEXT_PUBLIC_THEME=test-theme
src/frontend/apps/impress/cunningham.ts
+96 -35
View File
@@ -5,22 +5,60 @@ const config = {
colors: {
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-050': '#F5F5FE',
'primary-100': '#EDF5FA',
'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
'info-150': '#E5EEFA',
'greyscale-000': '#fff',
'greyscale-1000': '#161616',
'blue-400': '#7AB1E8',
'blue-500': '#417DC4',
'blue-600': '#3558A2',
'brown-400': '#E6BE92',
'brown-500': '#BD987A',
'brown-600': '#745B47',
'cyan-400': '#34BAB5',
'cyan-500': '#009099',
'cyan-600': '#006A6F',
'gold-400': '#FFCA00',
'gold-500': '#C3992A',
'gold-600': '#695240',
'green-400': '#34CB6A',
'green-500': '#00A95F',
'green-600': '#297254',
'olive-400': '#99C221',
'olive-500': '#68A532',
'olive-600': '#447049',
'orange-400': '#FF732C',
'orange-500': '#E4794A',
'orange-600': '#755348',
'pink-400': '#FFB7AE',
'pink-500': '#E18B76',
'pink-600': '#8D533E',
'purple-400': '#CE70CC',
'purple-500': '#A558A0',
'purple-600': '#6E445A',
'yellow-400': '#D8C634',
'yellow-500': '#B7A73F',
'yellow-600': '#66673D',
},
font: {
sizes: {
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
ml: '0.938rem',
xl: '1.50rem',
xl: '1.25rem',
t: '0.6875rem',
s: '0.75rem',
h1: '2.2rem',
h2: '1.7rem',
h3: '1.37rem',
h4: '1.15rem',
h5: '1rem',
h6: '0.87rem',
h1: '2rem',
h2: '1.75rem',
h3: '1.5rem',
h4: '1.375rem',
h5: '1.25rem',
h6: '1.125rem',
},
weights: {
thin: 100,
@@ -34,6 +72,21 @@ const config = {
auto: 'auto',
bx: '2.2rem',
full: '100%',
'4xs': '0.125rem',
'3xs': '0.25rem',
'2xs': '0.375rem',
xs: '0.5rem',
sm: '0.75rem',
base: '1rem',
md: '1.5rem',
lg: '2rem',
xl: '2.5rem',
xxl: '3rem',
xxxl: '3.5rem',
'4xl': '4rem',
'5xl': '4.5rem',
'6xl': '6rem',
'7xl': '7.5rem',
},
breakpoints: {
xxs: '320px',
@@ -104,7 +157,7 @@ const config = {
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'menu-background-color': '#ffffff',
'menu-background-color': '#fff',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-300)',
},
@@ -126,7 +179,7 @@ const config = {
},
},
modal: {
'background-color': '#ffffff',
'background-color': '#fff',
},
button: {
'border-radius': {
@@ -178,7 +231,9 @@ const config = {
color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
color: 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-300)',
'color-active': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
},
},
@@ -197,19 +252,19 @@ const config = {
dsfr: {
theme: {
colors: {
'card-border': '#ededed',
'card-border': '#E5E5E5',
'primary-text': '#000091',
'primary-100': '#f5f5fe',
'primary-100': '#ECECFE',
'primary-150': '#F4F4FD',
'primary-200': '#ececfe',
'primary-300': '#e3e3fd',
'primary-400': '#cacafb',
'primary-500': '#6a6af4',
'primary-600': '#000091',
'primary-200': '#E3E3FD',
'primary-300': '#CACAFB',
'primary-400': '#8585F6',
'primary-500': '#6A6AF4',
'primary-600': '#313178',
'primary-700': '#272747',
'primary-800': '#21213f',
'primary-900': '#1c1a36',
'secondary-text': '#FFFFFF',
'primary-800': '#000091',
'primary-900': '#21213F',
'secondary-text': '#fff',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
@@ -220,16 +275,22 @@ const config = {
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'greyscale-text': '#303C4B',
'greyscale-000': '#f6f6f6',
'greyscale-100': '#eeeeee',
'greyscale-200': '#e5e5e5',
'greyscale-300': '#e1e1e1',
'greyscale-400': '#dddddd',
'greyscale-500': '#cecece',
'greyscale-600': '#7b7b7b',
'greyscale-700': '#666666',
'greyscale-800': '#2a2a2a',
'greyscale-900': '#1e1e1e',
'greyscale-000': '#fff',
'greyscale-050': '#F6F6F6',
'greyscale-100': '#eee',
'greyscale-200': '#E5E5E5',
'greyscale-250': '#ddd',
'greyscale-300': '#CECECE',
'greyscale-350': '#ddd',
'greyscale-400': '#929292',
'greyscale-500': '#7C7C7C',
'greyscale-600': '#666666',
'greyscale-700': '#3A3A3A',
'greyscale-750': '#353535',
'greyscale-800': '#2A2A2A',
'greyscale-900': '#242424',
'greyscale-950': '#1E1E1E',
'greyscale-1000': '#161616',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
@@ -297,9 +358,9 @@ const config = {
'color-hover': '#1212ff',
'color-active': '#2323ff',
},
color: '#ffffff',
'color-hover': '#ffffff',
'color-active': '#ffffff',
color: '#fff',
'color-hover': '#fff',
'color-active': '#fff',
},
'primary-text': {
background: {
@@ -363,7 +424,7 @@ const config = {
},
'forms-input': {
'border-radius': '4px',
'background-color': '#ffffff',
'background-color': '#fff',
'border-color': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
'value-color': 'var(--c--theme--colors--primary-text)',
@@ -381,7 +442,7 @@ const config = {
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'background-color': '#ffffff',
'background-color': '#fff',
'border-color': 'var(--c--theme--colors--primary-text)',
'border-color-hover': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
src/frontend/apps/impress/package.json
+21 -16
View File
@@ -1,6 +1,6 @@
{
"name": "app-impress",
"version": "1.7.0",
"version": "1.8.0",
"private": true,
"scripts": {
"dev": "next dev",
@@ -19,37 +19,42 @@
"@blocknote/mantine": "*",
"@blocknote/react": "*",
"@gouvfr-lasuite/integration": "1.0.2",
"@hocuspocus/provider": "2.13.7",
"@hocuspocus/provider": "2.14.0",
"@openfun/cunningham-react": "2.9.4",
"@tanstack/react-query": "5.59.15",
"i18next": "23.16.2",
"@sentry/nextjs": "8.40.0",
"@tanstack/react-query": "5.61.3",
"cmdk": "^1.0.4",
"crisp-sdk-web": "1.0.25",
"i18next": "24.0.0",
"i18next-browser-languagedetector": "8.0.0",
"idb": "8.0.0",
"lodash": "4.17.21",
"luxon": "3.5.0",
"next": "14.2.15",
"next": "15.0.3",
"react": "*",
"react-aria-components": "1.4.1",
"react-aria-components": "1.5.0",
"react-dom": "*",
"react-i18next": "15.0.3",
"react-select": "5.8.1",
"react-i18next": "15.1.1",
"react-intersection-observer": "9.13.1",
"react-select": "5.8.3",
"styled-components": "6.1.13",
"use-debounce": "10.0.4",
"y-protocols": "1.0.6",
"yjs": "*",
"zustand": "5.0.0"
"zustand": "5.0.1"
},
"devDependencies": {
"@svgr/webpack": "8.1.0",
"@tanstack/react-query-devtools": "5.59.15",
"@tanstack/react-query-devtools": "5.61.3",
"@testing-library/dom": "10.4.0",
"@testing-library/jest-dom": "6.6.2",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "16.0.1",
"@testing-library/user-event": "14.5.2",
"@types/jest": "29.5.13",
"@types/lodash": "4.17.12",
"@types/jest": "29.5.14",
"@types/lodash": "4.17.13",
"@types/luxon": "3.4.2",
"@types/node": "*",
"@types/react": "18.3.11",
"@types/react": "18.3.12",
"@types/react-dom": "*",
"cross-env": "*",
"dotenv": "16.4.5",
@@ -63,7 +68,7 @@
"stylelint-config-standard": "36.0.1",
"stylelint-prettier": "5.0.2",
"typescript": "*",
"webpack": "5.95.0",
"workbox-webpack-plugin": "7.1.0"
"webpack": "5.96.1",
"workbox-webpack-plugin": "7.3.0"
}
}
src/frontend/apps/impress/src/__tests__/pages.test.tsx
-26
View File
@@ -1,26 +0,0 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import { AppWrapper } from '@/tests/utils';
import Page from '../pages';
jest.mock('next/navigation', () => ({
useRouter() {
return {
push: jest.fn(),
};
},
}));
describe('Page', () => {
it('checks Page rendering', () => {
render(<Page />, { wrapper: AppWrapper });
expect(
screen.getByRole('button', {
name: /Create a new document/i,
}),
).toBeInTheDocument();
});
});
src/frontend/apps/impress/src/api/config.ts
+6
View File
@@ -0,0 +1,6 @@
export const backendUrl = () =>
process.env.NEXT_PUBLIC_API_ORIGIN ||
(typeof window !== 'undefined' ? window.location.origin : '');
export const baseApiUrl = (apiVersion: string = '1.0') =>
`${backendUrl()}/api/v${apiVersion}/`;
src/frontend/apps/impress/src/api/fetchApi.ts
+1 -2
View File
@@ -1,5 +1,4 @@
import { baseApiUrl } from '@/core';
import { baseApiUrl } from './config';
import { getCSRFToken } from './utils';
interface FetchAPIInit extends RequestInit {
src/frontend/apps/impress/src/api/index.ts
+1
View File
@@ -1,4 +1,5 @@
export * from './APIError';
export * from './config';
export * from './fetchApi';
export * from './helpers';
export * from './types';
src/frontend/apps/impress/src/components/Box.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { ComponentPropsWithRef, ReactHTML } from 'react';
import styled from 'styled-components';
import { CSSProperties } from 'styled-components/dist/types';
import { CSSProperties, RuleSet } from 'styled-components/dist/types';
import {
MarginPadding,
@@ -15,7 +15,7 @@ export interface BoxProps {
$align?: CSSProperties['alignItems'];
$background?: CSSProperties['background'];
$color?: CSSProperties['color'];
$css?: string;
$css?: string | RuleSet<object>;
$direction?: CSSProperties['flexDirection'];
$display?: CSSProperties['display'];
$effect?: 'show' | 'hide';
@@ -73,7 +73,7 @@ export const Box = styled('div')<BoxProps>`
${({ $transition }) => $transition && `transition: ${$transition};`}
${({ $width }) => $width && `width: ${$width};`}
${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
${({ $css }) => $css && `${$css};`}
${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)}
${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
${({ $effect }) => {
let effect;
src/frontend/apps/impress/src/components/BoxButton.tsx
+20 -5
View File
@@ -1,8 +1,13 @@
import { ComponentPropsWithRef, forwardRef } from 'react';
import { forwardRef } from 'react';
import { css } from 'styled-components';
import { Box, BoxType } from './Box';
export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
export type BoxButtonType = BoxType & {
disabled?: boolean;
};
/**
/**
* Styleless button that extends the Box component.
@@ -17,7 +22,7 @@ export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
* </BoxButton>
* ```
*/
const BoxButton = forwardRef<HTMLDivElement, BoxType>(
const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
({ $css, ...props }, ref) => {
return (
<Box
@@ -26,15 +31,25 @@ const BoxButton = forwardRef<HTMLDivElement, BoxType>(
$background="none"
$margin="none"
$padding="none"
$css={`
cursor: pointer;
$css={css`
cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
border: none;
outline: none;
transition: all 0.2s ease-in-out;
font-family: inherit;
color: ${props.disabled
? 'var(--c--theme--colors--greyscale-400) !important'
: 'inherit'};
${$css || ''}
`}
{...props}
onClick={(event: React.MouseEvent<HTMLDivElement>) => {
if (props.disabled) {
return;
}
props.onClick?.(event);
}}
/>
);
},
src/frontend/apps/impress/src/components/Card.tsx
+3 -3
View File
@@ -1,4 +1,5 @@
import { PropsWithChildren } from 'react';
import { css } from 'styled-components';
import { useCunninghamTheme } from '@/cunningham';
@@ -15,9 +16,8 @@ export const Card = ({
<Box
$background="white"
$radius="4px"
$css={`
box-shadow: 2px 2px 5px ${colorsTokens()['greyscale-300']};
border: 1px solid ${colorsTokens()['card-border']};
$css={css`
border: 1px solid ${colorsTokens()['greyscale-200']};
${$css}
`}
{...props}
src/frontend/apps/impress/src/components/DropButton.tsx
+6 -9
View File
@@ -1,9 +1,4 @@
import React, {
PropsWithChildren,
ReactNode,
useEffect,
useState,
} from 'react';
import { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
import { Button, DialogTrigger, Popover } from 'react-aria-components';
import styled from 'styled-components';
@@ -11,7 +6,7 @@ const StyledPopover = styled(Popover)`
background-color: white;
border-radius: 4px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
padding: 0.5rem;
border: 1px solid #dddddd;
opacity: 0;
transition: opacity 0.2s ease-in-out;
@@ -29,9 +24,10 @@ const StyledButton = styled(Button)`
text-wrap: nowrap;
`;
interface DropButtonProps {
export interface DropButtonProps {
button: ReactNode;
isOpen?: boolean;
label?: string;
onOpenChange?: (isOpen: boolean) => void;
}
@@ -39,6 +35,7 @@ export const DropButton = ({
button,
isOpen = false,
onOpenChange,
label,
children,
}: PropsWithChildren<DropButtonProps>) => {
const [opacity, setOpacity] = useState(false);
@@ -58,7 +55,7 @@ export const DropButton = ({
return (
<DialogTrigger onOpenChange={onOpenChangeHandler} isOpen={isLocalOpen}>
<StyledButton>{button}</StyledButton>
<StyledButton aria-label={label}>{button}</StyledButton>
<StyledPopover
style={{ opacity: opacity ? 1 : 0 }}
isOpen={isLocalOpen}
src/frontend/apps/impress/src/components/DropdownMenu.tsx
+140
View File
@@ -0,0 +1,140 @@
import { PropsWithChildren, useState } from 'react';
import { css } from 'styled-components';
import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
export type DropdownMenuOption = {
icon?: string;
label: string;
testId?: string;
callback?: () => void | Promise<unknown>;
danger?: boolean;
isSelected?: boolean;
disabled?: boolean;
};
export type DropdownMenuProps = {
options: DropdownMenuOption[];
showArrow?: boolean;
label?: string;
arrowCss?: BoxProps['$css'];
topMessage?: string;
};
export const DropdownMenu = ({
options,
children,
showArrow = false,
arrowCss,
label,
topMessage,
}: PropsWithChildren<DropdownMenuProps>) => {
const theme = useCunninghamTheme();
const spacings = theme.spacingsTokens();
const colors = theme.colorsTokens();
const [isOpen, setIsOpen] = useState(false);
const onOpenChange = (isOpen: boolean) => {
setIsOpen(isOpen);
};
console.log('topMessage', topMessage);
return (
<DropButton
isOpen={isOpen}
onOpenChange={onOpenChange}
label={label}
button={
showArrow ? (
<Box $direction="row" $align="center">
<div>{children}</div>
<Icon
$css={
arrowCss ??
css`
color: var(--c--theme--colors--primary-600);
`
}
iconName={isOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
/>
</Box>
) : (
children
)
}
>
<Box $maxWidth="320px">
{topMessage && (
<Text
$variation="1000"
$wrap="wrap"
$size="xs"
$weight="bold"
$padding={{ vertical: 'xs', horizontal: 'base' }}
>
{topMessage}
</Text>
)}
{options.map((option) => {
const isDisabled = option.disabled !== undefined && option.disabled;
return (
<BoxButton
role="option"
aria-label={option.label}
data-testid={option.testId}
$direction="row"
disabled={isDisabled}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onOpenChange?.(false);
void option.callback?.();
}}
key={option.label}
$align="center"
$justify="space-between"
$background={colors['greyscale-000']}
$color={colors['primary-600']}
$padding={{ vertical: 'xs', horizontal: 'base' }}
$width="100%"
$gap={spacings['base']}
$css={css`
border: none;
font-size: var(--c--theme--font--sizes--sm);
color: var(--c--theme--colors--greyscale-1000);
font-weight: 500;
cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
user-select: none;
&:hover {
background-color: var(--c--theme--colors--greyscale-050);
}
`}
>
<Box $direction="row" $align="center" $gap={spacings['base']}>
{option.icon && (
<Icon
$size="20px"
$theme="greyscale"
$variation={isDisabled ? '400' : '1000'}
iconName={option.icon}
/>
)}
<Text
$margin={{ top: '-3px' }}
$variation={isDisabled ? '400' : '1000'}
>
{option.label}
</Text>
</Box>
{option.isSelected && (
<Icon iconName="check" $size="20px" $theme="greyscale" />
)}
</BoxButton>
);
})}
</Box>
</DropButton>
);
};
src/frontend/apps/impress/src/components/Icon.tsx
+21 -10
View File
@@ -1,6 +1,19 @@
import { css } from 'styled-components';
import { Text, TextType } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
type IconProps = TextType & {
iconName: string;
};
export const Icon = ({ iconName, ...textProps }: IconProps) => {
return (
<Text $isMaterialIcon {...textProps}>
{iconName}
</Text>
);
};
interface IconBGProps extends TextType {
iconName: string;
}
@@ -29,23 +42,21 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
);
};
interface IconOptionsProps {
isOpen: boolean;
'aria-label': string;
}
type IconOptionsProps = TextType & {
isHorizontal?: boolean;
};
export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
return (
<Text
aria-label={props['aria-label']}
{...props}
$isMaterialIcon
$css={`
transition: all 0.3s ease-in-out;
transform: rotate(${isOpen ? '90' : '0'}deg);
$css={css`
user-select: none;
${props.$css}
`}
>
more_vert
{isHorizontal ? 'more_horiz' : 'more_vert'}
</Text>
);
};
src/frontend/apps/impress/src/components/LoadMoreText.tsx
+35
View File
@@ -0,0 +1,35 @@
import { useTranslation } from 'react-i18next';
import { Box } from './Box';
import { Icon } from './Icon';
import { Text } from './Text';
type LoadMoreTextProps = {
['data-testid']?: string;
};
export const LoadMoreText = ({
'data-testid': dataTestId,
}: LoadMoreTextProps) => {
const { t } = useTranslation();
return (
<Box
data-testid={dataTestId}
$direction="row"
$align="center"
$gap="0.4rem"
$padding={{ horizontal: '2xs', vertical: 'sm' }}
>
<Icon
$theme="primary"
$variation="800"
iconName="arrow_downward"
$size="md"
/>
<Text $theme="primary" $variation="800">
{t('Load more')}
</Text>
</Box>
);
};
src/frontend/apps/impress/src/components/SimpleLoader.tsx
+48
View File
@@ -0,0 +1,48 @@
import { css } from 'styled-components';
import { Box } from './Box';
type Props = {
size?: 'small' | 'medium' | 'large';
};
export const SimpleLoader = ({ size = 'medium' }: Props) => {
return (
<Box
className={size}
$css={css`
display: inline-block;
border: 3px solid var(--c--theme--colors--primary-300);
border-radius: 50%;
border-top-color: var(--c--theme--colors--primary-600);
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
&.small {
width: 24px;
height: 24px;
}
&.medium {
width: 38px;
height: 38px;
}
&.large {
width: 50px;
height: 50px;
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
`}
/>
);
};
src/frontend/apps/impress/src/components/Text.tsx
+3 -1
View File
@@ -33,6 +33,7 @@ export interface TextProps extends BoxProps {
| 'greyscale';
$variation?:
| 'text'
| '000'
| '100'
| '200'
| '300'
@@ -41,7 +42,8 @@ export interface TextProps extends BoxProps {
| '600'
| '700'
| '800'
| '900';
| '900'
| '1000';
}
export type TextType = ComponentPropsWithRef<typeof Text>;
src/frontend/apps/impress/src/components/__tests__/Box.spec.tsx
+2 -2
View File
@@ -17,8 +17,8 @@ describe('<Box />', () => {
);
expect(screen.getByText('My Box')).toHaveStyle(`
padding-left: 4rem;
padding-right: 4rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 3rem;
padding-bottom: 0.5rem;`);
});
src/frontend/apps/impress/src/components/index.ts
+2
View File
@@ -2,9 +2,11 @@ export * from './Box';
export * from './BoxButton';
export * from './Card';
export * from './DropButton';
export * from './DropdownMenu';
export * from './Icon';
export * from './InfiniteScroll';
export * from './Link';
export * from './SideModal';
export * from './separators/SeparatedSection';
export * from './Text';
export * from './TextErrors';
src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx
+88
View File
@@ -0,0 +1,88 @@
import { Command } from 'cmdk';
import { ReactNode, useRef } from 'react';
import { Box } from '../Box';
import { QuickSearchGroup } from './QuickSearchGroup';
import { QuickSearchInput } from './QuickSearchInput';
import { QuickSearchStyle } from './QuickSearchStyle';
export type QuickSearchAction = {
onSelect?: () => void;
content: ReactNode;
};
export type QuickSearchData<T> = {
groupName: string;
elements: T[];
emptyString?: string;
startActions?: QuickSearchAction[];
endActions?: QuickSearchAction[];
showWhenEmpty?: boolean;
};
export type QuickSearchProps<T> = {
data: QuickSearchData<T>[];
onFilter?: (str: string) => void;
renderElement: (element: T) => ReactNode;
onSelect?: (element: T) => void;
inputValue?: string;
inputContent?: ReactNode;
showInput?: boolean;
loading?: boolean;
label?: string;
placeholder?: string;
children?: ReactNode;
};
export const QuickSearch = <T,>({
onSelect,
onFilter,
inputContent,
inputValue,
loading,
showInput = true,
data,
renderElement,
label,
placeholder,
children,
}: QuickSearchProps<T>) => {
const ref = useRef<HTMLDivElement | null>(null);
return (
<>
<QuickSearchStyle />
<div className="quick-search-container">
<Command label={label} shouldFilter={false} ref={ref}>
{showInput && (
<QuickSearchInput
loading={loading}
inputValue={inputValue}
onFilter={onFilter}
placeholder={placeholder}
>
{inputContent}
</QuickSearchInput>
)}
<Command.List>
<Box>
{!loading &&
data.map((group) => {
return (
<QuickSearchGroup
key={group.groupName}
group={group}
onSelect={onSelect}
renderElement={renderElement}
/>
);
})}
{children}
</Box>
</Command.List>
</Command>
</div>
</>
);
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
+61
View File
@@ -0,0 +1,61 @@
import { Command } from 'cmdk';
import { QuickSearchData, QuickSearchProps } from './QuickSearch';
import { QuickSearchItem } from './QuickSearchItem';
type Props<T> = {
group: QuickSearchData<T>;
onSelect?: QuickSearchProps<T>['onSelect'];
renderElement: QuickSearchProps<T>['renderElement'];
};
export const QuickSearchGroup = <T,>({
group,
onSelect,
renderElement,
}: Props<T>) => {
return (
<Command.Group
key={group.groupName}
heading={group.groupName}
forceMount={false}
>
{group.startActions?.map((action, index) => {
return (
<QuickSearchItem
key={`${group.groupName}-action-${index}`}
onSelect={action.onSelect}
>
{action.content}
</QuickSearchItem>
);
})}
{group.elements.map((groupElement, index) => {
return (
<QuickSearchItem
key={`${group.groupName}-element-${index}`}
onSelect={() => {
console.log('onSelect', groupElement);
onSelect?.(groupElement);
}}
>
{renderElement(groupElement)}
</QuickSearchItem>
);
})}
{group.endActions?.map((action, index) => {
return (
<QuickSearchItem
key={`${group.groupName}-action-${index}`}
onSelect={action.onSelect}
>
{action.content}
</QuickSearchItem>
);
})}
{group.emptyString && group.elements.length === 0 && (
<span className="ml-b clr-greyscale-500">{group.emptyString}</span>
)}
</Command.Group>
);
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
+66
View File
@@ -0,0 +1,66 @@
import { Loader } from '@openfun/cunningham-react';
import { Command } from 'cmdk';
import { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { HorizontalSeparator } from '@/components/separators/HorizontalSeparator';
import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
import { Icon } from '../Icon';
type Props = {
loading?: boolean;
inputValue?: string;
onFilter?: (str: string) => void;
placeholder?: string;
children?: ReactNode;
};
export const QuickSearchInput = ({
loading,
inputValue,
onFilter,
placeholder,
children,
}: Props) => {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
if (children) {
return (
<>
{children}
<HorizontalSeparator />
</>
);
}
return (
<>
<Box
$direction="row"
$align="center"
$gap={spacing['2xs']}
$padding={{ horizontal: 'base' }}
>
{!loading && <Icon iconName="search" $variation="600" />}
{loading && (
<div>
<Loader size="small" />
</div>
)}
<Command.Input
/* eslint-disable-next-line jsx-a11y/no-autofocus */
autoFocus={true}
aria-label={t('Find a member to add to the document')}
value={inputValue}
role="combobox"
placeholder={placeholder ?? t('Search')}
onValueChange={onFilter}
/>
</Box>
<HorizontalSeparator />
</>
);
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchItem.tsx
+12
View File
@@ -0,0 +1,12 @@
import { Command } from 'cmdk';
import { PropsWithChildren } from 'react';
type Props = {
onSelect?: (value: string) => void;
};
export const QuickSearchItem = ({
children,
onSelect,
}: PropsWithChildren<Props>) => {
return <Command.Item onSelect={onSelect}>{children}</Command.Item>;
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
+44
View File
@@ -0,0 +1,44 @@
import { ReactNode } from 'react';
import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
export type QuickSearchItemContentProps = {
alwaysShowRight?: boolean;
left: ReactNode;
right?: ReactNode;
};
export const QuickSearchItemContent = ({
alwaysShowRight = false,
left,
right,
}: QuickSearchItemContentProps) => {
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
return (
<Box
$direction="row"
$align="center"
$padding={{ horizontal: '2xs', vertical: '3xs' }}
$justify="space-between"
$width="100%"
>
<Box $direction="row" $align="center" $gap={spacings['2xs']}>
{left}
</Box>
{right && (
<Box
className={!alwaysShowRight ? 'show-right-on-focus' : ''}
$direction="row"
$align="center"
>
{right}
</Box>
)}
</Box>
);
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
+158
View File
@@ -0,0 +1,158 @@
import { createGlobalStyle } from 'styled-components';
export const QuickSearchStyle = createGlobalStyle`
.quick-search-container {
[cmdk-root] {
width: 100%;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
transition: transform 100ms ease;
outline: none;
}
[cmdk-input] {
border: none;
width: 100%;
font-size: 17px;
padding: 8px;
background: white;
outline: none;
color: var(--c--theme--colors--greyscale-1000);
border-radius: 0;
&::placeholder {
color: var(--c--theme--colors--greyscale-500);
}
}
[cmdk-vercel-badge] {
height: 20px;
background: var(--c--theme--colors--greyscale-700);
display: inline-flex;
align-items: center;
padding: 0 8px;
font-size: 12px;
color: var(--c--theme--colors--greyscale-500);
border-radius: 4px;
margin: 4px 0 4px 4px;
user-select: none;
text-transform: capitalize;
font-weight: 500;
}
[cmdk-item] {
content-visibility: auto;
cursor: pointer;
border-radius: var(--c--theme--spacings--xs);
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
user-select: none;
will-change: background, color;
transition: all 150ms ease;
transition-property: none;
.show-right-on-focus {
display: none;
}
&:hover,
&[data-selected='true'] {
background: var(--c--theme--colors--greyscale-100);
.show-right-on-focus {
display: inherit;
}
}
&[data-disabled='true'] {
color: var(--c--theme--colors--greyscale-500);
cursor: not-allowed;
}
& + [cmdk-item] {
margin-top: 4px;
}
}
[cmdk-list] {
padding: 0 var(--c--theme--spacings--sm) var(--c--theme--spacings--sm)
var(--c--theme--spacings--sm);
flex:1;
overflow-y: auto;
overscroll-behavior: contain;
transition: 100ms ease;
transition-property: height;
}
[cmdk-vercel-shortcuts] {
display: flex;
margin-left: auto;
gap: 8px;
kbd {
font-size: 12px;
min-width: 20px;
padding: 4px;
height: 20px;
border-radius: 4px;
color: white;
background: var(--c--theme--colors--greyscale-500);
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
}
[cmdk-separator] {
height: 1px;
width: 100%;
background: var(--c--theme--colors--greyscale-500);
margin: 4px 0;
}
*:not([hidden]) + [cmdk-group] {
margin-top: 8px;
}
[cmdk-group-heading] {
user-select: none;
font-size: var(--c--theme--font--sizes--sm);
color: var(--c--theme--colors--greyscale-700);
font-weight: bold;
display: flex;
align-items: center;
margin-bottom: var(--c--theme--spacings--base);
}
[cmdk-empty] {
}
}
.c__modal__scroller:has(.quick-search-container),
.c__modal__scroller:has(.noPadding) {
padding: 0 !important;
.c__modal__close .c__button {
right: 5px;
top: 5px;
padding: 1.5rem 1rem;
}
.c__modal__title {
font-size: var(--c--theme--font--sizes--xs);
padding: var(--c--theme--spacings--base);
margin-bottom: 0;
}
}
`;
src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
+31
View File
@@ -0,0 +1,31 @@
import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
export enum SeparatorVariant {
LIGHT = 'light',
DARK = 'dark',
}
type Props = {
variant?: SeparatorVariant;
};
export const HorizontalSeparator = ({
variant = SeparatorVariant.LIGHT,
}: Props) => {
const { colorsTokens } = useCunninghamTheme();
return (
<Box
$height="1px"
$width="100%"
$margin={{ vertical: 'base' }}
$background={
variant === SeparatorVariant.DARK
? '#e5e5e533'
: colorsTokens()['greyscale-200']
}
/>
);
};
src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
+32
View File
@@ -0,0 +1,32 @@
import { PropsWithChildren } from 'react';
import { css } from 'styled-components';
import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
type Props = {
showSeparator?: boolean;
};
export const SeparatedSection = ({
showSeparator = true,
children,
}: PropsWithChildren<Props>) => {
const theme = useCunninghamTheme();
const colors = theme.colorsTokens();
const spacings = theme.spacingsTokens();
return (
<Box
$css={css`
padding: ${spacings['base']} 0;
${showSeparator &&
css`
border-bottom: 1px solid ${colors?.['greyscale-200']};
`}
`}
>
{children}
</Box>
);
};
src/frontend/apps/impress/src/core/AppProvider.tsx
+4 -1
View File
@@ -7,6 +7,7 @@ import '@/i18n/initI18n';
import { useResponsiveStore } from '@/stores/';
import { Auth } from './auth/';
import { ConfigProvider } from './config/';
/**
* QueryClient:
@@ -39,7 +40,9 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}>
<CunninghamProvider theme={theme}>
<Auth>{children}</Auth>
<ConfigProvider>
<Auth>{children}</Auth>
</ConfigProvider>
</CunninghamProvider>
</QueryClientProvider>
);
src/frontend/apps/impress/src/core/auth/__tests__/useAuthStore.test.tsx
+40
View File
@@ -0,0 +1,40 @@
import { Crisp } from 'crisp-sdk-web';
import fetchMock from 'fetch-mock';
import { useAuthStore } from '../useAuthStore';
jest.mock('crisp-sdk-web', () => ({
...jest.requireActual('crisp-sdk-web'),
Crisp: {
isCrispInjected: jest.fn().mockReturnValue(true),
setTokenId: jest.fn(),
user: {
setEmail: jest.fn(),
},
session: {
reset: jest.fn(),
},
},
}));
describe('useAuthStore', () => {
afterEach(() => {
jest.clearAllMocks();
fetchMock.restore();
});
it('checks support session is terminated when logout', () => {
window.$crisp = true;
Object.defineProperty(window, 'location', {
value: {
...window.location,
replace: jest.fn(),
},
writable: true,
});
useAuthStore.getState().logout();
expect(Crisp.session.reset).toHaveBeenCalled();
});
});
src/frontend/apps/impress/src/core/auth/useAuthStore.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
import { create } from 'zustand';
import { baseApiUrl } from '@/core/conf';
import { baseApiUrl } from '@/api';
import { terminateCrispSession } from '@/services';
import { User, getMe } from './api';
import { PATH_AUTH_LOCAL_STORAGE } from './conf';
@@ -42,6 +43,7 @@ export const useAuthStore = create<AuthStore>((set, get) => ({
window.location.replace(`${baseApiUrl()}authenticate/`);
},
logout: () => {
terminateCrispSession();
window.location.replace(`${baseApiUrl()}logout/`);
},
// If we try to access a specific page and we are not authenticated
src/frontend/apps/impress/src/core/conf.ts
-18
View File
@@ -1,18 +0,0 @@
export const mediaUrl = () =>
process.env.NEXT_PUBLIC_MEDIA_URL ||
(typeof window !== 'undefined' ? window.location.origin : '');
export const backendUrl = () =>
process.env.NEXT_PUBLIC_API_ORIGIN ||
(typeof window !== 'undefined' ? window.location.origin : '');
export const baseApiUrl = (apiVersion: string = '1.0') =>
`${backendUrl()}/api/v${apiVersion}/`;
export const providerUrl = (docId: string) => {
const base =
process.env.NEXT_PUBLIC_Y_PROVIDER_URL ||
(typeof window !== 'undefined' ? `wss://${window.location.host}/ws` : '');
return `${base}/${docId}`;
};
src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
+49
View File
@@ -0,0 +1,49 @@
import { Loader } from '@openfun/cunningham-react';
import { PropsWithChildren, useEffect } from 'react';
import { Box } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { configureCrispSession } from '@/services';
import { useSentryStore } from '@/stores/useSentryStore';
import { useConfig } from './api/useConfig';
export const ConfigProvider = ({ children }: PropsWithChildren) => {
const { data: conf } = useConfig();
const { setSentry } = useSentryStore();
const { setTheme } = useCunninghamTheme();
useEffect(() => {
if (!conf?.SENTRY_DSN) {
return;
}
setSentry(conf.SENTRY_DSN, conf.ENVIRONMENT);
}, [conf?.SENTRY_DSN, conf?.ENVIRONMENT, setSentry]);
useEffect(() => {
if (!conf?.FRONTEND_THEME) {
return;
}
setTheme(conf.FRONTEND_THEME);
}, [conf?.FRONTEND_THEME, setTheme]);
useEffect(() => {
if (!conf?.CRISP_WEBSITE_ID) {
return;
}
configureCrispSession(conf.CRISP_WEBSITE_ID);
}, [conf?.CRISP_WEBSITE_ID]);
if (!conf) {
return (
<Box $height="100vh" $width="100vw" $align="center" $justify="center">
<Loader />
</Box>
);
}
return children;
};
src/frontend/apps/impress/src/core/config/api/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './useConfig';
src/frontend/apps/impress/src/core/config/api/useConfig.tsx
+35
View File
@@ -0,0 +1,35 @@
import { useQuery } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { Theme } from '@/cunningham/';
interface ConfigResponse {
LANGUAGES: [string, string][];
LANGUAGE_CODE: string;
ENVIRONMENT: string;
COLLABORATION_SERVER_URL?: string;
CRISP_WEBSITE_ID?: string;
FRONTEND_THEME?: Theme;
MEDIA_BASE_URL?: string;
SENTRY_DSN?: string;
}
export const getConfig = async (): Promise<ConfigResponse> => {
const response = await fetchAPI(`config/`);
if (!response.ok) {
throw new APIError('Failed to get the doc', await errorCauses(response));
}
return response.json() as Promise<ConfigResponse>;
};
export const KEY_CONFIG = 'config';
export function useConfig() {
return useQuery<ConfigResponse, APIError, ConfigResponse>({
queryKey: [KEY_CONFIG],
queryFn: () => getConfig(),
staleTime: Infinity,
});
}
src/frontend/apps/impress/src/core/config/hooks/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from './useMediaUrl';
export * from './useCollaborationUrl';
src/frontend/apps/impress/src/core/config/hooks/useCollaborationUrl.tsx
+15
View File
@@ -0,0 +1,15 @@
import { useConfig } from '../api';
export const useCollaborationUrl = (room?: string) => {
const { data: conf } = useConfig();
if (!room) {
return;
}
const base =
conf?.COLLABORATION_SERVER_URL ||
(typeof window !== 'undefined' ? `wss://${window.location.host}/ws` : '');
return `${base}/${room}`;
};
src/frontend/apps/impress/src/core/config/hooks/useMediaUrl.tsx
+10
View File
@@ -0,0 +1,10 @@
import { useConfig } from '../api';
export const useMediaUrl = () => {
const { data: conf } = useConfig();
return (
conf?.MEDIA_BASE_URL ||
(typeof window !== 'undefined' ? window.location.origin : '')
);
};
src/frontend/apps/impress/src/core/config/index.ts
+3
View File
@@ -0,0 +1,3 @@
export * from './api/';
export * from './ConfigProvider';
export * from './hooks';
src/frontend/apps/impress/src/core/index.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export * from './AppProvider';
export * from './auth';
export * from './conf';
export * from './config';
src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx
+1 -7
View File
@@ -1,12 +1,6 @@
import useCunninghamTheme from '../useCunninghamTheme';
import { useCunninghamTheme } from '../useCunninghamTheme';
describe('<useCunninghamTheme />', () => {
it('has the theme from NEXT_PUBLIC_THEME', () => {
const { theme } = useCunninghamTheme.getState();
expect(theme).toBe('test-theme');
});
it('has the dsfr logo correctly set', () => {
const { themeTokens, setTheme } = useCunninghamTheme.getState();
setTheme('dsfr');
src/frontend/apps/impress/src/cunningham/cunningham-style.css
+19
View File
@@ -351,6 +351,11 @@ input:-webkit-autofill:focus {
background-color: transparent;
}
.c__button--nano {
padding: 0 var(--c--theme--spacings--2xs);
gap: var(--c--theme--spacings--2xs);
}
.c__button--medium {
padding: 0.9rem var(--c--theme--spacings--s);
}
@@ -442,6 +447,7 @@ input:-webkit-autofill:focus {
}
.c__button--tertiary {
background-color: var(--c--components--button--tertiary--background--color);
color: var(--c--components--button--tertiary--color);
border: none;
}
@@ -454,6 +460,13 @@ input:-webkit-autofill:focus {
color: var(--c--components--button--tertiary--color);
}
.c__button--tertiary:active {
background-color: var(
--c--components--button--tertiary--background--color-active
);
color: var(--c--components--button--tertiary--color-active);
}
.c__button--tertiary:disabled {
background-color: var(
--c--components--button--tertiary--background--color-disabled
@@ -519,6 +532,12 @@ input:-webkit-autofill:focus {
overflow-y: auto;
}
.c__modal__title {
padding: 0;
font-size: 1.125rem;
margin-bottom: var(--c--theme--spacings--sm);
}
@media screen and (width <= 420px) {
.c__modal__scroller {
padding: 0.7rem;
src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+724 -308
View File
File diff suppressed because it is too large Load Diff
src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+101 -42
View File
@@ -13,7 +13,7 @@ export const tokens = {
'secondary-700': '#97A3AE',
'secondary-800': '#757E87',
'secondary-900': '#596067',
'info-text': '#FFFFFF',
'info-text': '#fff',
'info-100': '#EBF2FC',
'info-200': '#8CB5EA',
'info-300': '#5894E1',
@@ -32,7 +32,7 @@ export const tokens = {
'greyscale-700': '#555F6B',
'greyscale-800': '#303C4B',
'greyscale-900': '#0C1A2B',
'greyscale-000': '#FFFFFF',
'greyscale-000': '#fff',
'primary-100': '#EDF5FA',
'primary-200': '#8CB5EA',
'primary-300': '#5894E1',
@@ -69,28 +69,65 @@ export const tokens = {
'danger-700': '#9B0000',
'danger-800': '#780000',
'danger-900': '#5C0000',
'primary-text': '#FFFFFF',
'success-text': '#FFFFFF',
'warning-text': '#FFFFFF',
'danger-text': '#FFFFFF',
'primary-text': '#fff',
'success-text': '#fff',
'warning-text': '#fff',
'danger-text': '#fff',
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-050': '#F5F5FE',
'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
'info-150': '#E5EEFA',
'greyscale-1000': '#161616',
'blue-400': '#7AB1E8',
'blue-500': '#417DC4',
'blue-600': '#3558A2',
'brown-400': '#E6BE92',
'brown-500': '#BD987A',
'brown-600': '#745B47',
'cyan-400': '#34BAB5',
'cyan-500': '#009099',
'cyan-600': '#006A6F',
'gold-400': '#FFCA00',
'gold-500': '#C3992A',
'gold-600': '#695240',
'green-400': '#34CB6A',
'green-500': '#00A95F',
'green-600': '#297254',
'olive-400': '#99C221',
'olive-500': '#68A532',
'olive-600': '#447049',
'orange-400': '#FF732C',
'orange-500': '#E4794A',
'orange-600': '#755348',
'pink-400': '#FFB7AE',
'pink-500': '#E18B76',
'pink-600': '#8D533E',
'purple-400': '#CE70CC',
'purple-500': '#A558A0',
'purple-600': '#6E445A',
'yellow-400': '#D8C634',
'yellow-500': '#B7A73F',
'yellow-600': '#66673D',
},
font: {
sizes: {
h1: '2.2rem',
h2: '1.7rem',
h3: '1.37rem',
h4: '1.15rem',
h5: '1rem',
h6: '0.87rem',
h1: '2rem',
h2: '1.75rem',
h3: '1.5rem',
h4: '1.375rem',
h5: '1.25rem',
h6: '1.125rem',
l: '1rem',
m: '0.8125rem',
s: '0.75rem',
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
ml: '0.938rem',
xl: '1.50rem',
xl: '1.25rem',
t: '0.6875rem',
},
weights: {
@@ -120,7 +157,7 @@ export const tokens = {
},
spacings: {
'0': '0',
xl: '4rem',
xl: '2.5rem',
l: '3rem',
b: '1.625rem',
s: '1rem',
@@ -130,6 +167,20 @@ export const tokens = {
auto: 'auto',
bx: '2.2rem',
full: '100%',
'4xs': '0.125rem',
'3xs': '0.25rem',
'2xs': '0.375rem',
xs: '0.5rem',
sm: '0.75rem',
base: '1rem',
md: '1.5rem',
lg: '2rem',
xxl: '3rem',
xxxl: '3.5rem',
'4xl': '4rem',
'5xl': '4.5rem',
'6xl': '6rem',
'7xl': '7.5rem',
},
transitions: {
'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -202,7 +253,7 @@ export const tokens = {
focus: 'var(--c--components--forms-select--border-radius)',
},
'font-size': 'var(--c--theme--font--sizes--ml)',
'menu-background-color': '#ffffff',
'menu-background-color': '#fff',
'item-background-color': {
hover: 'var(--c--theme--colors--primary-300)',
},
@@ -223,7 +274,7 @@ export const tokens = {
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
},
},
modal: { 'background-color': '#ffffff' },
modal: { 'background-color': '#fff' },
button: {
'border-radius': {
active: 'var(--c--components--button--border-radius)',
@@ -270,7 +321,9 @@ export const tokens = {
color: 'var(--c--theme--colors--primary-text)',
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
color: 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--primary-300)',
'color-active': 'var(--c--theme--colors--primary-100)',
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
},
},
@@ -334,19 +387,19 @@ export const tokens = {
dsfr: {
theme: {
colors: {
'card-border': '#ededed',
'card-border': '#E5E5E5',
'primary-text': '#000091',
'primary-100': '#f5f5fe',
'primary-100': '#ECECFE',
'primary-150': '#F4F4FD',
'primary-200': '#ececfe',
'primary-300': '#e3e3fd',
'primary-400': '#cacafb',
'primary-500': '#6a6af4',
'primary-600': '#000091',
'primary-200': '#E3E3FD',
'primary-300': '#CACAFB',
'primary-400': '#8585F6',
'primary-500': '#6A6AF4',
'primary-600': '#313178',
'primary-700': '#272747',
'primary-800': '#21213f',
'primary-900': '#1c1a36',
'secondary-text': '#FFFFFF',
'primary-800': '#000091',
'primary-900': '#21213F',
'secondary-text': '#fff',
'secondary-100': '#fee9ea',
'secondary-200': '#fedfdf',
'secondary-300': '#fdbfbf',
@@ -357,16 +410,22 @@ export const tokens = {
'secondary-800': '#341f1f',
'secondary-900': '#2b1919',
'greyscale-text': '#303C4B',
'greyscale-000': '#f6f6f6',
'greyscale-100': '#eeeeee',
'greyscale-200': '#e5e5e5',
'greyscale-300': '#e1e1e1',
'greyscale-400': '#dddddd',
'greyscale-500': '#cecece',
'greyscale-600': '#7b7b7b',
'greyscale-700': '#666666',
'greyscale-800': '#2a2a2a',
'greyscale-900': '#1e1e1e',
'greyscale-000': '#fff',
'greyscale-050': '#F6F6F6',
'greyscale-100': '#eee',
'greyscale-200': '#E5E5E5',
'greyscale-250': '#ddd',
'greyscale-300': '#CECECE',
'greyscale-350': '#ddd',
'greyscale-400': '#929292',
'greyscale-500': '#7C7C7C',
'greyscale-600': '#666666',
'greyscale-700': '#3A3A3A',
'greyscale-750': '#353535',
'greyscale-800': '#2A2A2A',
'greyscale-900': '#242424',
'greyscale-950': '#1E1E1E',
'greyscale-1000': '#161616',
'success-text': '#1f8d49',
'success-100': '#dffee6',
'success-200': '#b8fec9',
@@ -427,9 +486,9 @@ export const tokens = {
'color-hover': '#1212ff',
'color-active': '#2323ff',
},
color: '#ffffff',
'color-hover': '#ffffff',
'color-active': '#ffffff',
color: '#fff',
'color-hover': '#fff',
'color-active': '#fff',
},
'primary-text': {
background: {
@@ -486,7 +545,7 @@ export const tokens = {
},
'forms-input': {
'border-radius': '4px',
'background-color': '#ffffff',
'background-color': '#fff',
'border-color': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
'value-color': 'var(--c--theme--colors--primary-text)',
@@ -502,7 +561,7 @@ export const tokens = {
'item-font-size': '14px',
'border-radius': '4px',
'border-radius-hover': '4px',
'background-color': '#ffffff',
'background-color': '#fff',
'border-color': 'var(--c--theme--colors--primary-text)',
'border-color-hover': 'var(--c--theme--colors--primary-text)',
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
src/frontend/apps/impress/src/cunningham/index.ts
+2 -4
View File
@@ -1,4 +1,2 @@
import { tokens } from './cunningham-tokens';
import useCunninghamTheme from './useCunninghamTheme';
export { tokens, useCunninghamTheme };
export * from './cunningham-tokens';
export * from './useCunninghamTheme';
src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx
+14 -7
View File
@@ -5,30 +5,37 @@ import { tokens } from './cunningham-tokens';
type Tokens = typeof tokens.themes.default & Partial<typeof tokens.themes.dsfr>;
type ColorsTokens = Tokens['theme']['colors'];
type FontSizesTokens = Tokens['theme']['font']['sizes'];
type SpacingsTokens = Tokens['theme']['spacings'];
type ComponentTokens = Tokens['components'];
type Theme = 'default' | 'dsfr';
export type Theme = keyof typeof tokens.themes;
interface AuthStore {
theme: Theme;
theme: string;
setTheme: (theme: Theme) => void;
themeTokens: () => Partial<Tokens['theme']>;
colorsTokens: () => Partial<ColorsTokens>;
fontSizesTokens: () => Partial<FontSizesTokens>;
spacingsTokens: () => Partial<SpacingsTokens>;
componentTokens: () => ComponentTokens;
}
const useCunninghamTheme = create<AuthStore>((set, get) => {
export const useCunninghamTheme = create<AuthStore>((set, get) => {
const currentTheme = () =>
merge(tokens.themes['default'], tokens.themes[get().theme]) as Tokens;
merge(
tokens.themes['default'],
tokens.themes[get().theme as keyof typeof tokens.themes],
) as Tokens;
return {
theme: (process.env.NEXT_PUBLIC_THEME as Theme) || 'dsfr',
theme: 'dsfr',
themeTokens: () => currentTheme().theme,
colorsTokens: () => currentTheme().theme.colors,
componentTokens: () => currentTheme().components,
spacingsTokens: () => currentTheme().theme.spacings,
fontSizesTokens: () => currentTheme().theme.font.sizes,
setTheme: (theme: Theme) => {
set({ theme });
},
};
});
export default useCunninghamTheme;
src/frontend/apps/impress/src/custom-next.d.ts
Vendored
-3
View File
@@ -20,9 +20,6 @@ declare module '*.svg?url' {
namespace NodeJS {
interface ProcessEnv {
NEXT_PUBLIC_API_ORIGIN?: string;
NEXT_PUBLIC_MEDIA_URL?: string;
NEXT_PUBLIC_Y_PROVIDER_URL?: string;
NEXT_PUBLIC_SW_DEACTIVATED?: string;
NEXT_PUBLIC_THEME?: string;
}
}
src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx
+1 -2
View File
@@ -14,14 +14,13 @@ import { useTranslation } from 'react-i18next';
import { isAPIError } from '@/api';
import { Box, Text } from '@/components';
import { useDocOptions } from '@/features/docs/doc-management/';
import { useDocOptions, useDocStore } from '@/features/docs/doc-management/';
import {
AITransformActions,
useDocAITransform,
useDocAITranslate,
} from '../api/';
import { useDocStore } from '../stores';
type LanguageTranslate = {
value: string;
src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+17 -38
View File
@@ -1,4 +1,4 @@
import { locales } from '@blocknote/core';
import { Dictionary, locales } from '@blocknote/core';
import '@blocknote/core/fonts/inter.css';
import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css';
@@ -9,14 +9,13 @@ import React, { useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, TextErrors } from '@/components';
import { mediaUrl } from '@/core';
import { useAuthStore } from '@/core/auth';
import { useMediaUrl } from '@/core/config';
import { Doc } from '@/features/docs/doc-management';
import { Version } from '@/features/docs/doc-versioning/';
import { useCreateDocAttachment } from '../api/useCreateDocUpload';
import useSaveDoc from '../hook/useSaveDoc';
import { useDocStore, useHeadingStore } from '../stores';
import { useEditorStore, useHeadingStore } from '../stores';
import { randomColor } from '../utils';
import { BlockNoteToolbar } from './BlockNoteToolbar';
@@ -75,47 +74,23 @@ const cssEditor = (readonly: boolean) => `
`;
interface BlockNoteEditorProps {
doc: Doc;
version?: Version;
}
export const BlockNoteEditor = ({ doc, version }: BlockNoteEditorProps) => {
const { createProvider, docsStore } = useDocStore();
const storeId = version?.id || doc.id;
const initialContent = version?.content || doc.content;
const provider = docsStore?.[storeId]?.provider;
useEffect(() => {
if (!provider || provider.document.guid !== storeId) {
createProvider(storeId, initialContent);
}
}, [createProvider, initialContent, provider, storeId]);
if (!provider) {
return null;
}
return <BlockNoteContent doc={doc} provider={provider} storeId={storeId} />;
};
interface BlockNoteContentProps {
doc: Doc;
provider: HocuspocusProvider;
storeId: string;
}
export const BlockNoteContent = ({
export const BlockNoteEditor = ({
doc,
provider,
storeId,
}: BlockNoteContentProps) => {
}: BlockNoteEditorProps) => {
const isVersion = doc.id !== storeId;
const { userData } = useAuthStore();
const { setStore, docsStore } = useDocStore();
const { setEditor } = useEditorStore();
const mediaUrl = useMediaUrl();
const readOnly = !doc.abilities.partial_update || isVersion;
useSaveDoc(doc.id, provider.document, !readOnly);
const storedEditor = docsStore?.[storeId]?.editor;
const {
mutateAsync: createDocAttachment,
isError: isErrorAttachment,
@@ -135,9 +110,9 @@ export const BlockNoteContent = ({
body,
});
return `${mediaUrl()}${ret.file}`;
return `${mediaUrl}${ret.file}`;
},
[createDocAttachment, doc.id],
[createDocAttachment, doc.id, mediaUrl],
);
const editor = useCreateBlockNote(
@@ -150,15 +125,19 @@ export const BlockNoteContent = ({
color: randomColor(),
},
},
dictionary: locales[lang as keyof typeof locales],
dictionary: locales[lang as keyof typeof locales] as Dictionary,
uploadFile,
},
[lang, provider, uploadFile, userData?.email, userData?.full_name],
);
useEffect(() => {
setStore(storeId, { editor });
}, [setStore, storeId, editor]);
setEditor(editor);
return () => {
setEditor(undefined);
};
}, [setEditor, editor]);
useEffect(() => {
setHeadings(editor);
@@ -185,7 +164,7 @@ export const BlockNoteContent = ({
)}
<BlockNoteView
editor={storedEditor ?? editor}
editor={editor}
formattingToolbar={false}
editable={!readOnly}
theme="light"
src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+36 -10
View File
@@ -1,13 +1,13 @@
import { Alert, Loader, VariantType } from '@openfun/cunningham-react';
import { useRouter as useNavigate } from 'next/navigation';
import { useRouter } from 'next/router';
import React from 'react';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Card, Text, TextErrors } from '@/components';
import { useCollaborationUrl } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { DocHeader } from '@/features/docs/doc-header';
import { Doc } from '@/features/docs/doc-management';
import { Doc, useDocStore } from '@/features/docs/doc-management';
import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
import { useResponsiveStore } from '@/stores';
@@ -32,11 +32,18 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
const { colorsTokens } = useCunninghamTheme();
const { providers } = useDocStore();
const provider = providers?.[doc.id];
if (!provider) {
return null;
}
return (
<>
<DocHeader doc={doc} versionId={versionId as Versions['version_id']} />
{!doc.abilities.partial_update && (
<Box $margin={{ all: 'small', top: 'none' }}>
<Box $width="100%" $margin={{ all: 'small', top: 'none' }}>
<Alert type={VariantType.WARNING}>
{t(`Read only, you cannot edit this document.`)}
</Alert>
@@ -51,10 +58,10 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
)}
<Box
$background={colorsTokens()['primary-bg']}
$height="100%"
$direction="row"
$width="100%"
$margin={{ all: isMobile ? 'tiny' : 'small', top: 'none' }}
$css="overflow-x: clip;"
$css="overflow-x: clip; flex: 1;"
$position="relative"
>
<Card
@@ -66,7 +73,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
{isVersion ? (
<DocVersionEditor doc={doc} versionId={versionId} />
) : (
<BlockNoteEditor doc={doc} />
<BlockNoteEditor doc={doc} storeId={doc.id} provider={provider} />
)}
{!isMobile && <IconOpenPanelEditor headings={headings} />}
</Card>
@@ -91,12 +98,25 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => {
docId: doc.id,
versionId,
});
const { createProvider, providers } = useDocStore();
const collaborationUrl = useCollaborationUrl(versionId);
const navigate = useNavigate();
const { replace } = useRouter();
useEffect(() => {
if (!version?.id || !collaborationUrl) {
return;
}
const provider = providers?.[version.id];
if (!provider || provider.document.guid !== version.id) {
createProvider(collaborationUrl, version.id, version.content);
}
}, [createProvider, providers, version, collaborationUrl]);
if (isError && error) {
if (error.status === 404) {
navigate.replace(`/404`);
void replace(`/404`);
return null;
}
@@ -124,5 +144,11 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => {
);
}
return <BlockNoteEditor doc={doc} version={version} />;
const provider = providers?.[version.id];
if (!provider) {
return null;
}
return <BlockNoteEditor doc={doc} storeId={version.id} provider={provider} />;
};
src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
+1 -3
View File
@@ -127,9 +127,7 @@ export const PanelEditor = ({
</BoxButton>
)}
</Box>
{isPanelTableContentOpen && (
<TableContent doc={doc} headings={headings} />
)}
{isPanelTableContentOpen && <TableContent headings={headings} />}
{!isPanelTableContentOpen && doc.abilities.versions_list && (
<VersionList doc={doc} />
)}
src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export * from './useDocStore';
export * from './useEditorStore';
export * from './useHeadingStore';
export * from './usePanelEditorStore';
src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx
-74
View File
@@ -1,74 +0,0 @@
import { BlockNoteEditor } from '@blocknote/core';
import { HocuspocusProvider } from '@hocuspocus/provider';
import * as Y from 'yjs';
import { create } from 'zustand';
import { providerUrl } from '@/core';
import { Base64, Doc } from '@/features/docs/doc-management';
import { blocksToYDoc } from '../utils';
interface DocStore {
provider: HocuspocusProvider;
editor?: BlockNoteEditor;
}
export interface UseDocStore {
currentDoc?: Doc;
docsStore: {
[storeId: string]: DocStore;
};
createProvider: (storeId: string, initialDoc: Base64) => HocuspocusProvider;
setStore: (storeId: string, props: Partial<DocStore>) => void;
setCurrentDoc: (doc: Doc | undefined) => void;
}
export const useDocStore = create<UseDocStore>((set, get) => ({
currentDoc: undefined,
docsStore: {},
createProvider: (storeId: string, initialDoc: Base64) => {
const doc = new Y.Doc({
guid: storeId,
});
if (initialDoc) {
Y.applyUpdate(doc, Buffer.from(initialDoc, 'base64'));
} else {
const initialDocContent = [
{
type: 'heading',
content: '',
},
];
blocksToYDoc(initialDocContent, doc);
}
const provider = new HocuspocusProvider({
url: providerUrl(storeId),
name: storeId,
document: doc,
});
get().setStore(storeId, { provider });
return provider;
},
setStore: (storeId, props) => {
set(({ docsStore }, ...store) => {
return {
...store,
docsStore: {
...docsStore,
[storeId]: {
...docsStore[storeId],
...props,
},
},
};
});
},
setCurrentDoc: (doc) => {
set({ currentDoc: doc });
},
}));
src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx
+14
View File
@@ -0,0 +1,14 @@
import { BlockNoteEditor } from '@blocknote/core';
import { create } from 'zustand';
export interface UseEditorstore {
editor?: BlockNoteEditor;
setEditor: (editor: BlockNoteEditor | undefined) => void;
}
export const useEditorStore = create<UseEditorstore>((set) => ({
editor: undefined,
setEditor: (editor) => {
set({ editor });
},
}));
src/frontend/apps/impress/src/features/docs/doc-editor/utils.ts
+2 -22
View File
@@ -1,5 +1,3 @@
import * as Y from 'yjs';
export const randomColor = () => {
const randomInt = (min: number, max: number) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -25,23 +23,5 @@ function hslToHex(h: number, s: number, l: number) {
return `#${f(0)}${f(8)}${f(4)}`;
}
export const toBase64 = (
str: WithImplicitCoercion<ArrayBuffer | SharedArrayBuffer>,
) => Buffer.from(str).toString('base64');
type BasicBlock = {
type: string;
content: string;
};
export const blocksToYDoc = (blocks: BasicBlock[], doc: Y.Doc) => {
const xmlFragment = doc.getXmlFragment('document-store');
blocks.forEach((block) => {
const xmlElement = new Y.XmlElement(block.type);
if (block.content) {
xmlElement.insert(0, [new Y.XmlText(block.content)]);
}
xmlFragment.push([xmlElement]);
});
};
export const toBase64 = (str: Uint8Array) =>
Buffer.from(str).toString('base64');
src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+59 -81
View File
@@ -1,19 +1,19 @@
import React, { Fragment } from 'react';
import { DateTime } from 'luxon';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Card, StyledLink, Text } from '@/components';
import { Box, Icon, Text } from '@/components';
import { HorizontalSeparator } from '@/components/separators/HorizontalSeparator';
import { useCunninghamTheme } from '@/cunningham';
import {
Doc,
Role,
LinkReach,
currentDocRole,
useTrans,
} from '@/features/docs/doc-management';
import { Versions } from '@/features/docs/doc-versioning';
import { useDate } from '@/hook';
import { useResponsiveStore } from '@/stores';
import { DocTagPublic } from './DocTagPublic';
import { DocTitle } from './DocTitle';
import { DocToolBox } from './DocToolBox';
@@ -23,100 +23,78 @@ interface DocHeaderProps {
}
export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
const { colorsTokens } = useCunninghamTheme();
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
const { isDesktop } = useResponsiveStore();
const spacings = spacingsTokens();
const colors = colorsTokens();
const { t } = useTranslation();
const { formatDate } = useDate();
const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
const { transRole } = useTrans();
const { isMobile, isSmallMobile } = useResponsiveStore();
return (
<>
<Card
$margin={isMobile ? 'tiny' : 'small'}
<Box
$width="100%"
$padding={{ vertical: 'base' }}
$gap={spacings['base']}
aria-label={t('It is the card information about the document.')}
>
<Box
$padding={isMobile ? 'tiny' : 'small'}
$direction="row"
$align="center"
>
<StyledLink href="/">
<Text
$isMaterialIcon
$theme="primary"
$variation="600"
$size="2rem"
$css={`&:hover {background-color: ${colorsTokens()['primary-100']}; };`}
$hasTransition
$radius="5px"
$padding="tiny"
>
home
</Text>
</StyledLink>
{docIsPublic && (
<Box
$width="1px"
$height="70%"
$background={colorsTokens()['greyscale-100']}
$margin={{ horizontal: 'tiny' }}
/>
aria-label={t('Public document')}
$color={colors['primary-600']}
$background={colors['primary-100']}
$radius={spacings['3xs']}
$direction="row"
$padding="xs"
$flex={1}
$align="center"
$gap={spacings['3xs']}
$css={css`
border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd);
`}
>
<Icon data-testid="public-icon" iconName="public" />
<Text>{t('Public document')}</Text>
</Box>
)}
<Box $direction="row" $align="center" $width="100%">
<Box
$direction="row"
$justify="space-between"
$css="flex:1;"
$gap="0.5rem 1rem"
$wrap="wrap"
$align="center"
>
<DocTitle doc={doc} />
<Box $gap={spacings['3xs']}>
<DocTitle doc={doc} />
<Box $direction="row">
{isDesktop && (
<>
<Text $variation="400" $size="s" $weight="bold">
{transRole(currentDocRole(doc.abilities))}&nbsp;·&nbsp;
</Text>
<Text $variation="400" $size="s">
{t('Last update: {{update}}', {
update: DateTime.fromISO(doc.updated_at).toRelative(),
})}
</Text>
</>
)}
{!isDesktop && (
<Text $variation="400" $size="s">
{DateTime.fromISO(doc.updated_at).toRelative()}
</Text>
)}
</Box>
</Box>
<DocToolBox doc={doc} versionId={versionId} />
</Box>
</Box>
<Box
$direction={isSmallMobile ? 'column' : 'row'}
$align={isSmallMobile ? 'start' : 'center'}
$css="border-top:1px solid #eee"
$padding={{
horizontal: isMobile ? 'tiny' : 'big',
vertical: 'tiny',
}}
$gap="0.5rem 2rem"
$justify="space-between"
$wrap="wrap"
$position="relative"
>
<Box
$direction={isSmallMobile ? 'column' : 'row'}
$align={isSmallMobile ? 'start' : 'center'}
$gap="0.5rem 2rem"
$wrap="wrap"
>
<DocTagPublic doc={doc} />
<Text $size="s" $display="inline">
{t('Created at')} <strong>{formatDate(doc.created_at)}</strong>
</Text>
<Text $size="s" $display="inline" $elipsis $maxWidth="60vw">
{t('Owners:')}{' '}
<strong>
{doc.accesses
.filter(
(access) => access.role === Role.OWNER && access.user.email,
)
.map((access, index, accesses) => (
<Fragment key={`access-${index}`}>
{access.user.full_name || access.user.email}{' '}
{index < accesses.length - 1 ? ' / ' : ''}
</Fragment>
))}
</strong>
</Text>
</Box>
<Text $size="s" $display="inline">
{t('Your role:')}{' '}
<strong>{transRole(currentDocRole(doc.abilities))}</strong>
</Text>
</Box>
</Card>
<HorizontalSeparator />
</Box>
</>
);
};
src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+32 -65
View File
@@ -5,12 +5,12 @@ import {
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { useHeadingStore } from '@/features/docs/doc-editor';
import {
Doc,
KEY_DOC,
@@ -18,8 +18,7 @@ import {
useTrans,
useUpdateDoc,
} from '@/features/docs/doc-management';
import { useResponsiveStore } from '@/stores';
import { isFirefox } from '@/utils/userAgent';
import { useBroadcastStore, useResponsiveStore } from '@/stores';
interface DocTitleProps {
doc: Doc;
@@ -32,7 +31,7 @@ export const DocTitle = ({ doc }: DocTitleProps) => {
return (
<Text
as="h2"
$margin={{ all: 'none', left: 'tiny' }}
$margin={{ all: 'none', left: 'none' }}
$size={isMobile ? 'h4' : 'h2'}
>
{doc.title}
@@ -44,16 +43,15 @@ export const DocTitle = ({ doc }: DocTitleProps) => {
};
const DocTitleInput = ({ doc }: DocTitleProps) => {
const { isDesktop } = useResponsiveStore();
const { t } = useTranslation();
const { colorsTokens } = useCunninghamTheme();
const [titleDisplay, setTitleDisplay] = useState(doc.title);
const { toast } = useToastProvider();
const { untitledDocument } = useTrans();
const isUntitled = titleDisplay === untitledDocument;
const { headings } = useHeadingStore();
const headingText = headings?.[0]?.contentText;
const debounceRef = useRef<NodeJS.Timeout>();
const { isMobile } = useResponsiveStore();
const { broadcast } = useBroadcastStore();
const { mutate: updateDoc } = useUpdateDoc({
listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
@@ -61,6 +59,9 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
if (data.title !== untitledDocument) {
toast(t('Document title updated successfully'), VariantType.SUCCESS);
}
// Broadcast to every user connected to the document
broadcast(`${KEY_DOC}-${data.id}`);
},
});
@@ -77,10 +78,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
// If mutation we update
if (sanitizedTitle !== doc.title) {
if (debounceRef.current) {
clearTimeout(debounceRef.current);
debounceRef.current = undefined;
}
setTitleDisplay(sanitizedTitle);
updateDoc({ id: doc.id, title: sanitizedTitle });
}
},
@@ -94,69 +92,38 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
}
};
const handleOnClick = () => {
if (isUntitled) {
setTitleDisplay('');
}
};
useEffect(() => {
if ((!debounceRef.current && !isUntitled) || !headingText) {
return;
}
setTitleDisplay(headingText);
if (debounceRef.current) {
clearTimeout(debounceRef.current);
}
debounceRef.current = setTimeout(() => {
handleTitleSubmit(headingText);
debounceRef.current = undefined;
}, 3000);
}, [isUntitled, handleTitleSubmit, headingText]);
return (
<>
<Tooltip content={t('Rename')} placement="top">
<Box
as="h2"
$radius="4px"
$padding={{ horizontal: 'tiny', vertical: '4px' }}
$margin="none"
contentEditable={isFirefox() ? 'true' : 'plaintext-only'}
onClick={handleOnClick}
onBlurCapture={(e) =>
handleTitleSubmit(e.currentTarget.textContent || '')
}
as="span"
role="textbox"
contentEditable
defaultValue={isUntitled ? undefined : titleDisplay}
onKeyDownCapture={handleKeyDown}
suppressContentEditableWarning={true}
$color={
isUntitled
? colorsTokens()['greyscale-200']
: colorsTokens()['greyscale-text']
aria-label={t('doc title input')}
onBlurCapture={(event) =>
handleTitleSubmit(event.target.textContent || '')
}
$css={`
${isUntitled && 'font-style: italic;'}
cursor: text;
font-size: ${isMobile ? '1.2rem' : '1.5rem'};
transition: box-shadow 0.5s, border-color 0.5s;
border: 1px dashed transparent;
&:hover {
border-color: rgba(0, 123, 255, 0.25);
border-style: dashed;
$color={colorsTokens()['greyscale-text']}
$margin={{ left: '-2px', right: '10px' }}
$css={css`
&[contenteditable='true']:empty:not(:focus):before {
content: '${untitledDocument}';
color: grey;
pointer-events: none;
font-style: italic;
}
font-size: ${isDesktop
? css`var(--c--theme--font--sizes--h2)`
: css`var(--c--theme--font--sizes--sm)`};
font-weight: 700;
&:focus {
outline: none;
border-color: transparent;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
outline: none;
`}
>
{titleDisplay}
{isUntitled ? '' : titleDisplay}
</Box>
</Tooltip>
</>
src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+124 -101
View File
@@ -1,22 +1,31 @@
import {
Button,
VariantType,
useModal,
useToastProvider,
} from '@openfun/cunningham-react';
import React, { useState } from 'react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, DropButton, IconOptions } from '@/components';
import { useAuthStore } from '@/core';
import { useDocStore, usePanelEditorStore } from '@/features/docs/doc-editor/';
import {
Doc,
ModalRemoveDoc,
ModalShare,
} from '@/features/docs/doc-management';
Box,
DropdownMenu,
DropdownMenuOption,
Icon,
IconOptions,
} from '@/components';
import { useAuthStore } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import {
useEditorStore,
usePanelEditorStore,
} from '@/features/docs/doc-editor/';
import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
import { ModalVersion, Versions } from '@/features/docs/doc-versioning';
import { useResponsiveStore } from '@/stores';
import { ModalVersion, Versions } from '../../doc-versioning';
import { DocShareModal } from '../../doc-management/components/share/DocShareModal';
import { ModalPDF } from './ModalExport';
@@ -27,21 +36,87 @@ interface DocToolBoxProps {
export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
const { t } = useTranslation();
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const colors = colorsTokens();
const [isModalShareOpen, setIsModalShareOpen] = useState(false);
const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
const [isDropOpen, setIsDropOpen] = useState(false);
const modalShare = useModal();
const { setIsPanelOpen, setIsPanelTableContentOpen } = usePanelEditorStore();
const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
const { isSmallMobile } = useResponsiveStore();
const { authenticated } = useAuthStore();
const { docsStore } = useDocStore();
const { editor } = useEditorStore();
const { toast } = useToastProvider();
const options: DropdownMenuOption[] = [
...(isSmallMobile
? [
{
label: t('Share'),
icon: 'upload',
callback: () => {
setIsModalShareOpen(true);
},
},
{
label: t('Export'),
icon: 'download',
callback: () => {
setIsModalPDFOpen(true);
},
},
]
: []),
{
label: t('Version history'),
icon: 'history',
disabled: !doc.abilities.versions_list,
callback: () => {
setIsPanelOpen(true);
setIsPanelTableContentOpen(false);
},
},
{
label: t('Table of contents'),
icon: 'summarize',
callback: () => {
setIsPanelOpen(true);
setIsPanelTableContentOpen(true);
},
},
{
label: t('Copy as {{format}}', { format: 'Markdown' }),
icon: 'content_copy',
callback: () => {
void copyCurrentEditorToClipboard('markdown');
},
},
{
label: t('Copy as {{format}}', { format: 'HTML' }),
icon: 'content_copy',
callback: () => {
void copyCurrentEditorToClipboard('html');
},
},
{
label: t('Delete document'),
icon: 'delete',
disabled: !doc.abilities.destroy,
callback: () => {
setIsModalRemoveOpen(true);
},
},
];
const copyCurrentEditorToClipboard = async (
asFormat: 'html' | 'markdown',
) => {
const editor = docsStore[doc.id]?.editor;
if (!editor) {
toast(t('Editor unavailable'), VariantType.ERROR, { duration: 3000 });
return;
@@ -83,105 +158,53 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
</Button>
</Box>
)}
<Box $direction="row" $margin={{ left: 'auto' }} $gap="1rem">
{authenticated && (
<Box $direction="row" $margin={{ left: 'auto' }} $gap={spacings['2xs']}>
{authenticated && !isSmallMobile && (
<Button
color="primary-text"
onClick={() => {
setIsModalShareOpen(true);
modalShare.open();
// setIsModalShareOpen(true);
}}
size={isSmallMobile ? 'small' : 'medium'}
>
{t('Share')}
</Button>
)}
<DropButton
button={
<IconOptions
isOpen={isDropOpen}
aria-label={t('Open the document options')}
/>
}
onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
isOpen={isDropOpen}
>
<Box>
{doc.abilities.versions_list && (
<Button
onClick={() => {
setIsPanelOpen(true);
setIsPanelTableContentOpen(false);
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">history</span>}
size="small"
>
{t('Version history')}
</Button>
)}
<Button
onClick={() => {
setIsPanelOpen(true);
setIsPanelTableContentOpen(true);
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">summarize</span>}
size="small"
>
{t('Table of contents')}
</Button>
<Button
onClick={() => {
setIsModalPDFOpen(true);
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">file_download</span>}
size="small"
>
{t('Export')}
</Button>
{doc.abilities.destroy && (
<Button
onClick={() => {
setIsModalRemoveOpen(true);
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">delete</span>}
size="small"
>
{t('Delete document')}
</Button>
)}
<Button
onClick={() => {
setIsDropOpen(false);
void copyCurrentEditorToClipboard('markdown');
}}
color="primary-text"
icon={<span className="material-icons">content_copy</span>}
size="small"
>
{t('Copy as {{format}}', { format: 'Markdown' })}
</Button>
<Button
onClick={() => {
setIsDropOpen(false);
void copyCurrentEditorToClipboard('html');
}}
color="primary-text"
icon={<span className="material-icons">content_copy</span>}
size="small"
>
{t('Copy as {{format}}', { format: 'HTML' })}
</Button>
</Box>
</DropButton>
{!isSmallMobile && (
<Button
color="primary-text"
icon={
<Icon iconName="download" $theme="primary" $variation="800" />
}
onClick={() => {
setIsModalPDFOpen(true);
}}
size={isSmallMobile ? 'small' : 'medium'}
/>
)}
<DropdownMenu options={options}>
<IconOptions
isHorizontal
$theme="primary"
$radius={spacings['3xs']}
$css={
isSmallMobile
? css`
padding: 10px;
border: 1px solid ${colors['greyscale-300']};
`
: ''
}
aria-label={t('Open the document options')}
/>
</DropdownMenu>
</Box>
{isModalShareOpen && (
{/* {isModalShareOpen && (
<ModalShare onClose={() => setIsModalShareOpen(false)} doc={doc} />
)} */}
{modalShare.isOpen && (
<DocShareModal doc={doc} onClose={modalShare.onClose} />
)}
{isModalPDFOpen && (
<ModalPDF onClose={() => setIsModalPDFOpen(false)} doc={doc} />
src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
+51 -64
View File
@@ -1,11 +1,8 @@
import {
Alert,
Button,
Loader,
Modal,
ModalSize,
Radio,
RadioGroup,
Select,
VariantType,
useToastProvider,
@@ -14,13 +11,18 @@ import { t } from 'i18next';
import { useEffect, useMemo, useState } from 'react';
import { Box, Text } from '@/components';
import { useDocStore } from '@/features/docs/doc-editor/';
import { useEditorStore } from '@/features/docs/doc-editor';
import { Doc } from '@/features/docs/doc-management';
import { useExport } from '../api/useExport';
import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
import { adaptBlockNoteHTML, downloadFile } from '../utils';
export enum DocDownloadFormat {
PDF = 'pdf',
DOCX = 'docx',
}
interface ModalPDFProps {
onClose: () => void;
doc: Doc;
@@ -31,7 +33,7 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
ordering: TemplatesOrdering.BY_CREATED_ON_DESC,
});
const { toast } = useToastProvider();
const { docsStore } = useDocStore();
const { editor } = useEditorStore();
const {
mutate: createExport,
data: documentGenerated,
@@ -40,7 +42,9 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
error,
} = useExport();
const [templateIdSelected, setTemplateIdSelected] = useState<string>();
const [format, setFormat] = useState<'pdf' | 'docx'>('pdf');
const [format, setFormat] = useState<DocDownloadFormat>(
DocDownloadFormat.PDF,
);
const templateOptions = useMemo(() => {
if (!templates?.pages) {
@@ -104,8 +108,6 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
return;
}
const editor = docsStore[doc.id].editor;
if (!editor) {
toast(t('No editor found'), VariantType.ERROR);
return;
@@ -124,46 +126,37 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
return (
<Modal
data-testid="modal-export"
isOpen
closeOnClickOutside
hideCloseButton
leftActions={
<Button
aria-label={t('Close the modal')}
color="secondary"
fullWidth
onClick={() => onClose()}
>
{t('Cancel')}
</Button>
}
onClose={() => onClose()}
rightActions={
<Button
aria-label={t('Download')}
color="primary"
fullWidth
onClick={() => void onSubmit()}
disabled={isPending || !templateIdSelected}
>
{t('Download')}
</Button>
<>
<Button
aria-label={t('Close the modal')}
color="secondary"
fullWidth
onClick={() => onClose()}
>
{t('Cancel')}
</Button>
<Button
aria-label={t('Download')}
color="primary"
fullWidth
onClick={() => void onSubmit()}
disabled={isPending || !templateIdSelected}
>
{t('Download')}
</Button>
</>
}
size={ModalSize.MEDIUM}
title={
<Box $align="center" $gap="1rem">
<Text
className="material-icons"
$size="3.5rem"
$theme="primary"
$variation="600"
>
picture_as_pdf
</Text>
<Text as="h2" $size="h3" $margin="none" $theme="primary">
{t('Export')}
</Text>
</Box>
<Text $size="h6" $align="flex-start">
{t('Download')}
</Text>
}
>
<Box
@@ -171,14 +164,11 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
aria-label={t('Content modal to export the document')}
$gap="1.5rem"
>
<Alert canClose={false} type={VariantType.INFO}>
<Text>
{t(
'Export your document, it will be inserted in the selected template.',
)}
</Text>
</Alert>
<Text $variation="600">
{t(
'Upload your docs to a Microsoft Word, Open Office or PDF document.',
)}
</Text>
<Select
clearable={false}
label={t('Template')}
@@ -188,22 +178,19 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
setTemplateIdSelected(options.target.value as string)
}
/>
<RadioGroup>
<Radio
label={t('PDF')}
value="pdf"
name="format"
onChange={(evt) => setFormat(evt.target.value as 'pdf')}
defaultChecked={true}
/>
<Radio
label={t('Docx')}
value="docx"
name="format"
onChange={(evt) => setFormat(evt.target.value as 'docx')}
/>
</RadioGroup>
<Select
clearable={false}
fullWidth
label={t('Format')}
options={[
{ label: t('Word / Open Office'), value: DocDownloadFormat.DOCX },
{ label: t('PDF'), value: DocDownloadFormat.PDF },
]}
value={format}
onChange={(options) =>
setFormat(options.target.value as DocDownloadFormat)
}
/>
{isPending && (
<Box $align="center" $margin={{ top: 'big' }}>
src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx
+11 -1
View File
@@ -1,6 +1,12 @@
import { UseQueryOptions, useQuery } from '@tanstack/react-query';
import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
import {
APIError,
APIList,
errorCauses,
fetchAPI,
useAPIInfiniteQuery,
} from '@/api';
import { Doc } from '../types';
@@ -52,3 +58,7 @@ export function useDocs(
...queryConfig,
});
}
export const useInfiniteDocs = (params: DocsParams) => {
return useAPIInfiniteQuery(KEY_LIST_DOC, getDocs, params);
};
src/frontend/apps/impress/src/features/docs/doc-management/api/useRemoveDoc.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const useRemoveDoc = (options?: UseRemoveDocOptions) => {
mutationFn: removeDoc,
...options,
onSuccess: (data, variables, context) => {
void queryClient.resetQueries({
void queryClient.invalidateQueries({
queryKey: [KEY_LIST_DOC],
});
if (options?.onSuccess) {
src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx
+9 -2
View File
@@ -1,7 +1,8 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { Doc } from '@/features/docs';
import { Doc, KEY_DOC } from '@/features/docs/doc-management';
import { useBroadcastStore } from '@/stores';
export type UpdateDocLinkParams = Pick<Doc, 'id'> &
Partial<Pick<Doc, 'link_role' | 'link_reach'>>;
@@ -37,14 +38,20 @@ export function useUpdateDocLink({
listInvalideQueries,
}: UpdateDocLinkProps = {}) {
const queryClient = useQueryClient();
const { broadcast } = useBroadcastStore();
return useMutation<Doc, APIError, UpdateDocLinkParams>({
mutationFn: updateDocLink,
onSuccess: (data) => {
onSuccess: (data, variable) => {
listInvalideQueries?.forEach((queryKey) => {
void queryClient.resetQueries({
queryKey: [queryKey],
});
});
// Broadcast to every user connected to the document
broadcast(`${KEY_DOC}-${variable.id}`);
onSuccess?.(data);
},
});
src/frontend/apps/impress/src/features/docs/doc-management/assets/pinned-document.svg
+9
View File
@@ -0,0 +1,9 @@
<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" stroke="#DCDCFC" stroke-width="0.472222"/>
<path d="M6.5 8.55556H15" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
<path d="M6.5 11.3889H23.5M6.5 14.2222H23.5M6.5 17.0556H23.5M6.5 19.8889H23.5M6.5 22.7222H20.6667" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
<rect x="7" y="10" width="16" height="16" rx="8" fill="#6A6AF4"/>
<rect x="7" y="10" width="16" height="16" rx="8" stroke="white" stroke-width="1.5"/>
<path d="M16.8 18L18 19.2V20.1H15.45V22.95L15 23.4L14.55 22.95V20.1H12V19.2L13.2 18V14.7H12.6V13.8H17.4V14.7H16.8V18Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 853 B

src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.01394" y="0.236111" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
<rect x="1.01394" y="0.236111" width="25.9722" height="33.5278" rx="3.54167" stroke="#DCDCFC" stroke-width="0.472222"/>
<path d="M5.5 7.55554H14" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
<path d="M5.5 10.3889H22.5M5.5 13.2222H22.5M5.5 16.0556H22.5M5.5 18.8889H22.5M5.5 21.7222H22.5M5.5 24.5556H22.5M5.5 27.3889H22.5M5.5 30.2222H22.5M5.5 33.0556H22.5" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 635 B

src/frontend/apps/impress/src/features/docs/doc-management/components/DocRoleDropdown.tsx
+71
View File
@@ -0,0 +1,71 @@
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { DropdownMenu, DropdownMenuOption, Text } from '@/components';
import { useTrans } from '../hooks';
import { Role } from '../types';
type Props = {
currentRole: Role;
onSelectRole?: (role: Role) => void;
canUpdate?: boolean;
isLastOwner?: boolean;
isOtherOwner?: boolean;
};
export const DocRoleDropdown = ({
canUpdate = true,
currentRole,
onSelectRole,
isLastOwner,
isOtherOwner,
}: Props) => {
const { t } = useTranslation();
const { transRole, translatedRoles, getNotAllowedMessage } = useTrans();
const roles: DropdownMenuOption[] = Object.keys(translatedRoles).map(
(key) => {
return {
label: transRole(key as Role),
callback: () => onSelectRole?.(key as Role),
disabled: isLastOwner || isOtherOwner,
isSelected: currentRole === (key as Role),
};
},
);
if (!canUpdate) {
return (
<Text
$variation="600"
$css={css`
font-family: Arial, Helvetica, sans-serif;
`}
>
{transRole(currentRole)}
</Text>
);
}
return (
<DropdownMenu
topMessage={getNotAllowedMessage(
canUpdate,
!!isLastOwner,
!!isOtherOwner,
)}
label="doc-role-dropdown"
showArrow={true}
options={roles}
>
<Text
$variation="600"
$css={css`
font-family: Arial, Helvetica, sans-serif;
`}
>
{transRole(currentRole)}
</Text>
</DropdownMenu>
);
};
src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+11 -33
View File
@@ -7,13 +7,12 @@ import {
useToastProvider,
} from '@openfun/cunningham-react';
import { t } from 'i18next';
import { useRouter } from 'next/navigation';
import { usePathname } from 'next/navigation';
import { useRouter } from 'next/router';
import { Box, Text, TextErrors } from '@/components';
import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
import { useRemoveDoc } from '../api/useRemoveDoc';
import IconDoc from '../assets/icon-doc.svg';
import { Doc } from '../types';
interface ModalRemoveDocProps {
@@ -22,12 +21,13 @@ interface ModalRemoveDocProps {
}
export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
const { colorsTokens } = useCunninghamTheme();
const { toast } = useToastProvider();
const router = useRouter();
const { push } = useRouter();
const pathname = usePathname();
const {
mutate: removeDoc,
isError,
error,
} = useRemoveDoc({
@@ -35,7 +35,11 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
toast(t('The document has been deleted.'), VariantType.SUCCESS, {
duration: 4000,
});
router.push('/');
if (pathname === '/') {
onClose();
} else {
void push('/');
}
},
});
@@ -58,7 +62,7 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
rightActions={
<Button
aria-label={t('Confirm deletion')}
color="primary"
color="danger"
fullWidth
onClick={() =>
removeDoc({
@@ -96,32 +100,6 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
)}
{isError && <TextErrors causes={error.cause} />}
<Text
as="p"
$padding="small"
$direction="row"
$gap="0.5rem"
$background={colorsTokens()['primary-150']}
$theme="primary"
$align="center"
$radius="2px"
>
<IconDoc
className="p-t"
aria-label={t(`Document icon`)}
color={colorsTokens()['primary-500']}
width={58}
style={{
borderRadius: '8px',
backgroundColor: '#ffffff',
border: `1px solid ${colorsTokens()['primary-300']}`,
}}
/>
<Text $theme="primary" $weight="bold" $size="l">
{doc.title}
</Text>
</Text>
</Box>
</Modal>
);
src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareAddMemberList.tsx
+161
View File
@@ -0,0 +1,161 @@
import {
Button,
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { APIError } from '@/api';
import { Box } from '@/components';
import { User } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { Doc, Role } from '@/features/docs';
import { useCreateDocInvitation } from '@/features/docs/members/invitation-list';
import { useCreateDocAccess } from '@/features/docs/members/members-add';
import { OptionType } from '@/features/docs/members/members-add/types';
import { useLanguage } from '@/i18n/hooks/useLanguage';
import { DocRoleDropdown } from '../DocRoleDropdown';
import { DocShareAddMemberListItem } from './DocShareAddMemberListItem';
type APIErrorUser = APIError<{
value: string;
type: OptionType;
}>;
type Props = {
doc: Doc;
selectedUsers: User[];
onRemoveUser?: (user: User) => void;
onSubmit?: (selectedUsers: User[], role: Role) => void;
afterInvite?: () => void;
};
export const DocShareAddMemberList = ({
doc,
selectedUsers,
onRemoveUser,
afterInvite,
}: Props) => {
const { t } = useTranslation();
const { toast } = useToastProvider();
const [isLoading, setIsLoading] = useState(false);
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const { contentLanguage } = useLanguage();
const [invitationRole, setInvitationRole] = useState<Role>(Role.EDITOR);
const canShare = doc.abilities.accesses_manage;
const spacing = spacingsTokens();
const color = colorsTokens();
const { mutateAsync: createInvitation } = useCreateDocInvitation();
const { mutateAsync: createDocAccess } = useCreateDocAccess();
const onError = (dataError: APIErrorUser) => {
let messageError =
dataError['data']?.type === OptionType.INVITATION
? t(`Failed to create the invitation for {{email}}.`, {
email: dataError['data']?.value,
})
: t(`Failed to add the member in the document.`);
if (
dataError.cause?.[0] ===
'Document invitation with this Email address and Document already exists.'
) {
messageError = t('"{{email}}" is already invited to the document.', {
email: dataError['data']?.value,
});
}
if (
dataError.cause?.[0] ===
'This email is already associated to a registered user.'
) {
messageError = t('"{{email}}" is already member of the document.', {
email: dataError['data']?.value,
});
}
toast(messageError, VariantType.ERROR, {
duration: 4000,
});
};
const onInvite = async () => {
setIsLoading(true);
const promises = selectedUsers.map((user) => {
const isInvitationMode = user.id === user.email;
const payload = {
role: invitationRole,
docId: doc.id,
contentLanguage,
};
return isInvitationMode
? createInvitation({
...payload,
email: user.email,
})
: createDocAccess({
...payload,
memberId: user.id,
});
});
const settledPromises = await Promise.allSettled(promises);
settledPromises.forEach((settledPromise) => {
if (settledPromise.status === 'rejected') {
onError(settledPromise.reason as APIErrorUser);
}
});
afterInvite?.();
setIsLoading(false);
};
return (
<Box
data-testid="doc-share-add-member-list"
$direction="row"
$padding={spacing.sm}
$align="center"
$background={color['greyscale-050']}
$radius={spacing['3xs']}
$css={css`
border: 1px solid ${color['greyscale-200']};
`}
>
<Box
$direction="row"
$align="center"
$wrap="wrap"
$flex={1}
$gap={spacing.xs}
>
{selectedUsers.map((user) => (
<DocShareAddMemberListItem
key={user.id}
user={user}
onRemoveUser={onRemoveUser}
/>
))}
</Box>
<Box $direction="row" $align="center">
<DocRoleDropdown
canUpdate={canShare}
currentRole={invitationRole}
onSelectRole={setInvitationRole}
/>
<Button
onClick={() => void onInvite()}
size="small"
disabled={isLoading}
>
{t('Invite')}
</Button>
</Box>
</Box>
);
};
src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareAddMemberListItem.tsx
+43
View File
@@ -0,0 +1,43 @@
import { Button } from '@openfun/cunningham-react';
import { css } from 'styled-components';
import { Box, Icon, Text } from '@/components';
import { User } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
type Props = {
user: User;
onRemoveUser?: (user: User) => void;
};
export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
const { spacingsTokens, colorsTokens, fontSizesTokens } =
useCunninghamTheme();
const spacing = spacingsTokens();
const color = colorsTokens();
const fontSize = fontSizesTokens();
return (
<Box
data-testid={`doc-share-add-member-${user.email}`}
$radius={spacing['3xs']}
$direction="row"
$height="fit-content"
$justify="center"
$align="center"
$gap={spacing.xs}
$background={color['greyscale-250']}
$padding={{ horizontal: spacing['2xs'], vertical: spacing['3xs'] }}
$css={css`
color: ${color['greyscale-1000']};
font-size: ${fontSize['xs']};
`}
>
<Text $margin={{ top: '-3px' }}>{user.full_name || user.email}</Text>
<Button
color="primary-text"
size="nano"
onClick={() => onRemoveUser?.(user)}
icon={<Icon $variation="500" $size="sm" iconName="close" />}
/>
</Box>
);
};
src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareInvitationItem.tsx
+108
View File
@@ -0,0 +1,108 @@
import { VariantType, useToastProvider } from '@openfun/cunningham-react';
import { useTranslation } from 'react-i18next';
import {
Box,
DropdownMenu,
DropdownMenuOption,
IconOptions,
} from '@/components';
import { User } from '@/core';
import {
useDeleteDocInvitation,
useUpdateDocInvitation,
} from '@/features/docs/members/invitation-list';
import { Invitation } from '@/features/docs/members/invitation-list/types';
import { SearchUserRow } from '@/features/users/components/SearchUserRow';
import { Doc, Role } from '../../types';
import { DocRoleDropdown } from '../DocRoleDropdown';
type Props = {
doc: Doc;
invitation: Invitation;
};
export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
const { t } = useTranslation();
const fakeUser: User = {
id: invitation.email,
full_name: invitation.email,
email: invitation.email,
short_name: invitation.email,
};
const { toast } = useToastProvider();
const canUpdate = doc.abilities.accesses_manage;
const { mutate: updateDocInvitation } = useUpdateDocInvitation({
onError: (error) => {
toast(
error?.data?.role?.[0] ?? t('Error during update invitation'),
VariantType.ERROR,
{
duration: 4000,
},
);
},
});
const { mutate: removeDocInvitation } = useDeleteDocInvitation({
onError: (error) => {
toast(
error?.data?.role?.[0] ?? t('Error during delete invitation'),
VariantType.ERROR,
{
duration: 4000,
},
);
},
});
const onUpdate = (newRole: Role) => {
updateDocInvitation({
docId: doc.id,
role: newRole,
invitationId: invitation.id,
});
};
const onRemove = () => {
removeDocInvitation({ invitationId: invitation.id, docId: doc.id });
};
const moreActions: DropdownMenuOption[] = [
{
label: t('Delete'),
icon: 'delete',
callback: onRemove,
disabled: !canUpdate,
},
];
return (
<Box
$width="100%"
data-testid={`doc-share-invitation-row-${invitation.email}`}
>
<SearchUserRow
alwaysShowRight={true}
user={fakeUser}
right={
<Box $direction="row" $align="center">
<DocRoleDropdown
currentRole={invitation.role}
onSelectRole={onUpdate}
canUpdate={canUpdate}
/>
<DropdownMenu
data-testid="doc-share-invitation-more-actions"
options={moreActions}
>
<IconOptions $variation="600" />
</DropdownMenu>
</Box>
}
/>
</Box>
);
};
src/frontend/apps/impress/src/features/docs/doc-management/components/share/DocShareMemberItem.tsx
+101
View File
@@ -0,0 +1,101 @@
import { VariantType, useToastProvider } from '@openfun/cunningham-react';
import { useTranslation } from 'react-i18next';
import {
Box,
DropdownMenu,
DropdownMenuOption,
IconOptions,
} from '@/components';
import {
useDeleteDocAccess,
useUpdateDocAccess,
} from '@/features/docs/members/members-list';
import { useWhoAmI } from '@/features/docs/members/members-list/hooks/useWhoAmI';
import { SearchUserRow } from '@/features/users/components/SearchUserRow';
import { useResponsiveStore } from '@/stores';
import { Access, Doc, Role } from '../../types';
import { DocRoleDropdown } from '../DocRoleDropdown';
type Props = {
doc: Doc;
access: Access;
};
export const DocShareMemberItem = ({ doc, access }: Props) => {
const { t } = useTranslation();
const { isLastOwner, isOtherOwner } = useWhoAmI(access);
const { toast } = useToastProvider();
const { isDesktop } = useResponsiveStore();
const isNotAllowed =
isOtherOwner || !!isLastOwner || !doc.abilities.accesses_manage;
const { mutate: updateDocAccess } = useUpdateDocAccess({
onError: () => {
toast(t('Error during invitation update'), VariantType.ERROR, {
duration: 4000,
});
},
});
const { mutate: removeDocAccess } = useDeleteDocAccess({
onError: () => {
toast(t('Error while deleting invitation'), VariantType.ERROR, {
duration: 4000,
});
},
});
const onUpdate = (newRole: Role) => {
updateDocAccess({
docId: doc.id,
role: newRole,
accessId: access.id,
});
};
const onRemove = () => {
removeDocAccess({ accessId: access.id, docId: doc.id });
};
const moreActions: DropdownMenuOption[] = [
{
label: t('Delete'),
icon: 'delete',
callback: onRemove,
disabled: isNotAllowed,
},
];
return (
<Box
$width="100%"
data-testid={`doc-share-member-row-${access.user.email}`}
>
<SearchUserRow
alwaysShowRight={true}
user={access.user}
right={
<Box $direction="row" $align="center">
<DocRoleDropdown
currentRole={access.role}
onSelectRole={onUpdate}
canUpdate={doc.abilities.accesses_manage}
isLastOwner={isLastOwner}
isOtherOwner={!!isOtherOwner}
/>
{isDesktop && doc.abilities.accesses_manage && (
<DropdownMenu options={moreActions}>
<IconOptions
data-testid="doc-share-member-more-actions"
$variation="600"
/>
</DropdownMenu>
)}
</Box>
}
/>
</Box>
);
};

Some files were not shown because too many files have changed in this diff Show More