[Workplace Search] Wire up write view for Blocked windows

x-pack/plugins/enterprise_search/public/applications/workplace_search/__mocks__/content_sources.mock.ts

@@ -54,6 +54,7 @@ const defaultIndexing = {
     incremental: 'PT2H',
     delete: 'PT10M',
     permissions: 'PT3H',
+    blockedWindows: [],
     estimates: {
       full: {
         nextStart: '2021-09-30T15:37:38+00:00',

x-pack/plugins/enterprise_search/public/applications/workplace_search/routes.ts

@@ -45,10 +45,9 @@ export const CUSTOM_SOURCE_DOCS_URL = `${DOCS_PREFIX}/workplace-search-custom-ap
 export const CUSTOM_API_DOCS_URL = `${DOCS_PREFIX}/workplace-search-custom-sources-api.html`;
 export const CUSTOM_API_DOCUMENT_PERMISSIONS_DOCS_URL = `${CUSTOM_SOURCE_DOCS_URL}#custom-api-source-document-level-access-control`;
 export const ENT_SEARCH_LICENSE_MANAGEMENT = `${docLinks.enterpriseSearchBase}/license-management.html`;
-export const SYNCHRONIZATION_DOCS_URL = '#TODO';
-export const DIFFERENT_SYNC_TYPES_DOCS_URL = '#TODO';
-export const SYNC_BEST_PRACTICES_DOCS_URL = '#TODO';
-export const OBJECTS_AND_ASSETS_DOCS_URL = '#TODO';
+export const SYNCHRONIZATION_DOCS_URL = `${DOCS_PREFIX}}/workplace-search-customizing-indexing-rules.html#workplace-search-customizing-indexing-rules`;
+export const DIFFERENT_SYNC_TYPES_DOCS_URL = `${DOCS_PREFIX}}/workplace-search-customizing-indexing-rules.html#_indexing_schedule`;
+export const OBJECTS_AND_ASSETS_DOCS_URL = `${DOCS_PREFIX}}/workplace-search-customizing-indexing-rules.html#workplace-search-customizing-indexing-rules`;
 
 export const PERSONAL_PATH = '/p';
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/types.ts

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import { Moment } from 'moment';
-
 import { RoleMapping } from '../shared/types';
 
 export * from '../../../common/types/workplace_search';
@@ -166,8 +164,8 @@ export type DayOfWeek = typeof DAYS_OF_WEEK_VALUES[number];
 export interface BlockedWindow {
   jobType: SyncJobType;
   day: DayOfWeek | 'all';
-  start: Moment;
-  end: Moment;
+  start: string;
+  end: string;
 }
 
 export interface IndexingConfig {

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/__mocks__/syncronization.mock.ts → x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/__mocks__/synchronization.mock.ts

@@ -5,13 +5,11 @@
  * 2.0.
  */
 
-import moment from 'moment';
-
 import { SyncJobType, DayOfWeek } from '../../../../../types';
 
 export const blockedWindow = {
   jobType: 'incremental' as SyncJobType,
   day: 'sunday' as DayOfWeek,
-  start: moment().set('hour', 11).set('minutes', 0),
-  end: moment().set('hour', 13).set('minutes', 0),
+  start: '11:00:00Z',
+  end: '13:00:00Z',
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/blocked_window_item.test.tsx

@@ -5,23 +5,92 @@
  * 2.0.
  */
 
-import { blockedWindow } from './__mocks__/syncronization.mock';
+import '../../../../../__mocks__/shallow_useeffect.mock';
+import { setMockActions, setMockValues } from '../../../../../__mocks__/kea_logic';
+import { fullContentSources } from '../../../../__mocks__/content_sources.mock';
+import { blockedWindow } from './__mocks__/synchronization.mock';
 
 import React from 'react';
 
 import { shallow } from 'enzyme';
+import moment from 'moment';
 
-import { EuiDatePickerRange, EuiSelect, EuiSuperSelect } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiDatePicker,
+  EuiDatePickerRange,
+  EuiSelect,
+  EuiSuperSelect,
+} from '@elastic/eui';
 
 import { BlockedWindowItem } from './blocked_window_item';
 
 describe('BlockedWindowItem', () => {
-  const props = { blockedWindow };
+  const removeBlockedWindow = jest.fn();
+  const setBlockedTimeWindow = jest.fn();
+  const mockActions = {
+    removeBlockedWindow,
+    setBlockedTimeWindow,
+  };
+  const mockValues = {
+    contentSource: fullContentSources[0],
+  };
+
+  beforeEach(() => {
+    setMockActions(mockActions);
+    setMockValues(mockValues);
+  });
+
+  const props = { blockedWindow, index: 0 };
+
   it('renders', () => {
     const wrapper = shallow(<BlockedWindowItem {...props} />);
 
     expect(wrapper.find(EuiSelect)).toHaveLength(1);
     expect(wrapper.find(EuiSuperSelect)).toHaveLength(1);
     expect(wrapper.find(EuiDatePickerRange)).toHaveLength(1);
   });
+
+  it('handles remove button click', () => {
+    const wrapper = shallow(<BlockedWindowItem {...props} />);
+    wrapper.find(EuiButton).simulate('click');
+
+    expect(removeBlockedWindow).toHaveBeenCalledWith(0);
+  });
+
+  it('handles "jobType" select change', () => {
+    const wrapper = shallow(<BlockedWindowItem {...props} />);
+    wrapper.find(EuiSuperSelect).simulate('change', 'delete');
+
+    expect(setBlockedTimeWindow).toHaveBeenCalledWith(0, 'jobType', 'delete');
+  });
+
+  it('handles "day" select change', () => {
+    const wrapper = shallow(<BlockedWindowItem {...props} />);
+    wrapper.find(EuiSelect).simulate('change', { target: { value: 'tuesday' } });
+
+    expect(setBlockedTimeWindow).toHaveBeenCalledWith(0, 'day', 'tuesday');
+  });
+
+  it('handles "start" time change', () => {
+    const wrapper = shallow(<BlockedWindowItem {...props} />);
+    const dayRange = wrapper.find(EuiDatePickerRange).dive();
+    dayRange
+      .find(EuiDatePicker)
+      .first()
+      .simulate('change', moment().utc().set({ hour: 10, minute: 0, seconds: 0 }));
+
+    expect(setBlockedTimeWindow).toHaveBeenCalledWith(0, 'start', '10:00:00Z');
+  });
+
+  it('handles "end" time change', () => {
+    const wrapper = shallow(<BlockedWindowItem {...props} />);
+    const dayRange = wrapper.find(EuiDatePickerRange).dive();
+    dayRange
+      .find(EuiDatePicker)
+      .last()
+      .simulate('change', moment().utc().set({ hour: 12, minute: 0, seconds: 0 }));
+
+    expect(setBlockedTimeWindow).toHaveBeenCalledWith(0, 'end', '12:00:00Z');
+  });
 });

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/blocked_window_item.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 
+import { useActions, useValues } from 'kea';
 import moment from 'moment';
 
 import {
@@ -40,8 +41,13 @@ import {
   UTC_TITLE,
 } from '../../constants';
 
+import { SourceLogic } from '../../source_logic';
+
+import { SynchronizationLogic } from './synchronization_logic';
+
 interface Props {
   blockedWindow: BlockedWindow;
+  index: number;
 }
 
 const syncOptions = [
@@ -66,7 +72,7 @@ const syncOptions = [
     ),
   },
   {
-    value: 'deletion',
+    value: 'delete',
     inputDisplay: DELETION_SYNC_LABEL,
     dropdownDisplay: (
       <>
@@ -93,10 +99,11 @@ const daySelectOptions = DAYS_OF_WEEK_VALUES.map((day) => ({
 })) as EuiSelectOption[];
 daySelectOptions.push({ text: ALL_DAYS_LABEL, value: 'all' });
 
-export const BlockedWindowItem: React.FC<Props> = ({ blockedWindow }) => {
-  const handleSyncTypeChange = () => '#TODO';
-  const handleStartDateChange = () => '#TODO';
-  const handleEndDateChange = () => '#TODO';
+export const BlockedWindowItem: React.FC<Props> = ({ blockedWindow, index }) => {
+  const { contentSource } = useValues(SourceLogic);
+  const { removeBlockedWindow, setBlockedTimeWindow } = useActions(
+    SynchronizationLogic({ contentSource })
+  );
 
   return (
     <>
@@ -109,7 +116,7 @@ export const BlockedWindowItem: React.FC<Props> = ({ blockedWindow }) => {
           <EuiSuperSelect
             valueOfSelected={blockedWindow.jobType}
             options={syncOptions}
-            onChange={handleSyncTypeChange}
+            onChange={(value) => setBlockedTimeWindow(index, 'jobType', value)}
             itemClassName="blockedWindowSelectItem"
             popoverClassName="blockedWindowSelectPopover"
           />
@@ -118,7 +125,11 @@ export const BlockedWindowItem: React.FC<Props> = ({ blockedWindow }) => {
           <EuiText>{ON_LABEL}</EuiText>
         </EuiFlexItem>
         <EuiFlexItem style={{ minWidth: 130 }}>
-          <EuiSelect value={blockedWindow.day} options={daySelectOptions} />
+          <EuiSelect
+            value={blockedWindow.day}
+            onChange={(e) => setBlockedTimeWindow(index, 'day', e.target.value)}
+            options={daySelectOptions}
+          />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiText>{BETWEEN_LABEL}</EuiText>
@@ -129,8 +140,11 @@ export const BlockedWindowItem: React.FC<Props> = ({ blockedWindow }) => {
               <EuiDatePicker
                 showTimeSelect
                 showTimeSelectOnly
-                selected={moment(blockedWindow.start, 'HH:mm:ssZ')}
-                onChange={handleStartDateChange}
+                selected={moment(blockedWindow.start, 'HH:mm:ssZ').utc()}
+                onChange={(value) =>
+                  value &&
+                  setBlockedTimeWindow(index, 'start', `${value.utc().format('HH:mm:ss')}Z`)
+                }
                 dateFormat="h:mm A"
                 timeFormat="h:mm A"
               />
@@ -139,8 +153,10 @@ export const BlockedWindowItem: React.FC<Props> = ({ blockedWindow }) => {
               <EuiDatePicker
                 showTimeSelect
                 showTimeSelectOnly
-                selected={moment(blockedWindow.end, 'HH:mm:ssZ')}
-                onChange={handleEndDateChange}
+                selected={moment(blockedWindow.end, 'HH:mm:ssZ').utc()}
+                onChange={(value) =>
+                  value && setBlockedTimeWindow(index, 'end', `${value.utc().format('HH:mm:ss')}Z`)
+                }
                 dateFormat="h:mm A"
                 timeFormat="h:mm A"
               />
@@ -163,7 +179,7 @@ export const BlockedWindowItem: React.FC<Props> = ({ blockedWindow }) => {
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton fill color="danger">
+          <EuiButton fill color="danger" onClick={() => removeBlockedWindow(index)}>
             {REMOVE_BUTTON}
           </EuiButton>
         </EuiFlexItem>

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/blocked_window_tab.test.tsx

@@ -8,7 +8,7 @@
 import '../../../../../__mocks__/shallow_useeffect.mock';
 import { setMockActions, setMockValues } from '../../../../../__mocks__/kea_logic';
 import { fullContentSources } from '../../../../__mocks__/content_sources.mock';
-import { blockedWindow } from './__mocks__/syncronization.mock';
+import { blockedWindow } from './__mocks__/synchronization.mock';
 
 import React from 'react';
 
@@ -24,9 +24,11 @@ describe('BlockedWindows', () => {
   const mockActions = {
     addBlockedWindow,
   };
+  const contentSource = { ...fullContentSources[0] };
+  contentSource.indexing.schedule.blockedWindows = [blockedWindow] as any;
   const mockValues = {
-    blockedWindows: [blockedWindow],
-    contentSource: fullContentSources[0],
+    contentSource,
+    schedule: contentSource.indexing.schedule,
   };
 
   beforeEach(() => {
@@ -41,7 +43,7 @@ describe('BlockedWindows', () => {
   });
 
   it('renders empty state', () => {
-    setMockValues({ blockedWindows: [] });
+    setMockValues({ schedule: { blockedWindows: [] } });
     const wrapper = shallow(<BlockedWindows />);
 
     expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/blocked_window_tab.tsx

@@ -20,10 +20,12 @@ import { SynchronizationLogic } from './synchronization_logic';
 
 export const BlockedWindows: React.FC = () => {
   const { contentSource } = useValues(SourceLogic);
-  const { blockedWindows } = useValues(SynchronizationLogic({ contentSource }));
+  const {
+    schedule: { blockedWindows },
+  } = useValues(SynchronizationLogic({ contentSource }));
   const { addBlockedWindow } = useActions(SynchronizationLogic({ contentSource }));
 
-  const hasBlockedWindows = blockedWindows.length > 0;
+  const hasBlockedWindows = blockedWindows && blockedWindows.length > 0;
 
   const emptyState = (
     <>
@@ -43,8 +45,8 @@ export const BlockedWindows: React.FC = () => {
 
   const blockedWindowItems = (
     <>
-      {blockedWindows.map((blockedWindow, i) => (
-        <BlockedWindowItem key={i} blockedWindow={blockedWindow} />
+      {blockedWindows?.map((blockedWindow, i) => (
+        <BlockedWindowItem key={i} index={i} blockedWindow={blockedWindow} />
       ))}
       <EuiSpacer />
       <EuiButton onClick={addBlockedWindow}>{ADD_LABEL}</EuiButton>

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/frequency.tsx

@@ -24,13 +24,12 @@ import { SAVE_BUTTON_LABEL } from '../../../../../shared/constants';
 import { UnsavedChangesPrompt } from '../../../../../shared/unsaved_changes_prompt';
 import { ViewContentHeader } from '../../../../components/shared/view_content_header';
 import { NAV, RESET_BUTTON } from '../../../../constants';
-import { DIFFERENT_SYNC_TYPES_DOCS_URL, SYNC_BEST_PRACTICES_DOCS_URL } from '../../../../routes';
+import { DIFFERENT_SYNC_TYPES_DOCS_URL } from '../../../../routes';
 import {
   SOURCE_FREQUENCY_DESCRIPTION,
   SOURCE_SYNC_FREQUENCY_TITLE,
   BLOCKED_TIME_WINDOWS_TITLE,
-  DIFFERENT_SYNC_TYPES_LINK_LABEL,
-  SYNC_BEST_PRACTICES_LINK_LABEL,
+  SYNC_FREQUENCY_LINK_LABEL,
   SYNC_UNSAVED_CHANGES_MESSAGE,
 } from '../../constants';
 import { SourceLogic } from '../../source_logic';
@@ -46,7 +45,9 @@ interface FrequencyProps {
 
 export const Frequency: React.FC<FrequencyProps> = ({ tabId }) => {
   const { contentSource } = useValues(SourceLogic);
-  const { hasUnsavedFrequencyChanges } = useValues(SynchronizationLogic({ contentSource }));
+  const { hasUnsavedFrequencyChanges, navigatingBetweenTabs } = useValues(
+    SynchronizationLogic({ contentSource })
+  );
   const { handleSelectedTabChanged, resetSyncSettings, updateFrequencySettings } = useActions(
     SynchronizationLogic({ contentSource })
   );
@@ -87,12 +88,7 @@ export const Frequency: React.FC<FrequencyProps> = ({ tabId }) => {
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
         <EuiLink href={DIFFERENT_SYNC_TYPES_DOCS_URL} external>
-          {DIFFERENT_SYNC_TYPES_LINK_LABEL}
-        </EuiLink>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiLink href={SYNC_BEST_PRACTICES_DOCS_URL} external>
-          {SYNC_BEST_PRACTICES_LINK_LABEL}
+          {SYNC_FREQUENCY_LINK_LABEL}
         </EuiLink>
       </EuiFlexItem>
     </EuiFlexGroup>
@@ -108,7 +104,7 @@ export const Frequency: React.FC<FrequencyProps> = ({ tabId }) => {
       isLoading={false}
     >
       <UnsavedChangesPrompt
-        hasUnsavedChanges={hasUnsavedFrequencyChanges}
+        hasUnsavedChanges={!navigatingBetweenTabs && hasUnsavedFrequencyChanges}
         messageText={SYNC_UNSAVED_CHANGES_MESSAGE}
       />
       <ViewContentHeader

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/objects_and_assets.test.tsx

@@ -8,7 +8,7 @@
 import '../../../../../__mocks__/shallow_useeffect.mock';
 import { setMockActions, setMockValues } from '../../../../../__mocks__/kea_logic';
 import { fullContentSources } from '../../../../__mocks__/content_sources.mock';
-import { blockedWindow } from './__mocks__/syncronization.mock';
+import { blockedWindow } from './__mocks__/synchronization.mock';
 
 import React from 'react';
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/synchronization/objects_and_assets.tsx

@@ -31,7 +31,7 @@ import {
   SYNC_MANAGEMENT_THUMBNAILS_LABEL,
   SYNC_MANAGEMENT_THUMBNAILS_GLOBAL_CONFIG_LABEL,
   SOURCE_OBJECTS_AND_ASSETS_DESCRIPTION,
-  SYNC_OBJECTS_TYPES_LINK_LABEL,
+  OBJECTS_AND_ASSETS_LINK_LABEL,
   SOURCE_OBJECTS_AND_ASSETS_LABEL,
   SYNC_UNSAVED_CHANGES_MESSAGE,
 } from '../../constants';
@@ -88,7 +88,7 @@ export const ObjectsAndAssets: React.FC = () => {
         action={actions}
       />
       <EuiLink href={OBJECTS_AND_ASSETS_DOCS_URL} external>
-        {SYNC_OBJECTS_TYPES_LINK_LABEL}
+        {OBJECTS_AND_ASSETS_LINK_LABEL}
       </EuiLink>
       <EuiHorizontalRule />
       <EuiText size="m">{SOURCE_OBJECTS_AND_ASSETS_LABEL}</EuiText>