From 37c1707ca1b99e8cddb934ddde102214a685313b Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 29 May 2024 05:23:35 -0400
Subject: [PATCH] [8.14] [ResponseOps][Connectors] Fix bug with deprecated icon
 in the connectors table (#184342) (#184392)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.14`:
- [[ResponseOps][Connectors] Fix bug with deprecated icon in the
connectors table
(#184342)](https://github.com/elastic/kibana/pull/184342)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Christos
Nasikas","email":"christos.nasikas@elastic.co"},"sourceCommit":{"committedDate":"2024-05-29T07:52:37Z","message":"[ResponseOps][Connectors]
Fix bug with deprecated icon in the connectors table (#184342)\n\n##
Summary\r\n\r\nIf the connector's table shows a deprecated connector it
crashes. This\r\nPR fixes this issue by removing any usage of the
deprecated access to\r\nthe EUI theme variables.\r\n\r\n##
Screenshots\r\n\r\n<img width=\"541\" alt=\"Screenshot 2024-05-28 at 1
34
48 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/a2aad5e3-c49c-476a-b7bf-37ec57ed03b9\">\r\n\r\n<img
width=\"456\" alt=\"Screenshot 2024-05-28 at 1 33
13 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/b2953215-1744-481b-8fbf-70a5df26fc30\">\r\n\r\n<img
width=\"743\" alt=\"Screenshot 2024-05-28 at 1 34
11 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/66b1e86f-f618-4a68-bdc0-7c6e1727a4b7\">\r\n\r\n\r\n##
Testing\r\n\r\n1. Create a deprecated SN connector.\r\n2. Verify that
the page that list all connectors (Stack Management ->\r\nConnectors)
does not crash\r\n\r\nYou can create a deprecated SN connector
like:\r\n\r\n```\r\ncurl --location
'https://localhost:5601/api/actions/connector' \\\r\n--header 'kbn-xsrf:
true' \\\r\n--header 'Content-Type: application/json' \\\r\n--header
'Authorization: Basic <basic auth token>' \\\r\n--data-raw '{\r\n
\"name\": \"SN\",\r\n \"connector_type_id\": \".servicenow\",\r\n
\"config\": {\r\n \"apiUrl\":
\"https://<whatever>.service-now.com/\",\r\n \"usesTableApi\": true <--
This makes the connector deprecated\r\n },\r\n \"secrets\": {\r\n
\"username\": \"admin\",\r\n \"password\": \"<whatever>\"\r\n
}\r\n}'\r\n```\r\n\r\n### For maintainers\r\n\r\n- [x] This was checked
for breaking API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a365891c6847c0fef80d909666f1ce5cbf0986b3","branchLabelMapping":{"^v8.15.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:ResponseOps","Feature:Actions/ConnectorsManagement","v8.14.0","v8.15.0"],"title":"[ResponseOps][Connectors]
Fix bug with deprecated icon in the connectors
table","number":184342,"url":"https://github.com/elastic/kibana/pull/184342","mergeCommit":{"message":"[ResponseOps][Connectors]
Fix bug with deprecated icon in the connectors table (#184342)\n\n##
Summary\r\n\r\nIf the connector's table shows a deprecated connector it
crashes. This\r\nPR fixes this issue by removing any usage of the
deprecated access to\r\nthe EUI theme variables.\r\n\r\n##
Screenshots\r\n\r\n<img width=\"541\" alt=\"Screenshot 2024-05-28 at 1
34
48 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/a2aad5e3-c49c-476a-b7bf-37ec57ed03b9\">\r\n\r\n<img
width=\"456\" alt=\"Screenshot 2024-05-28 at 1 33
13 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/b2953215-1744-481b-8fbf-70a5df26fc30\">\r\n\r\n<img
width=\"743\" alt=\"Screenshot 2024-05-28 at 1 34
11 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/66b1e86f-f618-4a68-bdc0-7c6e1727a4b7\">\r\n\r\n\r\n##
Testing\r\n\r\n1. Create a deprecated SN connector.\r\n2. Verify that
the page that list all connectors (Stack Management ->\r\nConnectors)
does not crash\r\n\r\nYou can create a deprecated SN connector
like:\r\n\r\n```\r\ncurl --location
'https://localhost:5601/api/actions/connector' \\\r\n--header 'kbn-xsrf:
true' \\\r\n--header 'Content-Type: application/json' \\\r\n--header
'Authorization: Basic <basic auth token>' \\\r\n--data-raw '{\r\n
\"name\": \"SN\",\r\n \"connector_type_id\": \".servicenow\",\r\n
\"config\": {\r\n \"apiUrl\":
\"https://<whatever>.service-now.com/\",\r\n \"usesTableApi\": true <--
This makes the connector deprecated\r\n },\r\n \"secrets\": {\r\n
\"username\": \"admin\",\r\n \"password\": \"<whatever>\"\r\n
}\r\n}'\r\n```\r\n\r\n### For maintainers\r\n\r\n- [x] This was checked
for breaking API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a365891c6847c0fef80d909666f1ce5cbf0986b3"}},"sourceBranch":"main","suggestedTargetBranches":["8.14"],"targetPullRequestStates":[{"branch":"8.14","label":"v8.14.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.15.0","branchLabelMappingKey":"^v8.15.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/184342","number":184342,"mergeCommit":{"message":"[ResponseOps][Connectors]
Fix bug with deprecated icon in the connectors table (#184342)\n\n##
Summary\r\n\r\nIf the connector's table shows a deprecated connector it
crashes. This\r\nPR fixes this issue by removing any usage of the
deprecated access to\r\nthe EUI theme variables.\r\n\r\n##
Screenshots\r\n\r\n<img width=\"541\" alt=\"Screenshot 2024-05-28 at 1
34
48 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/a2aad5e3-c49c-476a-b7bf-37ec57ed03b9\">\r\n\r\n<img
width=\"456\" alt=\"Screenshot 2024-05-28 at 1 33
13 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/b2953215-1744-481b-8fbf-70a5df26fc30\">\r\n\r\n<img
width=\"743\" alt=\"Screenshot 2024-05-28 at 1 34
11 PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/7871006/66b1e86f-f618-4a68-bdc0-7c6e1727a4b7\">\r\n\r\n\r\n##
Testing\r\n\r\n1. Create a deprecated SN connector.\r\n2. Verify that
the page that list all connectors (Stack Management ->\r\nConnectors)
does not crash\r\n\r\nYou can create a deprecated SN connector
like:\r\n\r\n```\r\ncurl --location
'https://localhost:5601/api/actions/connector' \\\r\n--header 'kbn-xsrf:
true' \\\r\n--header 'Content-Type: application/json' \\\r\n--header
'Authorization: Basic <basic auth token>' \\\r\n--data-raw '{\r\n
\"name\": \"SN\",\r\n \"connector_type_id\": \".servicenow\",\r\n
\"config\": {\r\n \"apiUrl\":
\"https://<whatever>.service-now.com/\",\r\n \"usesTableApi\": true <--
This makes the connector deprecated\r\n },\r\n \"secrets\": {\r\n
\"username\": \"admin\",\r\n \"password\": \"<whatever>\"\r\n
}\r\n}'\r\n```\r\n\r\n### For maintainers\r\n\r\n- [x] This was checked
for breaking API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a365891c6847c0fef80d909666f1ce5cbf0986b3"}}]}]
BACKPORT-->

Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co>
---
 .../components/actions_connectors_list.tsx    | 95 ++++++++++---------
 1 file changed, 48 insertions(+), 47 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
index bbe68c71b9165..5f583790d3b8b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
+++ b/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 ? (