Skip to content

feat: add confirmation dialog before uploading diagnostics#11

Merged
dkaser merged 1 commit intomainfrom
alert
Jul 3, 2025
Merged

feat: add confirmation dialog before uploading diagnostics#11
dkaser merged 1 commit intomainfrom
alert

Conversation

@dkaser
Copy link
Owner

@dkaser dkaser commented Jul 3, 2025

Summary by CodeRabbit

  • New Features

    • Added a confirmation dialog before uploading diagnostics data, with improved feedback on upload success or failure.
    • Users now see a spinner during uploads and receive clear status updates, including diagnostic IDs on success.
  • Localization

    • Updated translations across all supported languages to include new messages and prompts related to diagnostics upload.
    • Replaced previous usage data consent texts with new diagnostic upload interaction messages for a more focused user experience.

@coderabbitai
Copy link

coderabbitai bot commented Jul 3, 2025

Walkthrough

The changes introduce a SweetAlert2 confirmation dialog for uploading diagnostics data, updating the upload function to handle user confirmation, display status messages, and manage errors. Localization files for multiple languages were updated, removing usage data consent messages and adding new keys for diagnostic upload prompts, confirmations, errors, and UI labels.

Changes

File(s) Change Summary
src/usr/local/emhttp/plugins/plugin-diagnostics/include/Pages/Main.php Added SweetAlert2 confirmation dialog to diagnostics upload, updated upload function signature and logic, included SweetAlert2.
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/en_US.json Added new English localization keys for diagnostic upload prompts, confirmations, errors, and UI labels.
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/de_DE.json
.../es_ES.json
.../fr_FR.json
.../it_IT.json
.../ja_JP.json
.../ko_KR.json
.../nl_NL.json
.../no_NO.json
.../pl_PL.json
.../pt_BR.json
.../pt_PT.json
.../sv_SE.json
.../uk_UA.json
.../zh_CN.json
Removed "metrics" (usage data consent) objects; added new keys for diagnostic upload interactions (success, prompt, error, UI labels) in respective languages.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Browser
    participant SweetAlert2
    participant Server

    User->>Browser: Click "Upload Diagnostics" button
    Browser->>SweetAlert2: Show confirmation dialog (upload_prompt)
    SweetAlert2-->>Browser: User confirms or cancels
    alt User cancels
        Browser->>Browser: Abort upload, log cancellation
    else User confirms
        Browser->>Browser: Show spinner
        Browser->>Server: POST diagnostics data
        Server-->>Browser: Respond with JSON (success or error)
        alt Success
            Browser->>SweetAlert2: Show success dialog with diagnostic ID
            Browser->>Browser: Update status div
        else Error
            Browser->>SweetAlert2: Show error dialog
            Browser->>Browser: Hide spinner, log error
        end
    end
Loading

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (9)
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/de_DE.json (1)

11-12: Add a trailing space after “ID:” for clean concatenation

At runtime the identifier is appended directly after this string.
Without a trailing space, users will see “ID:1234” instead of “ID: 1234”.

-"diag_success": "Diagnosedaten erfolgreich hochgeladen. ID:",
+"diag_success": "Diagnosedaten erfolgreich hochgeladen. ID: ",
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/uk_UA.json (3)

3-4: Differentiate “download” vs “upload” verbs

Both keys are currently translated as “Завантажити”, which can confuse users.
Common UA wording:

  • download → «Завантажити»
  • upload → «Надіслати» or «Вивантажити»

Consider adjusting the “upload” value for clarity.


13-14: Grammar tweak: plural noun requires “будуть”

“дані” is plural, so the prompt should read «дані будуть завантажені».

-"Ваші діагностичні дані буде завантажено на наступний сайт для аналізу. Ви впевнені, що хочете продовжити?"
+"Ваші діагностичні дані будуть завантажені на наступний сайт для аналізу. Ви впевнені, що хочете продовжити?"

11-12: Insert a space after “ID:”

Same usability concern as in other locales.

-"diag_success": "Діагностику успішно завантажено. ID:",
+"diag_success": "Діагностику успішно завантажено. ID: ",
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/en_US.json (1)

11-12: Minor UX polish – add a space after “ID:”

-"diag_success": "Diagnostics uploaded successfully. ID:",
+"diag_success": "Diagnostics uploaded successfully. ID: ",
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/nl_NL.json (1)

11-12: Add space after “ID:”

-"diag_success": "Diagnostische gegevens succesvol geüpload. ID:",
+"diag_success": "Diagnostische gegevens succesvol geüpload. ID: ",
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/es_ES.json (1)

11-12: Insert space after “ID:”

-"diag_success": "Diagnósticos subidos correctamente. ID:",
+"diag_success": "Diagnósticos subidos correctamente. ID: ",
src/usr/local/emhttp/plugins/plugin-diagnostics/include/Pages/Main.php (1)

110-115: Remove empty script tags.

These empty script tags serve no purpose and should be removed to keep the code clean.

-<script>
-
-</script>
-

-
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/zh_CN.json (1)

11-18: Unify terminology: use “诊断文件” consistently across all keys

Earlier keys (upload_desc, download_desc) use “诊断文件”, while the newly-added strings switch to “诊断信息”. Mixing the two may confuse end-users. Recommend standardising on “诊断文件” to match existing UI copy:

-"diag_success": "诊断信息上传成功。编号:",
+"diag_success": "诊断文件上传成功。编号:",

-"upload_prompt": "您的诊断信息将被上传到以下网站以进行分析。您确定要继续吗?",
+"upload_prompt": "您的诊断文件将被上传到以下网站进行分析。您确定要继续吗?",

-"send_diagnostics": "发送诊断信息",
+"send_diagnostics": "发送诊断文件",

-"upload_error_msg": "上传诊断信息时发生错误。请稍后再试。",
+"upload_error_msg": "上传诊断文件时发生错误。请稍后再试。",

Minor wording tweak (“进行分析” instead of “以进行分析”) makes the sentence slightly more natural.
Please review with other locale maintainers for consistency.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 89db27f and 0ef1886.

⛔ Files ignored due to path filters (1)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/assets/sweetalert2.all.min.js is excluded by !**/*.min.js
📒 Files selected for processing (16)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/include/Pages/Main.php (3 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/de_DE.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/en_US.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/es_ES.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/fr_FR.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/it_IT.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/ja_JP.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/ko_KR.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/nl_NL.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/no_NO.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/pl_PL.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/pt_BR.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/pt_PT.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/sv_SE.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/uk_UA.json (1 hunks)
  • src/usr/local/emhttp/plugins/plugin-diagnostics/locales/zh_CN.json (1 hunks)
🔇 Additional comments (13)
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/no_NO.json (1)

11-18: LGTM! Norwegian localization keys properly support the new diagnostic upload feature.

The added localization keys are well-structured and provide appropriate Norwegian translations for the new SweetAlert2 confirmation dialogs and status messages.

src/usr/local/emhttp/plugins/plugin-diagnostics/locales/ko_KR.json (1)

11-18: LGTM! Korean localization keys properly support the new diagnostic upload feature.

The added localization keys provide appropriate Korean translations for the diagnostic upload confirmation dialogs and feedback messages.

src/usr/local/emhttp/plugins/plugin-diagnostics/include/Pages/Main.php (4)

39-39: LGTM! SweetAlert2 library properly included.

The SweetAlert2 library is included from the local plugin assets directory, which is appropriate for this functionality.


68-81: LGTM! User confirmation properly implemented.

The SweetAlert2 confirmation dialog correctly prompts the user before uploading and handles cancellation appropriately with early return.


83-106: LGTM! Proper async/await implementation with error handling.

The function correctly:

  • Shows/hides loading spinner
  • Uses async/await for the upload request
  • Parses JSON response safely
  • Provides user feedback via SweetAlert2 dialogs
  • Logs errors to console for debugging

The error handling appropriately catches exceptions and provides meaningful feedback to users.


55-55: Ensure XSS protection for the upload URL parameter

The onclick handler wraps the URL in htmlspecialchars(), which escapes HTML special characters (e.g. &, <, >, "), preventing injection in the attribute context. To complete verification:

  • Confirm that all upload URL values in your plugin’s configuration files are validated and originate from trusted sources.
  • If those URLs can be influenced by end-users or external inputs, add server-side checks (e.g. allow-lists or URL­­validation routines) before they’re output.
src/usr/local/emhttp/plugins/plugin-diagnostics/locales/it_IT.json (1)

11-18: LGTM! Italian localization keys properly support the new diagnostic upload feature.

The added localization keys provide appropriate Italian translations for the diagnostic upload confirmation dialogs and status messages.

src/usr/local/emhttp/plugins/plugin-diagnostics/locales/pl_PL.json (1)

11-18: LGTM! Polish localization keys properly support the new diagnostic upload feature.

The added localization keys provide appropriate Polish translations for the diagnostic upload confirmation dialogs and feedback messages.

src/usr/local/emhttp/plugins/plugin-diagnostics/locales/pt_BR.json (1)

11-18: Add a trailing space after the colon to avoid “ID:123” concatenation.

The value for diag_success ends with ID: without a space.
If the code concatenates the actual identifier directly after this string, the
result will read ID:123 instead of ID: 123.

-    "diag_success": "Diagnósticos enviados com sucesso. ID:",
+    "diag_success": "Diagnósticos enviados com sucesso. ID: ",

[ suggest_nitpick ]
[ request_verification ]
Please double-check how the identifier is interpolated in uploadDiagnostics()—if the code already
injects its own preceding space, keep the original string.

src/usr/local/emhttp/plugins/plugin-diagnostics/locales/sv_SE.json (1)

11-18: Consistent spacing after “ID:”

Same spacing issue as pt_BR: append a space after the colon unless
the runtime formatter inserts it for you.

-    "diag_success": "Diagnostik har laddats upp. ID:",
+    "diag_success": "Diagnostik har laddats upp. ID: ",

[ suggest_nitpick ]
[ request_verification ]

src/usr/local/emhttp/plugins/plugin-diagnostics/locales/pt_PT.json (1)

11-18: Uniform key casing: diag_success vs. upload_success

All locales introduce both diag_success and upload_success. Verify that
the UI uses only one of these keys; otherwise users may see a fallback to the
default language.

If only one is required, drop the unused key across all locale files.
[ request_verification ]
[ suggest_optional_refactor ]

src/usr/local/emhttp/plugins/plugin-diagnostics/locales/fr_FR.json (1)

11-18: HTML entity embedded in a text string may surface literally.

"ID&nbsp;:" contains a non-breaking-space entity.
SweetAlert2’s text parameter does not parse HTML, so the user will see
ID&nbsp;:. Use a literal NBSP or a regular space instead.

-    "diag_success": "Diagnostics téléchargés avec succès. ID&nbsp;:",
+    "diag_success": "Diagnostics téléchargés avec succès. ID :",

(The NBSP above is a real U+00A0 character.)

[ raise_critical_issue ]

src/usr/local/emhttp/plugins/plugin-diagnostics/locales/ja_JP.json (1)

11-18: Minor punctuation consistency

Japanese string ends with ID: whereas other Japanese UI strings tend to use
ID: (full-width colon). Consider local typographic convention.

-    "diag_success": "診断情報のアップロードが完了しました。ID:",
+    "diag_success": "診断情報のアップロードが完了しました。ID:",

[ suggest_nitpick ]

@dkaser dkaser merged commit 70180d6 into main Jul 3, 2025
5 checks passed
@dkaser dkaser deleted the alert branch July 3, 2025 02:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant