[Lens] Fix secondary metric styles to prevent wrapping

src/platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx

@@ -310,9 +310,11 @@ describe('MetricVisComponent', function () {
       });
       // for the secondary metric
       const secondaryLabel = table.columns.find((col) => col.id === minPriceColumnId)!.name;
-      expect(
-        screen.getByText(`${secondaryLabel} number-${table.rows[0][minPriceColumnId]}`)
-      ).toBeInTheDocument();
+
+      const secondaryElement = screen.getByTestId('metric-secondary-element');
+      expect(secondaryElement.textContent).toBe(
+        `${secondaryLabel}number-${table.rows[0][minPriceColumnId]}`
+      );
 
       await rerender({
         config: {
@@ -558,10 +560,12 @@ describe('MetricVisComponent', function () {
         },
       });
 
+      let secondaryElements = screen.getAllByTestId('metric-secondary-element');
       for (const row of table.rows) {
-        expect(
-          screen.getByText(new RegExp(`howdy number-${row[minPriceColumnId]}`, 'i'))
-        ).toBeInTheDocument();
+        const regExp = new RegExp(`howdynumber-${row[minPriceColumnId]}`, 'i');
+        expect(secondaryElements.some((element) => regExp.test(element.textContent ?? ''))).toBe(
+          true
+        );
       }
 
       // Now remove the prefix and check the secondary label is there
@@ -573,11 +577,14 @@ describe('MetricVisComponent', function () {
         },
       });
 
+      secondaryElements = screen.getAllByTestId('metric-secondary-element');
+
       const secondaryLabel = table.columns.find((col) => col.id === minPriceColumnId)!.name;
       for (const row of table.rows) {
-        expect(
-          screen.getByText(new RegExp(`${secondaryLabel} number-${row[minPriceColumnId]}`, 'i'))
-        ).toBeInTheDocument();
+        const regExp = new RegExp(`${secondaryLabel}*number-${row[minPriceColumnId]}`, 'i');
+        expect(secondaryElements.some((element) => regExp.test(element.textContent ?? ''))).toBe(
+          true
+        );
       }
     });
 

src/platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.tsx

@@ -298,12 +298,15 @@ export const MetricVis = ({
   return (
     <div
       ref={scrollContainerRef}
-      css={css`
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
-        ${useEuiScrollBar()}
-      `}
+      css={[
+        styles.layout,
+        css`
+          height: 100%;
+          width: 100%;
+          overflow-y: auto;
+          ${useEuiScrollBar()}
+        `,
+      ]}
     >
       <div
         css={css`
@@ -361,3 +364,17 @@ export const MetricVis = ({
     </div>
   );
 };
+
+const styles = {
+  layout: css({
+    '.echMetricText__valuesBlock': {
+      display: 'flex',
+      minWidth: 0,
+      maxWidth: '100%',
+    },
+    '.echMetricText__valuesBlock > div': {
+      minWidth: 'inherit',
+      maxWidth: 'inherit',
+    },
+  }),
+};

src/platform/plugins/shared/chart_expressions/expression_metric/public/components/secondary_metric.test.tsx

@@ -64,7 +64,7 @@ describe('Secondary metric', () => {
       });
       // Test id is the last resource here as the element will be empty
       const el = screen.getByTestId('metric-secondary-element');
-      expect(el).toBeEmptyDOMElement();
+      expect(el.textContent).toBe('');
     });
   });
 

src/platform/plugins/shared/chart_expressions/expression_metric/public/components/secondary_metric.tsx

@@ -256,16 +256,44 @@ export function SecondaryMetric({
   const value = metricColumn ? row[metricColumn.id] : undefined;
 
   return (
-    <span data-test-subj="metric-secondary-element">
-      {prefix}
-      {prefix ? ' ' : ''}
-      <SecondaryMetricValue
-        rawValue={value}
-        formattedValue={metricFormatter?.(value)}
-        trendConfig={color ? undefined : trendConfig}
-        color={color}
-        formatter={metricFormatter}
-      />
+    <span css={styles.wrapper} data-test-subj="metric-secondary-element">
+      {prefix && <span css={styles.prefix}>{prefix}</span>}
+      <span css={styles.value}>
+        <SecondaryMetricValue
+          rawValue={value}
+          formattedValue={metricFormatter?.(value)}
+          trendConfig={color ? undefined : trendConfig}
+          color={color}
+          formatter={metricFormatter}
+        />
+      </span>
     </span>
   );
 }
+
+const styles = {
+  wrapper: css({
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    width: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  }),
+  prefix: css({
+    flex: '0 1 auto',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  }),
+  value: css({
+    display: 'inline-flex',
+    flex: '1 0 auto',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+    marginLeft: 4,
+    maxWidth: 'calc(100% - 4px)', // Subtract the marginLeft value
+  }),
+};

x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts

@@ -85,6 +85,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await testSubjects.click('applyFlyoutButton');
       await dashboard.waitForRenderComplete();
       const data = await lens.getMetricVisualizationData();
+      const normalizedData = data.map((item) => ({
+        ...item,
+        ...(item.extraText && { extraText: item.extraText.replace(/\n/g, ' ') }),
+      }));
       const expectedData = [
         {
           title: 'Average of bytes',
@@ -98,8 +102,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         },
       ];
 
-      log.debug(data);
-      expect(data).to.eql(expectedData);
+      log.debug(normalizedData);
+      expect(normalizedData).to.eql(expectedData);
 
       await timeToVisualize.resetNewDashboard();
     });

x-pack/test/functional/apps/lens/group6/metric.ts

@@ -122,6 +122,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       await lens.waitForVisualization('mtrVis');
       const data = await lens.getMetricVisualizationData();
+      const normalizedData = data.map((item) => ({
+        ...item,
+        ...(item.extraText && { extraText: item.extraText.replace(/\n/g, ' ') }),
+      }));
 
       const expectedData = [
         {
@@ -185,7 +189,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           showingBar: false,
         },
       ];
-      expect(data).to.eql(expectedData);
+      expect(normalizedData).to.eql(expectedData);
 
       await lens.openDimensionEditor(
         'lnsMetric_primaryMetricDimensionPanel > lns-dimensionTrigger'