Web: implement requesting for kube namespace selector

[kimlisa]

part of #46742

requires:

• Add a new role.allow.request field called kubernetes_resources #47173
• https://github.com/gravitational/teleport.e/pull/5133

this is ready for review, i'm still trying to figure out how to make the updated react select less wonky (it works but wonky)

if you want to test, i have a staging cluster with all the UI changes, let me know and i'll invite

when request.allow.kubernetes_resources requires namespace

  ... rest of role
  allow:
    request:
      kubernetes_resources:
      - kind: namespace   # wildcard '*' enforces the same namespace requirement on the web UI (since web UI only supports namespace selection)

when request.kubernetes_resources is a kind that web UI doesn't support, it disables the checkout regardless of other resources (it is enabled once user removes the kubernetes):

  ... rest of role
  allow:
    request:
      kubernetes_resources:
      - kind: pod   # only namespace is supported on the web UI, tsh supports all

demo (when no config is specified, allows requesting for a kube_cluster or a kube_clusters namespace):

  ... rest of role
  allow:
    request:
    # no kubernetes_resources defined

Screen.Recording.2024-11-04.at.6.14.54.PM.mov

[github-actions]

The PR changelog entry failed validation: Changelog entry not found in the PR body. Please add a "no-changelog" label to the PR, or changelog lines starting with changelog: followed by the changelog entries for the PR.

[github-actions]

The PR changelog entry failed validation: Changelog entry not found in the PR body. Please add a "no-changelog" label to the PR, or changelog lines starting with changelog: followed by the changelog entries for the PR.

[avatus]

Haven't looked at all the code yet. In general, its SUPER slick and nice. a couple comments of UX and couple questions.

1. Anytime i add a resource to the "cart", the entire checkout page disappears while its loading the dryrun and then comes back. it causes the cart to flicker a bit too much. This also happens anytime I change the selected namespaces. I think adding/removing resources can maybe be justified (it'd be better if not tho), but while selecting namespaces is probably too jarring. heres a vid.

dad8591a20128f4aba5409885d630d8a.mp4

2. if i add a resource, all the suggested reviewers are there, but if i pick a namespace, after the flicker all the suggested reviewers are gone

3. i like that we load the namespaces adhoc only when we decide to select them the first time, thats great! However, i think the flicker causes whatever loaded data to go away which causes me to have to reload the namespaces again. here is an example flow to test

• add a kube
• select the namespace dropdown (this causes the load)
• select the namespace dropdown again (no load)
• add a new resource to the cart
• flicker
• select original namespace, it has to load again

is this because of the flicker or is this one of the wonky things you're talking about in the react-select?

[kimlisa]

1. Anytime i add a resource to the "cart", the entire checkout page disappears while its loading the dryrun and then comes back. it causes the cart to flicker a bit too much. This also happens anytime I change the selected namespaces. I think adding/removing resources can maybe be justified (it'd be better if not tho), but while selecting namespaces is probably too jarring. heres a vid.

namespaces are resources and is behaving the same as if you were to add/remove resources to the checklist.
i'm not entirely sure how to handle this other than to re-design how checkout works (like allow user to select any resources including namespaces, then click a "next" button that'll run a single dry run and display other info like reviewers/role etc)

2. if i add a resource, all the suggested reviewers are there, but if i pick a namespace, after the flicker all the suggested reviewers are gone

good catch, this is currently not supported when kube resources are present, and should be handled in another PR

3. i like that we load the namespaces adhoc only when we decide to select them the first time, thats great! However, i think the flicker causes whatever loaded data to go away which causes me to have to reload the namespaces again. here is an example flow to test

i might be misunderstanding, but the flicker has always been there? (it's the dry run + get resource role attempt per added resource change)

i think it's fine to reload again, if the user for some reason wants to change the namespace again. before the adhoc method, it was calling this api unnecessarily few times per selector on renders (and the user may not even want to select a namespace)

[ravicious]

Just leaving a small comment about excludeKubeClusterWithNamespaces that I had when reviewing #47347.

[ravicious]

Is there any way to get rid of those square brackets around resource kinds? How is the message going to look like if unsupportedKubeRequestModes includes multiple kinds?

[kimlisa]

it'll look like this [secret pod namespace], opting not to change anything, since it follows error messaging in tsh

[ravicious]

That's fine for now, but long term I think we should strive to not leak too many CLI-specific conventions leak to GUIs. I had a similar discussion with Grzegorz recently. #47652 (comment)

I'm not sure why tsh shows the resource kinds in square brackets in the first place, but in the UI it looks kind of weird IMHO – we have much more freedom there with regards to styling when it comes showing data like this. TBH I think just a regular string would be fine here, e.g. "You can only request Kubernetes resource kinds pod and secret", where "resource kinds" gets pluralized depending on the count and the array with allowed kinds uses something like Array#to_sentence from Ruby on Rails.

[ravicious]

Oh, I keep forgetting that there's now an equivalent of Array#to_sentence in JS. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat

const vehicles = ['Motorcycle', 'Bus', 'Car'];

const formatter = new Intl.ListFormat('en', {
  style: 'long',
  type: 'conjunction',
});
console.log(formatter.format(vehicles));
// Expected output: "Motorcycle, Bus, and Car"

Though I'm not sure if this is something we could use without a polyfill. caniuse.com says that it's not available at all in Safari on Macs that are not running Big Sur or better. https://caniuse.com/mdn-javascript_builtins_intl_listformat

[kimlisa]

i hear you, i created a function for it here: a751204

result:

[ravicious]

I'm submitting some misc issues I found while reviewing the teleterm PR, but I don't plan on reviewing this PR in its entirety. @rudream could you take a look at it?

[public-teleport-github-review-bot]

@kimlisa See the table below for backport results.

Branch	Result
branch/v16	Failed
branch/v17	Create PR