refactor(search_playground): prep for saved playgrounds

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 → 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"

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

@@ -23,10 +23,10 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { docLinks } from '../../../common/doc_links';
-import type { ChatForm, ChatFormFields, QuerySourceFields } from '../../types';
+import type { PlaygroundForm, PlaygroundFormFields, QuerySourceFields } from '../../types';
 
 const isQueryFieldSelected = (
-  queryFields: ChatForm[ChatFormFields.queryFields],
+  queryFields: PlaygroundForm[PlaygroundFormFields.queryFields],
   index: string,
   field: string
 ): boolean => {
@@ -38,7 +38,7 @@ export interface QueryFieldsPanelProps {
   index: string;
   indexFields: QuerySourceFields;
   updateFields: (index: string, fieldName: string, checked: boolean) => void;
-  queryFields: ChatForm[ChatFormFields.queryFields];
+  queryFields: PlaygroundForm[PlaygroundFormFields.queryFields];
 }
 
 export const QueryFieldsPanel = ({

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

@@ -10,7 +10,7 @@ import { render, screen } from '@testing-library/react';
 import { QueryMode } from './query_mode';
 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: () => ({
@@ -45,13 +45,13 @@ jest.mock('../../hooks/use_usage_tracker', () => ({
 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: [