refactor(search_playground): prep for saved playgrounds (#217251)

## Summary

Renaming types and files as well as moving providers around to make
implmentating saved playground routes more straightforward. Naming
updates to reduce future confusion from generic names that didn't fit
when there are multiple providers etc.

Author: TattdCodeMonkey

x-pack/solutions/search/plugins/search_playground/public/application.tsx

@@ -7,12 +7,14 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { CoreStart } from '@kbn/core/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { Router } from '@kbn/shared-ux-router';
 import { AppPluginStartDependencies } from './types';
+import { queryClient } from './utils/query_client';
 
 export const renderApp = async (
   core: CoreStart,
@@ -26,7 +28,9 @@ export const renderApp = async (
       <KibanaContextProvider services={{ ...core, ...services }}>
         <I18nProvider>
           <Router history={services.history}>
-            <PlaygroundRouter />
+            <QueryClientProvider client={queryClient}>
+              <PlaygroundRouter />
+            </QueryClientProvider>
           </Router>
         </I18nProvider>
       </KibanaContextProvider>

x-pack/solutions/search/plugins/search_playground/public/components/chat.tsx

@@ -27,7 +27,7 @@ import { AnalyticsEvents } from '../analytics/constants';
 import { useAutoBottomScroll } from '../hooks/use_auto_bottom_scroll';
 import { ChatSidebar } from './chat_sidebar';
 import { useChat } from '../hooks/use_chat';
-import { ChatForm, ChatFormFields, ChatRequestData, MessageRole } from '../types';
+import { PlaygroundForm, PlaygroundFormFields, ChatRequestData, MessageRole } from '../types';
 
 import { MessageList } from './message_list/message_list';
 import { QuestionInput } from './question_input';
@@ -38,19 +38,19 @@ import { useUsageTracker } from '../hooks/use_usage_tracker';
 import { PlaygroundBodySection } from './playground_body_section';
 import { elasticsearchQueryString } from '../utils/user_query';
 
-const buildFormData = (formData: ChatForm): ChatRequestData => ({
-  connector_id: formData[ChatFormFields.summarizationModel].connectorId!,
-  prompt: formData[ChatFormFields.prompt],
-  indices: formData[ChatFormFields.indices].join(),
-  citations: formData[ChatFormFields.citations],
+const buildFormData = (formData: PlaygroundForm): ChatRequestData => ({
+  connector_id: formData[PlaygroundFormFields.summarizationModel].connectorId!,
+  prompt: formData[PlaygroundFormFields.prompt],
+  indices: formData[PlaygroundFormFields.indices].join(),
+  citations: formData[PlaygroundFormFields.citations],
   elasticsearch_query: elasticsearchQueryString(
-    formData[ChatFormFields.elasticsearchQuery],
-    formData[ChatFormFields.userElasticsearchQuery],
-    formData[ChatFormFields.userElasticsearchQueryValidations]
+    formData[PlaygroundFormFields.elasticsearchQuery],
+    formData[PlaygroundFormFields.userElasticsearchQuery],
+    formData[PlaygroundFormFields.userElasticsearchQueryValidations]
   ),
-  summarization_model: formData[ChatFormFields.summarizationModel].value,
-  source_fields: JSON.stringify(formData[ChatFormFields.sourceFields]),
-  doc_size: formData[ChatFormFields.docSize],
+  summarization_model: formData[PlaygroundFormFields.summarizationModel].value,
+  source_fields: JSON.stringify(formData[PlaygroundFormFields.sourceFields]),
+  doc_size: formData[PlaygroundFormFields.docSize],
 });
 
 export const Chat = () => {
@@ -61,12 +61,12 @@ export const Chat = () => {
     resetField,
     handleSubmit,
     getValues,
-  } = useFormContext<ChatForm>();
+  } = useFormContext<PlaygroundForm>();
   const { messages, append, stop: stopRequest, setMessages, reload } = useChat();
   const messagesRef = useAutoBottomScroll();
   const [isRegenerating, setIsRegenerating] = useState<boolean>(false);
   const usageTracker = useUsageTracker();
-  const onSubmit = async (data: ChatForm) => {
+  const onSubmit = async (data: PlaygroundForm) => {
     await append(
       { content: data.question, role: MessageRole.user, createdAt: new Date() },
       {
@@ -75,7 +75,7 @@ export const Chat = () => {
     );
     usageTracker?.click(AnalyticsEvents.chatQuestionSent);
 
-    resetField(ChatFormFields.question);
+    resetField(PlaygroundFormFields.question);
   };
   const handleStopRequest = () => {
     stopRequest();
@@ -190,7 +190,7 @@ export const Chat = () => {
                 <EuiSpacer size="s" />
 
                 <Controller
-                  name={ChatFormFields.question}
+                  name={PlaygroundFormFields.question}
                   control={control}
                   defaultValue=""
                   rules={{

x-pack/solutions/search/plugins/search_playground/public/components/chat_sidebar.tsx

@@ -19,14 +19,14 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { useWatch } from 'react-hook-form';
 import { docLinks } from '../../common/doc_links';
 import { EditContextPanel } from './edit_context/edit_context_panel';
-import { ChatForm, ChatFormFields } from '../types';
+import { PlaygroundForm, PlaygroundFormFields } from '../types';
 import { useManagementLink } from '../hooks/use_management_link';
 import { SummarizationPanel } from './summarization_panel/summarization_panel';
 
 export const ChatSidebar: React.FC = () => {
   const { euiTheme } = useEuiTheme();
-  const selectedModel = useWatch<ChatForm, ChatFormFields.summarizationModel>({
-    name: ChatFormFields.summarizationModel,
+  const selectedModel = useWatch<PlaygroundForm, PlaygroundFormFields.summarizationModel>({
+    name: PlaygroundFormFields.summarizationModel,
   });
   const managementLink = useManagementLink(selectedModel?.connectorId);
   const panels = [

x-pack/solutions/search/plugins/search_playground/public/components/data_action_button.tsx

@@ -9,12 +9,12 @@ import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButton } from '@elastic/eui';
 import { useWatch } from 'react-hook-form';
-import { ChatForm, ChatFormFields } from '../types';
+import { PlaygroundForm, PlaygroundFormFields } from '../types';
 import { SelectIndicesFlyout } from './select_indices_flyout';
 
 export const DataActionButton: React.FC = () => {
-  const selectedIndices = useWatch<ChatForm, ChatFormFields.indices>({
-    name: ChatFormFields.indices,
+  const selectedIndices = useWatch<PlaygroundForm, PlaygroundFormFields.indices>({
+    name: PlaygroundFormFields.indices,
   });
   const [showFlyout, setShowFlyout] = useState(false);
   const handleFlyoutClose = () => setShowFlyout(false);

x-pack/solutions/search/plugins/search_playground/public/components/edit_context/edit_context_panel.test.tsx

@@ -10,7 +10,7 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import { EditContextPanel } from './edit_context_panel';
 import { FormProvider, useForm } from 'react-hook-form';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
-import { ChatFormFields } from '../../types';
+import { PlaygroundFormFields } from '../../types';
 
 jest.mock('../../hooks/use_source_indices_field', () => ({
   useSourceIndicesFields: () => ({
@@ -44,9 +44,9 @@ jest.mock('../../hooks/use_usage_tracker', () => ({
 const MockFormProvider = ({ children }: { children: React.ReactElement }) => {
   const methods = useForm({
     values: {
-      [ChatFormFields.indices]: ['index1'],
-      [ChatFormFields.docSize]: 1,
-      [ChatFormFields.sourceFields]: {
+      [PlaygroundFormFields.indices]: ['index1'],
+      [PlaygroundFormFields.docSize]: 1,
+      [PlaygroundFormFields.sourceFields]: {
         index1: ['title'],
         index2: ['body'],
       },

x-pack/solutions/search/plugins/search_playground/public/components/edit_context/edit_context_panel.tsx

@@ -12,7 +12,7 @@ import React, { useCallback } from 'react';
 import { useController } from 'react-hook-form';
 import { useSourceIndicesFields } from '../../hooks/use_source_indices_field';
 import { useUsageTracker } from '../../hooks/use_usage_tracker';
-import { ChatForm, ChatFormFields } from '../../types';
+import { PlaygroundForm, PlaygroundFormFields } from '../../types';
 import { AnalyticsEvents } from '../../analytics/constants';
 import { ContextFieldsSelect } from './context_fields_select';
 
@@ -23,13 +23,13 @@ export const EditContextPanel: React.FC = () => {
   const {
     field: { onChange: onChangeSize, value: docSize },
   } = useController({
-    name: ChatFormFields.docSize,
+    name: PlaygroundFormFields.docSize,
   });
 
   const {
     field: { onChange: onChangeSourceFields, value: sourceFields },
-  } = useController<ChatForm, ChatFormFields.sourceFields>({
-    name: ChatFormFields.sourceFields,
+  } = useController<PlaygroundForm, PlaygroundFormFields.sourceFields>({
+    name: PlaygroundFormFields.sourceFields,
   });
 
   const updateSourceField = useCallback(

x-pack/solutions/search/plugins/search_playground/public/components/header.test.tsx

@@ -11,7 +11,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Header } from './header';
-import { ChatFormFields, PlaygroundPageMode, PlaygroundViewMode } from '../types';
+import { PlaygroundFormFields, PlaygroundPageMode, PlaygroundViewMode } from '../types';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { EuiForm } from '@elastic/eui';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -28,13 +28,13 @@ jest.mock('../hooks/use_playground_parameters', () => ({
 const MockFormProvider = ({ children }: { children: React.ReactElement }) => {
   const methods = useForm({
     values: {
-      [ChatFormFields.indices]: ['index1', 'index2'],
-      [ChatFormFields.queryFields]: { index1: ['field1'], index2: ['field1'] },
-      [ChatFormFields.sourceFields]: {
+      [PlaygroundFormFields.indices]: ['index1', 'index2'],
+      [PlaygroundFormFields.queryFields]: { index1: ['field1'], index2: ['field1'] },
+      [PlaygroundFormFields.sourceFields]: {
         index1: ['field1'],
         index2: ['field1'],
       },
-      [ChatFormFields.elasticsearchQuery]: {
+      [PlaygroundFormFields.elasticsearchQuery]: {
         retriever: {
           rrf: {
             retrievers: [
@@ -48,7 +48,7 @@ const MockFormProvider = ({ children }: { children: React.ReactElement }) => {
   });
   return <FormProvider {...methods}>{children}</FormProvider>;
 };
-const MockChatForm = ({
+const MockPlaygroundForm = ({
   children,
   handleSubmit,
 }: {
@@ -74,9 +74,9 @@ describe('Header', () => {
     });
     render(
       <IntlProvider locale="en">
-        <MockChatForm handleSubmit={() => {}}>
+        <MockPlaygroundForm handleSubmit={() => {}}>
           <Header onModeChange={() => {}} onSelectPageModeChange={() => {}} />
-        </MockChatForm>
+        </MockPlaygroundForm>
       </IntlProvider>
     );
 
@@ -91,9 +91,9 @@ describe('Header', () => {
     });
     render(
       <IntlProvider locale="en">
-        <MockChatForm handleSubmit={() => {}}>
+        <MockPlaygroundForm handleSubmit={() => {}}>
           <Header onModeChange={() => {}} onSelectPageModeChange={() => {}} />
-        </MockChatForm>
+        </MockPlaygroundForm>
       </IntlProvider>
     );
 

x-pack/solutions/search/plugins/search_playground/public/components/message_list/token_estimate_tooltip.tsx

@@ -22,7 +22,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { useFormContext } from 'react-hook-form';
 import { docLinks } from '../../../common/doc_links';
 import { useLLMsModels } from '../../hooks/use_llms_models';
-import { ChatForm, ChatFormFields } from '../../types';
+import { PlaygroundForm, PlaygroundFormFields } from '../../types';
 
 interface TokenEstimateTooltipProps {
   context: number;
@@ -37,8 +37,8 @@ export const TokenEstimateTooltip: React.FC<TokenEstimateTooltipProps> = ({
 }) => {
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
   const models = useLLMsModels();
-  const { getValues } = useFormContext<ChatForm>();
-  const formValues = getValues(ChatFormFields.summarizationModel);
+  const { getValues } = useFormContext<PlaygroundForm>();
+  const formValues = getValues(PlaygroundFormFields.summarizationModel);
 
   const selectedModel = models.find((m) => m.value === formValues?.value);
 

x-pack/solutions/search/plugins/search_playground/public/components/app.tsx renamed to x-pack/solutions/search/plugins/search_playground/public/components/playgorund.tsx

@@ -15,7 +15,12 @@ import { SearchQueryMode } from './query_mode/search_query_mode';
 import { ChatSetupPage } from './setup_page/chat_setup_page';
 import { Header } from './header';
 import { useLoadConnectors } from '../hooks/use_load_connectors';
-import { ChatForm, ChatFormFields, PlaygroundPageMode, PlaygroundViewMode } from '../types';
+import {
+  PlaygroundForm,
+  PlaygroundFormFields,
+  PlaygroundPageMode,
+  PlaygroundViewMode,
+} from '../types';
 import { Chat } from './chat';
 import { SearchMode } from './search_mode/search_mode';
 import { SearchPlaygroundSetupPage } from './setup_page/search_playground_setup_page';
@@ -34,14 +39,14 @@ export interface AppProps {
   showDocs?: boolean;
 }
 
-export const App: React.FC<AppProps> = ({ showDocs = false }) => {
+export const Playground: React.FC<AppProps> = ({ showDocs = false }) => {
   const isSearchModeEnabled = useSearchPlaygroundFeatureFlag();
   const { pageMode, viewMode } = usePlaygroundParameters();
   const { application } = useKibana().services;
   const { data: connectors } = useLoadConnectors();
   const hasSelectedIndices = Boolean(
-    useWatch<ChatForm, ChatFormFields.indices>({
-      name: ChatFormFields.indices,
+    useWatch<PlaygroundForm, PlaygroundFormFields.indices>({
+      name: PlaygroundFormFields.indices,
     }).length
   );
   const navigateToView = useCallback(

x-pack/solutions/search/plugins/search_playground/public/components/query_mode/chat_prompt.tsx

@@ -10,15 +10,15 @@ import React from 'react';
 import { EuiFieldText } from '@elastic/eui';
 import { Controller, useFormContext } from 'react-hook-form';
 import { i18n } from '@kbn/i18n';
-import { ChatFormFields } from '../../types';
+import { PlaygroundFormFields } from '../../types';
 
 export const ChatPrompt = ({ isLoading }: { isLoading: boolean }) => {
   const { control } = useFormContext();
 
   return (
     <Controller
       control={control}
-      name={ChatFormFields.question}
+      name={PlaygroundFormFields.question}
       render={({ field }) => (
         <EuiFieldText
           data-test-subj="searchPlaygroundChatQuestionFieldText"