Ellipsify long dashboard filter values (strings only) (#46073)

* Clean up `Ellipsified`

* Add `multiline` prop to `Ellipsified`

* Ellipsify long string parameter values

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)};
 `;

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}

frontend/src/metabase/parameters/components/FormattedParameterValue/FormattedParameterValue.tsx

+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(

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()}