feat: added variable description icon and details on tooltip (#7897)

This commit is contained in:
SagarRajput-7 2025-05-16 16:46:19 +05:30 committed by GitHub
parent f10f7a806f
commit 9383b6576d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 1 deletions

View File

@ -18,6 +18,11 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 16px; /* 133.333% */ line-height: 16px; /* 133.333% */
.info-icon {
margin-left: 4px;
color: var(--bg-vanilla-400);
}
} }
.variable-value { .variable-value {

View File

@ -7,7 +7,7 @@
import './DashboardVariableSelection.styles.scss'; import './DashboardVariableSelection.styles.scss';
import { orange } from '@ant-design/colors'; import { orange } from '@ant-design/colors';
import { WarningOutlined } from '@ant-design/icons'; import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
import { import {
Checkbox, Checkbox,
Input, Input,
@ -405,7 +405,13 @@ function VariableItem({
<div className="variable-item"> <div className="variable-item">
<Typography.Text className="variable-name" ellipsis> <Typography.Text className="variable-name" ellipsis>
${variableData.name} ${variableData.name}
{variableData.description && (
<Tooltip title={variableData.description}>
<InfoCircleOutlined className="info-icon" />
</Tooltip>
)}
</Typography.Text> </Typography.Text>
<div className="variable-value"> <div className="variable-value">
{variableData.type === 'TEXTBOX' ? ( {variableData.type === 'TEXTBOX' ? (
<Input <Input