Upgrade EUI to v94.1.0 (major EuiTable refactors)

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.tsx

@@ -6,8 +6,9 @@
  */
 
 import React, { Dispatch } from 'react';
+import { css } from '@emotion/css';
 import { i18n } from '@kbn/i18n';
-import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import { EuiToolTip, EuiButtonIcon, useEuiTheme, euiCanAnimate } from '@elastic/eui';
 import type { Field } from './utils';
 
 interface AddMetadataPinToRowProps {
@@ -25,6 +26,8 @@ export const AddMetadataPinToRow = ({
   pinnedItems,
   onPinned,
 }: AddMetadataPinToRowProps) => {
+  const { euiTheme } = useEuiTheme();
+
   const handleAddPin = () => {
     onPinned([...pinnedItems, fieldName]);
   };
@@ -58,8 +61,22 @@ export const AddMetadataPinToRow = ({
     );
   }
 
+  // Custom table show on hover CSS, since this button is not technically in an action column
+  // Potential EUI TODO - multiple action columns and `align`ed actions are not currently supported
+  const showOnRowHoverCss = css`
+    opacity: 0;
+    ${euiCanAnimate} {
+      transition: opacity ${euiTheme.animation.normal} ${euiTheme.animation.resistance};
+    }
+
+    .euiTableRow:hover &,
+    &:focus-within {
+      opacity: 1;
+    }
+  `;
+
   return (
-    <span className="euiTableCellContent__hoverItem expandedItemActions__completelyHide">
+    <span className={showOnRowHoverCss}>
       <EuiToolTip content={PIN_FIELD}>
         <EuiButtonIcon
           color="primary"

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/metadata/table.tsx

@@ -86,7 +86,6 @@ export const Table = ({ loading, rows, onSearchChange, search, showActionsColumn
         align: 'center' as HorizontalAlignment,
         width: '5%',
         sortable: false,
-        showOnHover: true,
         render: (_name: string, item: Field) => {
           return (
             <AddMetadataPinToRow
@@ -158,7 +157,6 @@ export const Table = ({ loading, rows, onSearchChange, search, showActionsColumn
               field: 'value',
               name: 'Actions',
               sortable: false,
-              showOnHover: true,
               align: 'center' as HorizontalAlignment,
               render: (_name: string, item: Field) => {
                 return <AddMetadataFilterButton item={item} />;
@@ -176,7 +174,6 @@ export const Table = ({ loading, rows, onSearchChange, search, showActionsColumn
       responsiveBreakpoint={false}
       columns={columns}
       items={fieldsWithPins}
-      rowProps={{ className: 'euiTableRow-hasActions' }}
       search={searchBar}
       loading={loading}
       error={searchError ? `${searchError.message}` : ''}