fix(ui): Add tooltips to Icons in Ingestion page (#14385)

datahub-web-react/src/alchemy-components/components/Icon/Icon.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@components';
 import React from 'react';
 
 import { IconWrapper } from '@components/components/Icon/components';
@@ -11,6 +12,7 @@ export const iconDefaults: IconPropsDefaults = {
     size: '4xl',
     color: 'inherit',
     rotate: '0',
+    tooltipText: '',
 };
 
 export const Icon = ({
@@ -22,6 +24,7 @@ export const Icon = ({
     colorLevel,
     rotate = iconDefaults.rotate,
     weight,
+    tooltipText,
     ...props
 }: IconProps) => {
     const { filled, outlined } = getIconNames();
@@ -53,14 +56,16 @@ export const Icon = ({
 
     return (
         <IconWrapper size={getFontSize(size)} rotate={getRotationTransform(rotate)} {...props}>
-            <IconComponent
-                sx={{
-                    fontSize: getFontSize(size),
-                    color: getColor(color, colorLevel),
-                }}
-                style={{ color: getColor(color, colorLevel) }}
-                weight={source === 'phosphor' ? weight : undefined} // Phosphor icons use 'weight' prop
-            />
+            <Tooltip title={tooltipText}>
+                <IconComponent
+                    sx={{
+                        fontSize: getFontSize(size),
+                        color: getColor(color, colorLevel),
+                    }}
+                    style={{ color: getColor(color, colorLevel) }}
+                    weight={source === 'phosphor' ? weight : undefined} // Phosphor icons use 'weight' prop
+                />
+            </Tooltip>
         </IconWrapper>
     );
 };

datahub-web-react/src/alchemy-components/components/Icon/types.ts

@@ -31,6 +31,7 @@ export interface IconPropsDefaults {
     color: FontColorOptions;
     colorLevel?: FontColorLevelOptions;
     rotate: RotationOptions;
+    tooltipText?: string;
 }
 
 export interface IconProps extends Partial<IconPropsDefaults>, Omit<HTMLAttributes<HTMLElement>, 'color'> {

datahub-web-react/src/app/ingestV2/executions/components/columns/ActionsColumn.tsx

@@ -53,7 +53,12 @@ export function ActionsColumn({ record, setFocusExecutionUrn, handleRollback, ha
             dropdownItems={items}
             extraActions={
                 record.status === EXECUTION_REQUEST_STATUS_SUCCESS && record.showRollback ? (
-                    <Icon icon="ArrowUUpLeft" source="phosphor" onClick={() => handleRollback(record.id)} />
+                    <Icon
+                        icon="ArrowUUpLeft"
+                        source="phosphor"
+                        onClick={() => handleRollback(record.id)}
+                        tooltipText="Rollback"
+                    />
                 ) : null
             }
         />

datahub-web-react/src/app/ingestV2/executions/components/columns/RollbackExecutionConfirmation.tsx

@@ -13,9 +13,20 @@ export default function RollbackExecutionConfirmation({ isOpen, onConfirm, onCan
         <ConfirmationModal
             isOpen={isOpen}
             modalTitle="Confirm Rollback"
-            modalText="Are you sure you want to continue? 
-            Rolling back this ingestion run will remove any new data ingested during the run. This may
-            exclude data that was previously extracted, but did not change during this run."
+            modalText={
+                <>
+                    Are you sure you want to continue? Rolling back this ingestion run will remove any new data ingested
+                    during the run. This may exclude data that was previously extracted, but did not change during this
+                    run.{' '}
+                    <a
+                        href="https://docs.datahub.com/docs/how/delete-metadata#rollback-ingestion-run"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Learn more
+                    </a>
+                </>
+            }
             handleConfirm={onConfirm}
             handleClose={onCancel}
         />

datahub-web-react/src/app/ingestV2/source/IngestionSourceTableColumns.tsx

@@ -337,6 +337,7 @@ export function ActionsColumn({
                         e.stopPropagation();
                         onCancel(record.lastExecUrn, record.urn);
                     }}
+                    tooltipText="Stop Execution"
                 />
             );
         }
@@ -350,6 +351,7 @@ export function ActionsColumn({
                     e.stopPropagation();
                     onExecute(record.urn);
                 }}
+                tooltipText="Execute"
             />
         );
     };