fix: alerts tag popup vibrating (#4812)

This commit is contained in:
Vikrant Gupta 2024-04-04 13:58:26 +05:30 committed by GitHub
parent f05b94c01e
commit 33383a4503
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 8 deletions

View File

@ -1,10 +1,10 @@
import './LabelColumn.styles.scss'; import './LabelColumn.styles.scss';
import { Popover, Tag } from 'antd'; import { Popover, Tag } from 'antd';
import { popupContainer } from 'utils/selectPopupContainer';
import { LabelColumnProps } from './TableRenderer.types'; import { LabelColumnProps } from './TableRenderer.types';
import TagWithToolTip from './TagWithToolTip'; import TagWithToolTip from './TagWithToolTip';
import { getLabelAndValueContent } from './utils';
function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element { function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels; const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
@ -19,19 +19,17 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
)} )}
{remainingLabels.length > 0 && ( {remainingLabels.length > 0 && (
<Popover <Popover
getPopupContainer={popupContainer}
placement="bottomRight" placement="bottomRight"
showArrow={false} showArrow={false}
content={ content={
<div> <div>
{labels.map( {labels.map(
(label: string): JSX.Element => ( (label: string): JSX.Element => (
<TagWithToolTip <div key={label}>
key={label} <Tag className="label-column--tag" color={color}>
label={label} {getLabelAndValueContent(label, value && value[label])}
color={color} </Tag>
value={value} </div>
/>
), ),
)} )}
</div> </div>

View File

@ -38,6 +38,16 @@ export const getLabelRenderingValue = (
return label; return label;
}; };
export const getLabelAndValueContent = (
label: string,
value?: string,
): string => {
if (value) {
return `${label}: ${value}`;
}
return `${label}`;
};
interface GeneratorResizeTableColumnsProp<T> { interface GeneratorResizeTableColumnsProp<T> {
baseColumnOptions: ColumnsType<T>; baseColumnOptions: ColumnsType<T>;
dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[]; dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[];