Studio: Show sync selection size (e.g. 1.2 GB / 2 GB) in site push dialog #2125
Conversation
| trackColor?: string; | ||
| }; | ||
|
|
||
| export function TwoColorProgressBar( { |
There was a problem hiding this comment.
I tried to achieve this with ProgressBar but that component is too simple so I opted for this custom simple implementation.
|
|
||
| const getBottomPadding = () => { | ||
| if ( type === 'pull' ) { | ||
| return 'pb-[70px]'; // Original padding for pull |
There was a problem hiding this comment.
I left these comments for the ease of reading the function. They could be removed if they seem self-explanatory
| </div> | ||
| ) } | ||
| { type === 'push' && isPushSelectionOverLimit && ( | ||
| <Notice status="warning" isDismissible={ false } className="mb-4"> |
There was a problem hiding this comment.
I left the notice as warning even though the designs had it in blue. I tried the info version and this is what it looked like:
To me it looked a bit too pale to be well noticed but we can change it if that's the preference.
📊 Performance Test ResultsComparing ced4f24 vs trunk site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change |
@katinthehatsite the bar looks great. What if we added 2 GB on the right and changed 0 bytes to 0 B, to make it consistent with elements used in the Hosting Dashboard? |
@wojtekn this should be taken care of, let me know what you think |
|
@katinthehatsite I haven't reviewed the code, but the UI looks great. I just noticed one bug, as it looks it takes into the account everything even when I select one file? 
|
…ze-display-for-sync
sejas
left a comment
sejas
left a comment
There was a problem hiding this comment.
Works pretty good. Thanks for adding the progress bar showing the size of file selection.
I found the issue mentioned by Wojtek. The calculation only goes two levels deep, so for uploads it shows the total of the folder. I'll commit the fix to this branch.
sejas
left a comment
sejas
left a comment
There was a problem hiding this comment.
I confirm it shows the size of a selected file with B bytes.
It also counts the individual elements.
And it displays the warning when the selection is over the limit.
|
Nice, thanks for making adjustments and bringing this PR over the finish line ❤️ |
Related issues
Closes STU-908
Proposed Changes
This PR adds the bar that displays the size of the Studio site when the user is trying to perform the
Pushoperation:If the size is over the limit, the user is seeing the following warning:
Testing Instructions
cd wp-content/uploadsanddd if=/dev/zero of=dummyfile.dat bs=1M count=2048to inflate the site size if needed)SynctabPushoption to open the sync dialogPre-merge Checklist