feat(data-plane-inbounds): show port name

[schogges]

This adds the optionally existing name of the inbound port. Currently there is a conflict with an already existing name property on the inbounds, therefore I went for portName. But I've also added it to the summary including the ability to copy.

---

For now I left out the ability to copy the name because there is an issue with the tooltip popover. It's based on floating-ui and the position is not properly calculated when the trigger is nested in an element with container-type: inline-size.

Closes #3451

[netlify]

✅ Deploy Preview for kuma-gui ready!

Name	Link
🔨 Latest commit	c8d1d5a
🔍 Latest deploy log	https://app.netlify.com/sites/kuma-gui/deploys/679ba75787a6980008525ceb
😎 Deploy Preview	https://deploy-preview-3483--kuma-gui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[johncowen]

Just a thought after breifly seeing the screengrabs and looking at the PR preview:

We already have KumaPort which should a combined port/targetPort (name)

I'm not sure if it will map exactly in both places we've added this, but maybe?

Do you think it worth thinking about we could use the same looking widget for everything here? Maybe we tweak the initial implementation also to make it less similar to tags (maybe just a color change).

Lmk!

[schogges]

Just a thought after breifly seeing the screengrabs and looking at the PR preview:

We already have KumaPort which should a combined port/targetPort (name)

I'm not sure if it will map exactly in both places we've added this, but maybe?

Do you think it worth thinking about we could use the same looking widget for everything here? Maybe we tweak the initial implementation also to make it less similar to tags (maybe just a color change).

Lmk!

I like that 👍 but this will also affect other places like outbounds, zone-ingresses and -egresses because I'd have to adjust the ConnectionCard accordingly 🤔

[johncowen]

I like that 👍 but this will also affect other places like outbounds, zone-ingresses and -egresses because I'd have to adjust the ConnectionCard accordingly 🤔

From what I remember this isn't need in Zone'gresses, so won't affect any of that I don't think.

We could also merge this as is and maybe do something with KumaPort as a followup, maybe check in with Erick?

[johncowen]

Not sure whether you wanted to get this in and circle back (potentially or not), but the code looks good so its a 👍 from me!

[schogges]

I like that 👍 but this will also affect other places like outbounds, zone-ingresses and -egresses because I'd have to adjust the ConnectionCard accordingly 🤔

From what I remember this isn't need in Zone'gresses, so won't affect any of that I don't think.

We could also merge this as is and maybe do something with KumaPort as a followup, maybe check in with Erick?

Hmmm, I see that ConnectionCard is being used in Zone'gresses 🤔 will check again what is needed and come back here 🙂

[schogges]

@johncowen I've used KumaPort for inbounds and XBadge for outbounds now in DataplaneDetailView. Wdyt?

[johncowen]

🤔 hmm, umm IMO this kinda 'hides' the portNumber a bit too much I think? If it was me I'd revert to the previous and lets merge this and we can wait and speak to Erick

[schogges]

@johncowen dropped the two previous commits and it's back to how it was before 🙂

[johncowen]

Cool, lets get this one in then and maybe point Erick to this next time we catch up 👍