[Search Playground] Change route on selector changed in between search/chat modes

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<PlaygroundProps> = ({ pageMode = 'chat' }) => {
   const { searchPlayground } = useValues(KibanaLogic);
 
   if (!searchPlayground) {
@@ -35,7 +39,7 @@ export const Playground: React.FC = () => {
         customPageSections
         bottomBorder="extended"
       >
-        <searchPlayground.Playground />
+        <searchPlayground.Playground pageMode={pageMode} />
       </SearchPlaygroundPageTemplate>
     </searchPlayground.PlaygroundProvider>
   );

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 = () => {
       <Route path={SEARCH_APPLICATIONS_PATH}>
         <SearchApplicationsRouter />
       </Route>
-      <Route path={PLAYGROUND_PATH}>
-        <Playground />
+      <Redirect exact from={PLAYGROUND_PATH} to={PLAYGROUND_CHAT_PATH} />
+      <Route path={PLAYGROUND_CHAT_PATH}>
+        <Playground pageMode={'chat'} />
+      </Route>
+      <Route path={PLAYGROUND_SEARCH_PATH}>
+        <Playground pageMode={'search'} />
       </Route>
       <Route>
         <NotFound />

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 {

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<AppProps> = ({
   showDocs = false,
   pageMode = PlaygroundPageMode.chat,
 }) => {
+  const { services } = useKibana();
   const [selectedMode, setSelectedMode] = useState<ViewMode>(ViewMode.chat);
   const { data: connectors } = useLoadConnectors();
   const hasSelectedIndices = Boolean(
@@ -41,15 +43,18 @@ export const App: React.FC<AppProps> = ({
     }).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,
     setPageMode: setSelectedPageMode,
   } = usePageMode({
     hasSelectedIndices,
     hasConnectors: Boolean(connectors?.length),
-    initialPageMode: pageMode,
+    initialPageMode: pageMode === 'chat' ? PlaygroundPageMode.chat : PlaygroundPageMode.search,
   });
 
   const restrictedWidth = selectedPageMode === PlaygroundPageMode.search && selectedMode === 'chat';

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 }) => (
                   <EuiFieldText
+                    data-test-subj="searchPlaygroundSearchModeFieldText"
                     {...field}
                     value={searchBarValue}
                     icon="search"

x-pack/plugins/search_playground/public/index.ts

@@ -13,4 +13,8 @@ export function plugin(initializerContext: PluginInitializerContext) {
   return new SearchPlaygroundPlugin(initializerContext);
 }
 
-export type { SearchPlaygroundPluginSetup, SearchPlaygroundPluginStart } from './types';
+export type {
+  SearchPlaygroundPluginSetup,
+  SearchPlaygroundPluginStart,
+  PlaygroundPageMode,
+} from './types';

x-pack/plugins/search_playground/tsconfig.json

@@ -45,7 +45,7 @@
     "@kbn/data-views-plugin",
     "@kbn/discover-utils",
     "@kbn/data-plugin",
-    "@kbn/search-index-documents"
+    "@kbn/search-index-documents",
   ],
   "exclude": [
     "target/**/*",