search

near / pagoda-console

Pagoda Console Monorepo
https://console.pagoda.co
0 stars 0 forks source link

DropdownMenu.Item's stableId prop #219

Open jon-lewis opened 1 year ago

jon-lewis commented 1 year ago

In this PR comment, Michael and I were discussing whether to to make stableId required on DropdownMenu.Item while satisfying our globally unique requirements for dynamic dropdown items.

Currently, only the project selector dropdown is filled with dynamic items. image

Potential Solutions

  1. don't use an ID for the dynamic items (stableId is optional or maybe we pass in undefined)
  2. share the same ID for all dynamic items
  3. dynamically create IDs

We would like some input from @calebjacob and @pkudinov on these solutions.

calebjacob commented 1 year ago

Lots of good questions here that I've also been mulling over. I think your PR gives us a good interim solution for now: https://github.com/near/pagoda-console/pull/217

I think the final solution will mostly need to be driven by requirements from @pkudinov. Would dynamic ID's even be useful? I'm not sure how you'd be able to make use of an ID that you don't know the value of on the analytics side. In the example of the project selector above, you could use the project.slug to make each ID unique and dynamic like so:

PROJECT_SELECT_ITEM_${project.slug}

But again, I'm not sure if that'd be useful or even usable on Pavel's side.

Part of me wonders if all dropdown items should share a default stable ID like: DROPDOWN_MENU_ITEM. You could then pass in a stable ID override for any item as needed (eg: the "Create New Project" item).

pkudinov commented 1 year ago

Just saw this. Can we have PROJECT_SELECT_ITEM as a stable ID of every element and add the selected value as a parameter to a click event that you pass to analytics.track?

calebjacob commented 1 year ago

That sounds like a good plan @pkudinov. So here's how dropdowns will work in summary once we implement this ticket:

  1. Opening the dropdown menu will have a stable ID of PROJECT_SELECT
  2. All items in the dropdown will have a stable ID of PROJECT_SELECT_ITEM
  3. Whenever an item in the menu is selected, we'll track an event with the PROJECT_SELECT_ITEM stable ID along with the selected dynamic value in the body of analytics.track().