Skip to content

Collect feedback deactivation#1919

Merged
Crabcyborg merged 26 commits into
masterfrom
collect-feedback-deactivation
Oct 1, 2024
Merged

Collect feedback deactivation#1919
Crabcyborg merged 26 commits into
masterfrom
collect-feedback-deactivation

Conversation

@truongwp
Copy link
Copy Markdown
Contributor

@truongwp truongwp commented Aug 15, 2024

@truongwp truongwp added run analysis deploy Deploy website on push labels Aug 15, 2024
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Aug 15, 2024

Walkthrough

The recent updates introduce a new controller, FrmDeactivationFeedbackController, along with a JavaScript file, deactivation-feedback.js, to manage user feedback during plugin deactivation within the Formidable framework. This includes functionality for checking if the current screen is the plugins page, conditionally enqueuing necessary assets, and rendering a modal interface for user interaction. Additionally, the versioning of the plugin has been updated to reflect the new feedback collection feature.

Changes

Files Change Summary
classes/controllers/FrmDeactivationFeedbackController.php, js/admin/deactivation-feedback.js Introduced a new controller and JavaScript file for managing feedback during plugin deactivation, including modal rendering and conditional asset enqueuing.
css/admin/deactivation-feedback.css Added styling for the modal interface related to user deactivation feedback, enhancing visual presentation and accessibility.
formidable.php Updated the version number to 6.14.1-collect-feedback-on-deactivation to reflect the addition of feedback collection functionality.
classes/controllers/FrmHooksController.php Added actions to register methods in the new controller for handling plugin deactivation feedback, improving the integration of feedback mechanisms.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI
    participant API
    participant Modal

    User->>UI: Clicks on Deactivate
    UI->>Modal: Open Deactivation Modal
    Modal->>API: Fetch Deactivation Feedback HTML
    API-->>Modal: Return Feedback HTML
    Modal->>UI: Display Feedback Form
    User->>Modal: Submit Feedback
    Modal->>API: Send Feedback Submission
    API-->>Modal: Confirmation Response
    Modal->>UI: Close Modal
Loading

Possibly related PRs

  • Prepare for 6.11 #1818: The FrmHooksController class was modified to include actions that directly call methods from the FrmDeactivationFeedbackController, establishing a clear connection to the main PR's functionality related to plugin deactivation feedback.
  • Add changelog for v6.11.1 #1852: The changelog for version 6.11.1 mentions updates to modal close icons, which relates to the user interface improvements introduced in the main PR's modal for deactivation feedback.
  • Start working on readme/changelog for v6.14 #1969: The changelog for version 6.14 includes enhancements that may relate to user experience improvements, similar to the feedback modal introduced in the main PR, although it is more general in nature.

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?

❤️ 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.
    • Generate unit testing code for this file.
    • 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 generate unit testing code for this file.
    • @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 generate unit testing code.
    • @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.

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 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
Copy Markdown
Contributor

@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: 2

Outside diff range, codebase verification and nitpick comments (1)
classes/controllers/FrmFormsController.php (1)

1194-1194: Consider removing or documenting commented-out code.

The commented-out error_log statement is intended for debugging. If it's no longer needed, consider removing it to keep the code clean. Otherwise, add a comment explaining its purpose.

Comment thread classes/controllers/FrmFormsController.php Outdated
Comment thread js/admin/deactivation-feedback.js
Copy link
Copy Markdown
Contributor

@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: 2

Comment thread js/admin/deactivation-feedback.js
Comment thread js/admin/deactivation-feedback.js
@truongwp truongwp requested review from garretlaxton and removed request for garretlaxton August 15, 2024 16:35
Copy link
Copy Markdown
Contributor

@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

Outside diff range, codebase verification and nitpick comments (1)
js/admin/deactivation-feedback.js (1)

21-48: Consider externalizing dialog configuration.

To enhance maintainability, consider externalizing the dialog configuration options into a separate configuration object or file. This approach can simplify updates and provide a centralized location for UI settings.

// Example configuration object
const dialogConfig = {
  dialogClass: 'frm-dialog',
  modal: true,
  autoOpen: false,
  closeOnEscape: true,
  width: '550px',
  resizable: false,
  draggable: false,
  open: function() {
    // existing open logic
  },
  close: function() {
    // existing close logic
  }
};

// Usage
$info.dialog(dialogConfig);

@garretlaxton
Copy link
Copy Markdown

I feel like there should be a Yes or No option when we ask if they want to contact support.
image

The success message overlaps the Formidable icon.
image

Copy link
Copy Markdown
Contributor

@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

Outside diff range, codebase verification and nitpick comments (1)
js/admin/deactivation-feedback.js (1)

92-105: Improve error handling for fetch response.

Consider providing user feedback in the UI when an error occurs during the fetch request to enhance user experience.

 .catch( error => {
   console.error( error );
+  alert('An error occurred while fetching the feedback form. Please try again later.');
 });

Copy link
Copy Markdown
Contributor

@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: 1

Outside diff range, codebase verification and nitpick comments (1)
js/admin/deactivation-feedback.js (1)

2-2: Remove redundant 'use strict' directive.

The 'use strict' directive is redundant in ES6 modules as they are in strict mode by default.

Apply this diff to remove the directive:

-	'use strict';
Tools
Biome

[error] 2-2: Redundant use strict directive.

The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.

(lint/suspicious/noRedundantUseStrict)

Comment thread js/admin/deactivation-feedback.js
@truongwp
Copy link
Copy Markdown
Contributor Author

Thanks @garretlaxton. I will fix the icon error.
I discussed with Dalton and decided to show this popup once every 6 months. Maybe I will update that time to 1 hour or less so you can test it more easily. I will tell you when it's done.

@truongwp
Copy link
Copy Markdown
Contributor Author

truongwp commented Aug 23, 2024

@garretlaxton I fixed the icon issue.

Now the form will show once in 1 day. Please test it again.

Copy link
Copy Markdown

@garretlaxton garretlaxton left a comment

Choose a reason for hiding this comment

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

Thanks, this works great now!

@truongwp truongwp requested a review from Crabcyborg August 28, 2024 23:24
Comment thread classes/controllers/FrmDeactivationFeedbackController.php Outdated
Copy link
Copy Markdown
Contributor

@Crabcyborg Crabcyborg left a comment

Choose a reason for hiding this comment

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

This all looks great!

I haven't tested this yet but I will soon and merge this for next release. I plan to wait a day or two in case something gets reported in version 6.14 that needs a patch.

I left one comment about moving the CSS into a file. That's optional. I think we're fine merging this as-is.

🚀

@truongwp
Copy link
Copy Markdown
Contributor Author

@Crabcyborg Do not merge this before we update the expired time of the popup. Laura is also testing this.

@lauramekaj1
Copy link
Copy Markdown
Contributor

Hi @truongwp, I have done some testing on the deactivation feedback popup and here are some findings if you can review them!

  1. If I expand the input text field, the whole modal expands and making it impossible to click on the buttons. Maybe it would be good to have a scroll also on the modal itself! (https://imgur.com/PUEQBgh).
    1.1 Also, if I select other options and then go back to the option where I expanded the field, the text will be erased but the field will remain expanded as it previously was. Should it also go back to the initial size? (https://imgur.com/VyOoujj)
  2. If I click Submit&Deactivate, the red border on the input text field just keeps showing whenever I click the button and does not remain red until I do an outside click on the modal. Here is the screen recording:(https://www.loom.com/share/6048c3b1d2b246cfa33b4dbb92ff146f?sid=6d694272-11a1-491a-aad2-b4c6e2859a23).
    Maybe if you also agree, I think it would be better to show a message like "Please provide a reason!" just to let the users know that those are required fields which need to be filled!

@truongwp
Copy link
Copy Markdown
Contributor Author

Thanks @lauramekaj1. I fixed those problems in the feedback form. You won't need to update the code to test again.

For the 1st: Should it also go back to the initial size?: This is hard, I think we will keep it as is.
For the 2nd, users should be able to submit the form with those inputs blank. Only if no radio option is selected, it will show an error message. I updated the message.

Copy link
Copy Markdown
Contributor

@Crabcyborg Crabcyborg left a comment

Choose a reason for hiding this comment

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

I'll test this before I release it tomorrow.

But I'll go ahead and merge this now. It all looks good to me.

Thanks @truongwp, @garretlaxton, and @lauramekaj1 for working on this!

🙌

@Crabcyborg Crabcyborg added this to the 6.15 milestone Oct 1, 2024
Copy link
Copy Markdown
Contributor

@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

🧹 Outside diff range and nitpick comments (1)
classes/controllers/FrmHooksController.php (1)

202-205: LGTM! Consider grouping related hooks for better organization.

The addition of deactivation feedback hooks is well-implemented and follows the existing coding conventions. The use of standard WordPress hooks ensures compatibility.

For improved code organization, consider grouping these related hooks together at the beginning of the load_admin_hooks method, just after the add_action( 'admin_menu', 'FrmAppController::menu', 1 ); line. This would make it easier to locate and manage all deactivation-related functionality in one place.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 028896c and e83be1b.

📒 Files selected for processing (1)
  • classes/controllers/FrmHooksController.php (1 hunks)

Copy link
Copy Markdown
Contributor

@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: 2

🧹 Outside diff range and nitpick comments (1)
classes/controllers/FrmDeactivationFeedbackController.php (1)

60-60: Consider storing expiration date with time to avoid unintended early expiration

Currently, the expiration date is stored using only the date in 'Y-m-d' format, which defaults the time to midnight when parsed with strtotime(). This may result in the feedback being considered expired at the very start of the expiration day. If the intended behavior is to expire after exactly 24 hours, consider storing the full datetime to capture the precise expiration moment.

Apply this diff to store the full datetime:

- update_option( 'frm_feedback_expired', gmdate( 'Y-m-d', strtotime( '+ 1 day' ) ) );
+ update_option( 'frm_feedback_expired', gmdate( 'Y-m-d H:i:s', strtotime( '+1 day' ) ) );

Then, adjust the feedback_is_expired() method to handle the datetime format appropriately.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between e83be1b and 66df33f.

📒 Files selected for processing (1)
  • classes/controllers/FrmDeactivationFeedbackController.php (1 hunks)
🔇 Additional comments (3)
classes/controllers/FrmDeactivationFeedbackController.php (3)

110-129: HTML output is properly escaped and structured

The HTML output in the footer_html() method is well-structured, and appropriate escaping functions like esc_attr_e() and esc_url() are used to ensure security.


1-131: Overall code implementation looks solid

The FrmDeactivationFeedbackController class is well-designed, with clear method definitions handling the plugin deactivation feedback functionality effectively.


90-90: Verify script handle in localize_script method

In the enqueue_assets() method, you are calling FrmAppHelper::localize_script( 'front' );. Please confirm that 'front' is the correct script handle for localization in this context. If you intend to localize the 'frm-deactivation-feedback' script, you may need to adjust the handle accordingly.

You can run the following script to check the script handles used in localize_script calls:

Comment thread classes/controllers/FrmDeactivationFeedbackController.php
Comment thread classes/controllers/FrmDeactivationFeedbackController.php
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants