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

Compare commits

merge into: electron-rare/docs:config/increase-memory-nodejs
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:feature/add-new-home
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

48 Commits
config/increase-memory-nodejs ... feature/add-new-home

Author SHA1 Message Date
Nathan Panchout b4676e994f wip 2025-01-14 11:38:09 +01:00
Nathan Panchout 01c7e548eb 💄(frontend) fix minor bugs and enhance DocTitle and DocShareModal 
- Fixed minor bugs in the frontend codebase for improved stability.
- Enhanced DocTitle component to update title display dynamically using
useEffect.
- Refactored DocShareModal to improve modal content height calculation
for better responsiveness.
 2025-01-10 16:21:01 +01:00
Nathan Panchout 7b0e190d20 ✅(frontend) enhance document grid tests and component interactions 
- Updated test cases to replace 'docs-grid-loader' with 'grid-loader'
for improved consistency across document grid tests.
- Refactored document interaction tests to utilize the 'docs-grid'
locator for better readability and maintainability.
- Enhanced document table content tests by refining element selection
methods for improved clarity and performance.
- Cleaned up test code to ensure better structure and maintainability.
 2025-01-10 11:43:05 +01:00
Nathan Panchout 46c9210566 ✨(frontend) enhance DocShareModal and footer components 
- Refactored DocShareModal to improve user experience with dynamic list
height and responsive design adjustments.
- Introduced new styling for modal elements using createGlobalStyle for
better visual consistency.
- Updated footer button text from 'Ok' to 'OK' for improved clarity.
- Enhanced user selection handling and search functionality within the
modal for better document sharing experience.
 2025-01-10 11:43:04 +01:00
Nathan Panchout 63fde1c60f ✨(frontend) enhance UI components and improve document management 
- Updated DropdownMenu to include index-based styling for better visual
consistency.
- Refactored QuickSearchStyle to remove unnecessary transitions for
smoother performance.
- Adjusted modal styles in cunningham-style.css for improved layout.
- Changed BlockNoteEditor to update block type from 'heading' to
'paragraph' for better content structure.
- Enhanced DocHeader and DocToolBox components with updated color themes
for improved visibility.
- Modified ModalRemoveDoc to change size and clean up unnecessary props
for better usability.
- Improved Heading and TableContent components to handle empty states
more gracefully.
- Updated DocsGrid to conditionally render content based on document
availability, enhancing user experience.
- Refined LeftPanel components for better layout and visual hierarchy,
including adjustments to padding and separators.
 2025-01-10 11:43:04 +01:00
Nathan Panchout 8120b2f075 ✨(frontend) enhance DocsGrid component and simplify layout 
- add scroll inside the doc grid
 2025-01-10 11:43:04 +01:00
Nathan Panchout b38782a7d8 ✨(frontend) enhance document interaction tests 
- Updated test cases to improve accessibility by replacing 'more_vert'
with 'more_horiz' for action buttons across various components.
- Refactored document deletion confirmation messages to use consistent
heading roles for better visibility.
- Simplified keyboard interactions in document table content tests for
improved clarity.
- Adjusted visibility checks for the share button to utilize more
descriptive labels.
- Cleaned up test code for maintainability and consistency.
 2025-01-10 11:43:04 +01:00
Nathan Panchout 62a2e3f39f ✨(frontend) enhance document sharing components 
- Refactored DocShareAddMemberList to simplify button styling and
improve loading state handling.
- Updated DocShareAddMemberListItem and DocShareMemberItem to enhance
spacing and button color for better visual consistency.
- Improved DocShareInvitationItem and SearchUserRow with new theming and
spacing tokens for a more cohesive design.
- Adjusted padding and layout in DocShareModal and DocShareModalFooter
for improved responsiveness.
- Enhanced DocVisibility component with updated padding and text styling
for better readability.
- Cleaned up unused imports and optimized component structures for
maintainability.
 2025-01-10 11:43:04 +01:00
Nathan Panchout 6d5b357b59 ✨(frontend) enhance document editor and header components 
- Improved styling for headings in BlockNoteEditor for better visual
hierarchy.
- Adjusted padding in DocEditor and DocHeader based on device type for
responsive design.
- Updated DocTitle and ModalExport components to enhance typography and
spacing.
- Refactored DocToolBox to improve share button functionality and access
display.
- Enhanced versioning modal with better layout and accessibility
features.
- Cleaned up unused imports and optimized component structures for
maintainability.
 2025-01-10 11:43:04 +01:00
Nathan Panchout 92f27341e0 ✨(frontend) enhance UI components and improve styling 
- Updated DropdownMenu and ButtonLogin components for better
accessibility and visual consistency.
- Refactored Header and Title components to utilize new theming and
spacing tokens.
- Enhanced LanguagePicker styles for improved user experience.
- Introduced new utility functions in doc-management for better handling
of ProseMirror nodes and Yjs integration.
- Cleaned up unused imports and adjusted component styles for overall
code maintainability.
 2025-01-10 11:43:04 +01:00
Nathan Panchout d4e0cd57de ✨(frontend) enhance QuickSearch components 
- Updated QuickSearchItemContent to ensure full width for better layout
consistency.
- Adjusted padding in QuickSearchStyle for improved spacing and visual
hierarchy.
- Refactored DocSearchItem to utilize Box component for consistent
styling and layout.
- Removed unused imports in DocSearchItem to streamline the codebase.
 2025-01-10 11:43:04 +01:00
Nathan Panchout 6bafde99b1 ✨(frontend) enhance document grid 
- Updated the layout and styling of the DocsGrid and DocsGridItem
components for improved responsiveness and visual consistency.
- Added a new background prop to the UserAvatar component for
customizable user avatars.
- Enhanced the DocsGridActions component to include a share option,
allowing users to share documents easily.
- Refactored SVG assets for pinned and simple documents to improve their
dimensions and visual representation.
- Improved the SimpleDocItem component to display document update times
and access indicators more effectively.
- Adjusted padding and spacing across various components to enhance
overall user experience.
 2025-01-10 11:43:04 +01:00
Nathan Panchout ab55cad320 ✨(frontend) enhance left panel components 
- Updated padding and radius styles in LeftPanelTargetFilters and
LeftPanelFavorites for improved layout consistency.
- Introduced LeftPanelDocContent component to display document details
when navigating to specific documentation pages.
- Enhanced LeftPanelContent to conditionally render LeftPanelDocContent
based on the current route.
- Adjusted LeftPanelHeader button colors for better visual hierarchy.
- Refactored MainLayout padding for a more responsive design.
 2025-01-10 11:43:04 +01:00
Nathan Panchout 7a747b47db ✨(frontend) update color tokens and styles 
- Modified color tokens for danger and info categories to enhance visual
consistency and accessibility.
- Updated button and modal styles, including adjustments to padding and
dimensions for improved layout.
- Replaced font files for Marianne with updated versions to ensure
better typography.
 2025-01-10 11:43:04 +01:00
Nathan Panchout cdbd1ec7bb ✨(frontend) implement document favorites feature 
- Added functionality to mark documents as favorites, including new
hooks `useMakeFavoriteDoc` and `useRemoveFavoriteDoc` for managing
favorite status.
- Enhanced the document management API to support favorite filtering
with the `is_favorite` parameter.
- Created a new e2e test for the favorite workflow to ensure proper
functionality.
- Updated the UI components to reflect favorite status, including
changes in `DocsGridActions`, `DocsGridItem`, and the new
`LeftPanelFavorites` component for displaying pinned documents.
- Adjusted SVG assets for better visual representation of pinned
documents.
 2025-01-10 11:43:02 +01:00
Nathan Panchout 656ab8bc24 ✅(frontend) update tests 
- Enhanced test coverage for document sharing, member roles, and
visibility settings
 2025-01-10 11:28:55 +01:00
Nathan Panchout bc4d41a130 🔥(frontend) remove unused document management components 
- Deleted `DocVisibility`, `ModalShare`, `InvitationList`, `MemberList`,
and related components to streamline the document management feature.
- Updated component exports to reflect the removal of these components.
- Cleaned up associated assets and styles to improve code
maintainability.
 2025-01-10 11:28:55 +01:00
Nathan Panchout 6e572256ce ✨(frontend) enhance dropdown components and add new LoadMoreText feature 
- Updated DropButton and DropdownMenu components to include new props
for accessibility and improved layout.
- Introduced LoadMoreText component for better user experience in
loading additional content.
- Added SearchUserRow and UserAvatar components for improved user search
functionality.
- Cleaned up unused imports and adjusted styles for better consistency
across components.
 2025-01-10 11:28:55 +01:00
Nathan Panchout b14e976a18 ✨(frontend) enhance document sharing features and role management 
- Introduced new hooks and components for improved document sharing
functionality, including `useTranslatedShareSettings` and
`DocShareModal`.
- Added role management capabilities with `DocRoleDropdown` and
`DocShareAddMemberList` components, allowing users to manage document
access and roles effectively.
- Implemented user invitation handling with `DocShareInvitationItem` and
`DocShareMemberItem` components, enhancing the user experience for
managing document collaborators.
- Updated translation handling for role and visibility settings to
ensure consistency across the application.
- Refactored existing components to integrate new features and improve
overall code organization.
 2025-01-10 11:28:48 +01:00
Nathan Panchout efdbc3a14e ✨(frontend) refactor QuickSearch components 
- Simplified QuickSearchProps by removing unused properties and
enhancing type definitions.
- Updated QuickSearch component to utilize children for rendering,
improving flexibility.
- Added separator prop to QuickSearchInput for better control over
layout.
- Removed data prop from DocSearchModal's QuickSearch to streamline the
component's usage.
 2025-01-10 11:19:54 +01:00
Nathan Panchout 5a18302bd4 ✨(frontend) add new color tokens and utility classes 
- Introduced a comprehensive set of color tokens for blue, brown, cyan,
gold, green, olive, orange, pink, purple, and yellow shades.
 2025-01-10 11:19:54 +01:00
Nathan Panchout 2efdad980f ✨(frontend) implement document search functionality 
- Added a new DocSearchModal component for searching documents.
- Introduced DocSearchItem component to display individua
 document results.
- Enhanced the useDocs API to support title-based searching.
- Implemented e2e tests for document search visibility and
functionality.
- Included an empty state illustration for no search results.
- Updated the LeftPanelHeader to open the document search modal.
 2025-01-10 11:19:54 +01:00
Nathan Panchout 35d37b0f10 ✨(frontend) add Quick Search component suite 
- Introduced a new Quick Search feature with multiple components
- Implemented styling for the Quick Search components to
ensure a cohesive look and feel across the application.
 2025-01-10 11:19:54 +01:00
Nathan Panchout c60561a6a7 ➕(frontend) update dependencies and enhance package configurations 
- Added new dependencies: `luxon` and its type definitions
to the e2e app
- Introduced `cmdk` and `use-debounce` to the impress
app for enhanced UI components and debouncing functionality.
 2025-01-10 11:19:52 +01:00
Nathan Panchout 9dd4513085 🐛(frontend) fix document editor height and update translations 
- Adjusted the document editor height in the DocEditor component
- Updated translations for various terms to ensure consistency
cross the application.
- Improved layout and spacing in the DocsGridItem
component for a cleaner presentation.
 2025-01-10 11:18:52 +01:00
Nathan Panchout a64311b072 🔥(frontend) remove unused PanelEditor and TableContent components 
- Deleted the PanelEditor and TableContent components as
they are no longer needed in the application.
 2025-01-10 11:18:52 +01:00
Nathan Panchout 32ce99ca85 💄(frontend) update document summary UI 
- Enhanced the document summary UI for better visibility
and interaction.
- Refactored the DocHeader and DocEditor components to
 improve layout and responsiveness.
- Updated tests for the DocTableContent to reflect changes
in heading interactions and visibility checks.
 2025-01-10 11:18:52 +01:00
Nathan Panchout b9045a9678 🐛(frontend) fix button width nano icon only 
- fix for icon-only buttons to have auto width.
 2025-01-10 11:18:52 +01:00
Nathan Panchout e436fa801c ✨(frontend) implement document filtering 
- Introduced a new enum for default document filters
to improve code clarity.
- Updated the API call to support filtering documents
based on the creator.
- Enhanced the DocsGrid component to accept a target
filter, allowing dynamic content rendering based on user selection.
- Modified the main layout to include a left panel for improved
navigation and user experience.
- Added a new test suite for document filters, verifying the visibility
and selection states of 'All docs', 'My docs', and 'Shared with me'.
 2025-01-10 11:18:51 +01:00
Nathan Panchout ecfda62a8d 🔧(frontend) remove deprecated routes and update service worker 
- Removed the versioning route from the default configuration to
streamline the documentation structure.
- Updated the service worker to eliminate references to the deprecated
 versioning fallback, enhancing the offline experience for users.
 2025-01-10 11:18:12 +01:00
Nathan Panchout bc6785a585 ✨(frontend) enhance document versioning and loading experience 
- Updated tests for document member list and versioning to utilize
'Load more' button instead of mouse wheel scrolling.
- Improved UI for document versioning, including visibility
checks and modal interactions.
- Refactored InfiniteScroll component to include a button for
loading more items, enhancing user experience.
- Adjusted DocEditor and DocHeader components to handle
version IDs more effectively.
- Removed deprecated versioning pages to streamline the codebase.
 2025-01-10 11:18:09 +01:00
Nathan Panchout b34c00ff34 💄(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
 2025-01-10 11:16:23 +01:00
Nathan Panchout bcb15a143e ✅(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
 2025-01-10 11:16:20 +01:00
Nathan Panchout 7b70652440 ✨(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.
 2025-01-10 11:13:51 +01:00
Nathan Panchout 0eac08dad9 🔥(frontend) remove files from bad rebase 
We had already deleted this file but it must have reappeared
with a bad rebase
 2025-01-10 11:13:51 +01:00
Nathan Panchout 298470229f 💄(frontend) add dropdown option for DocGridItem 
Implement dropdown menu with functionality to delete a document
from the list
 2025-01-10 11:13:50 +01:00
Nathan Panchout 827a090a92 ✅(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.
 2025-01-10 11:13:50 +01:00
Nathan Panchout 35b0221ca9 💄(frontend) update DocsGrid component 
Implement the new version of  the DocsGrid  component
 2025-01-10 11:13:50 +01:00
Nathan Panchout 2f20caf1df 🔧(frontend) update cunningham configuration 
- update primary colors,and spacing.
- update tertiary button
 2025-01-10 11:13:50 +01:00
Nathan Panchout 4608e101e6 ➕(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.
 2025-01-10 11:13:47 +01:00
Nathan Panchout 29ca1b5dcf 💄(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.
 2025-01-10 11:12:15 +01:00
Nathan Panchout 0da21cc3c5 🔥(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.
 2025-01-10 11:12:15 +01:00
Nathan Panchout 88fd28783b 💄(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.
 2025-01-10 11:12:15 +01:00
Anthony LC 248a8affce build image with main-new-ui branch 2025-01-10 11:12:15 +01:00
Nathan Panchout 520854c3e2 ✅(frontend) update tests 
Some minor changes have been integrated into the list of documents.
The tests must therefore be adapted accordingly.
 2025-01-10 11:12:15 +01:00
Nathan Panchout ab0c1ad837 💄(frontend) add left panel 
In the new interface there is a new left panel. We implement it and add it
to the MainLayout
 2025-01-10 11:12:15 +01:00
Nathan Panchout 208a3279cf 💄(frontend) add cunningham tokens 
In order to use the spaces and grays of the DSFR,
we update the cunningham.ts file
 2025-01-10 11:12:15 +01:00
Nathan Panchout b06c9fbeda ✨(frontend) implement new UI 
This branch is a transition branch to gradually merge the new UI.
 2025-01-10 11:12:15 +01:00
202 changed files with 7221 additions and 4588 deletions
Expand all files Collapse all files
.github/workflows/docker-hub.yml
+1
View File
@@ -6,6 +6,7 @@ on:
push:
branches:
- 'main'
- 'main-new-ui'
tags:
- 'v*'
pull_request:
CHANGELOG.md
+25 -5
View File
@@ -10,16 +10,29 @@ and this project adheres to
## [Unreleased]
## Added
🔧(backend) add option to configure list of required OIDC claims #525
🔧(helm) add option to disable default tls setting by @dominikkaminski #519
- 🔧(backend) add option to configure list of required OIDC claims #525
- 🔧(helm) add option to disable default tls setting by @dominikkaminski #519
- ✨(frontend) WIP: New ui
- 💄(frontend) Add left panel #420
- 💄(frontend) updating the header and leftpanel for responsive #421
- 💄(frontend) update DocsGrid component #431
- 💄(frontend) update DocsGridOptions component #432
- 💄(frontend) update DocHeader ui #446
- 💄(frontend) update doc versioning ui #463
- 💄(frontend) update doc summary ui #473
- 🐛(frontend) fix doc grid button #478
- ✨(backend) add server-to-server API endpoint to create documents #467
- ✨(frontend) new share modal ui #489
- ✨(frontend) add favorite feature #515
- ✨(frontend) many ui fixes #524
- 💄(frontend) fix the ux of the new ui #539
- 💄(frontend) fix minor bugs #546
## Changed
- 💄(frontend) add filtering from left panel #475
- 🏗️(yjs-server) organize yjs server #528
- ♻️(frontend) better separation collaboration process #528
## [1.10.0] - 2024-12-17
## Added
@@ -37,6 +50,11 @@ and this project adheres to
- ⚡️(e2e) reduce flakiness on e2e tests #511
## Fixed
- 🐛(frontend) update doc editor height #481
- 💄(frontend) add doc search #485
## [1.9.0] - 2024-12-11
## Added
@@ -80,6 +98,8 @@ and this project adheres to
- 🌐(backend) add German translation #259
- 🌐(frontend) add German translation #255
- ✨(frontend) add a broadcast store #387
- ✨(backend) config endpoint #425
- 💄(frontend) update DocsGrid component #431
- ✨(backend) whitelist pod's IP address #443
- ✨(backend) config endpoint #425
- ✨(frontend) config endpoint #424
SC2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

src/frontend/apps/e2e/__tests__/app-impress/common.ts
+24 -21
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], { delay: 100 });
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: 'Quick search input',
});
// Select a new user
await inputSearch.fill(fillText);
@@ -75,13 +84,9 @@ export const addNewMember = async (
await page.getByRole('option', { name: users[index].email }).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).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.getByLabel('doc-role-dropdown').click();
await page.getByRole('button', { name: role }).click();
await page.getByRole('button', { name: 'Invite' }).click();
return users[index].email;
};
@@ -97,24 +102,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(docsGrid.getByTestId('grid-loader')).toBeHidden();
await expect(datagrid.getByLabel('Loading data')).toBeHidden({
timeout: 10000,
});
const rows = docsGrid.getByRole('row');
const rows = datagridTable.getByRole('row');
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
+3 -2
View File
@@ -2,7 +2,7 @@ import path from 'path';
import { expect, test } from '@playwright/test';
import { createDoc } from './common';
import { createDoc, verifyDocName } from './common';
const config = {
CRISP_WEBSITE_ID: null,
@@ -129,7 +129,8 @@ test.describe('Config', () => {
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:8083/collaboration/ws/');
src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
+13 -10
View File
@@ -1,6 +1,12 @@
import { expect, test } from '@playwright/test';
import { createDoc, goToGridDoc, keyCloakSignIn, randomName } from './common';
import {
createDoc,
goToGridDoc,
keyCloakSignIn,
randomName,
verifyDocName,
} from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
@@ -18,15 +24,12 @@ 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('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('grid-loader')).toBeHidden();
await expect(docsGrid.getByText(docTitle)).toBeVisible();
});
});
@@ -64,7 +67,7 @@ test.describe('Doc Create: Not loggued', () => {
await goToGridDoc(page, { title });
await expect(page.getByRole('heading', { name: title })).toBeVisible();
await verifyDocName(page, title);
const editor = page.locator('.ProseMirror');
await expect(editor.getByText('This is a normal text')).toBeVisible();
src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
+24 -18
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('/');
@@ -98,7 +103,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]);
let webSocket = await webSocketPromise;
expect(webSocket.url()).toContain(
@@ -116,17 +121,15 @@ test.describe('Doc Editor', () => {
await page.getByRole('button', { name: 'Share' }).click();
const selectVisibility = page.getByRole('combobox', {
name: 'Visibility',
});
const selectVisibility = page.getByLabel('Visibility', { exact: true });
// When the visibility is changed, the ws should closed the connection (backend signal)
const wsClosePromise = webSocket.waitForEvent('close');
await selectVisibility.click();
await page
.getByRole('option', {
name: 'Authenticated',
.getByRole('button', {
name: 'Connected',
})
.click();
@@ -153,7 +156,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();
@@ -178,7 +181,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();
@@ -187,7 +190,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');
@@ -197,7 +201,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();
});
@@ -208,7 +212,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();
@@ -219,7 +223,7 @@ test.describe('Doc Editor', () => {
nthRow: 2,
});
await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
await verifyDocName(page, secondDoc);
await goToGridDoc(page, {
title: doc,
@@ -233,8 +237,9 @@ test.describe('Doc Editor', () => {
test.skip(browserName === 'webkit', 'This test is very flaky with webkit');
// Check the first doc
const [doc] = await createDoc(page, 'doc-quit-1', browserName, 1);
await expect(page.locator('h2').getByText(doc)).toBeVisible();
const doc = await goToGridDoc(page);
await verifyDocName(page, doc);
const editor = page.locator('.ProseMirror');
await editor.click();
@@ -267,9 +272,10 @@ test.describe('Doc Editor', () => {
await goToGridDoc(page);
await expect(
page.getByText('Read only, you cannot edit this document.'),
).toBeVisible();
const card = page.getByLabel('It is the card information');
await expect(card).toBeVisible();
await expect(card.getByText('Reader')).toBeVisible();
});
test('it adds an image to the doc editor', async ({ page, browserName }) => {
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-favorite.spec.ts
+75
View File
@@ -0,0 +1,75 @@
import { expect, test } from '@playwright/test';
import { createDoc, verifyDocName } from './common';
type SmallDoc = {
id: string;
title: string;
};
test.describe('Document favorite', () => {
test('it check the favorite workflow', async ({ page, browserName }) => {
const id = Math.random().toString(7);
await page.goto('/');
// Create document
const createdDoc = await createDoc(page, `Doc ${id}`, browserName, 1);
await verifyDocName(page, createdDoc[0]);
// Reload page
await page.reload();
await page.goto('/');
// Get all documents
let docs: SmallDoc[] = [];
const response = await page.waitForResponse(
(response) =>
response.url().endsWith('documents/?page=1') &&
response.status() === 200,
);
const result = await response.json();
docs = result.results as SmallDoc[];
const docsGrid = page.getByTestId('docs-grid');
await docsGrid.getByRole('heading', { name: 'All docs' }).click();
await expect(docsGrid.getByText(`Doc ${id}`)).toBeVisible();
const doc = docs.find((doc) => doc.title === createdDoc[0]) as SmallDoc;
// Check document
expect(doc).not.toBeUndefined();
expect(doc?.title).toBe(createdDoc[0]);
// Open document actions
const button = docsGrid.getByTestId(`docs-grid-actions-button-${doc.id}`);
await expect(button).toBeVisible();
await button.click();
// Pin document
const pinButton = page.getByTestId(`docs-grid-actions-pin-${docs[0].id}`);
await expect(pinButton).toBeVisible();
await pinButton.click();
// Check response
const responsePin = await page.waitForResponse(
(response) =>
response.url().includes(`documents/${doc.id}/favorite/`) &&
response.status() === 201,
);
expect(responsePin.ok()).toBeTruthy();
// Check left panel favorites
const leftPanelFavorites = page.getByTestId('left-panel-favorites');
await expect(leftPanelFavorites).toBeVisible();
await expect(leftPanelFavorites.getByText(`Doc ${id}`)).toBeVisible();
//
await button.click();
const unpinButton = page.getByTestId(
`docs-grid-actions-unpin-${docs[0].id}`,
);
await expect(unpinButton).toBeVisible();
await unpinButton.click();
// Check left panel favorites
await expect(leftPanelFavorites.getByText(`Doc ${id}`)).toBeHidden();
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
+251 -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,256 @@ 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('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().endsWith('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.getByRole('heading', { name: 'Delete a doc' }),
).toBeVisible();
await page
.getByRole('button', {
name: 'Confirm deletion',
})
.click();
const refetchResponse = await page.waitForResponse(
(response) =>
response.url().endsWith('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 filters', () => {
test('it checks the prebuild left panel filters', async ({ page }) => {
// All Docs
await expect(page.getByTestId('grid-loader')).toBeVisible();
const response = await page.waitForResponse(
(response) =>
response.url().endsWith('documents/?page=1') &&
response.status() === 200,
);
const result = await response.json();
const allCount = result.count as number;
await expect(page.getByTestId('grid-loader')).toBeHidden();
const allDocs = page.getByLabel('All docs');
const myDocs = page.getByLabel('My docs');
const sharedWithMe = page.getByLabel('Shared with me');
// Initial state
await expect(allDocs).toBeVisible();
await expect(allDocs).toHaveCSS('background-color', 'rgb(238, 238, 238)');
await expect(allDocs).toHaveAttribute('aria-selected', 'true');
await expect(myDocs).toBeVisible();
await expect(myDocs).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
await expect(myDocs).toHaveAttribute('aria-selected', 'false');
await expect(sharedWithMe).toBeVisible();
await expect(sharedWithMe).toHaveCSS(
'background-color',
'rgba(0, 0, 0, 0)',
);
await expect(sharedWithMe).toHaveAttribute('aria-selected', 'false');
await allDocs.click();
let url = new URL(page.url());
let target = url.searchParams.get('target');
expect(target).toBe('all_docs');
// My docs
await myDocs.click();
url = new URL(page.url());
target = url.searchParams.get('target');
expect(target).toBe('my_docs');
await expect(page.getByTestId('grid-loader')).toBeVisible();
const responseMyDocs = await page.waitForResponse(
(response) =>
response.url().endsWith('documents/?page=1&is_creator_me=true') &&
response.status() === 200,
);
const resultMyDocs = await responseMyDocs.json();
const countMyDocs = resultMyDocs.count as number;
await expect(page.getByTestId('grid-loader')).toBeHidden();
expect(countMyDocs).toBeLessThanOrEqual(allCount);
// Shared with me
await sharedWithMe.click();
url = new URL(page.url());
target = url.searchParams.get('target');
expect(target).toBe('shared_with_me');
await expect(page.getByTestId('grid-loader')).toBeVisible();
const responseSharedWithMe = await page.waitForResponse(
(response) =>
response.url().includes('documents/?page=1&is_creator_me=false') &&
response.status() === 200,
);
const resultSharedWithMe = await responseSharedWithMe.json();
const countSharedWithMe = resultSharedWithMe.count as number;
await expect(page.getByTestId('grid-loader')).toBeHidden();
expect(countSharedWithMe).toBeLessThanOrEqual(allCount);
expect(countSharedWithMe + countMyDocs).toEqual(allCount);
});
});
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('grid-loader')).toBeVisible();
const response = await page.waitForResponse(
(response) =>
response.url().endsWith('documents/?page=1') &&
response.status() === 200,
);
const result = await response.json();
docs = result.results as SmallDoc[];
await expect(page.getByTestId('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().endsWith(`/documents/?page=1`) &&
response.status() === 200,
);
const responsePromisePage2 = page.waitForResponse(
(response) =>
response.url().endsWith(`/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
+70 -146
View File
@@ -6,6 +6,7 @@ import {
mockedAccesses,
mockedDocument,
mockedInvitations,
verifyDocName,
} from './common';
test.beforeEach(async ({ page }) => {
@@ -59,84 +60,31 @@ 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('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('');
// eslint-disable-next-line playwright/no-wait-for-timeout
await page.waitForTimeout(500);
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
@@ -146,7 +94,13 @@ test.describe('Doc Header', () => {
.click();
await expect(
page.locator('h2').getByText(`Deleting the document "${randomDoc}"`),
page.getByRole('heading', { name: 'Delete a doc' }),
).toBeVisible();
await expect(
page.getByText(
`Are you sure you want to delete the document "${randomDoc}"?`,
),
).toBeVisible();
await page
@@ -159,9 +113,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 +147,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();
).toBeDisabled();
// Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } });
@@ -212,34 +161,40 @@ test.describe('Doc Header', () => {
await page.getByRole('button', { name: 'Share' }).click();
const shareModal = page.getByLabel('Share modal');
await expect(shareModal).toBeVisible();
await expect(page.getByText('Share the document')).toBeVisible();
await expect(
shareModal.getByRole('combobox', {
name: 'Visibility',
}),
).not.toHaveAttribute('disabled');
await expect(shareModal.getByText('Search by email')).toBeVisible();
await expect(page.getByPlaceholder('Type a name or email')).toBeVisible();
const invitationCard = shareModal.getByLabel('List invitation card');
await expect(invitationCard).toBeVisible();
await expect(
invitationCard.getByText('test@invitation.test'),
invitationCard.getByText('test@invitation.test').first(),
).toBeVisible();
await expect(invitationCard.getByLabel('doc-role-dropdown')).toBeVisible();
await invitationCard.getByRole('button', { name: 'more_horiz' }).click();
await expect(
invitationCard.getByRole('combobox', { name: 'Role' }),
).toBeEnabled();
await expect(
invitationCard.getByRole('button', {
page.getByRole('button', {
name: 'delete',
}),
).toBeEnabled();
await invitationCard.click();
const memberCard = shareModal.getByLabel('List members card');
await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
await expect(memberCard).toBeVisible();
await expect(
memberCard.getByRole('combobox', { name: 'Role' }),
).toBeEnabled();
memberCard.getByText('test@accesses.test').first(),
).toBeVisible();
await expect(memberCard.getByLabel('doc-role-dropdown')).toBeVisible();
await expect(
memberCard.getByRole('button', {
memberCard.getByRole('button', { name: 'more_horiz' }),
).toBeVisible();
await memberCard.getByRole('button', { name: 'more_horiz' }).click();
await expect(
page.getByRole('button', {
name: 'delete',
}),
).toBeEnabled();
@@ -273,16 +228,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();
).toBeDisabled();
// Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } });
@@ -290,36 +241,24 @@ test.describe('Doc Header', () => {
await page.getByRole('button', { name: 'Share' }).click();
const shareModal = page.getByLabel('Share modal');
await expect(page.getByText('Share the document')).toBeVisible();
await expect(
shareModal.getByRole('combobox', {
name: 'Visibility',
}),
).toHaveAttribute('disabled');
await expect(shareModal.getByText('Search by email')).toBeHidden();
await expect(page.getByPlaceholder('Type a name or email')).toBeHidden();
const invitationCard = shareModal.getByLabel('List invitation card');
await expect(
invitationCard.getByText('test@invitation.test'),
invitationCard.getByText('test@invitation.test').first(),
).toBeVisible();
await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
await expect(
invitationCard.getByRole('combobox', { name: 'Role' }),
).toHaveAttribute('disabled');
await expect(
invitationCard.getByRole('button', {
name: 'delete',
}),
invitationCard.getByRole('button', { name: 'more_horiz' }),
).toBeHidden();
const memberCard = shareModal.getByLabel('List members card');
await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
await expect(
memberCard.getByRole('combobox', { name: 'Role' }),
).toHaveAttribute('disabled');
await expect(
memberCard.getByRole('button', {
name: 'delete',
}),
memberCard.getByRole('button', { name: 'more_horiz' }),
).toBeHidden();
});
@@ -351,16 +290,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 } });
@@ -368,36 +303,24 @@ test.describe('Doc Header', () => {
await page.getByRole('button', { name: 'Share' }).click();
const shareModal = page.getByLabel('Share modal');
await expect(page.getByText('Share the document')).toBeVisible();
await expect(
shareModal.getByRole('combobox', {
name: 'Visibility',
}),
).toHaveAttribute('disabled');
await expect(shareModal.getByText('Search by email')).toBeHidden();
await expect(page.getByPlaceholder('Type a name or email')).toBeHidden();
const invitationCard = shareModal.getByLabel('List invitation card');
await expect(
invitationCard.getByText('test@invitation.test'),
invitationCard.getByText('test@invitation.test').first(),
).toBeVisible();
await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
await expect(
invitationCard.getByRole('combobox', { name: 'Role' }),
).toHaveAttribute('disabled');
await expect(
invitationCard.getByRole('button', {
name: 'delete',
}),
invitationCard.getByRole('button', { name: 'more_horiz' }),
).toBeHidden();
const memberCard = shareModal.getByLabel('List members card');
await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
await expect(
memberCard.getByRole('combobox', { name: 'Role' }),
).toHaveAttribute('disabled');
await expect(
memberCard.getByRole('button', {
name: 'delete',
}),
memberCard.getByRole('button', { name: 'more_horiz' }),
).toBeHidden();
});
@@ -414,7 +337,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 +372,7 @@ test.describe('Doc Header', () => {
// create page and navigate to it
await page
.getByRole('button', {
name: 'Create a new document',
name: 'New doc',
})
.click();
@@ -499,6 +422,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
+97 -169
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: 'Quick search input',
});
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 expect(page.getByRole('option', { name: 'Reader' })).toBeVisible();
await expect(page.getByRole('option', { name: 'Editor' })).toBeVisible();
await list.getByLabel('doc-role-dropdown').click();
await expect(page.getByRole('button', { name: 'Reader' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Editor' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Owner' })).toBeVisible();
await expect(
page.getByRole('option', { name: 'Administrator' }),
page.getByRole('button', { 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,
);
// Validate
await page.getByRole('button', { name: 'Administrator' }).click();
await page.getByRole('button', { name: 'Invite' }).click();
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();
await page.getByRole('option', { name: 'Administrator' }).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,40 +102,43 @@ 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: 'Quick search input',
});
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();
await page.getByRole('option', { name: 'Owner' }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('button', { 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 page.getByRole('option', { name: 'Owner' }).click();
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('button', { name: 'Owner' }).click();
const responsePromiseCreateInvitationFail = page.waitForResponse(
(response) =>
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();
@@ -233,31 +155,32 @@ test.describe('Document create member', () => {
const header = page.locator('header').first();
await header.getByRole('combobox').getByText('EN').click();
await header.getByRole('option', { name: 'FR' }).click();
await header.getByRole('option', { name: 'translate Français' }).click();
await page.getByRole('button', { name: 'Partager' }).click();
const inputSearch = page.getByLabel(
/Trouver un membre à ajouter au document/,
);
const inputSearch = page.getByRole('combobox', {
name: 'Quick search input',
});
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();
await page.getByRole('option', { name: 'Administrateur' }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('button', { name: 'Administrateur' }).click();
const responsePromiseCreateInvitation = page.waitForResponse(
(response) =>
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,41 +193,46 @@ 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: 'Quick search input',
});
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();
await page.getByRole('option', { name: 'Administrator' }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('button', { name: 'Administrator' }).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();
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('button', { name: 'Reader' }).click();
const moreActions = userInvitation.getByRole('button', {
name: 'more_horiz',
});
await moreActions.click();
await page.getByRole('button', { name: 'Delete' }).click();
await expect(userInvitation).toBeHidden();
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts
+101 -108
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}`,
@@ -47,26 +46,23 @@ test.describe('Document list members', () => {
},
);
await goToGridDoc(page);
const docTitle = await goToGridDoc(page);
await verifyDocName(page, docTitle);
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 +71,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}`,
@@ -104,131 +100,128 @@ test.describe('Document list members', () => {
},
);
await goToGridDoc(page);
const docTitle = await goToGridDoc(page);
await verifyDocName(page, docTitle);
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 currentUserRole.click();
await page.getByRole('button', { name: 'Administrator' }).click();
await list.click();
await expect(currentUserRole).toBeVisible();
await SelectRoleCurrentUser.click();
await page.getByRole('option', { name: 'Administrator' }).click();
await expect(page.getByText('The role has been updated')).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 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 currentUserRole.click();
await page.getByRole('button', { name: 'Reader' }).click();
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_horiz',
});
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_horiz',
});
const userReader = await addNewMember(page, 0, 'Reader');
await expect(list.getByText(userReader)).toBeVisible();
await page.getByRole('button', { name: 'close' }).first().click();
await page.getByRole('button', { name: 'Share' }).first().click();
await list
.locator('li')
.filter({
hasText: userReader,
})
.getByText('delete')
.click();
const userReaderEmail = await addNewMember(page, 0, 'Reader');
await expect(list.getByText(userReader)).toBeHidden();
const userReader = list.getByTestId(
`doc-share-member-row-${userReaderEmail}`,
);
const userReaderMoreActions = userReader.getByRole('button', {
name: 'more_horiz',
});
await list
.locator('li')
.filter({
hasText: nameMyself,
})
.getByText('delete')
.click();
await expect(mySelf).toBeVisible();
await expect(userOwner).toBeVisible();
await expect(userReader).toBeVisible();
await expect(list.getByText(nameMyself)).toBeHidden();
await expect(userOwnerMoreActions).toBeVisible();
await expect(userReaderMoreActions).toBeVisible();
await expect(mySelfMoreActions).toBeVisible();
await userReaderMoreActions.click();
await page.getByRole('button', { name: 'Delete' }).click();
await expect(userReader).toBeHidden();
await mySelfMoreActions.click();
await page.getByRole('button', { 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-search.spec.ts
+114
View File
@@ -0,0 +1,114 @@
import { expect, test } from '@playwright/test';
import { DateTime } from 'luxon';
import { createDoc, verifyDocName } from './common';
type SmallDoc = {
id: string;
title: string;
updated_at: string;
};
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test.describe('Document search', () => {
test('it checks all elements are visible', async ({ page }) => {
await page.getByRole('button', { name: 'search' }).click();
await expect(
page.getByRole('img', { name: 'No active search' }),
).toBeVisible();
await expect(
page.getByLabel('Search modal').getByText('search'),
).toBeVisible();
await expect(
page.getByPlaceholder('Type the name of a document'),
).toBeVisible();
});
test('it checks search for a document', async ({ page, browserName }) => {
const id = Math.random().toString(36).substring(7);
const doc1 = await createDoc(page, `My super ${id} doc`, browserName, 1);
await verifyDocName(page, doc1[0]);
await page.goto('/');
const doc2 = await createDoc(
page,
`My super ${id} very doc`,
browserName,
1,
);
await verifyDocName(page, doc2[0]);
await page.goto('/');
await page.getByRole('button', { name: 'search' }).click();
await page.getByPlaceholder('Type the name of a document').click();
await page
.getByPlaceholder('Type the name of a document')
.fill(`My super ${id}`);
let responsePromisePage = page.waitForResponse(
(response) =>
response.url().includes(`/documents/?page=1&title=My+super+${id}`) &&
response.status() === 200,
);
let response = await responsePromisePage;
let result = (await response.json()) as { results: SmallDoc[] };
let docs = result.results;
expect(docs.length).toEqual(2);
await Promise.all(
docs.map(async (doc: SmallDoc) => {
await expect(
page.getByTestId(`doc-search-item-${doc.id}`),
).toBeVisible();
const updatedAt = DateTime.fromISO(doc.updated_at ?? DateTime.now())
.setLocale('en')
.toRelative();
await expect(
page.getByTestId(`doc-search-item-${doc.id}`).getByText(updatedAt!),
).toBeVisible();
}),
);
const firstDoc = docs[0];
await expect(
page
.getByTestId(`doc-search-item-${firstDoc.id}`)
.getByText('keyboard_return'),
).toBeVisible();
await page
.getByPlaceholder('Type the name of a document')
.press('ArrowDown');
const secondDoc = docs[1];
await expect(
page
.getByTestId(`doc-search-item-${secondDoc.id}`)
.getByText('keyboard_return'),
).toBeVisible();
await page.getByPlaceholder('Type the name of a document').click();
await page
.getByPlaceholder('Type the name of a document')
.fill(`My super ${id} doc`);
responsePromisePage = page.waitForResponse(
(response) =>
response
.url()
.includes(`/documents/?page=1&title=My+super+${id}+doc`) &&
response.status() === 200,
);
response = await responsePromisePage;
result = (await response.json()) as { results: SmallDoc[] };
docs = result.results;
expect(docs.length).toEqual(1);
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-table-content.spec.ts
+18 -112
View File
@@ -1,6 +1,6 @@
import { expect, test } from '@playwright/test';
import { createDoc, goToGridDoc } from './common';
import { createDoc, verifyDocName } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
@@ -17,123 +17,29 @@ 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
.getByRole('button', {
name: 'Table of contents',
})
.click();
await page.locator('.ProseMirror').click();
const panel = page.getByLabel('Document panel');
const editor = page.locator('.ProseMirror');
await page.keyboard.type('# Level 1\n## Level 2\n### Level 3');
await editor.locator('.bn-block-outer').last().fill('/');
await page.getByText('Heading 1').click();
await page.keyboard.type('Hello World');
await editor.getByText('Hello').dblclick();
await page.getByRole('button', { name: 'Strike' }).click();
const summaryContainer = page.locator('#summaryContainer');
await summaryContainer.click();
await page.locator('.bn-block-outer').first().click();
await page.locator('.bn-block-outer').last().click();
const level1 = summaryContainer.getByText('Level 1');
const level2 = summaryContainer.getByText('Level 2');
const level3 = summaryContainer.getByText('Level 3');
// Create space to fill the viewport
for (let i = 0; i < 10; i++) {
await page.keyboard.press('Enter');
}
await expect(level1).toBeVisible();
await expect(level1).toHaveCSS('padding', /4px 0px/);
await expect(level1).toHaveAttribute('aria-selected', 'true');
await editor.locator('.bn-block-outer').last().fill('/');
await page.getByText('Heading 2').click();
await page.keyboard.type('Super World', { delay: 100 });
await expect(level2).toBeVisible();
await expect(level2).toHaveCSS('padding-left', /14.4px/);
await expect(level2).toHaveAttribute('aria-selected', 'false');
await page.locator('.bn-block-outer').last().click();
// Create space to fill the viewport
for (let i = 0; i < 10; i++) {
await page.keyboard.press('Enter');
}
await editor.locator('.bn-block-outer').last().fill('/');
await page.getByText('Heading 3').click();
await page.keyboard.type('Another World');
const hello = panel.getByText('Hello World');
const superW = panel.getByText('Super World');
const another = panel.getByText('Another World');
await expect(hello).toBeVisible();
await expect(hello).toHaveCSS('font-size', /17/);
await expect(hello).toHaveAttribute('aria-selected', 'true');
await expect(superW).toBeVisible();
await expect(superW).toHaveCSS('font-size', /14/);
await expect(superW).toHaveAttribute('aria-selected', 'false');
await expect(another).toBeVisible();
await expect(another).toHaveCSS('font-size', /12/);
await expect(another).toHaveAttribute('aria-selected', 'false');
await hello.click();
await expect(editor.getByText('Hello World')).toBeInViewport();
await expect(hello).toHaveAttribute('aria-selected', 'true');
await expect(superW).toHaveAttribute('aria-selected', 'false');
await another.click();
await expect(editor.getByText('Hello World')).not.toBeInViewport();
await expect(hello).toHaveAttribute('aria-selected', 'false');
await expect(superW).toHaveAttribute('aria-selected', 'true');
await panel.getByText('Back to top').click();
await expect(editor.getByText('Hello World')).toBeInViewport();
await expect(hello).toHaveAttribute('aria-selected', 'true');
await expect(superW).toHaveAttribute('aria-selected', 'false');
await panel.getByText('Go to bottom').click();
await expect(editor.getByText('Hello World')).not.toBeInViewport();
await expect(superW).toHaveAttribute('aria-selected', 'true');
});
test('it checks that table contents panel is opened automaticaly if more that 2 headings', async ({
page,
browserName,
}) => {
const [randomDoc] = await createDoc(
page,
'doc-table-content',
browserName,
1,
);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
await expect(page.getByLabel('Open the panel')).toBeHidden();
const editor = page.locator('.ProseMirror');
await editor.locator('.bn-block-outer').last().fill('/');
await page.getByText('Heading 1').click();
await page.keyboard.type('Hello World', { delay: 100 });
await page.keyboard.press('Enter');
await editor.locator('.bn-block-outer').last().fill('/');
await page.getByText('Heading 2').click();
await page.keyboard.type('Super World', { delay: 100 });
await goToGridDoc(page, {
title: randomDoc,
});
await expect(page.getByLabel('Close the panel')).toBeVisible();
const panel = page.getByLabel('Document panel');
await expect(panel.getByText('Hello World')).toBeVisible();
await expect(panel.getByText('Super World')).toBeVisible();
await page.getByLabel('Close the panel').click();
await expect(panel).toHaveAttribute('aria-hidden', 'true');
await expect(level3).toBeVisible();
await expect(level3).toHaveCSS('padding-left', /24px/);
await expect(level3).toHaveAttribute('aria-selected', 'false');
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts
+48 -105
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
@@ -18,24 +23,29 @@ test.describe('Doc Version', () => {
name: 'Version history',
})
.click();
await expect(page.getByText('History', { exact: true })).toBeVisible();
const panel = page.getByLabel('Document panel');
const modal = page.getByLabel('version history modal');
const panel = modal.getByLabel('version list');
await expect(panel).toBeVisible();
await expect(modal.getByText('No versions')).toBeVisible();
await expect(panel.getByText('Current version')).toBeVisible();
expect(await panel.locator('li').count()).toBe(1);
await page.locator('.ProseMirror.bn-editor').click();
await page.locator('.ProseMirror.bn-editor').last().fill('Hello World');
const editor = page.locator('.ProseMirror');
await modal.getByRole('button', { name: 'close' }).click();
await editor.click();
await page.keyboard.type('# Hello World');
await goToGridDoc(page, {
title: randomDoc,
});
await expect(page.getByText('Hello World')).toBeVisible();
await expect(
page.getByRole('heading', { name: 'Hello World' }),
).toBeVisible();
await page
.locator('.ProseMirror .bn-block')
.getByText('Hello World')
.getByRole('heading', { name: 'Hello World' })
.fill('It will create a version');
await goToGridDoc(page, {
@@ -43,7 +53,9 @@ test.describe('Doc Version', () => {
});
await expect(page.getByText('Hello World')).toBeHidden();
await expect(page.getByText('It will create a version')).toBeVisible();
await expect(
page.getByRole('heading', { name: 'It will create a version' }),
).toBeVisible();
await page.getByLabel('Open the document options').click();
await page
@@ -52,19 +64,15 @@ test.describe('Doc Version', () => {
})
.click();
await expect(panel.getByText('Current version')).toBeVisible();
expect(await panel.locator('li').count()).toBe(2);
await expect(panel).toBeVisible();
await expect(page.getByText('History', { exact: true })).toBeVisible();
await expect(page.getByRole('status')).toBeHidden();
const items = await panel.locator('.version-item').all();
expect(items.length).toBe(1);
await items[0].click();
await panel.locator('li').nth(1).click();
await expect(
page.getByText('Read only, you cannot edit document versions.'),
).toBeVisible();
await expect(page.getByText('Hello World')).toBeVisible();
await expect(page.getByText('It will create a version')).toBeHidden();
await panel.getByText('Current version').click();
await expect(page.getByText('Hello World')).toBeHidden();
await expect(page.getByText('It will create a version')).toBeVisible();
await expect(modal.getByText('Hello World')).toBeVisible();
await expect(modal.getByText('It will create a version')).toBeHidden();
});
test('it does not display the doc versions if not allowed', async ({
@@ -79,24 +87,17 @@ 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();
await page.getByRole('button', { name: 'Table of content' }).click();
await expect(
page.getByLabel('Document panel').getByText('Versions'),
).toBeHidden();
).toBeDisabled();
});
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');
@@ -124,84 +125,26 @@ test.describe('Doc Version', () => {
})
.click();
const panel = page.getByLabel('Document panel');
await panel.locator('li').nth(1).click();
await expect(page.getByText('World')).toBeHidden();
const modal = page.getByLabel('version history modal');
const panel = modal.getByLabel('version list');
await expect(panel).toBeVisible();
await panel.getByLabel('Open the version options').click();
await page.getByText('Restore the version').click();
await expect(page.getByText('History', { exact: true })).toBeVisible();
await expect(page.getByRole('status')).toBeVisible();
await expect(page.getByRole('status')).toBeHidden();
const items = await panel.locator('.version-item').all();
expect(items.length).toBe(1);
await items[0].click();
await expect(page.getByText('Restore this version?')).toBeVisible();
await expect(modal.getByText('World')).toBeHidden();
await page
.getByRole('button', {
name: 'Restore',
})
.click();
await page.getByRole('button', { name: 'Restore' }).click();
await expect(page.getByText('Your current document will')).toBeVisible();
await page.getByText('If a member is editing, his').click();
await expect(panel.locator('li')).toHaveCount(3);
await page.getByLabel('Restore', { exact: true }).click();
await panel.getByText('Current version').click();
await expect(page.getByText('Hello')).toBeVisible();
await expect(page.getByText('World')).toBeHidden();
});
test('it restores the doc version from button title', async ({
page,
browserName,
}) => {
const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
const editor = page.locator('.ProseMirror');
await editor.locator('.bn-block-outer').last().click();
await editor.locator('.bn-block-outer').last().fill('Hello');
await goToGridDoc(page, {
title: randomDoc,
});
await expect(editor.getByText('Hello')).toBeVisible();
await editor.locator('.bn-block-outer').last().click();
await page.keyboard.press('Enter');
await editor.locator('.bn-block-outer').last().fill('World');
await goToGridDoc(page, {
title: randomDoc,
});
await expect(editor.getByText('World')).toBeVisible();
await page.getByLabel('Open the document options').click();
await page
.getByRole('button', {
name: 'Version history',
})
.click();
const panel = page.getByLabel('Document panel');
await panel.locator('li').nth(1).click();
await expect(editor.getByText('World')).toBeHidden();
await page
.getByRole('button', {
name: 'Restore this version',
})
.click();
await expect(page.getByText('Restore this version?')).toBeVisible();
await page
.getByRole('button', {
name: 'Restore',
})
.click();
await expect(panel.locator('li')).toHaveCount(3);
await panel.getByText('Current version').click();
await expect(editor.getByText('Hello')).toBeVisible();
await expect(editor.getByText('World')).toBeHidden();
});
});
src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
+88 -124
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'];
@@ -36,35 +36,31 @@ test.describe('Doc Visibility', () => {
await page.getByRole('button', { name: 'Share' }).click();
const selectVisibility = page.getByRole('combobox', {
name: 'Visibility',
});
const selectVisibility = page.getByLabel('Visibility', { exact: true });
await expect(selectVisibility.getByText('Restricted')).toBeVisible();
await expect(selectVisibility.getByText('Private')).toBeVisible();
await expect(page.getByLabel('Read only')).toBeHidden();
await expect(page.getByLabel('Can read and edit')).toBeHidden();
await selectVisibility.click();
await page
.getByRole('option', {
name: 'Authenticated',
.getByRole('button', {
name: 'Connected',
})
.click();
await expect(page.getByLabel('Read only')).toBeVisible();
await expect(page.getByLabel('Can read and edit')).toBeVisible();
await expect(page.getByLabel('Visibility mode')).toBeVisible();
await selectVisibility.click();
await page
.getByRole('option', {
.getByRole('button', {
name: 'Public',
})
.click();
await expect(page.getByLabel('Read only')).toBeVisible();
await expect(page.getByLabel('Can read and edit')).toBeVisible();
await expect(page.getByLabel('Visibility mode')).toBeVisible();
});
});
@@ -85,7 +81,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 +107,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,11 +135,13 @@ 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: 'Quick search input',
});
const otherBrowser = browsersName.find((b) => b !== browserName);
const username = `user@${otherBrowser}.e2e`;
@@ -151,14 +149,11 @@ test.describe('Doc Visibility: Restricted', () => {
await page.getByRole('option', { name: username }).click();
// Choose a role
await page.getByRole('combobox', { name: /Choose a role/ }).click();
await page.getByRole('option', { name: 'Administrator' }).click();
const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click();
await page.getByRole('button', { 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,8 +171,8 @@ test.describe('Doc Visibility: Restricted', () => {
await page.goto(urlDoc);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
await verifyDocName(page, docTitle);
await expect(page.getByLabel('Share button')).toBeVisible();
});
});
@@ -198,17 +193,14 @@ 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
.getByRole('combobox', {
name: 'Visibility',
})
.click();
const selectVisibility = page.getByLabel('Visibility', { exact: true });
await selectVisibility.click();
await page
.getByRole('option', {
.getByRole('button', {
name: 'Public',
})
.click();
@@ -217,20 +209,27 @@ test.describe('Doc Visibility: Public', () => {
page.getByText('The document visibility has been updated.'),
).toBeVisible();
await page.getByLabel('Read only').click();
await page.getByLabel('Visibility mode').click();
await page
.getByRole('button', {
name: 'Reading',
})
.click();
await expect(
page.getByText('The document visibility has been updated.').first(),
).toBeVisible();
await page.locator('.c__modal__backdrop').click({
position: { x: 0, y: 0 },
});
await page.getByRole('button', { name: 'close' }).click();
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();
@@ -247,9 +246,10 @@ test.describe('Doc Visibility: Public', () => {
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
await expect(
page.getByText('Read only, you cannot edit this document'),
).toBeVisible();
const card = page.getByLabel('It is the card information');
await expect(card).toBeVisible();
await expect(card.getByText('Reader')).toBeVisible();
});
test('It checks a public doc in editable mode', async ({
@@ -261,17 +261,14 @@ 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
.getByRole('combobox', {
name: 'Visibility',
})
.click();
const selectVisibility = page.getByLabel('Visibility', { exact: true });
await selectVisibility.click();
await page
.getByRole('option', {
.getByRole('button', {
name: 'Public',
})
.click();
@@ -280,20 +277,23 @@ test.describe('Doc Visibility: Public', () => {
page.getByText('The document visibility has been updated.'),
).toBeVisible();
await page.getByLabel('Can read and edit').click();
await page.getByLabel('Visibility mode').click();
await page.getByLabel('Edition').click();
await expect(
page.getByText('The document visibility has been updated.').first(),
).toBeVisible();
await page.locator('.c__modal__backdrop').click({
position: { x: 0, y: 0 },
});
await page.getByRole('button', { name: 'close' }).click();
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,11 +308,8 @@ 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'),
).toBeHidden();
});
});
@@ -333,17 +330,14 @@ 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();
const selectVisibility = page.getByLabel('Visibility', { exact: true });
await selectVisibility.click();
await page
.getByRole('combobox', {
name: 'Visibility',
})
.click();
await page
.getByRole('option', {
name: 'Authenticated',
.getByRole('button', {
name: 'Connected',
})
.click();
@@ -351,9 +345,7 @@ test.describe('Doc Visibility: Authenticated', () => {
page.getByText('The document visibility has been updated.'),
).toBeVisible();
await page.locator('.c__modal__backdrop').click({
position: { x: 0, y: 0 },
});
await page.getByRole('button', { name: 'close' }).click();
const urlDoc = page.url();
@@ -385,17 +377,14 @@ 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();
const selectVisibility = page.getByLabel('Visibility', { exact: true });
await selectVisibility.click();
await page
.getByRole('combobox', {
name: 'Visibility',
})
.click();
await page
.getByRole('option', {
name: 'Authenticated',
.getByRole('button', {
name: 'Connected',
})
.click();
@@ -403,9 +392,7 @@ test.describe('Doc Visibility: Authenticated', () => {
page.getByText('The document visibility has been updated.'),
).toBeVisible();
await page.locator('.c__modal__backdrop').click({
position: { x: 0, y: 0 },
});
await page.getByRole('button', { name: 'close' }).click();
const urlDoc = page.url();
@@ -422,19 +409,13 @@ test.describe('Doc Visibility: Authenticated', () => {
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
await page.getByRole('button', { name: 'Share' }).click();
await expect(
page.getByText('Read only, you cannot edit this document'),
).toBeVisible();
const shareModal = page.getByLabel('Share modal');
await expect(selectVisibility).toBeHidden();
await expect(
shareModal.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: 'Quick search input',
});
await expect(inputSearch).toBeHidden();
});
test('It checks a authenticated doc in editable mode', async ({
@@ -451,17 +432,14 @@ 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();
const selectVisibility = page.getByLabel('Visibility', { exact: true });
await selectVisibility.click();
await page
.getByRole('combobox', {
name: 'Visibility',
})
.click();
await page
.getByRole('option', {
name: 'Authenticated',
.getByRole('button', {
name: 'Connected',
})
.click();
@@ -469,23 +447,15 @@ test.describe('Doc Visibility: Authenticated', () => {
page.getByText('The document visibility has been updated.'),
).toBeVisible();
await page.locator('.c__modal__backdrop').click({
position: { x: 0, y: 0 },
});
const urlDoc = page.url();
await page.getByRole('button', { name: 'Share' }).click();
await page.getByLabel('Can read and edit').click();
await page.getByLabel('Visibility mode').click();
await page.getByLabel('Edition').click();
await expect(
page.getByText('The document visibility has been updated.').first(),
).toBeVisible();
await page.locator('.c__modal__backdrop').click({
position: { x: 0, y: 0 },
});
await page.getByRole('button', { name: 'close' }).click();
await page
.getByRole('button', {
@@ -498,20 +468,14 @@ 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(selectVisibility).toBeHidden();
await expect(
shareModal.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: 'Quick search input',
});
await expect(inputSearch).toBeHidden();
});
});
src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
+2 -18
View File
@@ -75,29 +75,13 @@ 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' })).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
+3 -1
View File
@@ -16,7 +16,9 @@
"@types/node": "*",
"@types/pdf-parse": "1.1.4",
"eslint-config-impress": "*",
"typescript": "*"
"typescript": "*",
"luxon": "3.5.0",
"@types/luxon": "3.4.2"
},
"dependencies": {
"convert-stream": "1.0.2",
src/frontend/apps/impress/conf/default.conf
-4
View File
@@ -9,10 +9,6 @@ server {
try_files $uri index.html $uri/ =404;
}
location ~ ^/docs/(.*)/versions/(.*)/$ {
error_page 404 /docs/[id]/versions/[versionId]/;
}
location /docs/ {
error_page 404 /docs/[id]/;
}
src/frontend/apps/impress/cunningham.ts
+131 -60
View File
@@ -5,22 +5,66 @@ const config = {
colors: {
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-action': '#1212FF',
'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',
'xl-alt': '5rem',
'lg-alt': '4.5rem',
'md-alt': '4rem',
'sm-alt': '3.5rem',
'xs-alt': '3rem',
},
weights: {
thin: 100,
@@ -34,6 +78,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 +163,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 +185,7 @@ const config = {
},
},
modal: {
'background-color': '#ffffff',
'background-color': '#fff',
},
button: {
'border-radius': {
@@ -147,8 +206,8 @@ const config = {
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-400)',
'color-hover': 'var(--c--theme--colors--danger-500)',
color: 'var(--c--theme--colors--danger-600)',
'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
@@ -171,14 +230,16 @@ const config = {
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: {
color: 'var(--c--theme--colors--primary-200)',
color: 'var(--c--theme--colors--greyscale-300)',
},
},
tertiary: {
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 +258,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 +281,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',
@@ -241,15 +308,15 @@ const config = {
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
@@ -260,16 +327,16 @@ const config = {
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-text': '#FFF',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
'danger-900': '#391C1C',
},
font: {
families: {
@@ -288,8 +355,12 @@ const config = {
alert: {
'border-radius': '0',
},
modal: {
'width-small': '342px',
},
button: {
'medium-height': '48px',
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
primary: {
background: {
@@ -297,9 +368,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: {
@@ -314,14 +385,14 @@ const config = {
'color-active': '#EDEDED',
},
border: {
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-600)',
color: 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--greyscale-300)',
},
color: 'var(--c--theme--colors--primary-text)',
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--greyscale-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',
@@ -363,7 +434,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 +452,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
+3
View File
@@ -23,6 +23,7 @@
"@openfun/cunningham-react": "2.9.4",
"@sentry/nextjs": "8.47.0",
"@tanstack/react-query": "5.62.11",
"cmdk": "1.0.4",
"crisp-sdk-web": "1.0.25",
"i18next": "24.2.0",
"i18next-browser-languagedetector": "8.0.2",
@@ -34,8 +35,10 @@
"react-aria-components": "1.5.0",
"react-dom": "*",
"react-i18next": "15.4.0",
"react-intersection-observer": "9.13.1",
"react-select": "5.9.0",
"styled-components": "6.1.13",
"use-debounce": "10.0.4",
"y-protocols": "1.0.6",
"yjs": "13.6.21",
"zustand": "5.0.2"
src/frontend/apps/impress/public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 279 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

src/frontend/apps/impress/src/__tests__/pages.test.tsx
-32
View File
@@ -1,32 +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/router', () => ({
useRouter() {
return {
push: jest.fn(),
};
},
}));
jest.mock('@sentry/nextjs', () => ({
captureException: jest.fn(),
captureMessage: jest.fn(),
setUser: 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/assets/common/logo-doc-big.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

src/frontend/apps/impress/src/assets/common/logo-docs-md.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.2515 62.7264C49.7721 62.0196 52.1861 60.7298 53.7701 58.4505C55.3337 56.2187 55.774 53.3875 55.774 50.6632V10.749C55.774 10.0423 55.7356 9.33431 55.6503 8.63477C56.9023 9.12719 57.8672 9.94087 58.5451 11.0758C59.3448 12.3663 59.7447 14.0657 59.7447 16.1741V56.7153C59.7447 59.5689 59.0449 61.7046 57.6454 63.1223C56.2458 64.54 54.1374 65.2489 51.3202 65.2489H36.0065C36.3692 65.1854 36.7328 65.12 37.0972 65.0528C40.2928 64.4817 43.6701 63.7067 47.2256 62.7336L47.2515 62.7264Z" fill="#C9191E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4521 55.8703V15.2746C10.4521 12.8027 11.1156 10.9306 12.4424 9.65832C13.7874 8.38601 15.5686 7.68624 17.7861 7.55901C21.0577 7.35908 24.1567 7.08644 27.083 6.7411C30.0093 6.37758 32.8084 5.95954 35.4803 5.48697C38.1703 5.01439 40.7876 4.48729 43.3322 3.90567C45.9495 3.28769 47.958 3.59668 49.3575 4.83264C50.757 6.06859 51.4568 8.04067 51.4568 10.7489V50.663C51.4568 53.044 51.0479 54.8161 50.2299 55.9794C49.412 57.1608 48.0307 58.0242 46.0859 58.5695C42.6324 59.5146 39.379 60.2598 36.3254 60.8051C33.2719 61.3685 30.2911 61.7957 27.3829 62.0865C24.4748 62.3773 21.494 62.6045 18.4404 62.7681C15.914 62.9135 13.951 62.3864 12.5515 61.1868C11.1519 60.0053 10.4521 58.2332 10.4521 55.8703ZM20.4387 22.6454C24.4424 22.3905 28.1112 21.9992 31.4447 21.4709C32.2535 21.339 33.0611 21.2017 33.8657 21.0592C34.7076 20.9101 35.3165 20.1764 35.3165 19.3233C35.3165 18.2185 34.3166 17.3865 33.2308 17.5717C32.6071 17.6781 31.9801 17.7815 31.3497 17.8819C28.0496 18.4078 24.4029 18.7979 20.4098 19.052C19.8118 19.0906 19.336 19.2769 19.0302 19.6482C18.741 19.9994 18.5993 20.4218 18.5993 20.9033C18.5993 21.3928 18.7644 21.8188 19.0941 22.1691L19.0987 22.1737C19.456 22.531 19.91 22.6857 20.4387 22.6454ZM20.4374 31.6973C24.4416 31.4424 28.1108 31.051 31.4447 30.5227C34.7931 29.9768 38.1061 29.3397 41.3818 28.6117C42.0465 28.464 42.5444 28.2314 42.7935 27.8701C43.0383 27.5228 43.1594 27.1247 43.1594 26.6834C43.1594 26.1857 42.9698 25.757 42.601 25.4087C42.2038 25.0336 41.6486 24.9462 40.9915 25.0815L40.9873 25.0825C37.8658 25.7902 34.6533 26.4074 31.3497 26.9337C28.0496 27.4596 24.4029 27.8497 20.4098 28.1038C19.8118 28.1424 19.336 28.3287 19.0302 28.7C18.7424 29.0495 18.5993 29.4621 18.5993 29.9278C18.5993 30.4329 18.7625 30.8691 19.0939 31.2211L19.1034 31.2301C19.4595 31.5653 19.9088 31.7177 20.432 31.6976L20.4374 31.6973ZM20.4383 40.7488C24.4422 40.4758 28.111 40.0753 31.4446 39.547C34.7933 39.0192 38.1057 38.3913 41.3818 37.6633C42.0481 37.5152 42.5464 37.2729 42.7951 36.892C43.0376 36.5471 43.1594 36.1594 43.1594 35.735C43.1594 35.2373 42.9698 34.8086 42.601 34.4602C42.2038 34.0852 41.6486 33.9978 40.9915 34.1331L40.9885 34.1338C37.8666 34.8235 34.6537 35.4316 31.3497 35.958C28.0493 36.4839 24.4025 36.8832 20.4092 37.1554C19.8115 37.1941 19.3359 37.3804 19.0302 37.7516C18.7424 38.1011 18.5993 38.5137 18.5993 38.9794C18.5993 39.4845 18.7625 39.9206 19.0939 40.2727L19.1034 40.2816C19.4595 40.6168 19.9088 40.7693 20.432 40.7492L20.4383 40.7488ZM31.4447 48.5358C28.1112 49.0641 24.4424 49.4555 20.4388 49.7103C19.91 49.7506 19.456 49.596 19.0987 49.2386L19.0941 49.2339C18.7645 48.8837 18.5993 48.4577 18.5993 47.9682C18.5993 47.4867 18.741 47.0644 19.0302 46.7132C19.336 46.3418 19.812 46.1555 20.41 46.117C24.4031 45.8629 28.0496 45.4727 31.3497 44.9469C31.9801 44.8464 32.6071 44.743 33.2308 44.6366C34.3166 44.4514 35.3165 45.2834 35.3165 46.3882C35.3165 47.2413 34.7076 47.975 33.8657 48.1241C33.0611 48.2666 32.2535 48.404 31.4447 48.5358Z" fill="#000091"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

src/frontend/apps/impress/src/assets/common/logo-docs-sm.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 743 B

src/frontend/apps/impress/src/assets/common/logo-docs.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.2515 62.7264C49.7721 62.0196 52.1861 60.7298 53.7701 58.4505C55.3337 56.2187 55.774 53.3875 55.774 50.6632V10.749C55.774 10.0423 55.7356 9.33431 55.6503 8.63477C56.9023 9.12719 57.8672 9.94087 58.5451 11.0758C59.3448 12.3663 59.7447 14.0657 59.7447 16.1741V56.7153C59.7447 59.5689 59.0449 61.7046 57.6454 63.1223C56.2458 64.54 54.1374 65.2489 51.3202 65.2489H36.0065C36.3692 65.1854 36.7328 65.12 37.0972 65.0528C40.2928 64.4817 43.6701 63.7067 47.2256 62.7336L47.2515 62.7264Z" fill="#C9191E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4521 55.8703V15.2746C10.4521 12.8027 11.1156 10.9306 12.4424 9.65832C13.7874 8.38601 15.5686 7.68624 17.7861 7.55901C21.0577 7.35908 24.1567 7.08644 27.083 6.7411C30.0093 6.37758 32.8084 5.95954 35.4803 5.48697C38.1703 5.01439 40.7876 4.48729 43.3322 3.90567C45.9495 3.28769 47.958 3.59668 49.3575 4.83264C50.757 6.06859 51.4568 8.04067 51.4568 10.7489V50.663C51.4568 53.044 51.0479 54.8161 50.2299 55.9794C49.412 57.1608 48.0307 58.0242 46.0859 58.5695C42.6324 59.5146 39.379 60.2598 36.3254 60.8051C33.2719 61.3685 30.2911 61.7957 27.3829 62.0865C24.4748 62.3773 21.494 62.6045 18.4404 62.7681C15.914 62.9135 13.951 62.3864 12.5515 61.1868C11.1519 60.0053 10.4521 58.2332 10.4521 55.8703ZM20.4387 22.6454C24.4424 22.3905 28.1112 21.9992 31.4447 21.4709C32.2535 21.339 33.0611 21.2017 33.8657 21.0592C34.7076 20.9101 35.3165 20.1764 35.3165 19.3233C35.3165 18.2185 34.3166 17.3865 33.2308 17.5717C32.6071 17.6781 31.9801 17.7815 31.3497 17.8819C28.0496 18.4078 24.4029 18.7979 20.4098 19.052C19.8118 19.0906 19.336 19.2769 19.0302 19.6482C18.741 19.9994 18.5993 20.4218 18.5993 20.9033C18.5993 21.3928 18.7644 21.8188 19.0941 22.1691L19.0987 22.1737C19.456 22.531 19.91 22.6857 20.4387 22.6454ZM20.4374 31.6973C24.4416 31.4424 28.1108 31.051 31.4447 30.5227C34.7931 29.9768 38.1061 29.3397 41.3818 28.6117C42.0465 28.464 42.5444 28.2314 42.7935 27.8701C43.0383 27.5228 43.1594 27.1247 43.1594 26.6834C43.1594 26.1857 42.9698 25.757 42.601 25.4087C42.2038 25.0336 41.6486 24.9462 40.9915 25.0815L40.9873 25.0825C37.8658 25.7902 34.6533 26.4074 31.3497 26.9337C28.0496 27.4596 24.4029 27.8497 20.4098 28.1038C19.8118 28.1424 19.336 28.3287 19.0302 28.7C18.7424 29.0495 18.5993 29.4621 18.5993 29.9278C18.5993 30.4329 18.7625 30.8691 19.0939 31.2211L19.1034 31.2301C19.4595 31.5653 19.9088 31.7177 20.432 31.6976L20.4374 31.6973ZM20.4383 40.7488C24.4422 40.4758 28.111 40.0753 31.4446 39.547C34.7933 39.0192 38.1057 38.3913 41.3818 37.6633C42.0481 37.5152 42.5464 37.2729 42.7951 36.892C43.0376 36.5471 43.1594 36.1594 43.1594 35.735C43.1594 35.2373 42.9698 34.8086 42.601 34.4602C42.2038 34.0852 41.6486 33.9978 40.9915 34.1331L40.9885 34.1338C37.8666 34.8235 34.6537 35.4316 31.3497 35.958C28.0493 36.4839 24.4025 36.8832 20.4092 37.1554C19.8115 37.1941 19.3359 37.3804 19.0302 37.7516C18.7424 38.1011 18.5993 38.5137 18.5993 38.9794C18.5993 39.4845 18.7625 39.9206 19.0939 40.2727L19.1034 40.2816C19.4595 40.6168 19.9088 40.7693 20.432 40.7492L20.4383 40.7488ZM31.4447 48.5358C28.1112 49.0641 24.4424 49.4555 20.4388 49.7103C19.91 49.7506 19.456 49.596 19.0987 49.2386L19.0941 49.2339C18.7645 48.8837 18.5993 48.4577 18.5993 47.9682C18.5993 47.4867 18.741 47.0644 19.0302 46.7132C19.336 46.3418 19.812 46.1555 20.41 46.117C24.4031 45.8629 28.0496 45.4727 31.3497 44.9469C31.9801 44.8464 32.6071 44.743 33.2308 44.6366C34.3166 44.4514 35.3165 45.2834 35.3165 46.3882C35.3165 47.2413 34.7076 47.975 33.8657 48.1241C33.0611 48.2666 32.2535 48.404 31.4447 48.5358Z" fill="#000091"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

src/frontend/apps/impress/src/assets/common/pro-connect-disabled.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/frontend/apps/impress/src/assets/common/pro-connect.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Bold.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Medium.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Regular.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/components/BoxButton.tsx
+18 -4
View File
@@ -1,9 +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.
@@ -18,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
@@ -28,14 +32,24 @@ const BoxButton = forwardRef<HTMLDivElement, BoxType>(
$margin="none"
$padding="none"
$css={css`
cursor: pointer;
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
+1 -2
View File
@@ -17,8 +17,7 @@ export const Card = ({
$background="white"
$radius="4px"
$css={css`
box-shadow: 2px 2px 5px ${colorsTokens()['greyscale-300']};
border: 1px solid ${colorsTokens()['card-border']};
border: 1px solid ${colorsTokens()['greyscale-200']};
${$css}
`}
{...props}
src/frontend/apps/impress/src/components/DocsTitle.tsx
+29
View File
@@ -0,0 +1,29 @@
import Image from 'next/image';
import { useTranslation } from 'react-i18next';
import IconDocs from '@/assets/common/logo-docs-sm.png';
import { useCunninghamTheme } from '@/cunningham';
import Title from '@/features/header/components/Title/Title';
import { useResponsiveStore } from '@/stores';
import { Box } from './Box';
export const DocsTitle = () => {
const theme = useCunninghamTheme();
const { t } = useTranslation();
const { isDesktop } = useResponsiveStore();
const spacings = theme.spacingsTokens();
const colors = theme.colorsTokens();
return (
<Box
$align="center"
$gap={spacings['3xs']}
$direction="row"
$position="relative"
$height="fit-content"
>
<Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
<Title />
</Box>
);
};
src/frontend/apps/impress/src/components/DropButton.tsx
+22 -13
View File
@@ -1,19 +1,20 @@
import React, {
import {
PropsWithChildren,
ReactNode,
useEffect,
useRef,
useState,
} from 'react';
import { Button, DialogTrigger, Popover } from 'react-aria-components';
import { Button, Popover } from 'react-aria-components';
import styled from 'styled-components';
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;
`;
@@ -26,13 +27,15 @@ const StyledButton = styled(Button)`
font-family: Marianne, Arial, serif;
font-weight: 500;
font-size: 0.938rem;
padding: 0;
text-wrap: nowrap;
`;
interface DropButtonProps {
export interface DropButtonProps {
button: ReactNode;
isOpen?: boolean;
onOpenChange?: (isOpen: boolean) => void;
label?: string;
}
export const DropButton = ({
@@ -40,10 +43,12 @@ export const DropButton = ({
isOpen = false,
onOpenChange,
children,
label,
}: PropsWithChildren<DropButtonProps>) => {
const [opacity, setOpacity] = useState(false);
const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
const triggerRef = useRef(null);
useEffect(() => {
setIsLocalOpen(isOpen);
}, [isOpen]);
@@ -51,21 +56,25 @@ export const DropButton = ({
const onOpenChangeHandler = (isOpen: boolean) => {
setIsLocalOpen(isOpen);
onOpenChange?.(isOpen);
setTimeout(() => {
setOpacity(isOpen);
}, 10);
};
return (
<DialogTrigger onOpenChange={onOpenChangeHandler} isOpen={isLocalOpen}>
<StyledButton>{button}</StyledButton>
<>
<StyledButton
ref={triggerRef}
onPress={() => onOpenChangeHandler(true)}
aria-label={label}
>
{button}
</StyledButton>
<StyledPopover
style={{ opacity: opacity ? 1 : 0 }}
triggerRef={triggerRef}
isOpen={isLocalOpen}
onOpenChange={onOpenChangeHandler}
>
{children}
</StyledPopover>
</DialogTrigger>
</>
);
};
src/frontend/apps/impress/src/components/DropdownMenu.tsx
+150
View File
@@ -0,0 +1,150 @@
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;
show?: 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);
};
return (
<DropButton
isOpen={isOpen}
onOpenChange={onOpenChange}
label={label}
button={
showArrow ? (
<Box $direction="row" $align="center">
<div>{children}</div>
<Icon
$variation="600"
$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="700"
$wrap="wrap"
$size="xs"
$weight="bold"
$padding={{ vertical: 'xs', horizontal: 'base' }}
>
{topMessage}
</Text>
)}
{options.map((option, index) => {
if (option.show !== undefined && !option.show) {
return;
}
const isDisabled = option.disabled !== undefined && option.disabled;
return (
<BoxButton
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;
${index === 0 &&
css`
border-top-left-radius: 4px;
border-top-right-radius: 4px;
`}
${index === options.length - 1 &&
css`
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
`}
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 $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/InfiniteScroll.tsx
+29 -36
View File
@@ -1,12 +1,16 @@
import { PropsWithChildren, useEffect, useRef } from 'react';
import { Button } from '@openfun/cunningham-react';
import { PropsWithChildren } from 'react';
import { useTranslation } from 'react-i18next';
import { InView } from 'react-intersection-observer';
import { Box, BoxType } from '@/components';
import { Box, BoxType, Icon } from '@/components';
interface InfiniteScrollProps extends BoxType {
hasMore: boolean;
isLoading: boolean;
next: () => void;
scrollContainer: HTMLElement | null;
scrollContainer?: HTMLElement | null;
buttonLabel?: string;
}
export const InfiniteScroll = ({
@@ -14,42 +18,31 @@ export const InfiniteScroll = ({
hasMore,
isLoading,
next,
scrollContainer,
buttonLabel,
...boxProps
}: PropsWithChildren<InfiniteScrollProps>) => {
const timeout = useRef<ReturnType<typeof setTimeout>>();
useEffect(() => {
if (!scrollContainer) {
const { t } = useTranslation();
const loadMore = (inView: boolean) => {
if (!inView || isLoading) {
return;
}
void next();
};
const nextHandle = () => {
if (!hasMore || isLoading) {
return;
}
// To not wait until the end of the scroll to load more data
const heightFromBottom = 150;
const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
if (scrollTop + clientHeight >= scrollHeight - heightFromBottom) {
next();
}
};
const handleScroll = () => {
if (timeout.current) {
clearTimeout(timeout.current);
}
timeout.current = setTimeout(nextHandle, 50);
};
scrollContainer.addEventListener('scroll', handleScroll);
return () => {
scrollContainer.removeEventListener('scroll', handleScroll);
};
}, [hasMore, isLoading, next, scrollContainer]);
return <Box {...boxProps}>{children}</Box>;
return (
<Box {...boxProps}>
{children}
<InView onChange={loadMore}>
{!isLoading && hasMore && (
<Button
onClick={() => void next()}
color="primary-text"
icon={<Icon iconName="arrow_downward" />}
>
{buttonLabel ?? t('Load more')}
</Button>
)}
</InView>
</Box>
);
};
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/ProConnectButton.tsx
+31
View File
File diff suppressed because one or more lines are too long
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
+71
View File
@@ -0,0 +1,71 @@
import { Command } from 'cmdk';
import { ReactNode, useRef } from 'react';
import { hasChildrens } from '@/utils/children';
import { Box } from '../Box';
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 = {
onFilter?: (str: string) => void;
inputValue?: string;
inputContent?: ReactNode;
showInput?: boolean;
loading?: boolean;
label?: string;
placeholder?: string;
children?: ReactNode;
};
export const QuickSearch = ({
onFilter,
inputContent,
inputValue,
loading,
showInput = true,
label,
placeholder,
children,
}: QuickSearchProps) => {
const ref = useRef<HTMLDivElement | null>(null);
return (
<>
<QuickSearchStyle />
<div className="quick-search-container">
<Command label={label} shouldFilter={false} ref={ref}>
{showInput && (
<QuickSearchInput
loading={loading}
withSeparator={hasChildrens(children)}
inputValue={inputValue}
onFilter={onFilter}
placeholder={placeholder}
>
{inputContent}
</QuickSearchInput>
)}
<Command.List>
<Box>{children}</Box>
</Command.List>
</Command>
</div>
</>
);
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
+66
View File
@@ -0,0 +1,66 @@
import { Command } from 'cmdk';
import { ReactNode } from 'react';
import { Box } from '../Box';
import { QuickSearchData } from './QuickSearch';
import { QuickSearchItem } from './QuickSearchItem';
type Props<T> = {
group: QuickSearchData<T>;
renderElement?: (element: T) => ReactNode;
onSelect?: (element: T) => void;
};
export const QuickSearchGroup = <T,>({
group,
onSelect,
renderElement,
}: Props<T>) => {
return (
<Box $margin={{ top: 'base' }}>
<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
id={`${group.groupName}-element-${index}`}
key={`${group.groupName}-element-${index}`}
onSelect={() => {
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>
</Box>
);
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
+69
View File
@@ -0,0 +1,69 @@
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;
withSeparator?: boolean;
};
export const QuickSearchInput = ({
loading,
inputValue,
onFilter,
placeholder,
children,
withSeparator: separator = true,
}: Props) => {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacing = spacingsTokens();
if (children) {
return (
<>
{children}
{separator && <HorizontalSeparator />}
</>
);
}
return (
<>
<Box
$direction="row"
$align="center"
className="quick-search-input"
$gap={spacing['2xs']}
$padding={{ all: '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('Quick search input')}
value={inputValue}
role="combobox"
placeholder={placeholder ?? t('Search')}
onValueChange={onFilter}
/>
</Box>
{separator && <HorizontalSeparator $withPadding={false} />}
</>
);
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchItem.tsx
+18
View File
@@ -0,0 +1,18 @@
import { Command } from 'cmdk';
import { PropsWithChildren } from 'react';
type Props = {
onSelect?: (value: string) => void;
id?: string;
};
export const QuickSearchItem = ({
children,
onSelect,
id,
}: PropsWithChildren<Props>) => {
return (
<Command.Item value={id} onSelect={onSelect}>
{children}
</Command.Item>
);
};
src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
+52
View File
@@ -0,0 +1,52 @@
import { ReactNode } from 'react';
import { useCunninghamTheme } from '@/cunningham';
import { useResponsiveStore } from '@/stores';
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();
const { isDesktop } = useResponsiveStore();
return (
<Box
$direction="row"
$align="center"
$padding={{ horizontal: '2xs', vertical: '3xs' }}
$justify="space-between"
$width="100%"
>
<Box
$direction="row"
$align="center"
$gap={spacings['2xs']}
$width="100%"
>
{left}
</Box>
{isDesktop && 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
+143
View File
@@ -0,0 +1,143 @@
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-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 {
opacity: 0;
}
&:hover,
&[data-selected='true'] {
background: var(--c--theme--colors--greyscale-100);
.show-right-on-focus {
opacity: 1;
}
}
&[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--base) var(--c--theme--spacings--base)
var(--c--theme--spacings--base);
flex:1;
overflow-y: auto;
overscroll-behavior: contain;
}
[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--xs);
}
[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/quick-search/index.ts
+4
View File
@@ -0,0 +1,4 @@
export * from './QuickSearch';
export * from './QuickSearchGroup';
export * from './QuickSearchItem';
export * from './QuickSearchItemContent';
src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
+33
View File
@@ -0,0 +1,33 @@
import { useCunninghamTheme } from '@/cunningham';
import { Box } from '../Box';
export enum SeparatorVariant {
LIGHT = 'light',
DARK = 'dark',
}
type Props = {
variant?: SeparatorVariant;
$withPadding?: boolean;
};
export const HorizontalSeparator = ({
variant = SeparatorVariant.LIGHT,
$withPadding = true,
}: Props) => {
const { colorsTokens } = useCunninghamTheme();
return (
<Box
$height="1px"
$width="100%"
$margin={{ vertical: $withPadding ? 'base' : 'none' }}
$background={
variant === SeparatorVariant.DARK
? '#e5e5e533'
: colorsTokens()['greyscale-100']
}
/>
);
};
src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx
+33
View File
@@ -0,0 +1,33 @@
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`
width: 100%;
padding: ${spacings['sm']} 0;
${showSeparator &&
css`
border-bottom: 1px solid ${colors?.['greyscale-200']};
`}
`}
>
{children}
</Box>
);
};
src/frontend/apps/impress/src/core/auth/Auth.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ import { useAuthStore } from './useAuthStore';
* When we will have a homepage design for non-authenticated users, we will remove this restriction to have
* the full website accessible without authentication.
*/
const regexpUrlsAuth = [/\/docs\/$/g, /^\/$/g];
const regexpUrlsAuth = [/\/docs\/$/g];
export const Auth = ({ children }: PropsWithChildren) => {
const { initAuth, initiated, authenticated, login, getAuthUrl } =
src/frontend/apps/impress/src/core/auth/ButtonLogin.tsx
+2 -13
View File
@@ -1,5 +1,4 @@
import { Button } from '@openfun/cunningham-react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '@/core/auth';
@@ -10,24 +9,14 @@ export const ButtonLogin = () => {
if (!authenticated) {
return (
<Button
onClick={login}
color="primary-text"
icon={<span className="material-icons">login</span>}
aria-label={t('Login')}
>
<Button onClick={login} color="primary-text" aria-label={t('Login')}>
{t('Login')}
</Button>
);
}
return (
<Button
onClick={logout}
color="primary-text"
icon={<span className="material-icons">logout</span>}
aria-label={t('Logout')}
>
<Button onClick={logout} color="primary-text" aria-label={t('Logout')}>
{t('Logout')}
</Button>
);
src/frontend/apps/impress/src/core/auth/useAuthStore.tsx
+6 -2
View File
@@ -38,9 +38,13 @@ export const useAuthStore = create<AuthStore>((set, get) => ({
});
},
login: () => {
get().setAuthUrl(window.location.pathname);
console.log(window.location.pathname);
if (window.location.pathname !== '/') {
get().setAuthUrl(window.location.pathname);
window.location.replace(`/`);
}
window.location.replace(`${baseApiUrl()}authenticate/`);
// window.location.replace(`${baseApiUrl()}authenticate/`);
},
logout: () => {
terminateCrispSession();
src/frontend/apps/impress/src/cunningham/cunningham-style.css
+41 -1
View File
@@ -351,6 +351,19 @@ input:-webkit-autofill:focus {
background-color: transparent;
}
.c__button--nano {
padding: 0 var(--c--theme--spacings--3xs);
gap: var(--c--theme--spacings--3xs);
}
.c__button--nano.c__button--icon-only {
width: auto;
}
.c__button--nano.c__button--icon-only.c__button--full-width {
width: 100%;
}
.c__button--medium {
padding: 0.9rem var(--c--theme--spacings--s);
}
@@ -442,6 +455,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 +468,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
@@ -512,13 +533,32 @@ input:-webkit-autofill:focus {
}
.c__modal__close button {
padding: 1.5rem 1rem;
padding: 0;
font-size: 88px;
width: 28px !important;
height: 28px;
}
.c__modal__close button .material-icons {
padding: 0;
font-size: 24px;
color: var(--c--theme--colors--greyscale-600);
}
.c__modal__close .c__button {
padding: 0 !important;
}
.c__modal--full .c__modal__content {
overflow-y: auto;
}
.c__modal__title {
padding: 0;
font-size: 1.125rem;
margin-bottom: var(--c--theme--spacings--2xs);
}
@media screen and (width <= 420px) {
.c__modal__scroller {
padding: 0.7rem;
src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+779 -331
View File
File diff suppressed because it is too large Load Diff
src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+134 -67
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,29 +69,72 @@ 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-action': '#1212FF',
'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',
'xl-alt': '5rem',
'lg-alt': '4.5rem',
'md-alt': '4rem',
'sm-alt': '3.5rem',
'xs-alt': '3rem',
},
weights: {
thin: 100,
@@ -120,7 +163,7 @@ export const tokens = {
},
spacings: {
'0': '0',
xl: '4rem',
xl: '2.5rem',
l: '3rem',
b: '1.625rem',
s: '1rem',
@@ -130,6 +173,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 +259,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 +280,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)',
@@ -243,8 +300,8 @@ export const tokens = {
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-400)',
'color-hover': 'var(--c--theme--colors--danger-500)',
color: 'var(--c--theme--colors--danger-600)',
'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
@@ -264,13 +321,15 @@ export const tokens = {
color: 'white',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: { color: 'var(--c--theme--colors--primary-200)' },
border: { color: 'var(--c--theme--colors--greyscale-300)' },
},
tertiary: {
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 +393,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 +416,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',
@@ -378,15 +443,15 @@ export const tokens = {
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
@@ -397,16 +462,16 @@ export const tokens = {
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-text': '#FFF',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
'danger-900': '#391C1C',
},
font: { families: { accent: 'Marianne', base: 'Marianne' } },
logo: {
@@ -418,8 +483,10 @@ export const tokens = {
},
components: {
alert: { 'border-radius': '0' },
modal: { 'width-small': '342px' },
button: {
'medium-height': '48px',
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
primary: {
background: {
@@ -427,9 +494,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: {
@@ -441,14 +508,14 @@ export const tokens = {
secondary: {
background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },
border: {
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-600)',
color: 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--greyscale-300)',
},
color: 'var(--c--theme--colors--primary-text)',
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--greyscale-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',
@@ -486,7 +553,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 +569,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/useCunninghamTheme.tsx
+6
View File
@@ -5,6 +5,8 @@ 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'];
export type Theme = keyof typeof tokens.themes;
@@ -13,6 +15,8 @@ interface AuthStore {
setTheme: (theme: Theme) => void;
themeTokens: () => Partial<Tokens['theme']>;
colorsTokens: () => Partial<ColorsTokens>;
fontSizesTokens: () => Partial<FontSizesTokens>;
spacingsTokens: () => Partial<SpacingsTokens>;
componentTokens: () => ComponentTokens;
}
@@ -28,6 +32,8 @@ export const useCunninghamTheme = create<AuthStore>((set, get) => {
themeTokens: () => currentTheme().theme,
colorsTokens: () => currentTheme().theme.colors,
componentTokens: () => currentTheme().components,
spacingsTokens: () => currentTheme().theme.spacings,
fontSizesTokens: () => currentTheme().theme.font.sizes,
setTheme: (theme: Theme) => {
set({ theme });
},
src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+49 -26
View File
@@ -4,13 +4,13 @@ import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css';
import { useCreateBlockNote } from '@blocknote/react';
import { HocuspocusProvider } from '@hocuspocus/provider';
import React, { useEffect } from 'react';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import * as Y from 'yjs';
import { Box, TextErrors } from '@/components';
import { useAuthStore } from '@/core/auth';
import { Doc, Role, currentDocRole } from '@/features/docs/doc-management';
import { Doc } from '@/features/docs/doc-management';
import { useUploadFile } from '../hook';
import { useHeadings } from '../hook/useHeadings';
@@ -22,12 +22,53 @@ import { BlockNoteToolbar } from './BlockNoteToolbar';
const cssEditor = (readonly: boolean) => `
&, & > .bn-container, & .ProseMirror {
height:100%
};
& .bn-editor {
padding-right: 30px;
${readonly && `padding-left: 30px;`}
height:100%;
.bn-side-menu[data-block-type=heading][data-level="1"] {
height: 50px;
}
.bn-side-menu[data-block-type=heading][data-level="2"] {
height: 43px;
}
.bn-side-menu[data-block-type=heading][data-level="3"] {
height: 35px;
}
h1 {
font-size: 1.875rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
a {
color: var(--c--theme--colors--greyscale-500);
cursor: pointer;
}
.bn-block-group
.bn-block-group
.bn-block-outer:not([data-prev-depth-changed]):before {
border-left: none;
}
}
.bn-editor {
color: var(--c--theme--colors--greyscale-700);
}
.bn-block-outer:not(:first-child) {
&:has(h1) {
padding-top: 32px;
}
&:has(h2) {
padding-top: 24px;
}
&:has(h3) {
padding-top: 16px;
}
};
& .bn-inline-content code {
background-color: gainsboro;
padding: 2px;
@@ -35,8 +76,7 @@ const cssEditor = (readonly: boolean) => `
}
@media screen and (width <= 560px) {
& .bn-editor {
padding-left: 40px;
padding-right: 10px;
${readonly && `padding-left: 10px;`}
};
.bn-side-menu[data-block-type=heading][data-level="1"] {
@@ -127,23 +167,6 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
);
useHeadings(editor);
/**
* With the collaboration it gets complicated to create the initial block
* better to let Blocknote manage, then we update the block with the content.
*/
useEffect(() => {
if (doc.content || currentDocRole(doc.abilities) !== Role.OWNER) {
return;
}
setTimeout(() => {
editor.updateBlock(editor.document[0], {
type: 'heading',
content: '',
});
}, 100);
}, [editor, doc.content, doc.abilities]);
useEffect(() => {
setEditor(editor);
src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+40 -45
View File
@@ -1,35 +1,32 @@
import { Alert, Loader, VariantType } from '@openfun/cunningham-react';
import { Loader } from '@openfun/cunningham-react';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useEffect, useState } from 'react';
import { css } from 'styled-components';
import * as Y from 'yjs';
import { Box, Card, Text, TextErrors } from '@/components';
import { Box, Text, TextErrors } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { DocHeader } from '@/features/docs/doc-header';
import { DocHeader, DocVersionHeader } from '@/features/docs/doc-header/';
import {
Doc,
base64ToBlocknoteXmlFragment,
useProviderStore,
} from '@/features/docs/doc-management';
import { TableContent } from '@/features/docs/doc-table-content/';
import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
import { useResponsiveStore } from '@/stores';
import { BlockNoteEditor, BlockNoteEditorVersion } from './BlockNoteEditor';
import { IconOpenPanelEditor, PanelEditor } from './PanelEditor';
interface DocEditorProps {
doc: Doc;
versionId?: Versions['version_id'];
}
export const DocEditor = ({ doc }: DocEditorProps) => {
const {
query: { versionId },
} = useRouter();
const { t } = useTranslation();
const { isMobile } = useResponsiveStore();
export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
const { isDesktop } = useResponsiveStore();
const isVersion = versionId && typeof versionId === 'string';
const isVersion = !!versionId && typeof versionId === 'string';
const { colorsTokens } = useCunninghamTheme();
@@ -41,43 +38,41 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
return (
<>
<DocHeader doc={doc} />
{!doc.abilities.partial_update && (
<Box $margin={{ all: 'small', top: 'none' }}>
<Alert type={VariantType.WARNING}>
{t(`Read only, you cannot edit this document.`)}
</Alert>
{isDesktop && !isVersion && (
<Box
$position="absolute"
$css={css`
top: 72px;
right: 20px;
`}
>
<TableContent />
</Box>
)}
{isVersion && (
<Box $margin={{ all: 'small', top: 'none' }}>
<Alert type={VariantType.WARNING}>
{t(`Read only, you cannot edit document versions.`)}
</Alert>
<Box $maxWidth="868px" $width="100%" $height="100%">
<Box $padding={{ horizontal: isDesktop ? '54px' : 'base' }}>
{isVersion ? (
<DocVersionHeader title={doc.title} />
) : (
<DocHeader doc={doc} />
)}
</Box>
)}
<Box
$background={colorsTokens()['primary-bg']}
$height="100%"
$direction="row"
$margin={{ all: isMobile ? 'tiny' : 'small', top: 'none' }}
$css="overflow-x: clip;"
$position="relative"
>
<Card
$padding={isMobile ? 'small' : 'big'}
$css="flex:1;"
$overflow="auto"
<Box
$background={colorsTokens()['primary-bg']}
$direction="row"
$width="100%"
$css="overflow-x: clip; flex: 1;"
$position="relative"
>
{isVersion ? (
<DocVersionEditor docId={doc.id} versionId={versionId} />
) : (
<BlockNoteEditor doc={doc} provider={provider} />
)}
{!isMobile && <IconOpenPanelEditor />}
</Card>
<PanelEditor doc={doc} />
<Box $css="flex:1;" $overflow="auto" $position="relative">
{isVersion ? (
<DocVersionEditor docId={doc.id} versionId={versionId} />
) : (
<BlockNoteEditor doc={doc} provider={provider} />
)}
</Box>
</Box>
</Box>
</>
);
src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
-197
View File
@@ -1,197 +0,0 @@
import React, { PropsWithChildren, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, BoxButton, Card, IconBG, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { Doc } from '@/features/docs/doc-management';
import { TableContent } from '@/features/docs/doc-table-content';
import { VersionList } from '@/features/docs/doc-versioning';
import { useResponsiveStore } from '@/stores';
import { useHeadingStore, usePanelEditorStore } from '../stores';
interface PanelProps {
doc: Doc;
}
export const PanelEditor = ({ doc }: PropsWithChildren<PanelProps>) => {
const { t } = useTranslation();
const { colorsTokens } = useCunninghamTheme();
const { isMobile } = useResponsiveStore();
const { isPanelTableContentOpen, setIsPanelTableContentOpen, isPanelOpen } =
usePanelEditorStore();
return (
<Card
$width="100%"
$maxWidth="20rem"
$position={isMobile ? 'absolute' : 'sticky'}
$height="100%"
$hasTransition="slow"
$css={`
top: 0vh;
right: 0;
transform: translateX(0%);
flex: 1;
margin-left: 1rem;
${
!isPanelOpen &&
`
transform: translateX(200%);
opacity: 0;
flex: 0;
margin-left: 0rem;
max-width: 0rem;
`
}
`}
aria-label={t('Document panel')}
aria-hidden={!isPanelOpen}
>
<Box
$overflow="inherit"
$position="sticky"
$hasTransition="slow"
$css={`
top: 0;
opacity: ${isPanelOpen ? '1' : '0'};
`}
$maxHeight="99vh"
>
{isMobile && <IconOpenPanelEditor />}
<Box
$direction="row"
$justify="space-between"
$align="center"
$position="relative"
$background={colorsTokens()['primary-400']}
$margin={{ bottom: 'tiny' }}
$radius="4px 4px 0 0"
>
<Box
$background="white"
$position="absolute"
$height="100%"
$width={doc.abilities.versions_list ? '50%' : '100%'}
$hasTransition="slow"
$css={`
border-top: 2px solid ${colorsTokens()['primary-600']};
border-radius: 0 4px 0 0;
${
isPanelTableContentOpen
? `
transform: translateX(0);
border-radius: 4px 0 0 0;
`
: `transform: translateX(100%);`
}
`}
/>
<BoxButton
$minWidth={doc.abilities.versions_list ? '50%' : '100%'}
onClick={() => setIsPanelTableContentOpen(true)}
$zIndex={1}
>
<Text
$width="100%"
$weight="bold"
$size="m"
$theme="primary"
$variation="600"
$padding={{ vertical: 'small', horizontal: 'small' }}
>
{t('Table of content')}
</Text>
</BoxButton>
{doc.abilities.versions_list && (
<BoxButton
$minWidth="50%"
onClick={() => setIsPanelTableContentOpen(false)}
$zIndex={1}
>
<Text
$width="100%"
$weight="bold"
$size="m"
$theme="primary"
$variation="600"
$padding={{ vertical: 'small', horizontal: 'small' }}
>
{t('Versions')}
</Text>
</BoxButton>
)}
</Box>
{isPanelTableContentOpen && <TableContent />}
{!isPanelTableContentOpen && doc.abilities.versions_list && (
<VersionList doc={doc} />
)}
</Box>
</Card>
);
};
export const IconOpenPanelEditor = () => {
const { headings } = useHeadingStore();
const { t } = useTranslation();
const { setIsPanelOpen, isPanelOpen, setIsPanelTableContentOpen } =
usePanelEditorStore();
const [hasBeenOpen, setHasBeenOpen] = useState(isPanelOpen);
const { isMobile } = useResponsiveStore();
const setClosePanel = () => {
setHasBeenOpen(true);
setIsPanelOpen(!isPanelOpen);
};
// Open the panel if there are more than 1 heading
useEffect(() => {
if (headings?.length && headings.length > 1 && !hasBeenOpen && !isMobile) {
setIsPanelTableContentOpen(true);
setIsPanelOpen(true);
setHasBeenOpen(true);
}
}, [
headings,
setIsPanelTableContentOpen,
setIsPanelOpen,
hasBeenOpen,
isMobile,
]);
// If open from the doc header we set the state as well
useEffect(() => {
if (isPanelOpen && !hasBeenOpen) {
setHasBeenOpen(true);
}
}, [hasBeenOpen, isPanelOpen]);
// Close the panel unmount
useEffect(() => {
return () => {
setIsPanelOpen(false);
};
}, [setIsPanelOpen]);
return (
<IconBG
iconName="menu_open"
aria-label={isPanelOpen ? t('Close the panel') : t('Open the panel')}
$background="transparent"
$size="h2"
$zIndex={10}
$hasTransition="slow"
$css={`
cursor: pointer;
right: 0rem;
top: 0.1rem;
transform: rotate(${isPanelOpen ? '180deg' : '0deg'});
user-select: none;
${hasBeenOpen ? 'display:flex;' : 'display: none;'}
`}
$position="absolute"
onClick={setClosePanel}
$radius="2px"
/>
);
};
src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+71 -70
View File
@@ -1,14 +1,18 @@
import { 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, currentDocRole, useTrans } from '@/features/docs/doc-management';
import { useDate } from '@/hook';
import {
Doc,
LinkReach,
currentDocRole,
useTrans,
} from '@/features/docs/doc-management';
import { useResponsiveStore } from '@/stores';
import { DocTagPublic } from './DocTagPublic';
import { DocTitle } from './DocTitle';
import { DocToolBox } from './DocToolBox';
@@ -17,89 +21,86 @@ interface DocHeaderProps {
}
export const DocHeader = ({ doc }: 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={{ top: isDesktop ? '4xl' : 'md' }}
$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={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-800']}
$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
$theme="primary"
$variation="800"
data-testid="public-icon"
iconName="public"
/>
<Text $theme="primary" $variation="800">
{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="600" $size="s" $weight="bold">
{transRole(currentDocRole(doc.abilities))}&nbsp;·&nbsp;
</Text>
<Text $variation="600" $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} />
</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>
</Box>
<Text $size="s" $display="inline">
{t('Your role:')}{' '}
<strong>{transRole(currentDocRole(doc.abilities))}</strong>
</Text>
</Box>
</Card>
<HorizontalSeparator $withPadding={true} />
</Box>
</>
);
};
src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+47 -77
View File
@@ -5,12 +5,12 @@ import {
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useEffect, 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,
@@ -19,45 +19,50 @@ import {
useUpdateDoc,
} from '@/features/docs/doc-management';
import { useBroadcastStore, useResponsiveStore } from '@/stores';
import { isFirefox } from '@/utils/userAgent';
interface DocTitleProps {
doc: Doc;
}
export const DocTitle = ({ doc }: DocTitleProps) => {
const { isMobile } = useResponsiveStore();
if (!doc.abilities.partial_update) {
return (
<Text
as="h2"
$margin={{ all: 'none', left: 'tiny' }}
$size={isMobile ? 'h4' : 'h2'}
>
{doc.title}
</Text>
);
return <DocTitleText title={doc.title} />;
}
return <DocTitleInput doc={doc} />;
};
interface DocTitleTextProps {
title: string;
}
export const DocTitleText = ({ title }: DocTitleTextProps) => {
const { isMobile } = useResponsiveStore();
return (
<Text
as="h2"
$margin={{ all: 'none', left: 'none' }}
$size={isMobile ? 'h4' : 'h2'}
$variation="1000"
>
{title}
</Text>
);
};
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_LIST_DOC],
listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
onSuccess(data) {
if (data.title !== untitledDocument) {
toast(t('Document title updated successfully'), VariantType.SUCCESS);
@@ -81,10 +86,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 });
}
},
@@ -98,74 +100,42 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
}
};
const handleOnClick = () => {
if (isUntitled) {
setTitleDisplay('');
}
};
useEffect(() => {
setTitleDisplay(doc.title);
}, [doc.title]);
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]);
}, [doc]);
return (
<>
<Tooltip content={t('Rename')} placement="top">
<Box
as="h2"
$radius="4px"
$padding={{ horizontal: 'tiny', vertical: '4px' }}
$margin="none"
$minWidth="200px"
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="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-1000']}
$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
+178 -135
View File
@@ -1,26 +1,33 @@
import {
Button,
VariantType,
useModal,
useToastProvider,
} from '@openfun/cunningham-react';
import { useRouter } from 'next/router';
import React, { useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, DropButton, IconOptions } from '@/components';
import {
Box,
DropdownMenu,
DropdownMenuOption,
Icon,
IconOptions,
} from '@/components';
import { useAuthStore } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { useEditorStore } from '@/features/docs/doc-editor/';
import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
import {
useEditorStore,
usePanelEditorStore,
} from '@/features/docs/doc-editor/';
import {
Doc,
ModalRemoveDoc,
ModalShare,
} from '@/features/docs/doc-management';
import { ModalVersion } from '@/features/docs/doc-versioning';
KEY_LIST_DOC_VERSIONS,
ModalSelectVersion,
} from '@/features/docs/doc-versioning';
import { useResponsiveStore } from '@/stores';
import { DocShareModal } from '../../doc-share/component/DocShareModal';
import { ModalPDF } from './ModalExport';
interface DocToolBoxProps {
@@ -28,21 +35,78 @@ interface DocToolBoxProps {
}
export const DocToolBox = ({ doc }: DocToolBoxProps) => {
const {
query: { versionId },
} = useRouter();
const { t } = useTranslation();
const [isModalShareOpen, setIsModalShareOpen] = useState(false);
const hasAccesses = doc.nb_accesses > 1;
const queryClient = useQueryClient();
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const colors = colorsTokens();
const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
const [isDropOpen, setIsDropOpen] = useState(false);
const { setIsPanelOpen, setIsPanelTableContentOpen } = usePanelEditorStore();
const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
const { isSmallMobile } = useResponsiveStore();
const selectHistoryModal = useModal();
const modalShare = useModal();
const { isSmallMobile, isDesktop } = useResponsiveStore();
const { authenticated } = useAuthStore();
const { editor } = useEditorStore();
const { toast } = useToastProvider();
const options: DropdownMenuOption[] = [
...(isSmallMobile
? [
{
label: t('Share'),
icon: 'upload',
callback: () => {
modalShare.open();
},
},
{
label: t('Export'),
icon: 'download',
callback: () => {
setIsModalPDFOpen(true);
},
},
]
: []),
{
label: t('Version history'),
icon: 'history',
disabled: !doc.abilities.versions_list,
callback: () => {
selectHistoryModal.open();
},
show: isDesktop,
},
{
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',
) => {
@@ -66,6 +130,16 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
}
};
useEffect(() => {
if (selectHistoryModal.isOpen) {
return;
}
void queryClient.resetQueries({
queryKey: [KEY_LIST_DOC_VERSIONS],
});
}, [selectHistoryModal.isOpen, queryClient]);
return (
<Box
$margin={{ left: 'auto' }}
@@ -74,118 +148,88 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
$gap="0.5rem 1.5rem"
$wrap={isSmallMobile ? 'wrap' : 'nowrap'}
>
{versionId && (
<Box $margin={{ left: 'auto' }}>
<Button
onClick={() => {
setIsModalVersionOpen(true);
}}
color="secondary"
size={isSmallMobile ? 'small' : 'medium'}
>
{t('Restore this version')}
</Button>
</Box>
)}
<Box $direction="row" $margin={{ left: 'auto' }} $gap="1rem">
{authenticated && (
<Button
onClick={() => {
setIsModalShareOpen(true);
}}
size={isSmallMobile ? 'small' : 'medium'}
>
{t('Share')}
</Button>
<Box
$direction="row"
$align="center"
$margin={{ left: 'auto' }}
$gap={spacings['2xs']}
>
{authenticated && !isSmallMobile && (
<>
{!hasAccesses && (
<Button
color="tertiary-text"
onClick={() => {
modalShare.open();
}}
size={isSmallMobile ? 'small' : 'medium'}
>
{t('Share')}
</Button>
)}
{hasAccesses && (
<Box
$css={css`
.c__button--medium {
height: 32px;
padding: 10px var(--c--theme--spacings--xs);
gap: 7px;
}
`}
>
<Button
color="tertiary"
aria-label="Share button"
icon={
<Icon iconName="group" $theme="primary" $variation="800" />
}
onClick={() => {
modalShare.open();
}}
size={isSmallMobile ? 'small' : 'medium'}
>
{doc.nb_accesses}
</Button>
</Box>
)}
</>
)}
<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="tertiary-text"
icon={
<Icon iconName="download" $theme="primary" $variation="800" />
}
onClick={() => {
setIsModalPDFOpen(true);
}}
size={isSmallMobile ? 'small' : 'medium'}
/>
)}
<DropdownMenu options={options}>
<IconOptions
isHorizontal
$theme="primary"
$padding={{ all: 'xs' }}
$css={css`
border-radius: 4px;
&:hover {
background-color: ${colors['greyscale-100']};
}
${isSmallMobile
? css`
padding: 10px;
border: 1px solid ${colors['greyscale-300']};
`
: ''}
`}
aria-label={t('Open the document options')}
/>
</DropdownMenu>
</Box>
{isModalShareOpen && (
<ModalShare onClose={() => setIsModalShareOpen(false)} doc={doc} />
{modalShare.isOpen && (
<DocShareModal onClose={() => modalShare.close()} doc={doc} />
)}
{isModalPDFOpen && (
<ModalPDF onClose={() => setIsModalPDFOpen(false)} doc={doc} />
@@ -193,11 +237,10 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
{isModalRemoveOpen && (
<ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
)}
{isModalVersionOpen && versionId && (
<ModalVersion
onClose={() => setIsModalVersionOpen(false)}
docId={doc.id}
versionId={versionId as string}
{selectHistoryModal.isOpen && (
<ModalSelectVersion
onClose={() => selectHistoryModal.close()}
doc={doc}
/>
)}
</Box>
src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
+32
View File
@@ -0,0 +1,32 @@
import { useTranslation } from 'react-i18next';
import { Box } from '@/components';
import { HorizontalSeparator } from '@/components/separators/HorizontalSeparator';
import { useCunninghamTheme } from '@/cunningham';
import { DocTitleText } from './DocTitle';
interface DocVersionHeaderProps {
title: string;
}
export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { t } = useTranslation();
return (
<>
<Box
$width="100%"
$padding={{ vertical: 'base' }}
$gap={spacings['base']}
aria-label={t('It is the document title')}
>
<DocTitleText title={title} />
<HorizontalSeparator />
</Box>
</>
);
};
src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
+50 -62
View File
@@ -1,11 +1,8 @@
import {
Alert,
Button,
Loader,
Modal,
ModalSize,
Radio,
RadioGroup,
Select,
VariantType,
useToastProvider,
@@ -21,6 +18,11 @@ 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;
@@ -41,7 +43,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) {
@@ -123,61 +127,48 @@ 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" $variation="1000" $align="flex-start">
{t('Download')}
</Text>
}
>
<Box
$margin={{ bottom: 'xl' }}
aria-label={t('Content modal to export the document')}
$gap="1.5rem"
$gap="1rem"
>
<Alert canClose={false} type={VariantType.INFO}>
<Text>
{t(
'Export your document, it will be inserted in the selected template.',
)}
</Text>
</Alert>
<Text $variation="600" $size="sm">
{t(
'Upload your docs to a Microsoft Word, Open Office or PDF document.',
)}
</Text>
<Select
clearable={false}
label={t('Template')}
@@ -187,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-header/components/index.ts
+1
View File
@@ -1 +1,2 @@
export * from './DocHeader';
export * from './DocVersionHeader';
src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts
+1
View File
@@ -2,5 +2,6 @@ export * from './useCreateDoc';
export * from './useDoc';
export * from './useDocOptions';
export * from './useDocs';
export * from './useCreateFavoriteDoc';
export * from './useUpdateDoc';
export * from './useUpdateDocLink';
src/frontend/apps/impress/src/features/docs/doc-management/api/useCreateFavoriteDoc.tsx
+42
View File
@@ -0,0 +1,42 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { Doc } from '@/features/docs';
export type CreateFavoriteDocParams = Pick<Doc, 'id'>;
export const createFavoriteDoc = async ({ id }: CreateFavoriteDocParams) => {
const response = await fetchAPI(`documents/${id}/favorite/`, {
method: 'POST',
});
if (!response.ok) {
throw new APIError(
'Failed to make the doc as favorite',
await errorCauses(response),
);
}
};
interface CreateFavoriteDocProps {
onSuccess?: () => void;
listInvalideQueries?: string[];
}
export function useCreateFavoriteDoc({
onSuccess,
listInvalideQueries,
}: CreateFavoriteDocProps) {
const queryClient = useQueryClient();
return useMutation<void, APIError, CreateFavoriteDocParams>({
mutationFn: createFavoriteDoc,
onSuccess: () => {
listInvalideQueries?.forEach((queryKey) => {
void queryClient.invalidateQueries({
queryKey: [queryKey],
});
});
onSuccess?.();
},
});
}
src/frontend/apps/impress/src/features/docs/doc-management/api/useDeleteFavoriteDoc.tsx
+42
View File
@@ -0,0 +1,42 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { Doc } from '@/features/docs';
export type DeleteFavoriteDocParams = Pick<Doc, 'id'>;
export const deleteFavoriteDoc = async ({ id }: DeleteFavoriteDocParams) => {
const response = await fetchAPI(`documents/${id}/favorite/`, {
method: 'DELETE',
});
if (!response.ok) {
throw new APIError(
'Failed to remove the doc as favorite',
await errorCauses(response),
);
}
};
interface DeleteFavoriteDocProps {
onSuccess?: () => void;
listInvalideQueries?: string[];
}
export function useDeleteFavoriteDoc({
onSuccess,
listInvalideQueries,
}: DeleteFavoriteDocProps) {
const queryClient = useQueryClient();
return useMutation<void, APIError, DeleteFavoriteDocParams>({
mutationFn: deleteFavoriteDoc,
onSuccess: () => {
listInvalideQueries?.forEach((queryKey) => {
void queryClient.invalidateQueries({
queryKey: [queryKey],
});
});
onSuccess?.();
},
});
}
src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx
+34 -7
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';
@@ -22,16 +28,33 @@ export type DocsOrdering = (typeof docsOrdering)[number];
export type DocsParams = {
page: number;
ordering?: DocsOrdering;
is_creator_me?: boolean;
title?: string;
is_favorite?: boolean;
};
export type DocsResponse = APIList<Doc>;
export const getDocs = async (params: DocsParams): Promise<DocsResponse> => {
const searchParams = new URLSearchParams();
if (params.page) {
searchParams.set('page', params.page.toString());
}
export const getDocs = async ({
ordering,
page,
}: DocsParams): Promise<DocsResponse> => {
const orderingQuery = ordering ? `&ordering=${ordering}` : '';
const response = await fetchAPI(`documents/?page=${page}${orderingQuery}`);
if (params.ordering) {
searchParams.set('ordering', params.ordering);
}
if (params.is_creator_me !== undefined) {
searchParams.set('is_creator_me', params.is_creator_me.toString());
}
if (params.title && params.title.length > 0) {
searchParams.set('title', params.title);
}
if (params.is_favorite !== undefined) {
searchParams.set('is_favorite', params.is_favorite.toString());
}
const response = await fetchAPI(`documents/?${searchParams.toString()}`);
if (!response.ok) {
throw new APIError('Failed to get the docs', await errorCauses(response));
@@ -52,3 +75,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/useUpdateDoc.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export function useUpdateDoc({
mutationFn: updateDoc,
onSuccess: (data) => {
listInvalideQueries?.forEach((queryKey) => {
void queryClient.resetQueries({
void queryClient.invalidateQueries({
queryKey: [queryKey],
});
});
src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export function useUpdateDocLink({
mutationFn: updateDocLink,
onSuccess: (data, variable) => {
listInvalideQueries?.forEach((queryKey) => {
void queryClient.resetQueries({
void queryClient.invalidateQueries({
queryKey: [queryKey],
});
});
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="#E3E3FD" stroke-width="0.472222"/>
<path d="M6.5 8.55554H15" 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="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="#E3E3FD" stroke-width="0.472222"/>
<path d="M6.5 8.55554H15" 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"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B

src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx
-144
View File
@@ -1,144 +0,0 @@
import {
Radio,
RadioGroup,
Select,
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import { useTranslation } from 'react-i18next';
import { Box, Card, IconBG } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { KEY_DOC, KEY_LIST_DOC, useUpdateDocLink } from '../api';
import { Doc, LinkReach, LinkRole } from '../types';
interface DocVisibilityProps {
doc: Doc;
}
export const DocVisibility = ({ doc }: DocVisibilityProps) => {
const { t } = useTranslation();
const { toast } = useToastProvider();
const { colorsTokens } = useCunninghamTheme();
const api = useUpdateDocLink({
onSuccess: () => {
toast(
t('The document visibility has been updated.'),
VariantType.SUCCESS,
{
duration: 4000,
},
);
},
listInvalideQueries: [KEY_LIST_DOC, KEY_DOC],
});
const transLinkReach = {
[LinkReach.RESTRICTED]: {
label: t('Restricted'),
description: t('Only for people with access'),
},
[LinkReach.AUTHENTICATED]: {
label: t('Authenticated'),
description: t('Only for authenticated users'),
},
[LinkReach.PUBLIC]: {
label: t('Public'),
description: t('Anyone on the internet with the link can view'),
},
};
const linkRoleList = [
{
label: t('Read only'),
value: LinkRole.READER,
},
{
label: t('Can read and edit'),
value: LinkRole.EDITOR,
},
];
const showLinkRoleOptions = doc.link_reach !== LinkReach.RESTRICTED;
return (
<Card
$margin="tiny"
$padding={{ horizontal: 'small', vertical: 'tiny' }}
aria-label={t('Doc visibility card')}
$direction="row"
$align="center"
$justify="space-between"
$gap="1rem"
$wrap="wrap"
>
<IconBG iconName="public" />
<Box
$wrap="wrap"
$gap="1rem"
$direction="row"
$align="center"
$flex="1"
$css={`
& .c__field__footer .c__field__text {
${!doc.abilities.link_configuration && `color: ${colorsTokens()['greyscale-400']};`};
}
`}
>
<Box $shrink="0" $flex="auto" $maxWidth="20rem">
<Select
label={t('Visibility')}
options={Object.values(LinkReach).map((linkReach) => ({
label: transLinkReach[linkReach].label,
value: linkReach,
}))}
onChange={(evt) =>
api.mutate({
link_reach: evt.target.value as LinkReach,
id: doc.id,
})
}
value={doc.link_reach}
clearable={false}
text={transLinkReach[doc.link_reach].description}
disabled={!doc.abilities.link_configuration}
/>
</Box>
{showLinkRoleOptions && (
<Box
$css={`
& .c__checkbox{
padding: 0.15rem 0.25rem;
}
`}
>
<RadioGroup
compact
style={{
display: 'flex',
}}
text={t('How people can interact with the document')}
>
{linkRoleList.map((radio) => (
<Radio
key={radio.value}
label={radio.label}
value={radio.value}
onChange={() =>
api.mutate({
link_role: radio.value,
id: doc.id,
})
}
checked={doc.link_role === radio.value}
disabled={!doc.abilities.link_configuration}
/>
))}
</RadioGroup>
</Box>
)}
</Box>
</Card>
);
};
src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+40 -75
View File
@@ -1,19 +1,17 @@
import {
Alert,
Button,
Modal,
ModalSize,
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import { t } from 'i18next';
import { usePathname } from 'next/navigation';
import { useRouter } from 'next/router';
import { useTranslation } from 'react-i18next';
import { Box, Text, TextErrors } from '@/components';
import { useCunninghamTheme } from '@/cunningham/';
import { useRemoveDoc } from '../api/useRemoveDoc';
import IconDoc from '../assets/icon-doc.svg';
import { Doc } from '../types';
interface ModalRemoveDocProps {
@@ -22,13 +20,13 @@ interface ModalRemoveDocProps {
}
export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
const { t } = useTranslation();
const { colorsTokens } = useCunninghamTheme();
const { toast } = useToastProvider();
const { push } = useRouter();
const pathname = usePathname();
const {
mutate: removeDoc,
isError,
error,
} = useRemoveDoc({
@@ -36,7 +34,11 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
toast(t('The document has been deleted.'), VariantType.SUCCESS, {
duration: 4000,
});
void push('/');
if (pathname === '/') {
onClose();
} else {
void push('/');
}
},
});
@@ -44,85 +46,48 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
<Modal
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('Confirm deletion')}
color="primary"
fullWidth
onClick={() =>
removeDoc({
docId: doc.id,
})
}
>
{t('Confirm deletion')}
</Button>
<>
<Button
aria-label={t('Close the modal')}
color="secondary"
fullWidth
onClick={() => onClose()}
>
{t('Cancel')}
</Button>
<Button
aria-label={t('Confirm deletion')}
color="danger"
fullWidth
onClick={() =>
removeDoc({
docId: doc.id,
})
}
>
{t('Delete')}
</Button>
</>
}
size={ModalSize.MEDIUM}
title={
<Box $align="center" $gap="1rem">
<Text $isMaterialIcon $size="48px" $theme="primary" $variation="600">
delete_forever
</Text>
<Text as="h2" $size="h3" $margin="none">
{t('Deleting the document "{{title}}"', { title: doc.title })}
</Text>
</Box>
<Text $size="h6" as="h6" $margin={{ all: '0' }} $align="flex-start">
{t('Delete a doc')}
</Text>
}
>
<Box
$margin={{ bottom: 'xl' }}
aria-label={t('Content modal to delete document')}
>
<Box aria-label={t('Content modal to delete document')}>
{!isError && (
<Alert canClose={false} type={VariantType.WARNING}>
<Text>
{t('Are you sure you want to delete the document "{{title}}"?', {
title: doc.title,
})}
</Text>
</Alert>
<Text $size="sm" $variation="600">
{t('Are you sure you want to delete the document "{{title}}"?', {
title: doc.title,
})}
</Text>
)}
{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/ModalShare.tsx
-138
View File
@@ -1,138 +0,0 @@
import {
Button,
VariantType,
useToastProvider,
} from '@openfun/cunningham-react';
import { useTranslation } from 'react-i18next';
import { createGlobalStyle } from 'styled-components';
import { Box, Card, IconBG, SideModal, Text } from '@/components';
import { InvitationList } from '@/features/docs/members/invitation-list';
import { AddMembers } from '@/features/docs/members/members-add';
import { MemberList } from '@/features/docs/members/members-list';
import { useResponsiveStore } from '@/stores';
import { Doc } from '../types';
import { currentDocRole } from '../utils';
import { DocVisibility } from './DocVisibility';
const ModalShareStyle = createGlobalStyle`
& .c__modal__scroller{
background: #FAFAFA;
padding: 1.5rem .5rem;
.c__modal__title{
padding: 0;
margin: 0;
}
.c__modal__close{
margin-right: 1rem;
button{
border-bottom: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
}
}
}
`;
interface ModalShareProps {
onClose: () => void;
doc: Doc;
}
export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
const { t } = useTranslation();
const { isMobile, isSmallMobile } = useResponsiveStore();
const width = isSmallMobile ? '100vw' : isMobile ? '90vw' : '70vw';
const { toast } = useToastProvider();
return (
<>
<ModalShareStyle />
<SideModal
isOpen
closeOnClickOutside
hideCloseButton={!isSmallMobile}
onClose={onClose}
width={width}
$css="min-width: 320px;max-width: 777px;"
>
<Box aria-label={t('Share modal')} $margin={{ bottom: 'small' }}>
<Box $shrink="0">
<Card
$direction="row"
$align="center"
$margin={{ horizontal: 'tiny', top: 'none', bottom: 'big' }}
$padding="tiny"
$gap="1rem"
>
<IconBG
$isMaterialIcon
$size="48px"
iconName="share"
$margin="none"
/>
<Box
$justify="space-between"
$direction="row"
$align="center"
$width="100%"
$gap="1rem"
$wrap="wrap"
>
<Box $align="flex-start">
<Text as="h3" $size="26px" $margin="none">
{t('Share')}
</Text>
<Text $size="small" $weight="normal" $textAlign="left">
{doc.title}
</Text>
</Box>
<Box $margin={{ right: '1.5rem' }} $shrink="0">
<Button
onClick={() => {
navigator.clipboard
.writeText(window.location.href)
.then(() => {
toast(t('Link Copied !'), VariantType.SUCCESS, {
duration: 3000,
});
})
.catch(() => {
toast(t('Failed to copy link'), VariantType.ERROR, {
duration: 3000,
});
});
}}
color="primary"
icon={<span className="material-icons">copy</span>}
>
{t('Copy link')}
</Button>
</Box>
</Box>
</Card>
<DocVisibility doc={doc} />
{doc.abilities.accesses_manage && (
<AddMembers
doc={doc}
currentRole={currentDocRole(doc.abilities)}
/>
)}
</Box>
<Box $minHeight="0">
{doc.abilities.accesses_view && (
<>
<InvitationList doc={doc} />
<MemberList doc={doc} />
</>
)}
</Box>
</Box>
</SideModal>
</>
);
};
src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts
-1
View File
@@ -1,2 +1 @@
export * from './ModalRemoveDoc';
export * from './ModalShare';
src/frontend/apps/impress/src/features/docs/doc-management/hooks/useTrans.tsx
+26 -2
View File
@@ -6,10 +6,32 @@ export const useTrans = () => {
const { t } = useTranslation();
const translatedRoles = {
[Role.ADMIN]: t('Administrator'),
[Role.READER]: t('Reader'),
[Role.OWNER]: t('Owner'),
[Role.EDITOR]: t('Editor'),
[Role.ADMIN]: t('Administrator'),
[Role.OWNER]: t('Owner'),
};
const getNotAllowedMessage = (
canUpdate: boolean,
isLastOwner: boolean,
isOtherOwner: boolean,
) => {
if (!canUpdate) {
return undefined;
}
if (isLastOwner) {
return t(
'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.',
);
}
if (isOtherOwner) {
return t('You cannot update the role or remove other owner.');
}
return undefined;
};
return {
@@ -17,5 +39,7 @@ export const useTrans = () => {
return translatedRoles[role];
},
untitledDocument: t('Untitled document'),
translatedRoles,
getNotAllowedMessage,
};
};
src/frontend/apps/impress/src/features/docs/doc-management/types.tsx
+6
View File
@@ -59,3 +59,9 @@ export interface Doc {
versions_retrieve: boolean;
};
}
export enum DocDefaultFilter {
ALL_DOCS = 'all_docs',
MY_DOCS = 'my_docs',
SHARED_WITH_ME = 'shared_with_me',
}
src/frontend/apps/impress/src/features/docs/doc-search/assets/illustration-docs-empty.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 KiB

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
+29
View File
@@ -0,0 +1,29 @@
import { Box, Icon } from '@/components';
import { QuickSearchItemContent } from '@/components/quick-search/QuickSearchItemContent';
import { Doc } from '@/features/docs/doc-management';
import { SimpleDocItem } from '@/features/docs/docs-grid/components/SimpleDocItem';
import { useResponsiveStore } from '@/stores';
type DocSearchItemProps = {
doc: Doc;
};
export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
const { isDesktop } = useResponsiveStore();
return (
<Box data-testid={`doc-search-item-${doc.id}`} $width="100%">
<QuickSearchItemContent
left={
<Box $direction="row" $align="center" $gap="10px" $width="100%">
<Box $flex={isDesktop ? 9 : 1}>
<SimpleDocItem doc={doc} showAccesses />
</Box>
</Box>
}
right={
<Icon iconName="keyboard_return" $theme="primary" $variation="800" />
}
/>
</Box>
);
};
src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+104
View File
@@ -0,0 +1,104 @@
import { Modal, ModalProps, ModalSize } from '@openfun/cunningham-react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { InView } from 'react-intersection-observer';
import { useDebouncedCallback } from 'use-debounce';
import { Box } from '@/components';
import {
QuickSearch,
QuickSearchData,
QuickSearchGroup,
} from '@/components/quick-search';
import EmptySearchIcon from '@/features/docs/doc-search/assets/illustration-docs-empty.png';
import { useResponsiveStore } from '@/stores';
import { Doc, useInfiniteDocs } from '../../doc-management';
import { DocSearchItem } from './DocSearchItem';
type DocSearchModalProps = ModalProps & {};
export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
const { t } = useTranslation();
const router = useRouter();
const [search, setSearch] = useState('');
const { isDesktop } = useResponsiveStore();
const {
data,
isFetching,
isRefetching,
isLoading,
fetchNextPage,
hasNextPage,
} = useInfiniteDocs({
page: 1,
title: search,
});
const loading = isFetching || isRefetching || isLoading;
const handleInputSearch = useDebouncedCallback(setSearch, 300);
const handleSelect = (doc: Doc) => {
router.push(`/docs/${doc.id}`);
modalProps.onClose?.();
};
const docsData: QuickSearchData<Doc> = useMemo(() => {
const docs = data?.pages.flatMap((page) => page.results) || [];
return {
groupName: docs.length > 0 ? t('Select a document') : '',
elements: search ? docs : [],
emptyString: t('No document found'),
endActions: hasNextPage
? [{ content: <InView onChange={() => void fetchNextPage()} /> }]
: [],
};
}, [data, hasNextPage, fetchNextPage, t, search]);
return (
<Modal
{...modalProps}
closeOnClickOutside
size={isDesktop ? ModalSize.LARGE : ModalSize.FULL}
>
<Box
aria-label={t('Search modal')}
$direction="column"
$justify="space-between"
>
<QuickSearch
placeholder={t('Type the name of a document')}
loading={loading}
onFilter={handleInputSearch}
>
<Box $height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}>
{search.length === 0 && (
<Box
$direction="column"
$height="100%"
$align="center"
$justify="center"
>
<Image
width={320}
src={EmptySearchIcon}
alt={t('No active search')}
/>
</Box>
)}
{search && (
<QuickSearchGroup
onSelect={handleSelect}
group={docsData}
renderElement={(doc) => <DocSearchItem doc={doc} />}
/>
)}
</Box>
</QuickSearch>
</Box>
</Modal>
);
};
src/frontend/apps/impress/src/features/docs/doc-share/api/index.ts
+9
View File
@@ -0,0 +1,9 @@
export * from './useDeleteDocAccess';
export * from './useDocAccesses';
export * from './useUpdateDocAccess';
export * from './useCreateDocAccess';
export * from './useUsers';
export * from './useCreateDocInvitation';
export * from './useDeleteDocInvitation';
export * from './useDocInvitations';
export * from './useUpdateDocInvitation';
src/frontend/apps/impress/src/features/docs/members/members-add/api/useCreateDocAccess.tsx → src/frontend/apps/impress/src/features/docs/doc-share/api/useCreateDocAccess.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import {
KEY_LIST_DOC,
Role,
} from '@/features/docs/doc-management';
import { KEY_LIST_DOC_ACCESSES } from '@/features/docs/members/members-list';
import { KEY_LIST_DOC_ACCESSES } from '@/features/docs/doc-share';
import { ContentLanguage } from '@/i18n/types';
import { useBroadcastStore } from '@/stores';
src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useCreateDocInvitation.tsx → src/frontend/apps/impress/src/features/docs/doc-share/api/useCreateDocInvitation.tsx
+1 -3
View File
@@ -3,11 +3,9 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { User } from '@/core/auth';
import { Doc, Role } from '@/features/docs/doc-management';
import { OptionType } from '@/features/docs/members/members-add/types';
import { Invitation, OptionType } from '@/features/docs/doc-share/types';
import { ContentLanguage } from '@/i18n/types';
import { Invitation } from '../types';
import { KEY_LIST_DOC_INVITATIONS } from './useDocInvitations';
interface CreateDocInvitationParams {
src/frontend/apps/impress/src/features/docs/members/members-list/api/useDeleteDocAccess.ts → src/frontend/apps/impress/src/features/docs/doc-share/api/useDeleteDocAccess.ts
+1 -1
View File
@@ -6,7 +6,7 @@ import {
import { APIError, errorCauses, fetchAPI } from '@/api';
import { KEY_DOC, KEY_LIST_DOC } from '@/features/docs/doc-management';
import { KEY_LIST_USER } from '@/features/docs/members/members-add';
import { KEY_LIST_USER } from '@/features/docs/doc-share';
import { useBroadcastStore } from '@/stores';
import { KEY_LIST_DOC_ACCESSES } from './useDocAccesses';
src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useDeleteDocInvitation.ts → src/frontend/apps/impress/src/features/docs/doc-share/api/useDeleteDocInvitation.ts
+10 -2
View File
@@ -13,6 +13,10 @@ interface DeleteDocInvitationProps {
invitationId: string;
}
type RemoveDocInvitationError = {
role?: string[];
};
export const deleteDocInvitation = async ({
docId,
invitationId,
@@ -34,7 +38,7 @@ export const deleteDocInvitation = async ({
type UseDeleteDocInvitationOptions = UseMutationOptions<
void,
APIError,
APIError<RemoveDocInvitationError>,
DeleteDocInvitationProps
>;
@@ -42,7 +46,11 @@ export const useDeleteDocInvitation = (
options?: UseDeleteDocInvitationOptions,
) => {
const queryClient = useQueryClient();
return useMutation<void, APIError, DeleteDocInvitationProps>({
return useMutation<
void,
APIError<RemoveDocInvitationError>,
DeleteDocInvitationProps
>({
mutationFn: deleteDocInvitation,
...options,
onSuccess: (data, variables, context) => {
src/frontend/apps/impress/src/features/docs/members/members-list/api/useDocAccesses.tsx → src/frontend/apps/impress/src/features/docs/doc-share/api/useDocAccesses.tsx
View File
src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useDocInvitations.tsx → src/frontend/apps/impress/src/features/docs/doc-share/api/useDocInvitations.tsx
+1 -2
View File
@@ -8,8 +8,7 @@ import {
} from '@tanstack/react-query';
import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
import { Invitation } from '../types';
import { Invitation } from '@/features/docs/doc-share/types';
export type DocInvitationsParams = {
docId: string;
src/frontend/apps/impress/src/features/docs/members/members-list/api/useUpdateDocAccess.ts → src/frontend/apps/impress/src/features/docs/doc-share/api/useUpdateDocAccess.ts
View File
src/frontend/apps/impress/src/features/docs/members/invitation-list/api/useUpdateDocInvitation.ts → src/frontend/apps/impress/src/features/docs/doc-share/api/useUpdateDocInvitation.ts
+11 -4
View File
@@ -6,8 +6,7 @@ import {
import { APIError, errorCauses, fetchAPI } from '@/api';
import { Role } from '@/features/docs/doc-management';
import { Invitation } from '../types';
import { Invitation } from '@/features/docs/doc-share/types';
import { KEY_LIST_DOC_INVITATIONS } from './useDocInvitations';
@@ -17,6 +16,10 @@ interface UpdateDocInvitationProps {
role: Role;
}
type UpdateDocInvitationError = {
role?: string[];
};
export const updateDocInvitation = async ({
docId,
invitationId,
@@ -43,7 +46,7 @@ type UseUpdateDocInvitation = Partial<Invitation>;
type UseUpdateDocInvitationOptions = UseMutationOptions<
Invitation,
APIError,
APIError<UpdateDocInvitationError>,
UseUpdateDocInvitation
>;
@@ -51,7 +54,11 @@ export const useUpdateDocInvitation = (
options?: UseUpdateDocInvitationOptions,
) => {
const queryClient = useQueryClient();
return useMutation<Invitation, APIError, UpdateDocInvitationProps>({
return useMutation<
Invitation,
APIError<UpdateDocInvitationError>,
UpdateDocInvitationProps
>({
mutationFn: updateDocInvitation,
...options,
onSuccess: (data, variables, context) => {

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