Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: [M3-7433] - Query Key Factory for Images #10302

Conversation

bnussman-akamai
Copy link
Member

@bnussman-akamai bnussman-akamai commented Mar 20, 2024

Description 📝

  • Updates Image related queries to use the new query key factory pattern 🏭
  • Updates images queries and mutations to use latest patterns 🎉
  • Improves images event handler (this should fix rate limiting issues I observed months ago in the e2e tests @jdamore-linode)
  • Fixes bug where you'd have to manually refresh the page to see an uploaded image transition from processing to ready 🐛

How to test 🧪

  • Test all image related features of Cloud Manager
    • Image Selection on Linode Create Flows
    • Images Landing
    • Image Upload
    • Image Creation
  • Verify the images landing page works as expected

As an Author I have considered 🤔

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@bnussman-akamai bnussman-akamai added the React Query Relating to the transition to use React Query label Mar 20, 2024
@bnussman-akamai bnussman-akamai self-assigned this Mar 20, 2024
@bnussman-akamai bnussman-akamai requested a review from a team as a code owner March 20, 2024 18:54
@bnussman-akamai bnussman-akamai requested review from cpathipa and abailly-akamai and removed request for a team March 20, 2024 18:54
Copy link

github-actions bot commented Mar 20, 2024

Coverage Report:
Base Coverage: 81.5%
Current Coverage: 81.5%

@bnussman-akamai bnussman-akamai requested a review from a team as a code owner March 20, 2024 19:25
@bnussman-akamai bnussman-akamai requested review from cliu-akamai and removed request for a team March 20, 2024 19:25
export const isInProgressEvent = (event: Event) => {
const { percent_complete } = event;
if (percent_complete === null || isLongPendingEvent(event)) {
Copy link
Member Author

Choose a reason for hiding this comment

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

We were not considering image_upload an in progress event, which caused us to not poll for it. We probably did this in the past to poll less when an upload was happening but we must this event so that an image upload can transition from Processing to Ready without the user needing to refresh the page.

The change basically removes the special logic for image_upload to improve UX

Copy link
Contributor

@abailly-akamai abailly-akamai left a comment

Choose a reason for hiding this comment

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

Looks good! Did not notice any regression

Events look good too:

Screenshot 2024-03-21 at 16 32 39

unrelated, this upload image Browse file button seems to not be doing anything (can still drop a file in)

Screenshot 2024-03-21 at 16 25 17

@bnussman-akamai bnussman-akamai added the Add'tl Approval Needed Waiting on another approval! label Mar 22, 2024
@bnussman-akamai
Copy link
Member Author

I wasn't able to replicate the Browse Files issue @abailly-akamai

@mjac0bs
Copy link
Contributor

mjac0bs commented Mar 22, 2024

I wasn't able to replicate the Browse Files issue @abailly-akamai

In prod, I've noticed I can replicate this with OBJ as well as Upload Image.

Screen.Recording.2024-03-22.at.9.46.42.AM.mov

@bnussman-akamai
Copy link
Member Author

Screen.Recording.2024-03-22.at.1.18.53.PM.mov
Screen.Recording.2024-03-22.at.1.20.04.PM.mov

@mjac0bs @abailly-akamai I'm confused

@mjac0bs
Copy link
Contributor

mjac0bs commented Mar 22, 2024

@bnussman-akamai Seems to be just Chrome. Just tested Safari and Firefox and had no issues. 😅 Not sure what's going on... but I can create a ticket.

Edit: wait, you were in chrome above, not safari, weren't you?

Edit, edit: OH. Chrome was slightly out of date. cc @abailly-akamai - if you're not on
Version 123.0.6312.59 (Official Build) (arm64), try that? The file browser opens for me now.

Screen.Recording.2024-03-22.at.10.32.20.AM.mov

@abailly-akamai
Copy link
Contributor

@mjac0bs maybe we can create a ticket to take a look at this indeed. In any case it shouldn't block this ticket.

Copy link
Contributor

@mjac0bs mjac0bs left a comment

Choose a reason for hiding this comment

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

✅ All image create/upload/edit/delete actions from Images landing, table sorting, events, and Linode Create > Image flow seemed to be working as expected with the new query keys.

As far as the Browse Files button: possibly one of the packages we use for the upload component is incompatible with outdated Chrome. I don't know if this is a persistent issue with out-of-date Chrome and therefore if this is really worth investigating, but I created M3-7931 so it's in the backlog if the issue arises again or we want to look into if improvements are possible.

@mjac0bs mjac0bs added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Mar 26, 2024
@bnussman-akamai bnussman-akamai merged commit d0a3af5 into linode:develop Mar 26, 2024
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge! React Query Relating to the transition to use React Query
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants