[Enterprise Search] Add more scaffolding for Content plugin

src/core/public/chrome/ui/header/collapsible_nav.tsx

@@ -85,7 +85,7 @@ interface Props {
   button: EuiCollapsibleNavProps['button'];
 }
 
-const overviewIDsToHide = ['kibanaOverview', 'enterpriseSearch'];
+const overviewIDsToHide = ['kibanaOverview'];
 const overviewIDs = [
   ...overviewIDsToHide,
   'observability-overview',

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { searchIndices } from './search_indices.mock';

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 { SearchIndex } from '../types';
+
+export const searchIndices = [
+  {
+    name: 'Our API Index',
+    indexSlug: 'index-1',
+    source_type: 'API',
+    elasticsearch_index_name: 'ent-search-api-one',
+    search_engines: 'Search Engine One, Search Engine Two',
+    document_count: 100,
+  },
+  {
+    name: 'Customer Feedback',
+    indexSlug: 'index-2',
+    source_type: 'Elasticsearch Index',
+    elasticsearch_index_name: 'es-index-two',
+    search_engines: 'Search Engine One',
+    document_count: 100,
+  },
+  {
+    name: 'Dharma Crawler',
+    indexSlug: 'index-3',
+    source_type: 'Crawler',
+    elasticsearch_index_name: 'ent-search-crawler-one',
+    search_engines: 'Search Engine One, Search Engine Two',
+    document_count: 100,
+  },
+  {
+    name: 'My Custom Source',
+    indexSlug: 'index-4',
+    source_type: 'Content Source',
+    elasticsearch_index_name: 'ent-search-custom-source-one',
+    search_engines: '--',
+    document_count: 1,
+  },
+] as SearchIndex[];

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

@@ -0,0 +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.
+ */
+
+import React from 'react';
+
+import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
+
+export const ConnectorSettings: React.FC = () => {
+  return (
+    <EnterpriseSearchContentPageTemplate
+      pageChrome={[]}
+      pageViewTelemetry="Connector Settings"
+      isLoading={false}
+    >
+      <>Connector Settings</>
+    </EnterpriseSearchContentPageTemplate>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_settings/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { ConnectorSettings } from './connector_settings';

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/settings/settings.tsx → x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/crawler_settings/crawler_settings.tsx

@@ -9,14 +9,14 @@ import React from 'react';
 
 import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
 
-export const Settings: React.FC = () => {
+export const CrawlerSettings: React.FC = () => {
   return (
     <EnterpriseSearchContentPageTemplate
       pageChrome={[]}
-      pageViewTelemetry="Settings"
+      pageViewTelemetry="Connector Settings"
       isLoading={false}
     >
-      <>Settings</>
+      <>Crawler Settings</>
     </EnterpriseSearchContentPageTemplate>
   );
 };

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/crawler_settings/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { CrawlerSettings } from './crawler_settings';

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

@@ -37,23 +37,31 @@ describe('useEnterpriseSearchContentNav', () => {
             name: 'Search indices',
           },
           {
-            href: '/settings',
-            id: 'search_indices',
+            href: '/connector_settings',
+            id: 'connector_settings',
+            items: undefined,
+            name: 'Connector settings',
+          },
+          {
+            href: '/crawler_settings',
+            id: 'crawler_settings',
             items: undefined,
-            name: 'Settings',
+            name: 'Web crawler settings',
           },
         ],
       },
       {
         id: 'app_search',
         name: 'App Search',
         emphasize: true,
+        items: undefined,
         href: '/app/enterprise_search/app_search',
       },
       {
         id: 'workplace_search',
         name: 'Workplace Search',
         emphasize: true,
+        items: undefined,
         href: '/app/enterprise_search/workplace_search',
       },
     ]);

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

@@ -15,7 +15,12 @@ import {
 } from '../../../../../common/constants';
 import { generateNavLink } from '../../../shared/layout';
 
-import { ROOT_PATH, SEARCH_INDICES_PATH, SETTINGS_PATH } from '../../routes';
+import {
+  ROOT_PATH,
+  SEARCH_INDICES_PATH,
+  CONNECTOR_SETTINGS_PATH,
+  CRAWLER_SETTINGS_PATH,
+} from '../../routes';
 
 import { useSearchIndicesNav } from '../search_index/index_nav';
 
@@ -56,12 +61,22 @@ export const useEnterpriseSearchContentNav = () => {
             }),
           },
           {
-            id: 'search_indices',
-            name: i18n.translate('xpack.enterpriseSearch.content.nav.settingsTitle', {
-              defaultMessage: 'Settings',
+            id: 'connector_settings',
+            name: i18n.translate('xpack.enterpriseSearch.content.nav.connectorSettingsTitle', {
+              defaultMessage: 'Connector settings',
+            }),
+            ...generateNavLink({
+              to: CONNECTOR_SETTINGS_PATH,
+              isRoot: true,
+            }),
+          },
+          {
+            id: 'crawler_settings',
+            name: i18n.translate('xpack.enterpriseSearch.content.nav.crawlerSettingsTitle', {
+              defaultMessage: 'Web crawler settings',
             }),
             ...generateNavLink({
-              to: SETTINGS_PATH,
+              to: CRAWLER_SETTINGS_PATH,
               isRoot: true,
             }),
           },

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

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+/**
+ * TODO:
+ * - Need to add documentation URLs (search for `#`s)
+ */
+
+import React from 'react';
+
+import { EuiEmptyPrompt, EuiLink, EuiPanel, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const SearchIndexEmptyState: React.FC = () => {
+  return (
+    <EuiPanel color="subdued">
+      <EuiEmptyPrompt
+        title={
+          <h3>
+            {i18n.translate('xpack.enterpriseSearch.content.newIndex.emptyState.title', {
+              defaultMessage: 'Select an ingestion method',
+            })}
+          </h3>
+        }
+        body={
+          <p>
+            {i18n.translate('xpack.enterpriseSearch.content.newIndex.emptyState.description', {
+              defaultMessage:
+                'Data you add in Enterprise Search is called a search index and it’s searchable in both App Search and Workplace Search. Now you can use your connectors in App Search and your web crawlers in Workplace Search.',
+            })}
+          </p>
+        }
+        footer={
+          <>
+            <EuiTitle size="xxs">
+              <h4>
+                {i18n.translate('xpack.enterpriseSearch.content.newIndex.emptyState.footer.title', {
+                  defaultMessage: 'Want to learn more about search indices?',
+                })}
+              </h4>
+            </EuiTitle>
+            <EuiLink href="#" target="_blank">
+              {i18n.translate('xpack.enterpriseSearch.content.newIndex.emptyState.footer.link', {
+                defaultMessage: 'Read the docs',
+              })}
+            </EuiLink>
+          </>
+        }
+      />
+    </EuiPanel>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/settings/index.ts → x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/index.ts

@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { Settings } from './settings';
+export { NewIndex } from './new_index';

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

@@ -0,0 +1,88 @@
+/*
+ * 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.
+ */
+
+/**
+ * TODO:
+ * - Need to add documentation URLs (search for `#`s)
+ * - Need get dynamic Enterprise Search API URL
+ * - Port over existing API view from App Search to the panel below.
+ * - move the endpoint state to a logic file
+ * - Replace `onNameChange` logic with that from App Search
+ * - Need to implement the logic for the attaching search engines functionality
+ */
+
+import React, { useState } from 'react';
+
+import { EuiCode, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { NewSearchIndexTemplate } from './new_search_index_template';
+
+export const MethodApi: React.FC = () => {
+  const [endpoint, setEndpoint] = useState('');
+
+  const onNameChange = (value: string) => {
+    setEndpoint(value.split(' ').join('-').toLowerCase());
+  };
+
+  return (
+    <NewSearchIndexTemplate
+      description={
+        <EuiText size="s">
+          <FormattedMessage
+            id="xpack.enterpriseSearch.content.newIndex.methodApi.description"
+            defaultMessage="The {documentsAPILink} can be used to add new documents to your engine, update documents, retrieve documents by id, and delete documents. There are a variety of {clientLibrariesLink} to help you get started."
+            values={{
+              documentsAPILink: (
+                <EuiLink href="#" target="_blank">
+                  {i18n.translate(
+                    'xpack.enterpriseSearch.content.newIndex.methodApi.description.documentsAPILink',
+                    {
+                      defaultMessage: 'documents API',
+                    }
+                  )}
+                </EuiLink>
+              ),
+              clientLibrariesLink: (
+                <EuiLink href="#" target="_blank">
+                  {i18n.translate(
+                    'xpack.enterpriseSearch.content.newIndex.methodApi.description.clientLibrariesLink',
+                    {
+                      defaultMessage: 'client libraries',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiText>
+      }
+      docsUrl="#"
+      type="API Endpoint"
+      onNameChange={(value: string) => onNameChange(value)}
+    >
+      <EuiPanel hasBorder>
+        <EuiTitle size="xs">
+          <h3>
+            {i18n.translate('xpack.enterpriseSearch.content.newIndex.methodApi.endpointTitle', {
+              defaultMessage: 'Enter a name to preview your new API endpoint',
+            })}
+          </h3>
+        </EuiTitle>
+        {endpoint && (
+          <>
+            <EuiSpacer size="m" />
+            <EuiCode>https://my-es-url.aws.com/23782837/es/{endpoint}</EuiCode>
+          </>
+        )}
+        <EuiSpacer size="l" />
+        <p>The existing API instructions should render here.</p>
+      </EuiPanel>
+    </NewSearchIndexTemplate>
+  );
+};

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

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+/**
+ * TODO:
+ * - Need to add documentation URLs (search for `#`s)
+ * - Port over Connector views from App Search to the panel below.
+ */
+
+import React from 'react';
+
+import { EuiPanel, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { NewSearchIndexTemplate } from './new_search_index_template';
+
+export const MethodConnector: React.FC = () => {
+  return (
+    <NewSearchIndexTemplate
+      description={i18n.translate(
+        'xpack.enterpriseSearch.content.newIndex.methodConnector.description',
+        {
+          defaultMessage:
+            'Ingest data from content sources like GitHub, Google Drive or SharePoint You can also build your own connectors using Custom API sources.',
+        }
+      )}
+      docsUrl="#"
+      type="Connector"
+    >
+      <EuiPanel
+        color="subdued"
+        style={{
+          minHeight: '30rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <EuiTitle size="s">
+          <h4>Place the connector flow here...</h4>
+        </EuiTitle>
+      </EuiPanel>
+    </NewSearchIndexTemplate>
+  );
+};