feat: show confirmation modal for deleting robots and runs #319
Conversation
chore: release v0.0.5
WalkthroughThis pull request introduces comprehensive updates across multiple files, focusing on enhancing user interface localization and interaction. The changes primarily involve restructuring the English localization JSON file, adding new sections for various functionalities, and implementing confirmation dialogs for deletion actions in both the Recordings and Runs tables. The modifications aim to improve user experience by providing clearer feedback, more robust error handling, and additional safety measures when performing critical actions. Changes
Sequence DiagramsequenceDiagram
participant User
participant UI
participant DeleteDialog
participant Backend
User->>UI: Initiate Delete Action
UI->>DeleteDialog: Open Confirmation Dialog
DeleteDialog->>User: Prompt Confirmation
User->>DeleteDialog: Confirm Deletion
DeleteDialog->>Backend: Send Delete Request
Backend-->>UI: Delete Confirmation
UI->>User: Show Success Notification
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/components/molecules/RunsTable.tsx (2)
132-138: Potential improvement for selective item deletion
Currently, callingsetRows([])removes all rows briefly before re-fetching them. This can cause unnecessary flicker and overhead if only one run needs to be deleted. Consider directly removing the specific run fromrowsprior to re-fetching to maintain a smoother UX.const handleDeleteConfirm = () => { - setRows([]); + setRows((prevRows) => prevRows.filter((r) => r.id !== runToDelete?.id)); notify('success', t('runstable.notifications.delete_success')); fetchRuns(); setDeleteDialogOpen(false); setRunToDelete(null); };
228-250: Hard-coded text in dialog title
Currently, "Delete Run" is hard-coded. For localization synergy, consider using something liket('runstable.delete_confirmation.title')if that exists. This will further align with the approach seen inRecordingsTable.<DialogTitle id="alert-dialog-title"> - Delete Run + {t('runstable.delete_confirmation.title', 'Delete Run')} </DialogTitle>src/components/molecules/RecordingsTable.tsx (2)
156-156: Use optional chaining here
The static analysis hint suggests using optional chaining. In line 156, you can safely check ifrecording?.recording_metaexists before accessing it, preventing potential runtime errors.- if (recording && recording.recording_meta) { + if (recording?.recording_meta) {🧰 Tools
🪛 Biome (1.9.4)
[error] 156-156: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
371-388: Delete recording flow
Deletion logic is triggered inline. While this works, you might consider a dedicated confirmation dialog—similar to theOptionsButtonapproach—for consistency. Right now, line 385 ensures errors are reported, which is good.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
public/locales/en.json(1 hunks)src/components/molecules/RecordingsTable.tsx(7 hunks)src/components/molecules/RunsTable.tsx(5 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/molecules/RecordingsTable.tsx
[error] 156-156: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (11)
src/components/molecules/RunsTable.tsx (5)
12-16: Imports for Material-UI Dialog components
These imports properly introduce the required Material-UI dialog components.
88-89: Use of new state for dialog management
deleteDialogOpenandrunToDeleteare sensible additions for tracking deletion state and which run is to be removed.
127-130: Method rename and usage
handleDeleteClickcleanly shifts deletion logic into a confirmation-based flow. This readably setsrunToDeleteand opens the dialog.
140-142: Graceful dialog close
handleDeleteCancelproperly resets state when the user cancels the deletion, preserving consistency.
204-204: Delegation tohandleDeleteClick
LinkinghandleDeletetohandleDeleteClick(row)is consistent, ensuring each row triggers the Dialog.src/components/molecules/RecordingsTable.tsx (2)
178-184: Robust error handling
Catching errors onstopRecording(browserId)is beneficial. Kudos for adding user-facing notifications here, enhancing clarity when a recording fails to stop.
Line range hint
548-586: Enhanced confirmation flow inOptionsButton
This approach includes a separate confirmation dialog for deletion, ensuring user safeguards. The interplay withcheckRunsForRecordingis well-handled, but if the user has many runs, you might consider a loading state or a direct approach to gracefully handle the asynchronous checks.public/locales/en.json (4)
46-51: Addition of delete confirmation strings
Including"delete_confirmation"fosters improved user interaction by clarifying irreversible deletion steps. Good approach for multi-lingual support.
62-74: Updates to runstable notifications
Providing distinct success and fail notifications helps thoroughly convey the system state to users.
156-173: List extraction and pagination instructions
These localized strings thoroughly guide users in setting pagination and list extraction limits. This is valuable for user education.
Line range hint
568-580: Detailed error and success messages
Comprehensive error notifications, especially referencing variables (e.g.{{message}}), ensure clarity for debugging. Keep verifying placeholders to avoid mismatches.
| const handleDeleteConfirm = async () => { | ||
| try { | ||
| checkRunsForRecording(recordingName).then((result: boolean) => { | ||
| if (result) { | ||
| notify('warning', t('recordingtable.notifications.delete_warning')); | ||
| setDeleteDialogOpen(false); | ||
| } | ||
| }) | ||
|
|
||
|
|
||
|
|
||
|
|
||
| // Only proceed with deletion if there are no runs | ||
| handleDelete(); | ||
| setDeleteDialogOpen(false); | ||
| notify("success", t("recordingtable.notifications.delete_success")); | ||
| } catch (error) { | ||
| console.error('Error during deletion:', error); | ||
| notify("error", t("recordingtable.notifications.delete_error")); | ||
| setDeleteDialogOpen(false); | ||
| } | ||
| }; |
There was a problem hiding this comment.
💡 Codebase verification
Race condition in deletion logic needs to be fixed
The verification reveals a serious race condition in the deletion logic. The code calls handleDelete() immediately after starting the checkRunsForRecording promise, without waiting for its result. This means:
- The deletion will always proceed regardless of whether there are associated runs
- The comment "Only proceed with deletion if there are no runs" is incorrect as the code doesn't enforce this condition
- The warning notification about existing runs may appear after the deletion is already completed
Here's what needs to be fixed:
- Move the
handleDelete()call inside the.then()block - Only call it when
resultisfalse(no runs exist) - Use proper
async/awaitsyntax instead of mixing with.then()
🔗 Analysis chain
Conditionally skipping actual delete
Your logic at lines 568–580 could skip the actual removal if runs are associated. As a follow-up, consider placing that skip logic inside or after the promise’s .then block, clarifying if the code still calls handleDelete() once checkRunsForRecording returns true.
const handleDeleteConfirm = async () => {
try {
checkRunsForRecording(recordingName).then((result: boolean) => {
if (result) {
notify('warning', t('recordingtable.notifications.delete_warning'));
setDeleteDialogOpen(false);
- // Potentially still calls handleDelete() below
+ return; // ensure we skip the actual delete if runs exist
}
});
handleDelete();
...Let me gather more information about the code to verify the concern.
Let me search for the actual handleDelete implementation in the RecordingsTable component since the one found is from a different component.
Let me search for the actual delete operation in the file.
🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash
# Search for handleDeleteConfirm implementation and its related functions
ast-grep --pattern 'const handleDeleteConfirm = async () => {
$$$
}'
# Also search for checkRunsForRecording function to understand its implementation
ast-grep --pattern 'const checkRunsForRecording = $_'
# Search for handleDelete implementation
ast-grep --pattern 'const handleDelete = $_'
Length of output: 3090
Script:
#!/bin/bash
# Search for handleDelete in RecordingsTable.tsx
rg "const handleDelete" src/components/molecules/RecordingsTable.tsx -A 5
Length of output: 528
Script:
#!/bin/bash
# Search for delete-related operations in RecordingsTable.tsx
rg "delete" src/components/molecules/RecordingsTable.tsx -B 2 -A 5
Length of output: 3346
amhsirak
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/molecules/RecordingsTable.tsx (1)
559-580:⚠️ Potential issueRace condition in deletion logic still needs to be fixed
The current implementation still has a race condition where
handleDelete()is called before thecheckRunsForRecordingpromise resolves.Apply this fix to resolve the race condition:
const handleDeleteConfirm = async () => { try { - checkRunsForRecording(recordingName).then((result: boolean) => { - if (result) { - notify('warning', t('recordingtable.notifications.delete_warning')); - setDeleteDialogOpen(false); - } - }) - - // Only proceed with deletion if there are no runs - handleDelete(); + const hasRuns = await checkRunsForRecording(recordingName); + if (hasRuns) { + notify('warning', t('recordingtable.notifications.delete_warning')); + setDeleteDialogOpen(false); + return; + } + + await handleDelete(); setDeleteDialogOpen(false); notify("success", t("recordingtable.notifications.delete_success")); } catch (error) {
🧹 Nitpick comments (3)
src/components/molecules/RecordingsTable.tsx (3)
144-167: Enhance error handling with specific error messagesThe error handling is good, but could be more informative for better debugging and user experience.
catch (error) { - notify('error', 'Error fetching recordings.'); + const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'; + notify('error', `Error fetching recordings: ${errorMessage}`); console.error('Error fetching recordings: ', error); - // Don't continue setting rows after an error - setRows([]); }Also applies to: 171-177
🧰 Tools
🪛 Biome (1.9.4)
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
148-156: Use optional chaining for safer property accessThe current implementation could throw if
recordingis undefined.-recordings.map((recording: any, index: number) => { - if (recording && recording.recording_meta) { +recordings.map((recording: any, index: number) => { + if (recording?.recording_meta) {🧰 Tools
🪛 Biome (1.9.4)
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
661-669: Consider moving styles to a separate fileThe modal style object should be moved to a separate styles file for better maintainability and reusability.
Consider creating a new file
src/styles/modal.styles.ts:export const modalStyle = { top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: "30%", backgroundColor: "background.paper", p: 4, height: "fit-content", display: "block", padding: "20px", };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/molecules/RecordingsTable.tsx(7 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/molecules/RecordingsTable.tsx
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (1)
src/components/molecules/RecordingsTable.tsx (1)
633-655: Well-implemented confirmation dialog!Great job implementing the confirmation dialog with proper accessibility attributes and internationalization support.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
src/components/robot/RecordingsTable.tsx (3)
144-167: Enhance error handling in fetchRecordings.The error handling could be more specific to help users understand and resolve issues.
Apply this enhancement:
try { const recordings = await getStoredRecordings(); if (recordings) { const parsedRows: Data[] = []; recordings.map((recording: any, index: number) => { if (recording && recording.recording_meta) { parsedRows.push({ id: index, ...recording.recording_meta, content: recording.recording, }); } }); setRecordings(parsedRows.map((recording) => recording.name)); setRows(parsedRows); } else { console.log("No recordings found."); } } catch (error) { - notify('error', 'Error fetching recordings.'); + notify('error', t('recordingtable.notifications.fetch_error')); console.error('Error fetching recordings: ', error); }🧰 Tools
🪛 Biome (1.9.4)
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
634-656: Enhance dialog accessibility.While the dialog implementation is good, it could benefit from some accessibility improvements.
Apply these enhancements:
<Dialog open={deleteDialogOpen} onClose={handleDeleteCancel} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" + role="alertdialog" > <DialogTitle id="alert-dialog-title"> {t('recordingtable.delete_confirmation.title')} </DialogTitle> <DialogContent> <DialogContentText id="alert-dialog-description"> {t('recordingtable.delete_confirmation.message', { name: recordingName })} </DialogContentText> </DialogContent> <DialogActions> <Button + aria-label={t('recordingtable.delete_confirmation.cancel')} onClick={handleDeleteCancel} color="primary" > {t('recordingtable.delete_confirmation.cancel')} </Button> <Button + aria-label={t('recordingtable.delete_confirmation.confirm')} onClick={handleDeleteConfirm} color="error" autoFocus > {t('recordingtable.delete_confirmation.confirm')} </Button> </DialogActions> </Dialog>
147-156: Improve type safety in recordings mapping.The code uses
anytype and could benefit from proper typing and optional chaining.Apply these improvements:
- recordings.map((recording: any, index: number) => { - if (recording && recording.recording_meta) { - parsedRows.push({ - id: index, - ...recording.recording_meta, - content: recording.recording, - }); - } - }); + interface RecordingData { + recording_meta: { + name: string; + createdAt: string; + updatedAt: string; + params: string[]; + }; + recording: WorkflowFile; + } + + recordings.map((recording: RecordingData, index: number) => { + if (recording?.recording_meta) { + parsedRows.push({ + id: index, + ...recording.recording_meta, + content: recording.recording, + }); + } + });🧰 Tools
🪛 Biome (1.9.4)
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/robot/RecordingsTable.tsx(8 hunks)src/components/run/RunsTable.tsx(5 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/robot/RecordingsTable.tsx
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (5)
src/components/run/RunsTable.tsx (4)
12-17: LGTM! Well-organized imports.The new Material-UI dialog-related imports are properly organized and grouped with other Material-UI imports.
89-90: LGTM! Well-structured state management.The state variables are well-typed and follow React conventions. The naming clearly indicates their purpose.
213-213: LGTM! Proper event handler binding.The
handleDeleteprop correctly passes the row data to the new dialog system.
141-147: Verify deletion API implementation.The deletion confirmation UI is in place, but the actual deletion logic needs to be implemented. Please ensure that:
- The backend API for run deletion is implemented and documented
- The frontend properly handles all possible API response statuses
- The deletion operation is atomic and handles concurrent modifications
Let's verify the API implementation:
src/components/robot/RecordingsTable.tsx (1)
Line range hint
1-75: LGTM! Interface and import changes align with the PR objective.The additions of Dialog-related imports and the
recordingNameproperty toOptionsButtonPropsare appropriate for implementing the confirmation modal feature.
| const handleDeleteClick = (row: Data) => { | ||
| setRunToDelete(row); | ||
| setDeleteDialogOpen(true); | ||
| }; | ||
|
|
||
| const handleDeleteConfirm = () => { | ||
| setRows([]); | ||
| notify('success', t('runstable.notifications.delete_success')); | ||
| fetchRuns(); | ||
| setDeleteDialogOpen(false); | ||
| setRunToDelete(null); | ||
| }; | ||
|
|
||
| const handleDeleteCancel = () => { | ||
| setDeleteDialogOpen(false); | ||
| setRunToDelete(null); |
There was a problem hiding this comment.
Add error handling and improve state management.
The handler functions have several issues that need to be addressed:
handleDeleteConfirmclears all rows unnecessarily before fetching new data- Missing error handling for the deletion operation
- The actual deletion logic is not implemented
Consider this implementation:
const handleDeleteConfirm = async () => {
+ try {
+ if (!runToDelete) return;
+
+ // TODO: Implement the actual deletion API call
+ // await deleteRun(runToDelete.runId);
+
notify('success', t('runstable.notifications.delete_success'));
- setRows([]);
await fetchRuns();
+ } catch (error) {
+ notify('error', t('runstable.notifications.delete_error'));
+ } finally {
setDeleteDialogOpen(false);
setRunToDelete(null);
+ }
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleDeleteClick = (row: Data) => { | |
| setRunToDelete(row); | |
| setDeleteDialogOpen(true); | |
| }; | |
| const handleDeleteConfirm = () => { | |
| setRows([]); | |
| notify('success', t('runstable.notifications.delete_success')); | |
| fetchRuns(); | |
| setDeleteDialogOpen(false); | |
| setRunToDelete(null); | |
| }; | |
| const handleDeleteCancel = () => { | |
| setDeleteDialogOpen(false); | |
| setRunToDelete(null); | |
| const handleDeleteClick = (row: Data) => { | |
| setRunToDelete(row); | |
| setDeleteDialogOpen(true); | |
| }; | |
| const handleDeleteConfirm = async () => { | |
| try { | |
| if (!runToDelete) return; | |
| // TODO: Implement the actual deletion API call | |
| // await deleteRun(runToDelete.runId); | |
| notify('success', t('runstable.notifications.delete_success')); | |
| await fetchRuns(); | |
| } catch (error) { | |
| notify('error', t('runstable.notifications.delete_error')); | |
| } finally { | |
| setDeleteDialogOpen(false); | |
| setRunToDelete(null); | |
| } | |
| }; | |
| const handleDeleteCancel = () => { | |
| setDeleteDialogOpen(false); | |
| setRunToDelete(null); |
| <Dialog | ||
| open={deleteDialogOpen} | ||
| onClose={handleDeleteCancel} | ||
| aria-labelledby="alert-dialog-title" | ||
| aria-describedby="alert-dialog-description" | ||
| > | ||
| <DialogTitle id="alert-dialog-title"> | ||
| Delete Run | ||
| </DialogTitle> | ||
| <DialogContent> | ||
| <DialogContentText id="alert-dialog-description"> | ||
| Are you sure you want to delete the run "{runToDelete?.name}"? This action cannot be undone. | ||
| </DialogContentText> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={handleDeleteCancel} color="primary"> | ||
| Cancel | ||
| </Button> | ||
| <Button onClick={handleDeleteConfirm} color="error" autoFocus> | ||
| Delete | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve accessibility and internationalization.
The Dialog component needs improvements in several areas:
- Hard-coded strings should use translations
- Missing aria-label on the Delete button
- Dialog content could be more descriptive
Apply these improvements:
<Dialog
open={deleteDialogOpen}
onClose={handleDeleteCancel}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
- Delete Run
+ {t('runstable.delete_dialog.title', 'Delete Run')}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
- Are you sure you want to delete the run "{runToDelete?.name}"? This action cannot be undone.
+ {t('runstable.delete_dialog.description', 'Are you sure you want to delete the run "{{name}}"? This action cannot be undone and all associated data will be permanently removed.', { name: runToDelete?.name })}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleDeleteCancel} color="primary">
- Cancel
+ {t('common.cancel', 'Cancel')}
</Button>
<Button
onClick={handleDeleteConfirm}
color="error"
+ aria-label={t('runstable.delete_dialog.delete_aria', 'Delete run {{name}}', { name: runToDelete?.name })}
autoFocus
>
- Delete
+ {t('common.delete', 'Delete')}
</Button>
</DialogActions>
</Dialog>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Dialog | |
| open={deleteDialogOpen} | |
| onClose={handleDeleteCancel} | |
| aria-labelledby="alert-dialog-title" | |
| aria-describedby="alert-dialog-description" | |
| > | |
| <DialogTitle id="alert-dialog-title"> | |
| Delete Run | |
| </DialogTitle> | |
| <DialogContent> | |
| <DialogContentText id="alert-dialog-description"> | |
| Are you sure you want to delete the run "{runToDelete?.name}"? This action cannot be undone. | |
| </DialogContentText> | |
| </DialogContent> | |
| <DialogActions> | |
| <Button onClick={handleDeleteCancel} color="primary"> | |
| Cancel | |
| </Button> | |
| <Button onClick={handleDeleteConfirm} color="error" autoFocus> | |
| Delete | |
| </Button> | |
| </DialogActions> | |
| </Dialog> | |
| <Dialog | |
| open={deleteDialogOpen} | |
| onClose={handleDeleteCancel} | |
| aria-labelledby="alert-dialog-title" | |
| aria-describedby="alert-dialog-description" | |
| > | |
| <DialogTitle id="alert-dialog-title"> | |
| {t('runstable.delete_dialog.title', 'Delete Run')} | |
| </DialogTitle> | |
| <DialogContent> | |
| <DialogContentText id="alert-dialog-description"> | |
| {t('runstable.delete_dialog.description', 'Are you sure you want to delete the run "{{name}}"? This action cannot be undone and all associated data will be permanently removed.', { name: runToDelete?.name })} | |
| </DialogContentText> | |
| </DialogContent> | |
| <DialogActions> | |
| <Button onClick={handleDeleteCancel} color="primary"> | |
| {t('common.cancel', 'Cancel')} | |
| </Button> | |
| <Button | |
| onClick={handleDeleteConfirm} | |
| color="error" | |
| aria-label={t('runstable.delete_dialog.delete_aria', 'Delete run {{name}}', { name: runToDelete?.name })} | |
| autoFocus | |
| > | |
| {t('common.delete', 'Delete')} | |
| </Button> | |
| </DialogActions> | |
| </Dialog> |
| const handleDeleteConfirm = async () => { | ||
| try { | ||
| checkRunsForRecording(recordingName).then((result: boolean) => { | ||
| if (result) { | ||
| notify('warning', t('recordingtable.notifications.delete_warning')); | ||
| setDeleteDialogOpen(false); | ||
| } | ||
| }) | ||
|
|
||
|
|
||
|
|
||
|
|
||
| // Only proceed with deletion if there are no runs | ||
| handleDelete(); | ||
| setDeleteDialogOpen(false); | ||
| notify("success", t("recordingtable.notifications.delete_success")); | ||
| } catch (error) { | ||
| console.error('Error during deletion:', error); | ||
| notify("error", t("recordingtable.notifications.delete_error")); | ||
| setDeleteDialogOpen(false); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Fix potential race condition in deletion logic.
The current implementation has a race condition where handleDelete is called immediately after initiating the run check, without waiting for the result. This could lead to recordings being deleted even when they have associated runs.
Apply this fix:
const handleDeleteConfirm = async () => {
try {
- checkRunsForRecording(recordingName).then((result: boolean) => {
- if (result) {
- notify('warning', t('recordingtable.notifications.delete_warning'));
- setDeleteDialogOpen(false);
- }
- })
-
-
-
-
- // Only proceed with deletion if there are no runs
- handleDelete();
- setDeleteDialogOpen(false);
- notify("success", t("recordingtable.notifications.delete_success"));
+ const hasRuns = await checkRunsForRecording(recordingName);
+ if (hasRuns) {
+ notify('warning', t('recordingtable.notifications.delete_warning'));
+ setDeleteDialogOpen(false);
+ return;
+ }
+
+ await handleDelete();
+ setDeleteDialogOpen(false);
+ notify("success", t("recordingtable.notifications.delete_success"));
} catch (error) {
console.error('Error during deletion:', error);
notify("error", t("recordingtable.notifications.delete_error"));
setDeleteDialogOpen(false);
}
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleDeleteConfirm = async () => { | |
| try { | |
| checkRunsForRecording(recordingName).then((result: boolean) => { | |
| if (result) { | |
| notify('warning', t('recordingtable.notifications.delete_warning')); | |
| setDeleteDialogOpen(false); | |
| } | |
| }) | |
| // Only proceed with deletion if there are no runs | |
| handleDelete(); | |
| setDeleteDialogOpen(false); | |
| notify("success", t("recordingtable.notifications.delete_success")); | |
| } catch (error) { | |
| console.error('Error during deletion:', error); | |
| notify("error", t("recordingtable.notifications.delete_error")); | |
| setDeleteDialogOpen(false); | |
| } | |
| }; | |
| const handleDeleteConfirm = async () => { | |
| try { | |
| const hasRuns = await checkRunsForRecording(recordingName); | |
| if (hasRuns) { | |
| notify('warning', t('recordingtable.notifications.delete_warning')); | |
| setDeleteDialogOpen(false); | |
| return; | |
| } | |
| await handleDelete(); | |
| setDeleteDialogOpen(false); | |
| notify("success", t("recordingtable.notifications.delete_success")); | |
| } catch (error) { | |
| console.error('Error during deletion:', error); | |
| notify("error", t("recordingtable.notifications.delete_error")); | |
| setDeleteDialogOpen(false); | |
| } | |
| }; |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/robot/RecordingsTable.tsx (1)
560-581:⚠️ Potential issueFix race condition in deletion logic.
The current implementation has a race condition where
handleDeleteis called immediately after initiating the run check, without waiting for the result.Apply this fix:
const handleDeleteConfirm = async () => { try { - checkRunsForRecording(recordingName).then((result: boolean) => { - if (result) { - notify('warning', t('recordingtable.notifications.delete_warning')); - setDeleteModalOpen(false); - } - }) - - - - - // Only proceed with deletion if there are no runs - handleDelete(); - setDeleteModalOpen(false); - notify("success", t("recordingtable.notifications.delete_success")); + const hasRuns = await checkRunsForRecording(recordingName); + if (hasRuns) { + notify('warning', t('recordingtable.notifications.delete_warning')); + setDeleteModalOpen(false); + return; + } + + await handleDelete(); + setDeleteModalOpen(false); + notify("success", t("recordingtable.notifications.delete_success")); } catch (error) { console.error('Error during deletion:', error); notify("error", t("recordingtable.notifications.delete_error")); setDeleteModalOpen(false); } };
🧹 Nitpick comments (4)
public/locales/en.json (1)
507-510: Remove trailing whitespace and empty linesThere are unnecessary empty lines at the end of the file.
} - - - - }src/components/robot/RecordingsTable.tsx (3)
144-167: Enhance error handling with more descriptive messages.The error handling is good, but the error messages could be more specific to help users understand and troubleshoot issues better.
- notify('error', 'Error fetching recordings.'); + notify('error', t('recordingtable.notifications.fetch_error')); - console.error('Error fetching recordings: ', error); + console.error('[RecordingsTable] Failed to fetch recordings:', error); - notify('error', 'Error stopping recording. Please try again later.'); + notify('error', t('recordingtable.notifications.stop_recording_error')); - console.error('Error stopping recording', error); + console.error('[RecordingsTable] Failed to stop recording:', error);Also applies to: 171-177
🧰 Tools
🪛 Biome (1.9.4)
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
543-543: Remove unused state and handler.The
deleteDialogOpenstate and its handlerhandleDeleteCancelare not being used anywhere in the code.- const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false); - const handleDeleteCancel = () => { - setDeleteDialogOpen(false); - };Also applies to: 583-585
148-156: Improve null safety with optional chaining.The current implementation could be improved using optional chaining to handle potential null values more elegantly.
- recordings.map((recording: any, index: number) => { - if (recording && recording.recording_meta) { - parsedRows.push({ - id: index, - ...recording.recording_meta, - content: recording.recording, - }); - } - }); + recordings.map((recording: any, index: number) => { + recording?.recording_meta && parsedRows.push({ + id: index, + ...recording.recording_meta, + content: recording.recording, + }); + });🧰 Tools
🪛 Biome (1.9.4)
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
public/locales/de.json(1 hunks)public/locales/en.json(1 hunks)public/locales/es.json(1 hunks)public/locales/ja.json(1 hunks)public/locales/zh.json(1 hunks)src/components/robot/RecordingsTable.tsx(8 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/robot/RecordingsTable.tsx
[error] 149-149: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (6)
public/locales/en.json (1)
46-51: LGTM! Well-structured delete confirmation dialog.The confirmation message is clear, includes the recording name, and warns about the irreversible nature of the action.
public/locales/es.json (1)
46-50: LGTM! Accurate Spanish translation.The Spanish translation is grammatically correct and maintains the same meaning as the English version while following natural Spanish language conventions.
public/locales/de.json (1)
45-49: LGTM! Proper German translation with consistent formal tone.The German translation is accurate, maintains formality with "Sie", and follows German language conventions for confirmation dialogs.
public/locales/ja.json (1)
46-50: LGTM! Natural Japanese translation with appropriate formality.The Japanese translation maintains proper keigo (polite language) and follows Japanese UI conventions for confirmation dialogs.
public/locales/zh.json (2)
46-50: LGTM! Clear and natural Chinese translation.The Chinese translation is accurate and follows Chinese UI conventions for confirmation dialogs.
Line range hint
1-1: Overall excellent implementation of localized delete confirmations!The implementation demonstrates attention to detail in several aspects:
- Consistent structure across all language files
- Appropriate formality levels for each language
- Natural translations that follow each language's UI conventions
- Good integration with existing delete-related notifications
The only issues found were:
- A typo in the English registration error message
- Some formatting cleanup needed in the English file
| "register_prompt": "Already have an account?", | ||
| "login_link": "Login", | ||
| "welcome_notification": "Welcome to Maxun!", | ||
| "error_notification": "Registeration Failed. Please try again." |
There was a problem hiding this comment.
Fix typo in error message
"Registeration" should be "Registration".
- "error_notification": "Registeration Failed. Please try again."
+ "error_notification": "Registration Failed. Please try again."📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "error_notification": "Registeration Failed. Please try again." | |
| "error_notification": "Registration Failed. Please try again." |
amhsirak
changed the title
Summary by CodeRabbit
New Features
Bug Fixes
Documentation