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

upcoming: [M3-7621] - Add PlacementGroups to Linode Migrate Flow #10339

Merged
merged 16 commits into from
Apr 16, 2024

Conversation

carrillo-erik
Copy link
Contributor

@carrillo-erik carrillo-erik commented Apr 2, 2024

Description 📝

This PR adds Placement Groups to the Linode migrate flow. This customer journey now includes the ability to assign a Linode to an existing Placement Group during the migration process. Placement Group selection is optional.

Changes 🔄

List any change relevant to the reviewer.

  • Integrate the PlacementGroupsSelect component into the ConfigureForm component.
  • Add Placement Group data in the Linode migrate payload.

Target release date 🗓️

04/15/2024

Preview 📷

Before After
before-00 after-00

How to test 🧪

Prerequisites

(How to setup test environment)

  • Have the placement-group customer tag on the user account used for testing.
  • Point to the dev environment using the Cloud Manager dev tools.
  • Have at least one Placement Group entity in the London, England, UK region.

Verification steps

(How to verify changes)

  • Verify the UI updates, which include the addition of the PlacementGroupsSelect component in the Linode migrate flow.
  • Verify that you can proceed as usual without selecting a Placement Group.

As an Author I have considered 🤔

Check all that apply

  • 👀 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

@carrillo-erik carrillo-erik requested a review from a team as a code owner April 2, 2024 11:49
@carrillo-erik carrillo-erik requested review from bnussman-akamai, hkhalil-akamai and abailly-akamai and removed request for a team April 2, 2024 11:49
@carrillo-erik carrillo-erik self-assigned this Apr 2, 2024
Copy link

github-actions bot commented Apr 2, 2024

Coverage Report:
Base Coverage: 81.79%
Current Coverage: 81.79%

@carrillo-erik
Copy link
Contributor Author

@abailly-akamai I pulled down the changes you made and I'm still experiencing the same behavior where after selecting a new region, the placement group selection from the previous region persists.

@abailly-akamai
Copy link
Contributor

@carrillo-erik not sure what you are looking at without posting anything. It's fixed on the migrate modal

Screen.Recording.2024-04-11.at.14.22.51.mov

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! approving after reviews and helping with the code 👍

handleSelectRegion,
helperText,
linodeType,
selectedRegion,
} = props;

const flags = useFlags();
const showPlacementGroups = Boolean(flags.placementGroups?.enabled);
Copy link
Contributor

Choose a reason for hiding this comment

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

@carrillo-erik quick note that this will have to be updated with the new useIsPlacementGroupsEnabled once merged

see https://github.com/linode/manager/pull/10372/files#diff-5599f7d817d6e26a53d2dcd1ba5a5394eb79fb65203c11dca4d0c7fb7ce459afR131

You can create a follow up ticket as needed, we don't want to forget that one

@carrillo-erik carrillo-erik added the Add'tl Approval Needed Waiting on another approval! label Apr 12, 2024
@abailly-akamai
Copy link
Contributor

@carrillo-erik in addition to addressing @bnussman-akamai 's comment, I forgot that you also need to invalidate PG data on in the migration hook if a placement group is present in the payload.

take a look at how it's done in the linode create hook

@@ -154,6 +192,24 @@ export const ConfigureForm = React.memo((props: Props) => {
{...panelPrice(selectedRegion, selectedRegionPrice, 'new')}
/>
)}
{showPlacementGroups && (
<PlacementGroupsSelect
Copy link
Member

Choose a reason for hiding this comment

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

Slightly unrelated, but I do find it possibly concerning that the PlacementGroupSelect does not render if placement groups haven't loaded. It should probably render with a field error.

Copy link
Contributor

Choose a reason for hiding this comment

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

What is the cause of concern?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@abailly-akamai I think what @bnussman-akamai might be stating is that the PlacementGroupSelect does not render on the initial render of the ConfigureForm component. The placement groups are fetched after a user has selected a region on the RegionSelect component and then PlacementGroupSelect is displayed. However, since this field is optional, I think rendering a field error is not appropriate in this case.

Copy link
Member

Choose a reason for hiding this comment

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

I was trying to test this PR against the production API because I wanted to test how this new functionality behaved with DC specific pricing. I just found it a bit confusing that the Select did not render at all even with the feature flag on.

It won't be a huge issue if we never change it, but I think it would make sense to render it at all times with a loading / error state just for visibility of the feature and consistency with all other entity Selects throughout the codebase

This PR Expected
Screenshot 2024-04-15 at 9 54 50 AM Screenshot 2024-04-15 at 9 54 40 AM

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think we want to do that, and bring more attention to an error that isn't an error (we don't have to select a placement group as it is optional to pick one during the migration process). If anything, we could just show disabled it with "none" and enable it when a selected region with placement group capability is selected. However, UX decided to just hide it for the time being. Perhaps we can revisit for phase 1. @carrillo-erik please add a comment to reflect this decision.

@bnussman-akamai hope this addressed your concerns

Copy link
Member

@bnussman-akamai bnussman-akamai Apr 16, 2024

Choose a reason for hiding this comment

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

I don't think we're completely on the same page. I'm suggesting https://github.com/linode/manager/blob/develop/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.tsx#L70-L72 should be removed in case fetching placement groups errors out. While it's unlikely, it could happen at any time to any user.

Copy link
Contributor

Choose a reason for hiding this comment

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

ahhh thanks for clarifying - will make a separate ticket to handle this

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@bnussman-akamai I see your point, however, implementing the change you suggested would also present the user with a loading/spinning icon within the PlacementGroupsSelect component until they interact with the RegionSelect. That could confuse users to think that something in the page has not finished loading. Displaying an error state would also be confusing given that the field is optional as Alban stated.

Copy link
Contributor

Choose a reason for hiding this comment

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

thanks for pointing this out: M3-7993

Copy link
Member

Choose a reason for hiding this comment

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

Thank you both!

@carrillo-erik
Copy link
Contributor Author

There exists some use cases where error may arise during the Placement Group data fetching that were not considered during the UI/UX planning phase. Ticket M3-7993 was created to keep track of this remaining issues and revisit the strategy to resolve gracefully from error.

@carrillo-erik carrillo-erik merged commit e2f610e into linode:develop Apr 16, 2024
18 checks passed
mjac0bs pushed a commit to mjac0bs/manager that referenced this pull request Apr 18, 2024
…ode#10339)

* upcoming: [M3-7621] - Add PlacementGroups to migrate flow

* Add feature flag logic to hide PG in migrate linode flow

* Handle PG select reset on region change

* Add conditional logic to solve state update problem in pg select

* Remove useEffect

* Add changeset

* Fix failing unit test

* improve selection types

* Handle helper for select and migration types

* Add changeset and fix typo

* Add unit test for pg select component

* Update unit test wording

* Fix typo and invalidate pg data if pg in migration payload

---------

Co-authored-by: Alban Bailly <abailly@akamai.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Add'tl Approval Needed Waiting on another approval! Placement Groups
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants