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

feat: [M3-8103] - Refactor Image Create and Add Tags #10471

Merged

Conversation

bnussman-akamai
Copy link
Contributor

@bnussman-akamai bnussman-akamai commented May 15, 2024

Description πŸ“

Refactors the Image Create page and adds the ability to add tags during creation. This PR does not touch the upload page. These changes will not be feature flagged.

Changes πŸ”„

  • Completely refactored the Image Create page to use react-hook-form ✏️
  • Added tags input to the Image Create flow 🏷️
  • Implements new UI and copy according the Figma mockup 🎨
  • Improves cypress tests for Image creation πŸ§ͺ
    • I added one spec that is 100% mocked data and another spect that is 100% real API requests (cc @jdamore-linode)

Preview πŸ“·

Before After
Screenshot 2024-05-14 at 7 52 30β€―PM Screenshot 2024-05-14 at 7 52 42β€―PM

How to test πŸ§ͺ

  • Test creating an Image πŸ’Ύ
  • Using the "Network" tab of dev tools, verify the payload looks correct (includes tags) 🌏
  • Test validation on the Image Create form β˜‘οΈ
  • Test the Image Create page as a restricted user πŸ‘€
  • Verify there are no breaking changes ⛓️‍πŸ’₯

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 Images Relating to Images label May 15, 2024
@bnussman-akamai bnussman-akamai marked this pull request as ready for review May 15, 2024 13:40
@bnussman-akamai bnussman-akamai requested review from a team as code owners May 15, 2024 13:40
@bnussman-akamai bnussman-akamai requested review from jdamore-linode, dwiley-akamai and AzureLatte and removed request for a team May 15, 2024 13:40
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The primary changes are in here 🚨

@bnussman-akamai bnussman-akamai added the e2e Indicates that a PR touches Cypress tests in some way label May 15, 2024
Copy link

github-actions bot commented May 15, 2024

Coverage Report: βœ…
Base Coverage: 82.01%
Current Coverage: 82.01%

@bnussman-akamai bnussman-akamai changed the title feat: [M3-8100] - Refactor Image Create and Add Tags feat: [M3-8103] - Refactor Image Create and Add Tags May 15, 2024
Copy link
Contributor

@hkhalil-akamai hkhalil-akamai left a comment

Choose a reason for hiding this comment

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

The new create flow looks good and the code is very readable and clean 🧼.

βœ… Image create page matches mockups
βœ… Confirmed I can create an Image from a Linode and Disk and select Label, Tags and Description
βœ… CI passing

Comment on lines +131 to +140
getOptionDisabled={
grants
? (linode) =>
grants.linode.some(
(grant) =>
grant.id === linode.id &&
grant.permissions === 'read_only'
)
: undefined
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of disabling these options would it make sense to filter them out via optionsFilter?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That was the existing behavior. We can do that, but in my opinion, the better UX would be to show the items and explain why they are disabled. That's why I added the helper text of You can only create Images from Linodes you have read/write access to. for this case. Happy to revert if we think this is worse UX

I have a cafe item today that will touch on this

Copy link
Contributor

@jdamore-linode jdamore-linode left a comment

Choose a reason for hiding this comment

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

Looks great, nice work @bnussman-akamai!

Went through the flow a couple times and everything worked as expected, double checked small screen layout, thatdouble checked the payload contained my cloud-init selection, description, tags, etc.

The test changes and additions also look fantastic -- thanks for keeping those in mind!

@bnussman-akamai bnussman-akamai merged commit 4b4a3da into linode:develop May 17, 2024
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
e2e Indicates that a PR touches Cypress tests in some way Images Relating to Images
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants