Can't remove resources from access request in Connect when they share the same name but come from different clusters

[ravicious]

same-resource-name.mov

To recreate it, add two resources to an access request that have the same name and type but one comes from a root cluster and the other from a leaf cluster.

[ravicious]

It's hard to tell in general which cluster a resource comes from, as this information is not included anywhere.

[ravicious]

Key in the access request bar needs to be improved too:

Patch

diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
index 14f468c577..135f264ab3 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
@@ -138,7 +138,11 @@ export function AccessRequestCheckout() {
                 {data
                   .slice(0, MAX_RESOURCES_IN_BAR_TO_SHOW)
                   .map(c => {
-                    let resource = { name: c.name, Icon: undefined };
+                    let resource = {
+                      name: c.name,
+                      key: `${c.clusterName}-${c.kind}-${c.id}`,
+                      Icon: undefined,
+                    };
                     switch (c.kind) {
                       case 'app':
                         resource.Icon = Icon.Application;
@@ -162,7 +166,7 @@ export function AccessRequestCheckout() {
                   .map(c => (
                     <Label
                       kind="secondary"
-                      key={c.name}
+                      key={c.key}
                       css={`
                         display: flex;
                         align-items: center;
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
index 17a9cd4379..3d61b36e88 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
@@ -154,15 +154,15 @@ export default function useAccessRequestCheckout() {
   ): {
     kind: ResourceKind;
     clusterName: string;
+    /** Identifier of the resource. Should be sent in requests. */
     id: string;
+    /** Name of the resource, for presentation purposes only. */
     name: string;
   }[] {
     const data: {
       kind: ResourceKind;
       clusterName: string;
-      /** Identifier of the resource. Should be sent in requests. */
       id: string;
-      /** Name of the resource, for presentation purposes only. */
       name: string;
     }[] = [];
     if (!workspaceAccessRequest) {