-
Notifications
You must be signed in to change notification settings - Fork 477
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Replace deprecated ant-design props from ReferenceButton and KeyValuesTable #1864
Changes from 3 commits
70055c5
2516a06
1639eb4
b60c575
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -14,7 +14,7 @@ | |||||||||||||||||||
|
||||||||||||||||||||
/* eslint-disable import/no-extraneous-dependencies */ | ||||||||||||||||||||
import * as React from 'react'; | ||||||||||||||||||||
import { Dropdown, Menu } from 'antd'; | ||||||||||||||||||||
import { Dropdown } from 'antd'; | ||||||||||||||||||||
import { IoOpenOutline, IoList, IoCopyOutline } from 'react-icons/io5'; | ||||||||||||||||||||
import { JsonView, allExpanded, collapseAllNested, defaultStyles } from 'react-json-view-lite'; | ||||||||||||||||||||
|
||||||||||||||||||||
|
@@ -110,23 +110,21 @@ LinkValue.defaultProps = { | |||||||||||||||||||
title: '', | ||||||||||||||||||||
}; | ||||||||||||||||||||
|
||||||||||||||||||||
const linkValueList = (links: Link[]) => ( | ||||||||||||||||||||
<Menu> | ||||||||||||||||||||
{links.map(({ text, url }, index) => ( | ||||||||||||||||||||
// `index` is necessary in the key because url can repeat | ||||||||||||||||||||
// eslint-disable-next-line react/no-array-index-key | ||||||||||||||||||||
<Menu.Item key={`${url}-${index}`}> | ||||||||||||||||||||
<LinkValue href={url}>{text}</LinkValue> | ||||||||||||||||||||
</Menu.Item> | ||||||||||||||||||||
))} | ||||||||||||||||||||
</Menu> | ||||||||||||||||||||
); | ||||||||||||||||||||
const linkValueList = (links: Link[]) => { | ||||||||||||||||||||
const dropdownItems = links.map(({ text, url }, index) => ({ | ||||||||||||||||||||
label: <LinkValue href={url}>{text}</LinkValue>, | ||||||||||||||||||||
key: `${url}-${index}`, | ||||||||||||||||||||
})); | ||||||||||||||||||||
return dropdownItems; | ||||||||||||||||||||
}; | ||||||||||||||||||||
|
||||||||||||||||||||
type KeyValuesTableProps = { | ||||||||||||||||||||
data: KeyValuePair[]; | ||||||||||||||||||||
linksGetter: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil; | ||||||||||||||||||||
}; | ||||||||||||||||||||
|
||||||||||||||||||||
// KeyValuesTable is displayed as a menu at span level. | ||||||||||||||||||||
// Example: https://github.com/jaegertracing/jaeger-ui/assets/94157520/b518cad9-cb37-4775-a3d6-b667a1235f89 | ||||||||||||||||||||
Comment on lines
+126
to
+127
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what happens if there's only one link, do we still show the sandwich menu or the outgoing link directly? The latter would be more usable (I think it's unusual to have >1 link on a tag) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In case there's one link only, the link is shown directly, instead of DropDown. Lines 139 to 147 in 1639eb4
|
||||||||||||||||||||
export default function KeyValuesTable(props: KeyValuesTableProps) { | ||||||||||||||||||||
const { data, linksGetter } = props; | ||||||||||||||||||||
|
||||||||||||||||||||
|
@@ -149,7 +147,11 @@ export default function KeyValuesTable(props: KeyValuesTableProps) { | |||||||||||||||||||
} else if (links && links.length > 1) { | ||||||||||||||||||||
valueMarkup = ( | ||||||||||||||||||||
<div> | ||||||||||||||||||||
<Dropdown overlay={linkValueList(links)} placement="bottomRight" trigger={['click']}> | ||||||||||||||||||||
<Dropdown | ||||||||||||||||||||
menu={{ items: linkValueList(links) }} | ||||||||||||||||||||
placement="bottomRight" | ||||||||||||||||||||
trigger={['click']} | ||||||||||||||||||||
> | ||||||||||||||||||||
<a> | ||||||||||||||||||||
{jsonTable} <IoList className="KeyValueTable--linkIcon" /> | ||||||||||||||||||||
</a> | ||||||||||||||||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(Used some dummy data to visualize this component)