Add Confirmation Pop-up to Prevent Accidental Exception Deletions #10283
Conversation
WalkthroughThe pull request implements confirmation dialogs for deleting schedule exceptions, removing availability entries, and deleting schedule templates across various components. The previous direct delete actions are replaced with dialogs that require user confirmation before proceeding. Additionally, new localization keys are added to support confirmation messages, enhancing user interaction and preventing accidental deletions. Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.
|
|
@modamaan what is the status on the PR |
|
@rithviknishad #10048 Has work started on the ConfirmDialog? |
|
@Jacobjeevan, can we use the existing |
…modamaan/care_feAmaan into issues/10259/confirmation-popup
src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/ui/alert-dialog.tsx (1)
101-112: Consider moving margin classes to component level.The margin classes (
mt-2 sm:mt-0) in the base styles ofalertVariantsmight be better placed in the component's className for better separation of concerns between spacing and visual styling.-const alertVariants = cva("mt-2 sm:mt-0", { +const alertVariants = cva("", { variants: { variant: { default: "bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50", destructive: "bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90", }, }, defaultVariants: { variant: "default", }, });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
public/locale/en.json(2 hunks)src/components/ui/alert-dialog.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- public/locale/en.json
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: OSSAR-Scan
- GitHub Check: CodeQL-Build
- GitHub Check: cypress-run (1)
🔇 Additional comments (2)
src/components/ui/alert-dialog.tsx (2)
2-2: LGTM! Good choice of styling library.The addition of
class-variance-authorityis appropriate for implementing type-safe variant styling.
114-124: LGTM! Verify usage in consuming components.The implementation correctly integrates variant styling while maintaining type safety. This enables proper visual distinction for destructive actions like deletions.
Let's verify the usage of the destructive variant in deletion confirmation dialogs:
|
@Jacobjeevan @rithviknishad cam you please check |
Dev.Doctor._.CARE.-.final.2025-02-07.00-11-56.mp4 |
src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx (1)
284-286: Make the warning message more specific.The current warning message is generic. Consider making it more specific to help users understand exactly what they're deleting.
- {t("this_will_permanently_remove_the_template")} + {t("this_will_permanently_remove_template", { name: template.name })}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx(4 hunks)src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: Test
- GitHub Check: OSSAR-Scan
- GitHub Check: cypress-run (1)
- GitHub Check: CodeQL-Build
🔇 Additional comments (2)
src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx (2)
18-29: LGTM! Clean import organization.The new Alert and AlertDialog component imports are well-organized and correctly sourced from the UI library.
141-141: LGTM! Well-implemented confirmation dialog.The AlertDialog implementation for template deletion is clean and follows best practices with proper state management.
Also applies to: 265-303
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/Appointments/AppointmentDetail.tsx (1)
532-561: LGTM! Good UX improvements for destructive actions.The addition of
variant="destructive"to the confirmation buttons enhances the visual feedback, making it clearer that these are destructive actions. This aligns well with the PR's goal of preventing accidental deletions.Consider these additional UX improvements:
- Add a brief delay (e.g., 2 seconds) before enabling the confirm button to prevent accidental clicks.
- Require typing a confirmation word (e.g., "DELETE") for extra validation.
Example implementation for the delay:
<AlertDialogAction variant="destructive" + disabled={!useEffect(() => { + const timer = setTimeout(() => setEnabled(true), 2000); + return () => clearTimeout(timer); + }, [])} onClick={() => cancelAppointment({ reason: "cancelled" })} > {t("confirm")} </AlertDialogAction>Also applies to: 563-592
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
public/locale/en.json(2 hunks)src/pages/Appointments/AppointmentDetail.tsx(2 hunks)src/pages/Scheduling/ScheduleExceptions.tsx(4 hunks)src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx(4 hunks)src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx
- src/pages/Scheduling/ScheduleExceptions.tsx
- public/locale/en.json
- src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
Proposed Changes
Vinu.TV._.CARE.-.confirm.dialog.2025-01-31.01-44-05.mp4
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes