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' } + )} + )}