feat: migrate query input components

[ElinorW]

Overview

fixes #3550
fixes #3551

Demo

Optional. Screenshots, curl examples, etc.

Notes

Optional. Ancillary topics, caveats, alternative strategies that didn't work out, anything else.

Testing Instructions

• How to test this PR
• Prefer bulleted description
• Start after checking out this branch
• Include any setup required, such as bundling scripts, restarting services, etc.
• Include test case, and expected output

[Mnickii]

LGTM

[Mnickii]

I've just realized that the GET and the version area are much larger than in the design, and the methods are not color coded.

Design

Current look

[musale]

The share query dialog looks fixed on one side. Just improve the symmetry here

[musale]

I've just realized that the GET and the version area are much larger than in the design, and the methods are not color coded.

hehe, I like the compressed one for sure. Also with long queries, the long dropdowns are taking up unnecessary space. What do you all think?

[ElinorW]

I've just realized that the GET and the version area are much larger than in the design, and the methods are not color coded.

Design Current look

Yeah! In fact I've been trying to reduce the sizes and add the colors but fluent doesn't support that. There's actually no way to reduce the size of the dropdown

[ElinorW]

The share query dialog looks fixed on one side. Just improve the symmetry here

Yeah, I needed the Dialog work to be merged so that I could fix this

[musale]

Yeah, I needed the Dialog work to be merged so that I could fix this

Merged it in. It is good to go.

[Mnickii]

You can use the button slot to style the dropdown value color to match the badge colors

Suggested change

	onOptionSelect={(event, data) => {
	button={{ style: { color: selectedBadgeColor } }}
	onOptionSelect={(event, data) => {

then define the selected badge color as
const selectedMethod = sampleQuery.selectedVerb; const selectedBadgeColor = getStyleFor(selectedMethod);

Then update the getStyleFor method to use v9 tokens

export function getStyleFor(method: string) {
  method = method?.toUpperCase();
  const styles: Record<string, string> = {
    GET: tokens.colorBrandBackground,
    POST: tokens.colorStatusSuccessForeground1,
    PUT: tokens.colorStatusWarningForeground2,
    PATCH: tokens.colorStatusWarningForeground3,
    DELETE: tokens.colorStatusDangerForeground1
  };

  return styles[method] || tokens.colorNeutralForeground1;
}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud