[UI] Fix duplicated keys on /targets page (#8456)

* [UI] Add a test for duplicated keys in EndpointLink component

I've noticed that I'm getting warnings about multiple children with the same key on /targets page.
This adds a test that fails when that happens.

Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>

* [UI] Fix duplicated keys on /targets page

Since any URI we render on /targets page can have multi-value params we should use both name and value as components keys.

Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>

web/ui/react-app/src/pages/targets/EndpointLink.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { Badge, Alert } from 'reactstrap';
 import EndpointLink from './EndpointLink';
 
@@ -35,4 +35,14 @@ describe('EndpointLink', () => {
     const err = endpointLink.find(Alert);
     expect(err.render().text()).toEqual('Error: Invalid URL');
   });
+
+  it('handles params with multiple values correctly', () => {
+    const consoleSpy = jest.spyOn(console, "warn");
+    const endpoint = `http://example.com/federate?match[]={__name__="name1"}&match[]={__name__="name2"}&match[]={__name__="name3"}`;
+    const globalURL = 'http://example.com/federate';
+    const endpointLink = mount(<EndpointLink endpoint={endpoint} globalUrl={globalURL} />);
+    const badges = endpointLink.find(Badge);
+    expect(badges).toHaveLength(3);
+    expect(consoleSpy).not.toHaveBeenCalled();
+  });
 });

web/ui/react-app/src/pages/targets/EndpointLink.tsx

@@ -27,7 +27,7 @@ const EndpointLink: FC<EndpointLinkProps> = ({ endpoint, globalUrl }) => {
       {params.length > 0 ? <br /> : null}
       {params.map(([labelName, labelValue]: [string, string]) => {
         return (
-          <Badge color="primary" className={`mr-1 ${labelName}`} key={labelName}>
+          <Badge color="primary" className={`mr-1 ${labelName}`} key={`${labelName}/${labelValue}`}>
             {`${labelName}="${labelValue}"`}
           </Badge>
         );