From 961796d65d49d2ccc649f8dc4d71f0f5da7def48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?= Date: Mon, 11 Nov 2024 13:18:54 +0100 Subject: [PATCH] [Search Playground] Change route on selector changed in between search/chat modes (#197431) ## Summary Changes the route when Search/Chat is changed. It was the intended behaviour. Missed during the implementation ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine --- .../components/playground/playground.tsx | 8 ++++++-- .../public/applications/applications/index.tsx | 16 +++++++++++++--- .../public/applications/applications/routes.ts | 4 +++- .../search_playground/public/components/app.tsx | 11 ++++++++--- .../components/search_mode/search_mode.tsx | 1 + x-pack/plugins/search_playground/public/index.ts | 6 +++++- x-pack/plugins/search_playground/tsconfig.json | 2 +- 7 files changed, 37 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/applications/components/playground/playground.tsx b/x-pack/plugins/enterprise_search/public/applications/applications/components/playground/playground.tsx index e8e72e5dfb37a..c198062cb759b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/applications/components/playground/playground.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/applications/components/playground/playground.tsx @@ -15,7 +15,11 @@ import { KibanaLogic } from '../../../shared/kibana'; import { SearchPlaygroundPageTemplate } from './page_template'; -export const Playground: React.FC = () => { +interface PlaygroundProps { + pageMode?: 'chat' | 'search'; +} + +export const Playground: React.FC = ({ pageMode = 'chat' }) => { const { searchPlayground } = useValues(KibanaLogic); if (!searchPlayground) { @@ -35,7 +39,7 @@ export const Playground: React.FC = () => { customPageSections bottomBorder="extended" > - + ); diff --git a/x-pack/plugins/enterprise_search/public/applications/applications/index.tsx b/x-pack/plugins/enterprise_search/public/applications/applications/index.tsx index c9676137e70f2..a04ebf2e3edbb 100644 --- a/x-pack/plugins/enterprise_search/public/applications/applications/index.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/applications/index.tsx @@ -13,7 +13,13 @@ import { Routes, Route } from '@kbn/shared-ux-router'; import { NotFound } from './components/not_found'; import { Playground } from './components/playground/playground'; import { SearchApplicationsRouter } from './components/search_applications/search_applications_router'; -import { PLAYGROUND_PATH, ROOT_PATH, SEARCH_APPLICATIONS_PATH } from './routes'; +import { + PLAYGROUND_CHAT_PATH, + PLAYGROUND_PATH, + PLAYGROUND_SEARCH_PATH, + ROOT_PATH, + SEARCH_APPLICATIONS_PATH, +} from './routes'; export const Applications = () => { return ( @@ -22,8 +28,12 @@ export const Applications = () => { - - + + + + + + diff --git a/x-pack/plugins/enterprise_search/public/applications/applications/routes.ts b/x-pack/plugins/enterprise_search/public/applications/applications/routes.ts index 5779f544c3f34..2df42a129938c 100644 --- a/x-pack/plugins/enterprise_search/public/applications/applications/routes.ts +++ b/x-pack/plugins/enterprise_search/public/applications/applications/routes.ts @@ -17,7 +17,9 @@ export enum SearchApplicationViewTabs { export const SEARCH_APPLICATION_CREATION_PATH = `${SEARCH_APPLICATIONS_PATH}/new`; export const SEARCH_APPLICATION_PATH = `${SEARCH_APPLICATIONS_PATH}/:searchApplicationName`; export const SEARCH_APPLICATION_TAB_PATH = `${SEARCH_APPLICATION_PATH}/:tabId`; -export const PLAYGROUND_PATH = `${ROOT_PATH}playground`; +export const PLAYGROUND_PATH = `${ROOT_PATH}playground/`; +export const PLAYGROUND_CHAT_PATH = `${PLAYGROUND_PATH}chat`; +export const PLAYGROUND_SEARCH_PATH = `${PLAYGROUND_PATH}search`; export const SEARCH_APPLICATION_CONNECT_PATH = `${SEARCH_APPLICATION_PATH}/${SearchApplicationViewTabs.CONNECT}/:connectTabId`; export enum SearchApplicationConnectTabs { diff --git a/x-pack/plugins/search_playground/public/components/app.tsx b/x-pack/plugins/search_playground/public/components/app.tsx index 4f371ea5d15bb..914a429845e90 100644 --- a/x-pack/plugins/search_playground/public/components/app.tsx +++ b/x-pack/plugins/search_playground/public/components/app.tsx @@ -18,10 +18,11 @@ import { Chat } from './chat'; import { SearchMode } from './search_mode/search_mode'; import { SearchPlaygroundSetupPage } from './setup_page/search_playground_setup_page'; import { usePageMode } from '../hooks/use_page_mode'; +import { useKibana } from '../hooks/use_kibana'; export interface AppProps { showDocs?: boolean; - pageMode?: PlaygroundPageMode; + pageMode?: 'chat' | 'search'; } export enum ViewMode { @@ -33,6 +34,7 @@ export const App: React.FC = ({ showDocs = false, pageMode = PlaygroundPageMode.chat, }) => { + const { services } = useKibana(); const [selectedMode, setSelectedMode] = useState(ViewMode.chat); const { data: connectors } = useLoadConnectors(); const hasSelectedIndices = Boolean( @@ -41,7 +43,10 @@ export const App: React.FC = ({ }).length ); const handleModeChange = (id: ViewMode) => setSelectedMode(id); - const handlePageModeChange = (mode: PlaygroundPageMode) => setSelectedPageMode(mode); + const handlePageModeChange = (mode: PlaygroundPageMode) => { + services.application?.navigateToUrl(`./${mode}`); + setSelectedPageMode(mode); + }; const { showSetupPage, pageMode: selectedPageMode, @@ -49,7 +54,7 @@ export const App: React.FC = ({ } = usePageMode({ hasSelectedIndices, hasConnectors: Boolean(connectors?.length), - initialPageMode: pageMode, + initialPageMode: pageMode === 'chat' ? PlaygroundPageMode.chat : PlaygroundPageMode.search, }); const restrictedWidth = selectedPageMode === PlaygroundPageMode.search && selectedMode === 'chat'; diff --git a/x-pack/plugins/search_playground/public/components/search_mode/search_mode.tsx b/x-pack/plugins/search_playground/public/components/search_mode/search_mode.tsx index 94e6337f1a03c..8a27f3ac3d83e 100644 --- a/x-pack/plugins/search_playground/public/components/search_mode/search_mode.tsx +++ b/x-pack/plugins/search_playground/public/components/search_mode/search_mode.tsx @@ -69,6 +69,7 @@ export const SearchMode: React.FC = () => { name={ChatFormFields.searchQuery} render={({ field }) => (