[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>
This commit is contained in:
parent
24ba63f9f9
commit
885674c5c0
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { shallow, mount } from 'enzyme';
|
||||||
import { Badge, Alert } from 'reactstrap';
|
import { Badge, Alert } from 'reactstrap';
|
||||||
import EndpointLink from './EndpointLink';
|
import EndpointLink from './EndpointLink';
|
||||||
|
|
||||||
|
@ -35,4 +35,14 @@ describe('EndpointLink', () => {
|
||||||
const err = endpointLink.find(Alert);
|
const err = endpointLink.find(Alert);
|
||||||
expect(err.render().text()).toEqual('Error: Invalid URL');
|
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();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -27,7 +27,7 @@ const EndpointLink: FC<EndpointLinkProps> = ({ endpoint, globalUrl }) => {
|
||||||
{params.length > 0 ? <br /> : null}
|
{params.length > 0 ? <br /> : null}
|
||||||
{params.map(([labelName, labelValue]: [string, string]) => {
|
{params.map(([labelName, labelValue]: [string, string]) => {
|
||||||
return (
|
return (
|
||||||
<Badge color="primary" className={`mr-1 ${labelName}`} key={labelName}>
|
<Badge color="primary" className={`mr-1 ${labelName}`} key={`${labelName}/${labelValue}`}>
|
||||||
{`${labelName}="${labelValue}"`}
|
{`${labelName}="${labelValue}"`}
|
||||||
</Badge>
|
</Badge>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue