[Workplace Search] Add read views for Source Sync Scheduling #113199

scottybollinger · 2021-09-27T22:45:15Z

closes https://github.com/elastic/workplace-search-team/issues/2040

Summary

This is the first PR for adding Sync Scheduling to the Workplace Search admin dashboard. This PR adds read views for the feature, to help split it into manageable chunks.

Done

Adds source name to the top of the sub nav
Adds read view for Sync, Freq, and tabs for Sync frequency & Blocked time windows
Adds stubbed out Objects and assets page for routing purposes only

Not done

Placeholder copy in place for descriptions
TODOs for link hrefs
All form interactions for views and persisting to the server including logic for input state changes
Move 'Objects and assets' from Settings section to new sub-nav item for Sync
100% unit test coverage. Stubbed out methods will be replaced with Kea actions and tested later
a11y testing. Will do this once the entire feature is wired up

ss1.mp4

Also in this PR, we account for when source sync has been disabled in the config (a7a86d6):

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)

Placeholders in place whle content is being written

The weird typing around `DaysOfWeek` was taken from this SO answer to get an array from a union type: https://stackoverflow.com/a/45486495/1949235

These components are the repeatable components in each of the frequency tabs. - FrequencyItem - BlockedWindowItem Form changes methods are stubbed for now.

This is just the basics. More will be added in a future PR

This is merely a placeholder page so the routes could be built out. Section will be moved from settings in a future PR

scottybollinger · 2021-09-27T22:49:24Z

@elasticmachine merge upstream

This was added to the API after the rest of the work was done, so adding it here. https://github.com/elastic/workplace-search-team/issues/2043

scottybollinger · 2021-09-28T18:53:23Z

...ns/workplace_search/views/content_sources/components/synchronization/blocked_window_item.tsx

+            itemClassName="scottyItem"
+            popoverClassName="scottyPopover"


Fixed in a future commit 🌮

There was a very long discussion about the edge case that is covered here. https://github.com/elastic/ent-search/pull/4715 Basically here is what we landed on: In most cases, the user will use the form to set the sync frequency, in which case the duration will be in the format of "PT3D" (ISO 8601). However, if an operator has set the sync frequency via the API, the duration could be a complex format, such as "P1DT2H3M4S". It was decided that in this case, we should omit seconds and go with the least common denominator from minutes. Example: "P1DT2H3M4S" -> "1563 Minutes"

scottybollinger · 2021-10-04T17:03:35Z

@elasticmachine merge upstream

yakhinvadim

This looks great! 🥇
I only have minor comments:

yakhinvadim · 2021-10-05T00:01:01Z

...ns/enterprise_search/public/applications/workplace_search/views/content_sources/constants.ts

+export const SOURCE_SYNCRONIZATION_DESCRIPTION = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearch.sources.sourceSyncronizationDescription',
+  {
+    defaultMessage:
+      'Sync chupa chups dragée gummi bears jelly beans brownie. Fruitcake pie chocolate cake caramels carrot cake cotton candy dragée sweet roll soufflé.',
+  }
+);
+
+export const SOURCE_FREQUENCY_DESCRIPTION = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearch.sources.sourceFrequencyDescription',
+  {
+    defaultMessage:
+      'Frequency chupa chups dragée gummi bears jelly beans brownie. Fruitcake pie chocolate cake caramels carrot cake cotton candy dragée sweet roll soufflé.',
+  }
+);
+
+export const SOURCE_OBJECTS_AND_ASSETS_DESCRIPTION = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearch.sources.sourceObjectsAndAssetsDescription',
+  {
+    defaultMessage:
+      'Objects chupa chups dragée gummi bears jelly beans brownie. Fruitcake pie chocolate cake caramels carrot cake cotton candy dragée sweet roll soufflé.',
+  }
+);


To avoid translators being confused about these messages, maybe we could add something like this at the beginning of the text?

"DO NOT TRANSLATE, temporary placeholder:"

yakhinvadim · 2021-10-05T00:04:31Z

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

+export const DAYS_OF_WEEK_VALUES = [
+  'sunday',
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+] as const;


@bhuvanaurora in the Day of week multiselect, what day should be the first one in the list? Sunday or Monday?
I'm talking about this multiselect:

This is possibly going away, as the API does not support it.

yakhinvadim · 2021-10-05T00:06:16Z

...ns/workplace_search/views/content_sources/components/synchronization/blocked_window_item.tsx

+const dayPickerOptions = DAYS_OF_WEEK_VALUES.reduce((options, day) => {
+  options.push({
+    label: DAYS_OF_WEEK_LABELS[day.toUpperCase() as keyof typeof DAYS_OF_WEEK_LABELS],
+    value: day,
+  });
+  return options;
+}, [] as Array<EuiComboBoxOptionOption<string>>);


Is it possible to use map here? I find it easier to understand than reduce.
If not possible feel free to resolve this comment.

yakhinvadim · 2021-10-05T00:09:48Z

...ns/workplace_search/views/content_sources/components/synchronization/blocked_window_item.tsx

+        <EuiFlexItem grow={false}>
+          <EuiText>{BLOCK_LABEL}</EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} style={{ width: 175 }} className="blockedItemSyncSelect">


My local setup is broken, so I can't check why custom styles are needed. I'm assuming to keep everything in one line? If so, maybe we could remove those? I don't think it's realistic for design to be perfect on all resolutions. Also, we recently went over the plugin codebase to remove custom styles, so bringing new ones feels like a step back.

~~Same question for hardcoded values in frequency_item.tsx component.~~

Got my local setup working and now see that it's not used to keep things on one line, ignore this comment. 🙈

...orkplace_search/views/content_sources/components/synchronization/sync_frequency_tab.test.tsx

yakhinvadim · 2021-10-05T00:44:40Z

@scottybollinger I'm going to approve this to unblock the following PR. Feel free to provide fixes separately or in this PR.

Co-authored-by: Vadim Yakhin <[email protected]>

…#113199) * Add constants Placeholders in place whle content is being written * Update mock to match API and add types The weird typing around `DaysOfWeek` was taken from this SO answer to get an array from a union type: https://stackoverflow.com/a/45486495/1949235 * Add routes and stubbed docs urls * Add components for list items These components are the repeatable components in each of the frequency tabs. - FrequencyItem - BlockedWindowItem Form changes methods are stubbed for now. * Add tab components for Frequency page * Add Frequency page component * Add synchronization logic This is just the basics. More will be added in a future PR * Add Synchronization op-level page * Add Synchronization router and subnav * Add `Objects and assets` page stub This is merely a placeholder page so the routes could be built out. Section will be moved from settings in a future PR * Add name and new nav item to source sub nav * Add SynchronizationRouter nav to Source router * Fix a couple of typos * Add callout and disable subnav for disabled sync This was added to the API after the rest of the work was done, so adding it here. elastic/workplace-search-team#2043 * Update frequency item to account for edge case There was a very long discussion about the edge case that is covered here. elastic/ent-search#4715 Basically here is what we landed on: In most cases, the user will use the form to set the sync frequency, in which case the duration will be in the format of "PT3D" (ISO 8601). However, if an operator has set the sync frequency via the API, the duration could be a complex format, such as "P1DT2H3M4S". It was decided that in this case, we should omit seconds and go with the least common denominator from minutes. Example: "P1DT2H3M4S" -> "1563 Minutes" * Fix failing tests and add key * Update constants with note for translators * Fix typo Co-authored-by: Vadim Yakhin <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Vadim Yakhin <[email protected]>

kibanamachine · 2021-10-05T03:47:10Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

#113889) * Add constants Placeholders in place whle content is being written * Update mock to match API and add types The weird typing around `DaysOfWeek` was taken from this SO answer to get an array from a union type: https://stackoverflow.com/a/45486495/1949235 * Add routes and stubbed docs urls * Add components for list items These components are the repeatable components in each of the frequency tabs. - FrequencyItem - BlockedWindowItem Form changes methods are stubbed for now. * Add tab components for Frequency page * Add Frequency page component * Add synchronization logic This is just the basics. More will be added in a future PR * Add Synchronization op-level page * Add Synchronization router and subnav * Add `Objects and assets` page stub This is merely a placeholder page so the routes could be built out. Section will be moved from settings in a future PR * Add name and new nav item to source sub nav * Add SynchronizationRouter nav to Source router * Fix a couple of typos * Add callout and disable subnav for disabled sync This was added to the API after the rest of the work was done, so adding it here. elastic/workplace-search-team#2043 * Update frequency item to account for edge case There was a very long discussion about the edge case that is covered here. elastic/ent-search#4715 Basically here is what we landed on: In most cases, the user will use the form to set the sync frequency, in which case the duration will be in the format of "PT3D" (ISO 8601). However, if an operator has set the sync frequency via the API, the duration could be a complex format, such as "P1DT2H3M4S". It was decided that in this case, we should omit seconds and go with the least common denominator from minutes. Example: "P1DT2H3M4S" -> "1563 Minutes" * Fix failing tests and add key * Update constants with note for translators * Fix typo Co-authored-by: Vadim Yakhin <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Vadim Yakhin <[email protected]> Co-authored-by: Scotty Bollinger <[email protected]> Co-authored-by: Vadim Yakhin <[email protected]>

kibanamachine · 2021-10-11T17:55:32Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`enterpriseSearch`	1503	1514	+11

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`enterpriseSearch`	1.3MB	1.3MB	+15.5KB

History

💚 Build #157846 succeeded 8a92bfd
💛 Build #157667 was flaky a08eaa5
💚 Build #156246 succeeded 07a68fa
💔 Build #156214 failed ef95030ef81d1f15e7be14ed5a178947a5962102
💔 Build #156197 failed c30cbe5437e4aaa6b2a48f00998dc73a9dfbe5ad

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

scottybollinger added 12 commits September 27, 2021 17:05

Add constants

d10f4fa

Placeholders in place whle content is being written

Update mock to match API and add types

5cbe76a

The weird typing around `DaysOfWeek` was taken from this SO answer to get an array from a union type: https://stackoverflow.com/a/45486495/1949235

Add routes and stubbed docs urls

21c69e7

Add components for list items

6a83dae

These components are the repeatable components in each of the frequency tabs. - FrequencyItem - BlockedWindowItem Form changes methods are stubbed for now.

Add tab components for Frequency page

9fe3223

Add Frequency page component

fc92f1a

Add synchronization logic

735c6f6

This is just the basics. More will be added in a future PR

Add Synchronization op-level page

44d94d0

Add Synchronization router and subnav

e8c70d7

Add Objects and assets page stub

eb6400f

This is merely a placeholder page so the routes could be built out. Section will be moved from settings in a future PR

Add name and new nav item to source sub nav

e064775

Add SynchronizationRouter nav to Source router

ce65e8c

scottybollinger added release_note:skip Skip the PR/issue when compiling release notes auto-backport Deprecated - use backport:version if exact versions are needed v7.16.0 labels Sep 27, 2021

scottybollinger requested review from a team September 27, 2021 22:45

kibanamachine and others added 3 commits September 27, 2021 18:49

Merge branch 'master' into scottybollinger/sync-sched-1

af09e34

Fix a couple of typos

0851e7c

Add callout and disable subnav for disabled sync

a7a86d6

This was added to the API after the rest of the work was done, so adding it here. https://github.com/elastic/workplace-search-team/issues/2043

scottybollinger commented Sep 28, 2021

View reviewed changes

scottybollinger force-pushed the scottybollinger/sync-sched-1 branch from c30cbe5 to ef95030 Compare September 28, 2021 19:58

Fix failing tests and add key

07a68fa

scottybollinger force-pushed the scottybollinger/sync-sched-1 branch from ef95030 to 07a68fa Compare September 28, 2021 21:41

Merge branch 'master' into scottybollinger/sync-sched-1

a08eaa5

yakhinvadim reviewed Oct 5, 2021

View reviewed changes

yakhinvadim approved these changes Oct 5, 2021

View reviewed changes

scottybollinger and others added 2 commits October 4, 2021 20:39

Update constants with note for translators

ce870d0

Fix typo

8a92bfd

Co-authored-by: Vadim Yakhin <[email protected]>

scottybollinger enabled auto-merge (squash) October 5, 2021 01:41

scottybollinger merged commit 8f7dd3f into elastic:master Oct 5, 2021

kibanamachine mentioned this pull request Oct 5, 2021

[7.x] [Workplace Search] Add read views for Source Sync Scheduling (#113199) #113889

Merged

This was referenced Oct 6, 2021

[Workplace Search] Update Source Frequency views to match new designs #114157

Merged

[Workplace Search] Wire up write view for Sync Frequency #114522

Merged

scottybollinger deleted the scottybollinger/sync-sched-1 branch March 15, 2022 15:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Workplace Search] Add read views for Source Sync Scheduling #113199

[Workplace Search] Add read views for Source Sync Scheduling #113199

scottybollinger commented Sep 27, 2021 •

edited

Loading

scottybollinger commented Sep 27, 2021

scottybollinger Sep 28, 2021

scottybollinger commented Oct 4, 2021

yakhinvadim left a comment

yakhinvadim Oct 5, 2021

yakhinvadim Oct 5, 2021

scottybollinger Oct 5, 2021

yakhinvadim Oct 5, 2021

yakhinvadim Oct 5, 2021 •

edited

Loading

yakhinvadim Oct 5, 2021

yakhinvadim commented Oct 5, 2021

kibanamachine commented Oct 5, 2021

kibanamachine commented Oct 11, 2021

[Workplace Search] Add read views for Source Sync Scheduling #113199

[Workplace Search] Add read views for Source Sync Scheduling #113199

Conversation

scottybollinger commented Sep 27, 2021 • edited Loading

Summary

Checklist

scottybollinger commented Sep 27, 2021

scottybollinger Sep 28, 2021

Choose a reason for hiding this comment

scottybollinger commented Oct 4, 2021

yakhinvadim left a comment

Choose a reason for hiding this comment

yakhinvadim Oct 5, 2021

Choose a reason for hiding this comment

yakhinvadim Oct 5, 2021

Choose a reason for hiding this comment

scottybollinger Oct 5, 2021

Choose a reason for hiding this comment

yakhinvadim Oct 5, 2021

Choose a reason for hiding this comment

yakhinvadim Oct 5, 2021 • edited Loading

Choose a reason for hiding this comment

yakhinvadim Oct 5, 2021

Choose a reason for hiding this comment

yakhinvadim commented Oct 5, 2021

kibanamachine commented Oct 5, 2021

💚 Backport successful

kibanamachine commented Oct 11, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

scottybollinger commented Sep 27, 2021 •

edited

Loading

yakhinvadim Oct 5, 2021 •

edited

Loading