From 1263e094fec0bb0b73fc75d2cc37cc07fca98d8d Mon Sep 17 00:00:00 2001
From: Vivian Xiao <vivian.xiao@mongodb.com>
Date: Fri, 7 Jun 2024 15:15:57 -0400
Subject: [PATCH] fixed long index name overflow

---
 .../explain-tree/explain-tree-stage.tsx       | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.tsx b/packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.tsx
index fc8c655413b..75e4cb7e3e1 100644
--- a/packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.tsx
+++ b/packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.tsx
@@ -211,6 +211,12 @@ const shardViewTextStyles = css({
   whiteSpace: 'nowrap',
 });
 
+const overflowTextStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
 const StatsBadge: React.FunctionComponent<{
   stats: number | string;
 }> = ({ stats }) => {
@@ -237,18 +243,29 @@ const ShardView: React.FunctionComponent<ShardViewProps> = (props) => {
   );
 };
 
+const Highlight: React.FunctionComponent<{
+  value: string;
+  field: string;
+}> = ({ field, value }) => {
+  return (
+    <li className={overflowTextStyles}>
+      <span>{field}: </span>
+      <strong title={value}>{value}</strong>
+    </li>
+  );
+};
+
 const Highlights: React.FunctionComponent<{
   highlights: Record<string, boolean | string>;
 }> = ({ highlights }) => {
   return (
     <ul>
       {Object.entries(highlights).map(([key, value], index) => (
-        <li key={index}>
-          <span>{key}: </span>
-          <strong>
-            {typeof value === 'boolean' ? (value ? 'yes' : 'no') : value}
-          </strong>
-        </li>
+        <Highlight
+          key={index}
+          field={key}
+          value={typeof value === 'boolean' ? (value ? 'yes' : 'no') : value}
+        />
       ))}
     </ul>
   );