Fix violations of the @elastic/eui/prefer-eui-icon-tip an ESLint rule (elastic#233648)

Closes: elastic#215330
Closes: elastic#215677
Closes: elastic#215904
Closes: elastic#219237

> \[!CAUTION]
> ⚠️ Changes were made by GenAI. Please review carefully.

##  Motivation
This PR fix violations of the `@elastic/eui/prefer-eui-icon-tip` an
ESLint rule.

## 📌 Summary

This PR refactors instances of:

```tsx
<EuiToolTip>
  <EuiIcon />
</EuiToolTip>
```
to use the `EuiIconTip` component directly, which improves accessibility
and offers better support for assistive technologies.

##  ✅ Changes Made

1. Replaced all `<EuiToolTip><EuiIcon /></EuiToolTip>` patterns with
`<EuiIconTip />`.
2. Migrated relevant props from both `EuiToolTip` and `EuiIcon` into the
new `EuiIconTip`

---------

Co-authored-by: kibanamachine <[email protected]>

Author: alexwizp

src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx

@@ -25,7 +25,7 @@ import {
   EuiNotificationBadge,
   EuiFieldSearch,
   EuiText,
-  EuiIcon,
+  EuiIconTip,
 } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { cssFavoriteHoverWithinEuiTableRow } from '@kbn/content-management-favorites-public';
@@ -135,51 +135,48 @@ export const getTableColumns = (
           case 'success':
           default:
             return (
-              <EuiToolTip
+              <EuiIconTip
                 position="top"
                 content={i18n.translate('esqlEditor.query.querieshistory.success', {
                   defaultMessage: 'Query ran successfully',
                 })}
-              >
-                <EuiIcon
-                  type="checkInCircleFilled"
-                  color="success"
-                  size="m"
-                  data-test-subj="ESQLEditor-queryHistory-success"
-                />
-              </EuiToolTip>
+                type="checkInCircleFilled"
+                color="success"
+                size="m"
+                iconProps={{
+                  'data-test-subj': 'ESQLEditor-queryHistory-success',
+                }}
+              />
             );
           case 'error':
             return (
-              <EuiToolTip
+              <EuiIconTip
                 position="top"
                 content={i18n.translate('esqlEditor.query.querieshistory.error', {
                   defaultMessage: 'Query failed',
                 })}
-              >
-                <EuiIcon
-                  type="error"
-                  color="danger"
-                  size="m"
-                  data-test-subj="ESQLEditor-queryHistory-error"
-                />
-              </EuiToolTip>
+                type="error"
+                color="danger"
+                size="m"
+                iconProps={{
+                  'data-test-subj': 'ESQLEditor-queryHistory-error',
+                }}
+              />
             );
           case 'warning':
             return (
-              <EuiToolTip
+              <EuiIconTip
                 position="top"
                 content={i18n.translate('esqlEditor.query.querieshistory.error', {
                   defaultMessage: 'Query failed',
                 })}
-              >
-                <EuiIcon
-                  type="warning"
-                  color="warning"
-                  size="m"
-                  data-test-subj="ESQLEditor-queryHistory-warning"
-                />
-              </EuiToolTip>
+                type="warning"
+                color="warning"
+                size="m"
+                iconProps={{
+                  'data-test-subj': 'ESQLEditor-queryHistory-warning',
+                }}
+              />
             );
         }
       },

src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/assignment/duplicate_warning.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { EuiIcon, EuiToolTip } from '@elastic/eui';
+import { EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { euiThemeVars } from '@kbn/ui-theme';
 
@@ -22,8 +22,12 @@ const duplicateWarning = i18n.translate(
 
 export function DuplicateWarning() {
   return (
-    <EuiToolTip position="bottom" content={duplicateWarning}>
-      <EuiIcon size="s" type="warning" color={euiThemeVars.euiColorWarningText} />
-    </EuiToolTip>
+    <EuiIconTip
+      position="bottom"
+      content={duplicateWarning}
+      type="warning"
+      size="s"
+      color={euiThemeVars.euiColorWarningText}
+    />
   );
 }

src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx

@@ -13,9 +13,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
-  EuiIcon,
+  EuiIconTip,
   EuiTitle,
-  EuiToolTip,
   EuiSpacer,
   useEuiTheme,
 } from '@elastic/eui';
@@ -97,7 +96,7 @@ export function PaletteColors({
               {i18n.translate('coloring.colorMapping.colorPicker.themeAwareColorsLabel', {
                 defaultMessage: 'Neutral colors',
               })}
-              <EuiToolTip
+              <EuiIconTip
                 position="bottom"
                 content={i18n.translate(
                   'coloring.colorMapping.colorPicker.themeAwareColorsTooltip',
@@ -106,9 +105,8 @@ export function PaletteColors({
                       'The provided neutral colors are theme-aware and will change appropriately when switching between light and dark themes.',
                   }
                 )}
-              >
-                <EuiIcon tabIndex={0} type="question" />
-              </EuiToolTip>
+                type="question"
+              />
             </h6>
           </EuiTitle>
           <EuiSpacer size="s" />

src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/color_picker/rgb_picker.tsx

@@ -13,8 +13,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  EuiIcon,
-  EuiToolTip,
+  EuiIconTip,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
@@ -156,7 +155,7 @@ export function RGBPicker({
                     top: 6px;
                   `}
                 >
-                  <EuiToolTip
+                  <EuiIconTip
                     position="bottom"
                     content={
                       isColorTextInvalid
@@ -173,19 +172,15 @@ export function RGBPicker({
                           })
                         : undefined
                     }
-                  >
-                    <EuiIcon
-                      tabIndex={0}
-                      type="warning"
-                      color={
-                        isColorTextInvalid
-                          ? euiThemeVars.euiColorDangerText
-                          : colorHasLowContrast
-                          ? euiThemeVars.euiColorWarningText
-                          : euiThemeVars.euiColorPrimary
-                      }
-                    />
-                  </EuiToolTip>
+                    type="warning"
+                    color={
+                      isColorTextInvalid
+                        ? euiThemeVars.euiColorDangerText
+                        : colorHasLowContrast
+                        ? euiThemeVars.euiColorWarningText
+                        : euiThemeVars.euiColorPrimary
+                    }
+                  />
                 </div>
               )}
             </EuiFlexGroup>

src/platform/packages/shared/response-ops/alerts-fields-browser/components/field_items/field_items.tsx

@@ -10,8 +10,8 @@
 import React from 'react';
 import {
   EuiCheckbox,
-  EuiIcon,
   EuiToolTip,
+  EuiIconTip,
   EuiFlexGroup,
   EuiFlexItem,
   EuiBadge,
@@ -111,13 +111,14 @@ const getDefaultFieldTableColumns = ({ highlight }: { highlight: string }): Fiel
       return (
         <EuiFlexGroup alignItems="center" gutterSize="none">
           <EuiFlexItem grow={false}>
-            <EuiToolTip content={type}>
-              <EuiIcon
-                data-test-subj={`field-${name}-icon`}
-                css={styles.icon}
-                type={getIconFromType(type ?? null)}
-              />
-            </EuiToolTip>
+            <EuiIconTip
+              content={type}
+              css={styles.icon}
+              type={getIconFromType(type ?? null)}
+              iconProps={{
+                'data-test-subj': `field-${name}-icon`,
+              }}
+            />
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>

src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx

@@ -17,7 +17,7 @@ import {
   EuiPanel,
   EuiButtonIcon,
   useEuiTheme,
-  EuiIcon,
+  EuiIconTip,
   EuiText,
   EuiTabs,
   EuiTab,
@@ -557,34 +557,34 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
     if (!connector || !actionType) {
       return (
         <EuiFlexItem grow={false}>
-          <EuiToolTip content={ACTION_UNABLE_TO_LOAD_CONNECTOR_TITLE}>
-            <EuiIcon
-              data-test-subj="action-group-error-icon"
-              type="warning"
-              color="danger"
-              size="l"
-            />
-          </EuiToolTip>
+          <EuiIconTip
+            content={ACTION_UNABLE_TO_LOAD_CONNECTOR_TITLE}
+            type="warning"
+            color="danger"
+            size="l"
+            iconProps={{
+              'data-test-subj': 'action-group-error-icon',
+            }}
+          />
         </EuiFlexItem>
       );
     }
 
     return (
       <EuiFlexItem grow={false}>
         {showActionGroupErrorIcon ? (
-          <EuiToolTip content={ACTION_ERROR_TOOLTIP}>
-            <EuiIcon
-              data-test-subj="action-group-error-icon"
-              type="warning"
-              color="danger"
-              size="l"
-            />
-          </EuiToolTip>
+          <EuiIconTip
+            content={ACTION_ERROR_TOOLTIP}
+            type="warning"
+            color="danger"
+            size="l"
+            iconProps={{
+              'data-test-subj': 'action-group-error-icon',
+            }}
+          />
         ) : (
           <Suspense fallback={null}>
-            <EuiToolTip content={actionType.name}>
-              <EuiIcon size="l" type={actionTypeModel.iconClass} />
-            </EuiToolTip>
+            <EuiIconTip content={actionType.name} type={actionTypeModel.iconClass} size="l" />
           </Suspense>
         )}
       </EuiFlexItem>

src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx

@@ -14,7 +14,7 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
+  EuiIconTip,
   EuiPanel,
   EuiText,
   EuiToolTip,
@@ -278,19 +278,22 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem
           <EuiFlexGroup alignItems="center">
             <EuiFlexItem grow={false}>
               {showActionGroupErrorIcon() ? (
-                <EuiToolTip content={ACTION_ERROR_TOOLTIP}>
-                  <EuiIcon
-                    data-test-subj="action-group-error-icon"
-                    type="warning"
-                    color="danger"
-                    size="l"
-                  />
-                </EuiToolTip>
+                <EuiIconTip
+                  content={ACTION_ERROR_TOOLTIP}
+                  type="warning"
+                  color="danger"
+                  size="l"
+                  iconProps={{
+                    'data-test-subj': 'action-group-error-icon',
+                  }}
+                />
               ) : (
                 <Suspense fallback={null}>
-                  <EuiToolTip content={actionType?.name}>
-                    <EuiIcon size="l" type={actionTypeModel.iconClass} />
-                  </EuiToolTip>
+                  <EuiIconTip
+                    content={actionType?.name}
+                    size="l"
+                    type={actionTypeModel.iconClass}
+                  />
                 </Suspense>
               )}
             </EuiFlexItem>

src/platform/plugins/private/input_control_vis/public/components/vis/__snapshots__/form_row.test.tsx.snap

@@ -10,7 +10,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import { EuiFormRow, EuiToolTip, EuiIcon } from '@elastic/eui';
+import { EuiFormRow, EuiToolTip, EuiIconTip } from '@elastic/eui';
 
 export interface FormRowProps {
   label: string;
@@ -33,9 +33,7 @@ export function FormRow(props: FormRowProps) {
 
   const label = props.warningMsg ? (
     <>
-      <EuiToolTip position="top" content={props.warningMsg}>
-        <EuiIcon type="warning" />
-      </EuiToolTip>
+      <EuiIconTip content={props.warningMsg} type="warning" position="top" />
       {props.label}
     </>
   ) : (

src/platform/plugins/private/input_control_vis/public/components/vis/form_row.tsx

@@ -8,7 +8,7 @@
  */
 
 import type { EuiBasicTableColumn } from '@elastic/eui';
-import { EuiIcon, EuiToolTip } from '@elastic/eui';
+import { EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { capitalize } from 'lodash';
@@ -44,13 +44,13 @@ export const appIdColumn: EuiBasicTableColumn<UISession> = {
   render: (appId: UISession['appId'], { id }) => {
     const app = `${appToIcon(appId)}`;
     return (
-      <EuiToolTip content={appToTooltip(appId) ?? capitalize(app)}>
-        <EuiIcon
-          data-test-subj="sessionManagementAppIcon"
-          data-test-app-id={app}
-          type={`${app}App`}
-        />
-      </EuiToolTip>
+      <EuiIconTip
+        content={appToTooltip(appId) ?? capitalize(app)}
+        type={`${app}App`}
+        iconProps={{
+          'data-test-subj': 'sessionManagementAppIcon',
+        }}
+      />
     );
   },
 };