feat(indexes): show tooltip for rolling index build status COMPASS-9129 (#6799)

feat(indexes): show tooltip for rolling index build status

Author: gribnoysup

packages/compass-indexes/src/components/regular-indexes-table/status-field.tsx

@@ -18,23 +18,26 @@ const statusFieldStyles = css({
   alignItems: 'baseline',
 });
 
-const iconBadgeStyles = css({
-  gap: spacing[200],
-});
-
-const ErrorBadgeWithTooltip: React.FunctionComponent<{
+const BadgeWithTooltip: React.FunctionComponent<{
   ['data-testid']?: string;
-  text: string;
   tooltip?: string | null;
   darkMode?: boolean;
-}> = ({ ['data-testid']: dataTestId, text, tooltip, darkMode }) => {
+  variant?: BadgeVariant;
+  children: React.ReactNode;
+}> = ({
+  ['data-testid']: dataTestId,
+  children,
+  tooltip,
+  darkMode,
+  variant,
+}) => {
   return (
     <Tooltip
       enabled={!!tooltip}
       darkMode={darkMode}
       trigger={
-        <Badge data-testid={dataTestId} variant={BadgeVariant.Red}>
-          {text}
+        <Badge data-testid={dataTestId} variant={variant}>
+          {children}
         </Badge>
       }
     >
@@ -63,13 +66,13 @@ const StatusField: React.FunctionComponent<StatusFieldProps> = ({
       )}
 
       {status === 'building' && (
-        <Badge
+        <BadgeWithTooltip
           data-testid="index-building"
           variant={BadgeVariant.Blue}
-          className={iconBadgeStyles}
+          tooltip="This index is being built in a rolling process"
         >
           Building
-        </Badge>
+        </BadgeWithTooltip>
       )}
 
       {status === 'inprogress' && (
@@ -79,12 +82,14 @@ const StatusField: React.FunctionComponent<StatusFieldProps> = ({
       )}
 
       {status === 'failed' && (
-        <ErrorBadgeWithTooltip
+        <BadgeWithTooltip
           data-testid="index-failed"
-          text="Failed"
           tooltip={error ? error : ''}
           darkMode={darkMode}
-        />
+          variant={BadgeVariant.Red}
+        >
+          Failed
+        </BadgeWithTooltip>
       )}
     </div>
   );