[Search Playground] Change route on selector changed in between searc…

…h/chat modes (elastic#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 <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

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/**/*",