Render 'preview' instead of chat on Search mode (elastic#197236)

## Summary

Changes label for the button group to render preview instead of chat
when search mode selected

<img width="682" alt="Screenshot 2024-10-22 at 15 13 23"
src="https://github.com/user-attachments/assets/354f0a60-c234-49e7-835d-ed92917f3cfc">
<img width="774" alt="Screenshot 2024-10-22 at 15 13 19"
src="https://github.com/user-attachments/assets/61206f7f-09c6-47be-9b01-ad455197dd78">


### Checklist

Delete any items that are not applicable to this PR.

- [x] 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
- [x] [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)

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

@@ -0,0 +1,96 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+// create @testing-library/react tests for Header component
+// check if EuiButtonGroup is differently labeled based on the selectedPageMode prop
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Header } from './header';
+import { ChatFormFields, PlaygroundPageMode } from '../types';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import { EuiForm } from '@elastic/eui';
+import { FormProvider, useForm } from 'react-hook-form';
+
+const MockFormProvider = ({ children }: { children: React.ReactElement }) => {
+  const methods = useForm({
+    values: {
+      [ChatFormFields.indices]: ['index1', 'index2'],
+      [ChatFormFields.queryFields]: { index1: ['field1'], index2: ['field1'] },
+      [ChatFormFields.sourceFields]: {
+        index1: ['field1'],
+        index2: ['field1'],
+      },
+      [ChatFormFields.elasticsearchQuery]: {
+        retriever: {
+          rrf: {
+            retrievers: [
+              { standard: { query: { multi_match: { query: '{query}', fields: ['field1'] } } } },
+              { standard: { query: { multi_match: { query: '{query}', fields: ['field1'] } } } },
+            ],
+          },
+        },
+      },
+    },
+  });
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+const MockChatForm = ({
+  children,
+  handleSubmit,
+}: {
+  children: React.ReactElement;
+  handleSubmit: React.FormEventHandler;
+}) => (
+  <MockFormProvider>
+    <EuiForm
+      onSubmit={handleSubmit}
+      data-test-subj="chatPage"
+      css={{ display: 'flex', flexGrow: 1 }}
+    >
+      {children}
+    </EuiForm>
+  </MockFormProvider>
+);
+
+describe('Header', () => {
+  it('renders correctly', () => {
+    render(
+      <IntlProvider locale="en">
+        <MockChatForm handleSubmit={() => {}}>
+          <Header
+            selectedMode={PlaygroundPageMode.chat}
+            onModeChange={() => {}}
+            selectedPageMode={PlaygroundPageMode.chat}
+            onSelectPageModeChange={() => {}}
+          />
+        </MockChatForm>
+      </IntlProvider>
+    );
+
+    expect(screen.getByTestId('chatMode')).toHaveTextContent('Chat');
+    expect(screen.getByTestId('queryMode')).toHaveTextContent('Query');
+  });
+
+  it('renders correctly with preview mode', () => {
+    render(
+      <IntlProvider locale="en">
+        <MockChatForm handleSubmit={() => {}}>
+          <Header
+            selectedMode="chat"
+            onModeChange={() => {}}
+            selectedPageMode={PlaygroundPageMode.search}
+            onSelectPageModeChange={() => {}}
+          />
+        </MockChatForm>
+      </IntlProvider>
+    );
+
+    expect(screen.getByTestId('chatMode')).toHaveTextContent('Preview');
+    expect(screen.getByTestId('queryMode')).toHaveTextContent('Query');
+  });
+});

x-pack/plugins/search_playground/public/components/header.tsx

@@ -46,9 +46,14 @@ export const Header: React.FC<HeaderProps> = ({
   const options = [
     {
       id: ViewMode.chat,
-      label: i18n.translate('xpack.searchPlayground.header.view.chat', {
-        defaultMessage: 'Chat',
-      }),
+      label:
+        selectedPageMode === PlaygroundPageMode.chat
+          ? i18n.translate('xpack.searchPlayground.header.view.chat', {
+              defaultMessage: 'Chat',
+            })
+          : i18n.translate('xpack.searchPlayground.header.view.preview', {
+              defaultMessage: 'Preview',
+            }),
       'data-test-subj': 'chatMode',
     },
     {