diff --git a/frontend/src/metabase/core/components/Ellipsified/Ellipsified.styled.tsx b/frontend/src/metabase/core/components/Ellipsified/Ellipsified.styled.tsx index 84d1464b764859852bcff98c01fd819df3ba6366..1be89b7c2f5b2874ad6e4a915cd6d53eee07f203 100644 --- a/frontend/src/metabase/core/components/Ellipsified/Ellipsified.styled.tsx +++ b/frontend/src/metabase/core/components/Ellipsified/Ellipsified.styled.tsx @@ -7,19 +7,19 @@ const ellipsifyCss = css` text-overflow: ellipsis; `; -const clampCss = (props: EllipsifiedRootProps) => css` +const clampCss = (lines: number) => css` display: -webkit-box; - -webkit-line-clamp: ${props.lines}; + -webkit-line-clamp: ${lines}; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; `; interface EllipsifiedRootProps { - lines?: number; + lines: number; "data-testid"?: string; } export const EllipsifiedRoot = styled.div<EllipsifiedRootProps>` - ${props => ((props.lines ?? 1) > 1 ? clampCss(props) : ellipsifyCss)}; + ${({ lines }) => (lines > 1 ? clampCss(lines) : ellipsifyCss)}; `; diff --git a/frontend/src/metabase/core/components/Ellipsified/Ellipsified.tsx b/frontend/src/metabase/core/components/Ellipsified/Ellipsified.tsx index fa4f3a60bab4ebfd89e357151753fb2c1a2b803f..1aace773cefa087c49be4d57e9b3913257235fdc 100644 --- a/frontend/src/metabase/core/components/Ellipsified/Ellipsified.tsx +++ b/frontend/src/metabase/core/components/Ellipsified/Ellipsified.tsx @@ -15,6 +15,7 @@ interface EllipsifiedProps { children?: ReactNode; tooltipMaxWidth?: number | "auto"; lines?: number; + multiline?: boolean; placement?: FloatingPosition; "data-testid"?: string; id?: string; @@ -28,7 +29,8 @@ export const Ellipsified = ({ tooltip, children, tooltipMaxWidth, - lines, + lines = 1, + multiline = false, placement = "top", "data-testid": dataTestId, id, @@ -47,6 +49,7 @@ export const Ellipsified = ({ label={canSkipTooltipRendering ? undefined : tooltip || children || " "} position={placement} width={tooltipMaxWidth} + multiline={multiline} > <EllipsifiedRoot ref={ref} diff --git a/frontend/src/metabase/parameters/components/FormattedParameterValue/FormattedParameterValue.tsx b/frontend/src/metabase/parameters/components/FormattedParameterValue/FormattedParameterValue.tsx index dae32c8192780ef2f17ab09c56783bd65818828a..544a085f94d3d0b7613e4bf6817f93a69d25b25d 100644 --- a/frontend/src/metabase/parameters/components/FormattedParameterValue/FormattedParameterValue.tsx +++ b/frontend/src/metabase/parameters/components/FormattedParameterValue/FormattedParameterValue.tsx @@ -1,3 +1,4 @@ +import { Ellipsified } from "metabase/core/components/Ellipsified"; import ParameterFieldWidgetValue from "metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidgetValue/ParameterFieldWidgetValue"; import { formatParameterValue } from "metabase/parameters/utils/formatting"; import type { UiParameter } from "metabase-lib/v1/parameters/types"; @@ -6,7 +7,10 @@ import { hasFields, isFieldFilterUiParameter, } from "metabase-lib/v1/parameters/utils/parameter-fields"; -import { isDateParameter } from "metabase-lib/v1/parameters/utils/parameter-type"; +import { + isDateParameter, + isStringParameter, +} from "metabase-lib/v1/parameters/utils/parameter-type"; import { parameterHasNoDisplayValue } from "metabase-lib/v1/parameters/utils/parameter-values"; import type { ParameterValue, RowValue } from "metabase-types/api"; @@ -14,12 +18,14 @@ export type FormattedParameterValueProps = { parameter: UiParameter; value: string | number | number[]; placeholder?: string; + isPopoverOpen?: boolean; }; function FormattedParameterValue({ parameter, value, placeholder, + isPopoverOpen = false, }: FormattedParameterValueProps) { if (parameterHasNoDisplayValue(value)) { return placeholder; @@ -33,25 +39,42 @@ function FormattedParameterValue({ const label = getLabel(displayValue); - if ( - isFieldFilterUiParameter(parameter) && - hasFields(parameter) && - !isDateParameter(parameter) - ) { + const renderContent = () => { + if ( + isFieldFilterUiParameter(parameter) && + hasFields(parameter) && + !isDateParameter(parameter) + ) { + return ( + <ParameterFieldWidgetValue + fields={getFields(parameter)} + value={value} + displayValue={label} + /> + ); + } + + if (label) { + return <span>{formatParameterValue(label, parameter)}</span>; + } + + return <span>{formatParameterValue(value, parameter)}</span>; + }; + + if (isStringParameter(parameter)) { + const hasLongValue = typeof first === "string" && first.length > 80; return ( - <ParameterFieldWidgetValue - fields={getFields(parameter)} - value={value} - displayValue={label} - /> + <Ellipsified + showTooltip={!isPopoverOpen} + multiline + tooltipMaxWidth={hasLongValue ? 450 : undefined} + > + {renderContent()} + </Ellipsified> ); } - if (label) { - return <span>{formatParameterValue(label, parameter)}</span>; - } - - return <span>{formatParameterValue(value, parameter)}</span>; + return renderContent(); } function getValue( diff --git a/frontend/src/metabase/parameters/components/ParameterValueWidget.tsx b/frontend/src/metabase/parameters/components/ParameterValueWidget.tsx index fc4075a201cfe27d180a758db68833f0ee3e68e3..5b5c5b8aa72d061e74ac67c1d2b512898ba538c8 100644 --- a/frontend/src/metabase/parameters/components/ParameterValueWidget.tsx +++ b/frontend/src/metabase/parameters/components/ParameterValueWidget.tsx @@ -13,7 +13,10 @@ import { Box, Icon, Popover, type PopoverProps } from "metabase/ui"; import type Question from "metabase-lib/v1/Question"; import type { UiParameter } from "metabase-lib/v1/parameters/types"; import { getQueryType } from "metabase-lib/v1/parameters/utils/parameter-source"; -import { isDateParameter } from "metabase-lib/v1/parameters/utils/parameter-type"; +import { + isStringParameter, + isDateParameter, +} from "metabase-lib/v1/parameters/utils/parameter-type"; import { areParameterValuesIdentical, parameterHasNoDisplayValue, @@ -261,11 +264,17 @@ export const ParameterValueWidget = ({ size={16} /> )} - <div className={cx(CS.mr1, CS.textNoWrap)}> + <div + className={cx(CS.mr1)} + style={ + isStringParameter(parameter) ? { maxWidth: "190px" } : {} + } + > <FormattedParameterValue parameter={parameter} value={value} placeholder={placeholderText} + isPopoverOpen={isOpen} /> </div> {getActionIcon()}