upcoming: [M3-7610] - Placement Groups Detail

[abailly-akamai]

Description 📝

This PR implements the Placement Groups Detail page and associated routing. It does not implement tabs content (summary & linodes list) which are left for subsequent tickets.

Changes 🔄

• Implement the detail page and its routing
• Add a couple simple utils and their tests
• Make the EditableTextField take a new textSuffix prop to manage the breadcrumb suffix
• Add test and a story for ☝️
• Fix the HTTP method for placement group query MSW

Preview 📷

How to test 🧪

Verification steps

• Pull and run code locally
• Turn on the "Placement Group" dev setting and MSW
• Navigate to http://localhost:3000/placement-groups
• Click on a placement group in the table
• Confirm the Placement Group Detail page and its content (breadcrumb w/ editint label, docs link, tabs without content)

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

[github-actions]

Coverage Report: ✅
Base Coverage: 80.33%
Current Coverage: 80.36%

[hkhalil-akamai]

Looking good, tested all functionality. Left one technical suggestion.

[hkhalil-akamai]

Suggestion: instead of storing isEditingLabel in this component, the editableTextTitle prop can accept an optional function (i.e., it would have type editableTextTitle: string | (isEditinglabel: boolean) => string), which avoids duplicating state that is already tracked in the EditableText component as isEditing.

Suggested change

	editableTextTitle: isEditingLabel
	? label
	: `${label} (${affinityLabel})`,
	editableTextTitle: (isEditingLabel) => isEditingLabel
	? label
	: `${label} (${affinityLabel})`,

[abailly-akamai]

Yeah that's fair, though the solution above isn't too much of an improvement because of how the initial state of this component is managed in the first place.

I went the route of adding a new prop instead which bypasses relying on state all together. See 31c2f92

[abailly-akamai]

Also added a test for the new prop and a story for good measure

[abailly-akamai]

improving accessibility while I am here. We shouldn't have buttons with only icons as children without an aria label

[carrillo-erik]

Nice catch, I'll make sure to keep an eye for this type of detail.

[hkhalil-akamai]

Thanks for resolving my concerns with the breadcrumb state. Re-tested and looks good; approved pending consideration of some minor changes.