[ResponseOps][Connectors] Fix bug with deprecated icon in the connect…

…ors table (elastic#184342)

## Summary

If the connector's table shows a deprecated connector it crashes. This
PR fixes this issue by removing any usage of the deprecated access to
the EUI theme variables.

## Screenshots

<img width="541" alt="Screenshot 2024-05-28 at 1 34 48 PM"
src="https://github.com/elastic/kibana/assets/7871006/a2aad5e3-c49c-476a-b7bf-37ec57ed03b9">

<img width="456" alt="Screenshot 2024-05-28 at 1 33 13 PM"
src="https://github.com/elastic/kibana/assets/7871006/b2953215-1744-481b-8fbf-70a5df26fc30">

<img width="743" alt="Screenshot 2024-05-28 at 1 34 11 PM"
src="https://github.com/elastic/kibana/assets/7871006/66b1e86f-f618-4a68-bdc0-7c6e1727a4b7">


## Testing

1. Create a deprecated SN connector.
2. Verify that the page that list all connectors (Stack Management ->
Connectors) does not crash

You can create a deprecated SN connector like:

```
curl --location 'https://localhost:5601/api/actions/connector' \
--header 'kbn-xsrf: true' \
--header 'Content-Type: application/json' \
--header 'Authorization: Basic <basic auth token>' \
--data-raw '{
    "name": "SN",
    "connector_type_id": ".servicenow",
    "config": {
        "apiUrl": "https://<whatever>.service-now.com/",
        "usesTableApi": true <-- This makes the connector deprecated
    },
    "secrets": {
        "username": "admin",
        "password": "<whatever>"
    }
}'
```

### For maintainers

- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { ClassNames } from '@emotion/react';
 import React, { useState, useEffect } from 'react';
 import {
   EuiInMemoryTable,
@@ -25,10 +24,9 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { omit } from 'lodash';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { withTheme, EuiTheme } from '@kbn/kibana-react-plugin/common';
-import { getConnectorCompatibility } from '@kbn/actions-plugin/common';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
+import { getConnectorCompatibility } from '@kbn/actions-plugin/common';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { loadAllActions, loadActionTypes, deleteActions } from '../../../lib/action_connector_api';
 import {
   hasDeleteActionsCapability,
@@ -63,29 +61,21 @@ interface EditConnectorProps {
   isFix?: boolean;
 }
 
-const ConnectorIconTipWithSpacing = withTheme(({ theme }: { theme: EuiTheme }) => {
+const ConnectorIconTipWithSpacing: React.FC = () => {
   return (
-    <ClassNames>
-      {({ css }) => (
-        <EuiIconTip
-          anchorClassName={css({
-            /**
-             * Adds some spacing to the left of the warning icon for deprecated connectors
-             */
-            marginLeft: theme.eui.euiSizeS,
-            marginBottom: '0 !important',
-          })}
-          aria-label="Warning"
-          size="m"
-          type="warning"
-          color="warning"
-          content={connectorDeprecatedMessage}
-          position="right"
-        />
-      )}
-    </ClassNames>
+    <EuiIconTip
+      aria-label="Warning"
+      size="m"
+      type="warning"
+      color="warning"
+      content={connectorDeprecatedMessage}
+      position="right"
+      iconProps={{
+        style: { verticalAlign: 'text-top' },
+      }}
+    />
   );
-});
+};
 
 const ActionsConnectorsList: React.FunctionComponent = () => {
   const {
@@ -246,30 +236,41 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
         const name = getConnectorName(value, item);
 
         const link = (
-          <>
-            <EuiLink
-              data-test-subj={`edit${item.id}`}
-              title={name}
-              onClick={() => editItem(item, EditConnectorTabs.Configuration)}
-              key={item.id}
-              disabled={actionTypesIndex ? !actionTypesIndex[item.actionTypeId]?.enabled : true}
-            >
-              {name}
-            </EuiLink>
+          <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="xs">
+            <EuiFlexItem grow={false}>
+              <EuiLink
+                data-test-subj={`edit${item.id}`}
+                title={name}
+                onClick={() => editItem(item, EditConnectorTabs.Configuration)}
+                key={item.id}
+                disabled={actionTypesIndex ? !actionTypesIndex[item.actionTypeId]?.enabled : true}
+              >
+                {name}
+              </EuiLink>
+            </EuiFlexItem>
             {item.isMissingSecrets ? (
-              <EuiIconTip
-                iconProps={{ 'data-test-subj': `missingSecrets_${item.id}` }}
-                type="warning"
-                color="warning"
-                content={i18n.translate(
-                  'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.missingSecretsDescription',
-                  { defaultMessage: 'Sensitive information was not imported' }
-                )}
-                position="right"
-              />
+              <EuiFlexItem grow={false}>
+                <EuiIconTip
+                  iconProps={{
+                    'data-test-subj': `missingSecrets_${item.id}`,
+                    style: { verticalAlign: 'text-top' },
+                  }}
+                  type="warning"
+                  color="warning"
+                  content={i18n.translate(
+                    'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.missingSecretsDescription',
+                    { defaultMessage: 'Sensitive information was not imported' }
+                  )}
+                  position="right"
+                />
+              </EuiFlexItem>
             ) : null}
-            {showDeprecatedTooltip && <ConnectorIconTipWithSpacing />}
-          </>
+            {showDeprecatedTooltip && (
+              <EuiFlexItem grow={false}>
+                <ConnectorIconTipWithSpacing />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
         );
 
         return checkEnabledResult.isEnabled ? (