diff --git a/x-pack/platform/plugins/private/translations/translations/de-DE.json b/x-pack/platform/plugins/private/translations/translations/de-DE.json
index da6e08f4cf0d9..518d558e8f296 100644
--- a/x-pack/platform/plugins/private/translations/translations/de-DE.json
+++ b/x-pack/platform/plugins/private/translations/translations/de-DE.json
@@ -55014,8 +55014,6 @@
"xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteDisabledTitle": "Connectors können nicht gelöscht werden",
"xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteLabel": "{count} löschen",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListLabel": "Verfügbare Connector-Typen",
- "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription": "Connector autorisieren",
- "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName": "Autorisieren",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription": "Autorisierung widerrufen",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName": "Autorisierung abbrechen",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription": "Diesen Connector löschen",
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
index 2a52004141c59..c9407bf7e482a 100644
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -54829,8 +54829,6 @@
"xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteDisabledTitle": "Impossible de supprimer les connecteurs",
"xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteLabel": "Supprimer {count}",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListLabel": "Types de connecteurs disponibles",
- "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription": "Autoriser le connecteur",
- "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName": "Autoriser",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription": "Annuler l'autorisation",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName": "Annuler l'autorisation",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription": "Supprimer ce connecteur",
diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
index 92965a96493ed..b2121cc220dee 100644
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -55223,8 +55223,6 @@
"xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteDisabledTitle": "コネクターを削除できません",
"xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteLabel": "{count} 件を削除",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListLabel": "利用可能なコネクタータイプ",
- "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription": "コネクターを認証",
- "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName": "認証",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription": "認証をキャンセル",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName": "承認取り消し",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription": "このコネクターを削除",
diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
index c3803c2fdd87e..42e714fbec4d0 100644
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -55213,8 +55213,6 @@
"xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteDisabledTitle": "无法删除连接器",
"xpack.triggersActionsUI.sections.actionsConnectorsList.buttons.deleteLabel": "删除 {count} 个",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListLabel": "可用连接器类型",
- "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorDescription": "授权连接器",
- "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorName": "授权",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationDescription": "取消授权",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.cancelAuthorizationName": "取消授权",
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription": "删除此连接器",
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx
index 7b887dbb1d77f..c43d5828bfdc8 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx
@@ -904,7 +904,7 @@ describe('actions_connectors_list', () => {
expect(screen.queryByTestId('authorizeConnector')).not.toBeInTheDocument();
});
- it('shows Cancel button when isAwaitingCallback is true (user in OAuth flow)', async () => {
+ it('shows "Connecting..." button with loading spinner and cancel icon when isAwaitingCallback is true', async () => {
useConnectorOAuthConnect.mockReturnValue({
connect: jest.fn(),
cancelConnect: jest.fn(),
@@ -937,10 +937,96 @@ describe('actions_connectors_list', () => {
);
expect(await screen.findByTestId('actionsTable')).toBeInTheDocument();
+
+ const connectingButton = await screen.findByTestId('connectingConnector');
+ expect(connectingButton).toBeInTheDocument();
+ expect(connectingButton).toHaveTextContent('Connecting...');
+ expect(connectingButton).toBeDisabled();
+
expect(await screen.findByTestId('cancelAuthorizeConnector')).toBeInTheDocument();
+
expect(screen.queryByTestId('authorizeConnector')).not.toBeInTheDocument();
});
+ it('shows "Connecting..." button with loading spinner when isConnecting is true', async () => {
+ useConnectorOAuthConnect.mockReturnValue({
+ connect: jest.fn(),
+ cancelConnect: jest.fn(),
+ isConnecting: true,
+ isAwaitingCallback: false,
+ });
+
+ const actions: ActionConnector[] = [
+ createMockActionConnector({
+ id: 'oauth-connector',
+ actionTypeId: 'google-drive',
+ name: 'Google Drive Connector',
+ referencedByCount: 1,
+ config: { authType: 'oauth_authorization_code' },
+ userAuthStatus: 'not_connected',
+ }),
+ ];
+
+ render(
+
+ {}}
+ loadActions={async () => {}}
+ editItem={() => {}}
+ isLoadingActions={false}
+ actions={actions}
+ setActions={() => {}}
+ />
+
+ );
+
+ expect(await screen.findByTestId('actionsTable')).toBeInTheDocument();
+ const connectButton = await screen.findByTestId('authorizeConnector');
+ expect(connectButton).toHaveTextContent('Connecting...');
+ expect(screen.queryByTestId('cancelAuthorizeConnector')).not.toBeInTheDocument();
+ });
+
+ it('calls cancelConnect when cancel icon is clicked during awaiting callback', async () => {
+ const cancelConnect = jest.fn();
+ const user = userEvent.setup();
+
+ useConnectorOAuthConnect.mockReturnValue({
+ connect: jest.fn(),
+ cancelConnect,
+ isConnecting: false,
+ isAwaitingCallback: true,
+ });
+
+ const actions: ActionConnector[] = [
+ createMockActionConnector({
+ id: 'oauth-connector',
+ actionTypeId: 'google-drive',
+ name: 'Google Drive Connector',
+ referencedByCount: 1,
+ config: { authType: 'oauth_authorization_code' },
+ userAuthStatus: 'not_connected',
+ }),
+ ];
+
+ render(
+
+ {}}
+ loadActions={async () => {}}
+ editItem={() => {}}
+ isLoadingActions={false}
+ actions={actions}
+ setActions={() => {}}
+ />
+
+ );
+
+ const cancelButton = await screen.findByTestId('cancelAuthorizeConnector');
+ await user.click(cancelButton);
+
+ expect(cancelConnect).toHaveBeenCalled();
+ });
+
it('calls setActions with updated userAuthStatus to connected after successful authorization', async () => {
const setActions = jest.fn();
const user = userEvent.setup();
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
index 7ad0e2c0475ca..acf3ae36c8d05 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
@@ -249,42 +249,66 @@ const ActionsConnectorsList = ({
const name = getConnectorName(value, item);
const link = (
-
+
- editItem(item, EditConnectorTabs.Configuration)}
- key={item.id}
- disabled={
- isDisabledEarsConnector(item) ||
- (actionTypesIndex ? !actionTypesIndex[item.actionTypeId]?.enabled : true)
- }
- >
- {name}
-
+
+
+ editItem(item, EditConnectorTabs.Configuration)}
+ key={item.id}
+ disabled={
+ isDisabledEarsConnector(item) ||
+ (actionTypesIndex ? !actionTypesIndex[item.actionTypeId]?.enabled : true)
+ }
+ >
+ {name}
+
+
+ {item.isMissingSecrets ? (
+
+
+
+ ) : null}
+ {showDeprecatedTooltip && (
+
+
+
+ )}
+
- {item.isMissingSecrets ? (
+ {item.isPreconfigured && (
-
- ) : null}
- {showDeprecatedTooltip && (
-
-
-
)}
{isDisabledEarsConnector(item) && (
@@ -657,20 +681,7 @@ const DeleteOperation: React.FunctionComponent<{
onDelete: () => void;
}> = ({ item, canDelete, onDelete }) => {
if (item.isPreconfigured) {
- return (
-
-
-
- );
+ return null;
}
return (
@@ -836,46 +847,51 @@ const OAuthOperations: React.FunctionComponent<{
<>
{!isUserConnectedToConnector && (
- {isAwaitingCallback ? (
-
-
-
- ) : (
-
-
+
+
-
- )}
+ color="text"
+ isLoading={isConnecting || isAwaitingCallback}
+ disabled={isDisconnecting || isAwaitingCallback}
+ size="s"
+ >
+ {isConnecting || isAwaitingCallback
+ ? i18n.translate(
+ 'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.connectingButton',
+ { defaultMessage: 'Connecting...' }
+ )
+ : i18n.translate(
+ 'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.authorizeConnectorButton',
+ { defaultMessage: 'Connect to your account' }
+ )}
+
+
+ {isAwaitingCallback && (
+
+
+
+
+
+ )}
+
)}
{isUserConnectedToConnector && (
@@ -886,7 +902,7 @@ const OAuthOperations: React.FunctionComponent<{
{ defaultMessage: 'Disconnect connector' }
)}
>
- setShowDisconnectConfirm(true)}
- iconType="linkSlash"
- />
+ >
+ {isDisconnecting || isAwaitingCallback
+ ? i18n.translate(
+ 'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.disconnectingConnectorButton',
+ { defaultMessage: 'Disconnecting' }
+ )
+ : i18n.translate(
+ 'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.disconnectConnectorButton',
+ { defaultMessage: 'Disconnect' }
+ )}
+
)}