[App Search] Crawler Landing Page (#100822)

* New CrawlerLanding component

* New CrawlerRouter component

* Adding CrawlerRouter to EngineRouter

* Using internal route for Crawler link in EngineNav

* Rename crawler landing background

* Fix CrawlerLanding css

* Fix crawler documentation link

* Add Crawler title to breadcrumbs

* Reduce png filesize

* Improve CrawlerLanding copy

* Update x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.scss

Co-authored-by: Constance <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Constance <[email protected]>

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/constants.ts

@@ -9,5 +9,5 @@ import { i18n } from '@kbn/i18n';
 
 export const CRAWLER_TITLE = i18n.translate(
   'xpack.enterpriseSearch.appSearch.engine.crawler.title',
-  { defaultMessage: 'Crawler' }
+  { defaultMessage: 'Web Crawler' }
 );

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.scss

@@ -0,0 +1,13 @@
+.crawlerLanding {
+  &__panel {
+    overflow: hidden;
+    background-image: url('./assets/bg_crawler_landing.png');
+    background-size: 45%;
+    background-repeat: no-repeat;
+    background-position: right -2rem;
+  }
+
+  &__wrapper {
+    max-width: 50rem;
+  }
+}

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.test.tsx

@@ -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 { setMockValues } from '../../../__mocks__';
+import { mockEngineValues } from '../../__mocks__';
+
+import React from 'react';
+
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import { docLinks } from '../../../shared/doc_links';
+
+import { CrawlerLanding } from './crawler_landing';
+
+describe('CrawlerLanding', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeEach(() => {
+    setMockValues({ ...mockEngineValues });
+    wrapper = shallow(<CrawlerLanding />);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('contains an external documentation link', () => {
+    const externalDocumentationLink = wrapper.find('[data-test-subj="CrawlerDocumentationLink"]');
+
+    expect(externalDocumentationLink.prop('href')).toBe(
+      `${docLinks.appSearchBase}/web-crawler.html`
+    );
+  });
+
+  it('contains a link to standalone App Search', () => {
+    const externalDocumentationLink = wrapper.find('[data-test-subj="CrawlerStandaloneLink"]');
+
+    expect(externalDocumentationLink.prop('href')).toBe('/as/engines/some-engine/crawler');
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_landing.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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,
+  EuiLink,
+  EuiPageHeader,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { getAppSearchUrl } from '../../../shared/enterprise_search_url';
+import { DOCS_PREFIX, ENGINE_CRAWLER_PATH } from '../../routes';
+import { generateEnginePath } from '../engine';
+
+import './crawler_landing.scss';
+import { CRAWLER_TITLE } from '.';
+
+export const CrawlerLanding: React.FC = () => (
+  <div data-test-subj="CrawlerLanding" className="crawlerLanding">
+    <EuiPageHeader pageTitle={CRAWLER_TITLE} />
+    <EuiSpacer />
+    <EuiPanel grow paddingSize="l" className="crawlerLanding__panel">
+      <div className="crawlerLanding__wrapper">
+        <EuiTitle size="s">
+          <h2>
+            {i18n.translate('xpack.enterpriseSearch.appSearch.engine.crawler.landingPage.title', {
+              defaultMessage: 'Setup the Web Crawler',
+            })}
+          </h2>
+        </EuiTitle>
+        <EuiSpacer />
+        <EuiText>
+          <p>
+            {i18n.translate(
+              'xpack.enterpriseSearch.appSearch.engine.crawler.landingPage.description',
+              {
+                defaultMessage:
+                  "Easily index your website's content. To get started, enter your domain name, provide optional entry points and crawl rules, and we will handle the rest.",
+              }
+            )}{' '}
+            <EuiLink
+              target="_blank"
+              href={`${DOCS_PREFIX}/web-crawler.html`}
+              data-test-subj="CrawlerDocumentationLink"
+            >
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.crawler.landingPage.documentationLinkLabel',
+                {
+                  defaultMessage: 'Learn more about the web crawler.',
+                }
+              )}
+            </EuiLink>
+          </p>
+        </EuiText>
+        <EuiSpacer />
+        <EuiButton
+          iconType="popout"
+          fill
+          color="primary"
+          href={getAppSearchUrl(generateEnginePath(ENGINE_CRAWLER_PATH))}
+          target="_blank"
+          data-test-subj="CrawlerStandaloneLink"
+        >
+          {i18n.translate(
+            'xpack.enterpriseSearch.appSearch.engine.crawler.landingPage.standaloneLinkLabel',
+            {
+              defaultMessage: 'Configure the web crawler',
+            }
+          )}
+        </EuiButton>
+        <EuiSpacer size="xl" />
+      </div>
+    </EuiPanel>
+  </div>
+);

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_router.test.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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__';
+
+import { mockEngineValues } from '../../__mocks__';
+
+import React from 'react';
+import { Switch } from 'react-router-dom';
+
+import { shallow } from 'enzyme';
+
+import { CrawlerLanding } from './crawler_landing';
+import { CrawlerRouter } from './crawler_router';
+
+describe('CrawlerRouter', () => {
+  beforeEach(() => {
+    setMockValues({ ...mockEngineValues });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders a landing page', () => {
+    const wrapper = shallow(<CrawlerRouter />);
+
+    expect(wrapper.find(Switch)).toHaveLength(1);
+    expect(wrapper.find(CrawlerLanding)).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/crawler_router.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 { Route, Switch } from 'react-router-dom';
+
+import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+
+import { getEngineBreadcrumbs } from '../engine';
+
+import { CRAWLER_TITLE } from './constants';
+import { CrawlerLanding } from './crawler_landing';
+
+export const CrawlerRouter: React.FC = () => {
+  return (
+    <Switch>
+      <Route>
+        <SetPageChrome trail={getEngineBreadcrumbs([CRAWLER_TITLE])} />
+        <CrawlerLanding />
+      </Route>
+    </Switch>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { CRAWLER_TITLE } from './constants';
+export { CrawlerRouter } from './crawler_router';

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_nav.tsx

@@ -12,7 +12,6 @@ import { useValues } from 'kea';
 import { EuiText, EuiBadge, EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { getAppSearchUrl } from '../../../shared/enterprise_search_url';
 import { SideNavLink, SideNavItem } from '../../../shared/layout';
 import { AppLogic } from '../../app_logic';
 import {
@@ -170,8 +169,7 @@ export const EngineNav: React.FC = () => {
       )}
       {canViewEngineCrawler && !isMetaEngine && (
         <SideNavLink
-          isExternal
-          to={getAppSearchUrl(generateEnginePath(ENGINE_CRAWLER_PATH))}
+          to={generateEnginePath(ENGINE_CRAWLER_PATH)}
           data-test-subj="EngineCrawlerLink"
         >
           {CRAWLER_TITLE}

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx

@@ -18,6 +18,7 @@ import { shallow } from 'enzyme';
 import { Loading } from '../../../shared/loading';
 import { AnalyticsRouter } from '../analytics';
 import { ApiLogs } from '../api_logs';
+import { CrawlerRouter } from '../crawler';
 import { CurationsRouter } from '../curations';
 import { Documents, DocumentDetail } from '../documents';
 import { EngineOverview } from '../engine_overview';
@@ -168,4 +169,11 @@ describe('EngineRouter', () => {
 
     expect(wrapper.find(SourceEngines)).toHaveLength(1);
   });
+
+  it('renders a crawler view', () => {
+    setMockValues({ ...values, myRole: { canViewEngineCrawler: true } });
+    const wrapper = shallow(<EngineRouter />);
+
+    expect(wrapper.find(CrawlerRouter)).toHaveLength(1);
+  });
 });

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx

@@ -23,7 +23,7 @@ import {
   ENGINE_DOCUMENTS_PATH,
   ENGINE_DOCUMENT_DETAIL_PATH,
   ENGINE_SCHEMA_PATH,
-  // ENGINE_CRAWLER_PATH,
+  ENGINE_CRAWLER_PATH,
   META_ENGINE_SOURCE_ENGINES_PATH,
   ENGINE_RELEVANCE_TUNING_PATH,
   ENGINE_SYNONYMS_PATH,
@@ -34,6 +34,7 @@ import {
 } from '../../routes';
 import { AnalyticsRouter } from '../analytics';
 import { ApiLogs } from '../api_logs';
+import { CrawlerRouter } from '../crawler';
 import { CurationsRouter } from '../curations';
 import { DocumentDetail, Documents } from '../documents';
 import { EngineOverview } from '../engine_overview';
@@ -52,7 +53,7 @@ export const EngineRouter: React.FC = () => {
       canViewEngineAnalytics,
       canViewEngineDocuments,
       canViewEngineSchema,
-      // canViewEngineCrawler,
+      canViewEngineCrawler,
       canViewMetaEngineSourceEngines,
       canManageEngineRelevanceTuning,
       canManageEngineSynonyms,
@@ -143,6 +144,11 @@ export const EngineRouter: React.FC = () => {
           <SourceEngines />
         </Route>
       )}
+      {canViewEngineCrawler && (
+        <Route path={ENGINE_CRAWLER_PATH}>
+          <CrawlerRouter />
+        </Route>
+      )}
       <Route>
         <SetPageChrome trail={getEngineBreadcrumbs()} />
         <EngineOverview />