refactor: dashboard optimization status #967
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds interactive functionality to the optimization status dashboard, allowing users to directly enable/disable features and navigate to settings. The changes introduce button controls for managing optimization features like image handling, smart lazy-loading, and image scaling.
- Adds interactive buttons to optimization status items for direct feature control
- Implements logic to handle feature dependencies and state management
- Integrates navigation to settings page for image handling configuration
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| inc/admin.php | Adds new localized strings for button labels (disable, enable, manage, block) |
| assets/src/dashboard/parts/connected/index.js | Passes additional props to Sidebar component for state management |
| assets/src/dashboard/parts/connected/Sidebar.js | Updates Sidebar to pass state management props to OptimizationStatus |
| assets/src/dashboard/parts/connected/OptimizationStatus.js | Major refactor adding interactive buttons and feature toggle logic |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| } | ||
|
|
||
| if ( 'scale' === status.settingType ) { | ||
| status.active = ! status.active; |
There was a problem hiding this comment.
Mutating the status.active property directly modifies the original array item, which can cause unexpected behavior in React. This mutation should be avoided as it modifies the state outside of React's state management system.
| status.active = ! status.active; | |
| // Do not mutate status.active directly; handled by directUpdate below. |
Copilot uses AI. Check for mistakes.
| 'statusSubTitle1' => __( 'All images are optimized automatically', 'optimole-wp' ), | ||
| 'statusTitle2' => __( 'Smart Lazy-Loading', 'optimole-wp' ), | ||
| 'statusSubTitle2' => __( 'Images load as visitors scroll', 'optimole-wp' ), | ||
| 'statusTitle3' => __( 'Image Scalling', 'optimole-wp' ), |
There was a problem hiding this comment.
The word 'Scalling' should be 'Scaling' (single 'l').
| 'statusTitle3' => __( 'Image Scalling', 'optimole-wp' ), | |
| 'statusTitle3' => __( 'Image Scaling', 'optimole-wp' ), |
Copilot uses AI. Check for mistakes.
|
@ineagu, if the Image Handling is disabled, lazy loading and scaling are no longer available. How should the flow be in this case? Currently, if Snippet from the video |
|
In the UI you showed, I won't show Block there, but we can simply leave that part empty, it's clear from the x icon on the left that they are disabled and you can't do anything |
All Submissions:
Changes proposed in this Pull Request:
The user can now interact with the optimization status dashboard using:
Recording.8.mp4
Closes https://github.com/Codeinwp/optimole-service/issues/1490
Other information: