chore(explain-plan): update tooltip message to match symbols (#4822)

Author: Anemy

packages/compass-components/src/components/index-icon.tsx

@@ -3,13 +3,29 @@ import Icon from '@leafygreen-ui/icon';
 
 type IndexDirection = number | unknown;
 
-const IndexIcon = ({ direction }: { direction: IndexDirection }) => {
+const IndexIcon = ({
+  className,
+  direction,
+}: {
+  className?: string;
+  direction: IndexDirection;
+}) => {
   return direction === 1 ? (
-    <Icon glyph="ArrowUp" size="small" aria-label="Ascending index" />
+    <Icon
+      className={className}
+      glyph="ArrowUp"
+      size="small"
+      aria-label="Ascending index"
+    />
   ) : direction === -1 ? (
-    <Icon glyph="ArrowDown" size="small" aria-label="Descending index" />
+    <Icon
+      className={className}
+      glyph="ArrowDown"
+      size="small"
+      aria-label="Descending index"
+    />
   ) : (
-    <span>({String(direction)})</span>
+    <span className={className}>({String(direction)})</span>
   );
 };
 

packages/compass-explain-plan/src/components/explain-plan-side-summary.tsx

@@ -10,6 +10,7 @@ import {
   useDarkMode,
   cx,
   IndexBadge,
+  IndexIcon,
   Icon,
   SignalPopover,
   PerformanceSignals,
@@ -47,7 +48,7 @@ const ExplainPlanSummaryStat = <T extends string | boolean | number>({
   value?: T;
   formatter?: (val: T) => string;
   label: ReactNode;
-  definition: string;
+  definition: React.ReactNode;
   ['data-testid']?: string;
 }): ReactElement | null => {
   return React.createElement(
@@ -126,6 +127,10 @@ const indexesSummaryStyles = css({
   gap: spacing[2],
 });
 
+const indexIconDescriptionStyles = css({
+  verticalAlign: 'text-top',
+});
+
 export const ExplainPlanSummary: React.FunctionComponent<
   ExplainPlanSummaryProps
 > = ({
@@ -258,7 +263,21 @@ export const ExplainPlanSummary: React.FunctionComponent<
             <ExplainPlanSummaryStat
               as="div"
               label={indexMessageText}
-              definition="The index(es) used to fulfill the query. A value of 1 indicates an ascending index, and a value of -1 indicates a descending index."
+              definition={
+                <>
+                  The index(es) used to fulfill the query. A value of{' '}
+                  <IndexIcon
+                    className={indexIconDescriptionStyles}
+                    direction={1}
+                  />{' '}
+                  indicates an ascending index, and a value of{' '}
+                  <IndexIcon
+                    className={indexIconDescriptionStyles}
+                    direction={-1}
+                  />{' '}
+                  indicates a descending index.
+                </>
+              }
             ></ExplainPlanSummaryStat>
             {indexKeys.map(([field, value]) => {
               return (