[App Search] Migrate Crawl Schedule form (#108066)

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

@@ -0,0 +1,98 @@
+/*
+ * 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 { setMockActions, setMockValues } from '../../../../../__mocks__/kea_logic';
+import '../../../../../__mocks__/shallow_useeffect.mock';
+
+import React from 'react';
+
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldNumber,
+  EuiForm,
+  EuiSelect,
+  EuiSwitch,
+} from '@elastic/eui';
+
+import { CrawlUnits } from '../../types';
+
+import { AutomaticCrawlScheduler } from './automatic_crawl_scheduler';
+
+const MOCK_ACTIONS = {
+  // AutomaticCrawlSchedulerLogic
+  fetchCrawlSchedule: jest.fn(),
+  setCrawlFrequency: jest.fn(),
+  setCrawlUnit: jest.fn(),
+  saveChanges: jest.fn(),
+  toggleCrawlAutomatically: jest.fn(),
+  // ManageCrawlsPopoverLogic
+  closePopover: jest.fn(),
+};
+
+const MOCK_VALUES = {
+  crawlAutomatically: false,
+  crawlFrequency: 7,
+  crawlUnit: CrawlUnits.days,
+  isSubmitting: false,
+};
+
+describe('AutomaticCrawlScheduler', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeEach(() => {
+    setMockActions(MOCK_ACTIONS);
+    setMockValues(MOCK_VALUES);
+
+    wrapper = shallow(<AutomaticCrawlScheduler />);
+  });
+
+  it('calls fetchCrawlSchedule on component load', () => {
+    expect(MOCK_ACTIONS.fetchCrawlSchedule).toHaveBeenCalled();
+  });
+
+  it('renders', () => {
+    expect(wrapper.find(EuiForm)).toHaveLength(1);
+    expect(wrapper.find(EuiFieldNumber)).toHaveLength(1);
+    expect(wrapper.find(EuiSelect)).toHaveLength(1);
+  });
+
+  it('saves changes on form submit', () => {
+    const preventDefault = jest.fn();
+    wrapper.find(EuiForm).simulate('submit', { preventDefault });
+
+    expect(preventDefault).toHaveBeenCalled();
+    expect(MOCK_ACTIONS.saveChanges).toHaveBeenCalled();
+  });
+
+  it('contains a switch that toggles automatic crawling', () => {
+    wrapper.find(EuiSwitch).simulate('change');
+
+    expect(MOCK_ACTIONS.toggleCrawlAutomatically).toHaveBeenCalled();
+  });
+
+  it('contains a number field that updates the crawl frequency', () => {
+    wrapper.find(EuiFieldNumber).simulate('change', { target: { value: '10' } });
+
+    expect(MOCK_ACTIONS.setCrawlFrequency).toHaveBeenCalledWith(10);
+  });
+
+  it('contains a select field that updates the crawl unit', () => {
+    wrapper.find(EuiSelect).simulate('change', { target: { value: CrawlUnits.weeks } });
+
+    expect(MOCK_ACTIONS.setCrawlUnit).toHaveBeenCalledWith(CrawlUnits.weeks);
+  });
+
+  it('contains a button to close the popover', () => {
+    expect(wrapper.find(EuiButtonEmpty).prop('onClick')).toEqual(MOCK_ACTIONS.closePopover);
+  });
+
+  it('contains a submit button', () => {
+    expect(wrapper.find(EuiButton).prop('type')).toEqual('submit');
+  });
+});

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

@@ -0,0 +1,204 @@
+/*
+ * 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 { useActions, useValues } from 'kea';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiForm,
+  EuiFormRow,
+  EuiLink,
+  EuiPopoverFooter,
+  EuiSelect,
+  EuiSpacer,
+  EuiSwitch,
+  EuiText,
+  htmlIdGenerator,
+} from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import {
+  DAYS_UNIT_LABEL,
+  HOURS_UNIT_LABEL,
+  MONTHS_UNIT_LABEL,
+  WEEKS_UNIT_LABEL,
+} from '../../../../..//shared/constants/units';
+import { CANCEL_BUTTON_LABEL, SAVE_BUTTON_LABEL } from '../../../../../shared/constants';
+
+import { DOCS_PREFIX } from '../../../../routes';
+import { CrawlUnits } from '../../types';
+
+import { AutomaticCrawlSchedulerLogic } from './automatic_crawl_scheduler_logic';
+
+import { ManageCrawlsPopoverLogic } from './manage_crawls_popover_logic';
+
+export const AutomaticCrawlScheduler: React.FC = () => {
+  const {
+    fetchCrawlSchedule,
+    setCrawlFrequency,
+    setCrawlUnit,
+    saveChanges,
+    toggleCrawlAutomatically,
+  } = useActions(AutomaticCrawlSchedulerLogic);
+
+  const { closePopover } = useActions(ManageCrawlsPopoverLogic);
+
+  const { crawlAutomatically, crawlFrequency, crawlUnit, isSubmitting } = useValues(
+    AutomaticCrawlSchedulerLogic
+  );
+
+  useEffect(() => {
+    fetchCrawlSchedule();
+  }, []);
+
+  const formId = htmlIdGenerator('AutomaticCrawlScheduler')();
+
+  return (
+    <EuiForm
+      onSubmit={(event) => {
+        event.preventDefault();
+        saveChanges();
+      }}
+      component="form"
+      id={formId}
+    >
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        <FormattedMessage
+          id="xpack.enterpriseSearch.appSearch.crawler.automaticCrawlSchedule.formDescription"
+          defaultMessage="Don't worry about it, we'll start a crawl for you. {readMoreMessage}."
+          values={{
+            readMoreMessage: (
+              <EuiLink href={`${DOCS_PREFIX}/web-crawler.html`} target="_blank">
+                {i18n.translate(
+                  'xpack.enterpriseSearch.appSearch.crawler.automaticCrawlSchedule.readMoreLink',
+                  {
+                    defaultMessage: 'Read more.',
+                  }
+                )}
+              </EuiLink>
+            ),
+          }}
+        />
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiFormRow display="rowCompressed">
+        <EuiSwitch
+          autoFocus
+          checked={crawlAutomatically}
+          label={
+            <EuiText>
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.crawler.automaticCrawlSchedule.crawlAutomaticallySwitchLabel',
+                {
+                  defaultMessage: 'Crawl automatically',
+                }
+              )}
+            </EuiText>
+          }
+          onChange={toggleCrawlAutomatically}
+          compressed
+        />
+      </EuiFormRow>
+      <EuiFormRow display="rowCompressed">
+        <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.crawler.automaticCrawlSchedule.crawlUnitsPrefix',
+                {
+                  defaultMessage: 'Every',
+                }
+              )}
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFieldNumber
+              aria-label={i18n.translate(
+                'xpack.enterpriseSearch.appSearch.crawler.automaticCrawlSchedule.scheduleFrequencyLabel',
+                {
+                  defaultMessage: 'Schedule frequency',
+                }
+              )}
+              disabled={!crawlAutomatically}
+              fullWidth={false}
+              min={0}
+              max={99}
+              compressed
+              value={crawlFrequency}
+              onChange={(e) => setCrawlFrequency(parseInt(e.target.value, 10))}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiSelect
+              aria-label={i18n.translate(
+                'xpack.enterpriseSearch.appSearch.crawler.automaticCrawlSchedule.scheduleUnitsLabel',
+                {
+                  defaultMessage: 'Schedule units of time',
+                }
+              )}
+              disabled={!crawlAutomatically}
+              compressed
+              options={[
+                {
+                  text: HOURS_UNIT_LABEL,
+                  value: CrawlUnits.hours,
+                },
+                {
+                  text: DAYS_UNIT_LABEL,
+                  value: CrawlUnits.days,
+                },
+                {
+                  text: WEEKS_UNIT_LABEL,
+                  value: CrawlUnits.weeks,
+                },
+                {
+                  text: MONTHS_UNIT_LABEL,
+                  value: CrawlUnits.months,
+                },
+              ]}
+              value={crawlUnit}
+              onChange={(e) => setCrawlUnit(e.target.value as CrawlUnits)}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem />
+        </EuiFlexGroup>
+      </EuiFormRow>
+      <EuiSpacer />
+      <EuiText size="xs" color="subdued">
+        {i18n.translate(
+          'xpack.enterpriseSearch.appSearch.crawler.automaticCrawlSchedule.scheduleDescription',
+          {
+            defaultMessage: 'The crawl schedule applies to every domain on this engine.',
+          }
+        )}
+      </EuiText>
+      <EuiPopoverFooter>
+        <EuiFormRow display="rowCompressed">
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiButtonEmpty onClick={closePopover}>{CANCEL_BUTTON_LABEL}</EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiButton form={formId} type="submit" isLoading={isSubmitting} fill>
+                {SAVE_BUTTON_LABEL}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
+      </EuiPopoverFooter>
+    </EuiForm>
+  );
+};