Confirm Dialog on closing a callout save/edit form. #7648
Conversation
WalkthroughThis pull request introduces confirmation dialogs in multiple components. The English translations file is updated with a new entry for a confirmation dialog used when discarding a callout. Additionally, the rendering condition in a dialog header component is changed to an explicit Boolean conversion. Both the callout edit dialog and the post settings page now use state variables and callbacks to trigger a confirmation dialog before closing, replacing direct close actions with a confirmation step. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CalloutEditDialog
participant ConfirmationDialog
User->>CalloutEditDialog: Trigger close action
CalloutEditDialog->>CalloutEditDialog: Execute onCloseEdit() (set dialog open state)
CalloutEditDialog->>ConfirmationDialog: Render confirmation dialog
alt User confirms
User->>ConfirmationDialog: Click Confirm
ConfirmationDialog->>CalloutEditDialog: Proceed with close
else User cancels
User->>ConfirmationDialog: Click Cancel
ConfirmationDialog->>CalloutEditDialog: Close confirmation dialog
end
sequenceDiagram
participant User
participant PostSettingsPage
participant ConfirmationDialog
User->>PostSettingsPage: Trigger close action
PostSettingsPage->>PostSettingsPage: Execute onCloseEdit() (set dialog open state)
PostSettingsPage->>ConfirmationDialog: Render confirmation dialog
alt User confirms
User->>ConfirmationDialog: Click Confirm
ConfirmationDialog->>PostSettingsPage: Proceed with close action
else User cancels
User->>ConfirmationDialog: Click Cancel
ConfirmationDialog->>PostSettingsPage: Reset dialog state
end
Possibly related PRs
Suggested labels
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/core/ui/dialog/DialogHeader.tsx (1)
31-31: Consider keeping the original condition.The explicit
Boolean()conversion is unnecessary here as:
- The
onCloseprop is already type-safe through TypeScript- The original condition
onClose &&is more idiomatic in React- There's no real benefit from the explicit conversion in this case
- {Boolean(onClose) && ( + {onClose && (
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/core/i18n/en/translation.en.json(1 hunks)src/core/ui/dialog/DialogHeader.tsx(1 hunks)src/domain/collaboration/callout/edit/editDialog/CalloutEditDialog.tsx(4 hunks)src/domain/collaboration/post/pages/PostSettingsPage.tsx(5 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`src/**/*.{ts,tsx,js}`: Review the React.js/TypeScript/JavaS...
src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Use the following code guide documentation in the codebase: 'docs/code-guidelines.md'.
Ensure sufficient error handling and logging is present, but note:
- We have a global error handler in place. So local
try/catchblocks are not required unless they provide value beyond what the global error handler already covers.- Avoid flagging the absence of local error handling in cases where the global error handler suffices.
- Avoid flagging the absence of logging in cases where the global logger is already in place (graphql usage).
Inform about the recommendation of not using non-null assertion,
except on GraphQL queries where the variable is asserted non-null and followed by a
skip:with the same variable.
Examples:
- Not Required: there's a skip
{
variables: { templateId: templateId! },
skip: !templateId,
}Check for common security vulnerabilities such as:
- SQL Injection
- XSS (Cross-Site Scripting)
- CSRF (Cross-Site Request Forgery)
- Insecure dependencies
- Sensitive data exposure
src/core/ui/dialog/DialogHeader.tsxsrc/domain/collaboration/callout/edit/editDialog/CalloutEditDialog.tsxsrc/domain/collaboration/post/pages/PostSettingsPage.tsx
`src/**/*.json`: Review the JSON files for correct syntax an...
src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.
src/core/i18n/en/translation.en.json
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Travis CI - Pull Request
🔇 Additional comments (3)
src/domain/collaboration/callout/edit/editDialog/CalloutEditDialog.tsx (1)
17-17: LGTM! Well-implemented confirmation dialog for closing callout edit.The implementation follows React best practices:
- Uses useState for dialog visibility state
- Implements useCallback for the close handler
- Properly configures ConfirmationDialog with actions and localization
Also applies to: 61-61, 65-67, 147-160
src/domain/collaboration/post/pages/PostSettingsPage.tsx (1)
45-45: LGTM! Well-implemented confirmation dialog for closing post settings.The implementation follows React best practices:
- Uses useState for dialog visibility state
- Implements useCallback for both close and delete handlers
- Properly configures ConfirmationDialog with actions and localization
Also applies to: 93-104, 229-242
src/core/i18n/en/translation.en.json (1)
2877-2880: LGTM! Clear and consistent translations for close confirmation dialog.The added translations are well-structured and maintain consistency with existing confirmation dialog messages.
Confirmation for closing a callout form added.
Covers:
It doesn't cover the creation/edit of a WB in a WB collection (no need to).
Summary by CodeRabbit
New Features
Improvements