diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_home.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_home.test.tsx index 7c87676ae0bd..e95e49843fd7 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_home.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_home.test.tsx @@ -143,6 +143,39 @@ describe('ActionsConnectorsHome', () => { expect(documentationButton).toBeEnabled(); }); + it('show "Create connector" and "Documentation" buttons when on Connectors Edit tab', async () => { + const props: RouteComponentProps = { + history: createMemoryHistory({ + initialEntries: ['/connectors/1'], + }), + location: createLocation('/connectors/1'), + match: { + isExact: true, + path: '/connectors/1', + url: '', + params: { + section: 'connectors', + }, + }, + }; + + render( + + + + + + + + ); + + const createConnectorButton = await screen.findByRole('button', { name: 'Create connector' }); + expect(createConnectorButton).toBeEnabled(); + + const documentationButton = await screen.findByRole('link', { name: 'Documentation' }); + expect(documentationButton).toBeEnabled(); + }); + it('hide "Create connector" button when on Logs tab', async () => { const props: RouteComponentProps = { history: createMemoryHistory({ diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_home.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_home.tsx index 3611797da36a..e2671ae7246b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_home.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_home.tsx @@ -8,7 +8,7 @@ import React, { lazy, useCallback, useEffect, useState } from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { Routes, Route } from '@kbn/shared-ux-router'; -import { useLocation } from 'react-router-dom'; +import { useLocation, matchPath } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; import { EuiPageTemplate, EuiSpacer, EuiPageHeader, EuiButton, EuiButtonEmpty } from '@elastic/eui'; @@ -54,9 +54,12 @@ export const ActionsConnectorsHome: React.FunctionComponent([]); const [isLoadingActions, setIsLoadingActions] = useState(true); - const editItem = (actionConnector: ActionConnector, tab: EditConnectorTabs, isFix?: boolean) => { - setEditConnectorProps({ initialConnector: actionConnector, tab, isFix: isFix ?? false }); - }; + const editItem = useCallback( + (actionConnector: ActionConnector, tab: EditConnectorTabs, isFix?: boolean) => { + setEditConnectorProps({ initialConnector: actionConnector, tab, isFix: isFix ?? false }); + }, + [setEditConnectorProps] + ); const loadActions = useCallback(async () => { setIsLoadingActions(true); @@ -176,16 +179,19 @@ export const ActionsConnectorsHome: React.FunctionComponent ({ loadAllActions: jest.fn(), loadActionTypes: jest.fn(), })); +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useParams: jest.fn().mockReturnValue({}), + useLocation: jest.fn().mockReturnValue({ search: '' }), + useHistory: jest.fn().mockReturnValue({ push: jest.fn(), createHref: jest.fn() }), +})); + const useKibanaMock = useKibana as jest.Mocked; const actionTypeRegistry = actionTypeRegistryMock.create(); const mocks = coreMock.createSetup(); const { loadActionTypes } = jest.requireMock('../../../lib/action_connector_api'); -const mockGetParams = jest.fn().mockReturnValue({}); -const mockGetLocation = jest.fn().mockReturnValue({ search: '' }); -const mockGetHistory = jest.fn().mockReturnValue({ push: jest.fn(), createHref: jest.fn() }); - -jest.mock('react-router-dom', () => ({ - useParams: () => mockGetParams(), - useLocation: () => mockGetLocation(), - useHistory: () => mockGetHistory(), -})); describe('actions_connectors_list', () => { describe('component empty', () => { @@ -173,6 +172,15 @@ describe('actions_connectors_list', () => { config: {}, }, ] as ActionConnector[]; + let mockedEditItem: jest.Mock; + + afterEach(() => { + mockedEditItem.mockReset(); + }); + + afterAll(() => { + jest.clearAllMocks(); + }); async function setup(actionConnectors = mockedActions) { loadActionTypes.mockResolvedValueOnce([ @@ -237,13 +245,13 @@ describe('actions_connectors_list', () => { }, }; - const editItem = jest.fn(); + mockedEditItem = jest.fn(); wrapper = mountWithIntl( {}} loadActions={async () => {}} - editItem={editItem} + editItem={mockedEditItem} isLoadingActions={false} actions={actionConnectors} setActions={() => {}} @@ -379,6 +387,21 @@ describe('actions_connectors_list', () => { .includes('This connector is used in a rule') ); }); + + it('call editItem when connectorId presented in url', async () => { + const selectedConnector = mockedActions[3]; + const mockedCreateHref = jest.fn(({ pathname }) => pathname); + const replaceStateSpy = jest.spyOn(window.history, 'replaceState'); + (useParams as jest.Mock).mockReturnValue({ connectorId: selectedConnector.id }); + (useHistory as jest.Mock).mockReturnValue({ createHref: mockedCreateHref }); + + await setup(); + + expect(mockedEditItem).toBeCalledWith(selectedConnector, EditConnectorTabs.Configuration); + expect(mockedCreateHref).toHaveBeenCalledWith({ pathname: '/connectors' }); + expect(replaceStateSpy).toHaveBeenCalledWith(null, '', '/connectors'); + replaceStateSpy.mockRestore(); + }); }); describe('check EditConnectorFlyout will open on edit connector', () => { diff --git a/x-pack/test/functional/apps/search_playground/playground_overview.ess.ts b/x-pack/test/functional/apps/search_playground/playground_overview.ess.ts index 31f8b32eec59..e64fafd4b010 100644 --- a/x-pack/test/functional/apps/search_playground/playground_overview.ess.ts +++ b/x-pack/test/functional/apps/search_playground/playground_overview.ess.ts @@ -171,6 +171,10 @@ export default function (ftrContext: FtrProviderContext) { it('save selected fields between modes', async () => { await pageObjects.searchPlayground.PlaygroundChatPage.expectSaveFieldsBetweenModes(); }); + + it('click on manage connector button', async () => { + await pageObjects.searchPlayground.PlaygroundChatPage.clickManageButton(); + }); }); after(async () => { diff --git a/x-pack/test/functional/page_objects/search_playground_page.ts b/x-pack/test/functional/page_objects/search_playground_page.ts index d03457298a7c..9b44addce9e2 100644 --- a/x-pack/test/functional/page_objects/search_playground_page.ts +++ b/x-pack/test/functional/page_objects/search_playground_page.ts @@ -231,6 +231,15 @@ export function SearchPlaygroundPageProvider({ getService }: FtrProviderContext) await testSubjects.click('queryMode'); await testSubjects.existOrFail('field-baz-false'); }, + + async clickManageButton() { + await testSubjects.click('manageConnectorsLink'); + await testSubjects.existOrFail('manageConnectorsLink'); + await browser.switchTab(1); + await testSubjects.existOrFail('edit-connector-flyout'); + await browser.closeCurrentWindow(); + await browser.switchTab(0); + }, }, }; } diff --git a/x-pack/test_serverless/functional/test_suites/search/search_playground/playground_overview.ts b/x-pack/test_serverless/functional/test_suites/search/search_playground/playground_overview.ts index 9545707c5154..44d96d565fec 100644 --- a/x-pack/test_serverless/functional/test_suites/search/search_playground/playground_overview.ts +++ b/x-pack/test_serverless/functional/test_suites/search/search_playground/playground_overview.ts @@ -207,6 +207,10 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await pageObjects.searchPlayground.session.expectInSession('prompt', "You're a doctor"); await pageObjects.searchPlayground.session.expectInSession('question', undefined); }); + + it('click on manage connector button', async () => { + await pageObjects.searchPlayground.PlaygroundChatPage.clickManageButton(); + }); }); after(async () => {