Merge pull request elastic#4 from Samiul-TheSoccerFan/empty-state-for…

…-ai-playground

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/ai_playground.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+import { setMockValues } from '../../../__mocks__/kea_logic';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { AIPlayground } from './ai_playground';
+import { Chat } from './components/chat';
+import { EmptyIndex } from './components/empty_index';
+
+describe('AI Playground', () => {
+  describe('Empty state', () => {
+    it('renders when Indices are empty', () => {
+      setMockValues({
+        hasNoIndices: true,
+      });
+
+      const wrapper = shallow(<AIPlayground />);
+
+      expect(wrapper.find(EmptyIndex)).toHaveLength(1);
+    });
+  });
+
+  it('renders when indices are available', () => {
+    setMockValues({
+      hasNoIndices: false,
+    });
+
+    const wrapper = shallow(<AIPlayground />);
+
+    expect(wrapper.find(EmptyIndex)).toHaveLength(0);
+    expect(wrapper.find(Chat)).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/ai_playground.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+import React, { useEffect } from 'react';
+
+import { useValues, useActions } from 'kea';
+
+import { EuiPageTemplate } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
+
+import { IndicesLogic } from '../search_indices/indices_logic';
+
+import { Chat } from './components/chat';
+import { EmptyIndex } from './components/empty_index';
+
+export const AIPlayground: React.FC = () => {
+  const { fetchIndices } = useActions(IndicesLogic);
+  const { hasNoIndices, isLoading } = useValues(IndicesLogic);
+
+  useEffect(() => {
+    fetchIndices({
+      from: 0,
+      onlyShowSearchOptimizedIndices: false,
+      returnHiddenIndices: false,
+      size: 20,
+    });
+  }, []);
+
+  return (
+    <EnterpriseSearchContentPageTemplate
+      pageChrome={[
+        i18n.translate('xpack.enterpriseSearch.content.aiPlayground.breadcrumb', {
+          defaultMessage: 'AI Playground',
+        }),
+      ]}
+      pageHeader={{
+        pageTitle: i18n.translate('xpack.enterpriseSearch.content.aiPlayground.headerTitle', {
+          defaultMessage: 'AI Playground',
+        }),
+        rightSideItems: [],
+      }}
+      pageViewTelemetry="AI Playground"
+      isLoading={isLoading}
+      customPageSections
+      bottomBorder="extended"
+    >
+      {hasNoIndices ? (
+        <EmptyIndex />
+      ) : (
+        <EuiPageTemplate.Section
+          alignment="top"
+          restrictWidth={false}
+          grow
+          contentProps={{ css: { display: 'flex', flexGrow: 1 } }}
+          paddingSize="none"
+        >
+          <Chat />
+        </EuiPageTemplate.Section>
+      )}
+    </EnterpriseSearchContentPageTemplate>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/chat.tsx

@@ -1,12 +1,12 @@
 /*
- *
- *  * 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.
- *
+ * 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.
  */
 
+import React from 'react';
+
 import {
   EuiButtonIcon,
   EuiFlexGroup,
@@ -15,13 +15,16 @@ import {
   EuiLink,
   useEuiTheme,
 } from '@elastic/eui';
-import React from 'react';
-import { QuestionInput } from './question_input';
+
 import { i18n } from '@kbn/i18n';
+
+import { MessageRole } from '../types';
+
 import { ChatSidebar } from './chat_sidebar';
-import { TelegramIcon } from './telegram_icon';
 import { MessageList } from './message_list/message_list';
-import { MessageRole } from '../types';
+import { QuestionInput } from './question_input';
+
+import { TelegramIcon } from './telegram_icon';
 
 export const Chat = () => {
   const { euiTheme } = useEuiTheme();

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/chat_sidebar.tsx

@@ -1,15 +1,14 @@
 /*
- *
- *  * 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.
- *
+ * 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.
  */
 
 import React from 'react';
-import { i18n } from '@kbn/i18n';
+
 import { EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 import { InstructionsField } from './instructions_field';
 

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/empty_index.test.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import { mockKibanaValues } from '../../../../__mocks__/kea_logic';
+
+import React from 'react';
+
+import { mount } from 'enzyme';
+
+import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+
+import { NEW_INDEX_PATH } from '../../../routes';
+
+import { EmptyIndex } from './empty_index';
+
+describe('Empty state', () => {
+  it('renders the empty state component', () => {
+    const wrapper = mount(<EmptyIndex />);
+
+    expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);
+    expect(wrapper.find(EuiButton)).toHaveLength(1);
+  });
+
+  it('clicking in navigates to new index page', () => {
+    const { navigateToUrl } = mockKibanaValues;
+
+    const wrapper = mount(<EmptyIndex />);
+    // @ts-ignore
+    wrapper.find(EuiButton).props().onClick();
+
+    expect(navigateToUrl).toHaveBeenCalledTimes(1);
+    expect(navigateToUrl).toHaveBeenCalledWith(NEW_INDEX_PATH);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/empty_index.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+
+import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+import { KibanaLogic } from '../../../../shared/kibana';
+import { NEW_INDEX_PATH } from '../../../routes';
+
+export const EmptyIndex: React.FC = () => {
+  return (
+    <EuiFlexGroup gutterSize="l">
+      <EuiFlexItem>
+        <EuiPanel>
+          <EuiEmptyPrompt
+            title={
+              <h2>
+                {i18n.translate(
+                  'xpack.enterpriseSearch.content.aiPlayground.emptyIndex.h2.addData',
+                  {
+                    defaultMessage: 'Add data',
+                  }
+                )}
+              </h2>
+            }
+            iconType="plusInCircle"
+            titleSize="m"
+            body={
+              <p>
+                {i18n.translate(
+                  'xpack.enterpriseSearch.content.aiPlayground.emptyIndex.p.addDataAndIndexLabel',
+                  {
+                    defaultMessage: 'To use the AI Playground, create an index and add some data.',
+                  }
+                )}
+              </p>
+            }
+            actions={
+              <EuiButton
+                color="primary"
+                disabled={false}
+                fill
+                iconType="plusInCircle"
+                onClick={() => KibanaLogic.values.navigateToUrl(NEW_INDEX_PATH)}
+              >
+                {i18n.translate(
+                  'xpack.enterpriseSearch.content.aiPlayground.emptyIndex.newIndexButtonLabel',
+                  {
+                    defaultMessage: 'Create an index',
+                  }
+                )}
+              </EuiButton>
+            }
+          />
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/instructions_field.tsx

@@ -1,13 +1,12 @@
 /*
- *
- *  * 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.
- *
+ * 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.
  */
 
 import React from 'react';
+
 import { EuiFormRow, EuiIcon, EuiTextArea, EuiToolTip } from '@elastic/eui';
 
 interface InstructionsFieldProps {

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/message_list/assistant_message.tsx

@@ -1,20 +1,22 @@
 /*
- *
- *  * 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.
- *
+ * 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.
  */
 
 import React from 'react';
+
 import moment from 'moment';
+
 import { EuiComment, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { CopyActionButton } from './copy_action_button';
+
 import type { Message as MessageType } from '../../types';
 
-interface AssistantMessageProps extends Pick<MessageType, 'content' | 'createdAt'> {}
+import { CopyActionButton } from './copy_action_button';
+
+type AssistantMessageProps = Pick<MessageType, 'content' | 'createdAt'>;
 
 export const AssistantMessage: React.FC<AssistantMessageProps> = ({ content, createdAt }) => {
   return (

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/message_list/copy_action_button.tsx

@@ -1,13 +1,12 @@
 /*
- *
- *  * 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.
- *
+ * 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.
  */
 
 import React from 'react';
+
 import { EuiButtonIcon } from '@elastic/eui';
 
 interface CopyActionButtonProps {