From 5f4ee67fd9a9e150e009015cb64fbf180976dfbe Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 12 Nov 2024 01:07:21 +1100 Subject: [PATCH] [8.x] [Search Playground] Change route on selector changed in between search/chat modes (#197431) (#199635) 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.x`: - [[Search Playground] Change route on selector changed in between search/chat modes (#197431)](https://github.com/elastic/kibana/pull/197431) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) Co-authored-by: Efe Gürkan YALAMAN --- .../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 }) => (