From 409a0c69f5655929cefbe2d7de64b1ad3702574e Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 14 Jul 2021 17:50:08 -0400 Subject: [PATCH] [Enterprise Search] Added Thumbnails to Search UI (#104199) (#105663) Co-authored-by: Jason Stoltzfus --- .../components/search_ui_form.test.tsx | 31 +++++++++++++++++++ .../search_ui/components/search_ui_form.tsx | 20 +++++++++++- .../components/search_ui_graphic.scss | 23 ++++++++++++++ .../app_search/components/search_ui/i18n.ts | 8 +++++ .../search_ui/search_ui_logic.test.ts | 12 +++++++ .../components/search_ui/search_ui_logic.ts | 10 ++++++ .../app_search/components/search_ui/types.ts | 1 + 7 files changed, 104 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/search_ui_form.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/search_ui_form.test.tsx index 944c99f7c61c2..332f3a3889a32 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/search_ui_form.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/search_ui_form.test.tsx @@ -39,6 +39,7 @@ describe('SearchUIForm', () => { onSortFieldsChange: jest.fn(), onTitleFieldChange: jest.fn(), onUrlFieldChange: jest.fn(), + onThumbnailFieldChange: jest.fn(), }; beforeAll(() => { @@ -52,6 +53,7 @@ describe('SearchUIForm', () => { expect(wrapper.find('[data-test-subj="selectFilters"]').exists()).toBe(true); expect(wrapper.find('[data-test-subj="selectSort"]').exists()).toBe(true); expect(wrapper.find('[data-test-subj="selectUrl"]').exists()).toBe(true); + expect(wrapper.find('[data-test-subj="selectThumbnail"]').exists()).toBe(true); }); describe('title field', () => { @@ -112,6 +114,35 @@ describe('SearchUIForm', () => { }); }); + describe('thumbnail field', () => { + beforeEach(() => jest.clearAllMocks()); + const subject = () => shallow().find('[data-test-subj="selectThumbnail"]'); + + it('renders with its value set from state', () => { + setMockValues({ + ...values, + thumbnailField: 'foo', + }); + + expect(subject().prop('value')).toBe('foo'); + }); + + it('updates state with new value when changed', () => { + subject().simulate('change', { target: { value: 'foo' } }); + expect(actions.onThumbnailFieldChange).toHaveBeenCalledWith('foo'); + }); + + it('updates active field in state on focus', () => { + subject().simulate('focus'); + expect(actions.onActiveFieldChange).toHaveBeenCalledWith(ActiveField.Thumb); + }); + + it('removes active field in state on blur', () => { + subject().simulate('blur'); + expect(actions.onActiveFieldChange).toHaveBeenCalledWith(ActiveField.None); + }); + }); + describe('filters field', () => { beforeEach(() => jest.clearAllMocks()); const subject = () => shallow().find('[data-test-subj="selectFilters"]'); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/search_ui_form.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/search_ui_form.tsx index b795a46268237..145362812a7bf 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/search_ui_form.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/search_ui_form.tsx @@ -22,6 +22,8 @@ import { URL_FIELD_LABEL, URL_FIELD_HELP_TEXT, GENERATE_PREVIEW_BUTTON_LABEL, + THUMBNAIL_FIELD_LABEL, + THUMBNAIL_FIELD_HELP_TEXT, } from '../i18n'; import { SearchUILogic } from '../search_ui_logic'; import { ActiveField } from '../types'; @@ -36,6 +38,7 @@ export const SearchUIForm: React.FC = () => { validFacetFields, titleField, urlField, + thumbnailField, facetFields, sortFields, } = useValues(SearchUILogic); @@ -45,11 +48,13 @@ export const SearchUIForm: React.FC = () => { onSortFieldsChange, onTitleFieldChange, onUrlFieldChange, + onThumbnailFieldChange, } = useActions(SearchUILogic); const previewHref = generatePreviewUrl({ titleField, urlField, + thumbnailField, facets: facetFields, sortFields, }); @@ -69,6 +74,7 @@ export const SearchUIForm: React.FC = () => { const facetOptionFields = formatMultiOptions(validFacetFields); const selectedTitleOption = formatSelectOption(titleField); const selectedURLOption = formatSelectOption(urlField); + const selectedThumbnailOption = formatSelectOption(thumbnailField); const selectedSortOptions = formatMultiOptions(sortFields); const selectedFacetOptions = formatMultiOptions(facetFields); @@ -112,7 +118,6 @@ export const SearchUIForm: React.FC = () => { data-test-subj="selectSort" /> - { data-test-subj="selectUrl" /> + + onThumbnailFieldChange(e.target.value)} + fullWidth + onFocus={() => onActiveFieldChange(ActiveField.Thumb)} + onBlur={() => onActiveFieldChange(ActiveField.None)} + hasNoInitialSelection + data-test-subj="selectThumbnail" + /> + { validFacetFields: [], titleField: '', urlField: '', + thumbnailField: '', facetFields: [], sortFields: [], activeField: ActiveField.None, @@ -93,6 +94,17 @@ describe('SearchUILogic', () => { }); }); + describe('onThumbnailFieldChange', () => { + it('sets the thumbnailField value', () => { + mount({ thumbnailField: '' }); + SearchUILogic.actions.onThumbnailFieldChange('foo'); + expect(SearchUILogic.values).toEqual({ + ...DEFAULT_VALUES, + thumbnailField: 'foo', + }); + }); + }); + describe('onFacetFieldsChange', () => { it('sets the facetFields value', () => { mount({ facetFields: [] }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui_logic.ts index 096365f57ea36..e6225614fdc18 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui_logic.ts @@ -20,6 +20,7 @@ interface InitialFieldValues { validSortFields: string[]; validFacetFields: string[]; urlField?: string; + thumbnailField?: string; titleField?: string; } interface SearchUIActions { @@ -30,6 +31,7 @@ interface SearchUIActions { onSortFieldsChange(sortFields: string[]): { sortFields: string[] }; onTitleFieldChange(titleField: string): { titleField: string }; onUrlFieldChange(urlField: string): { urlField: string }; + onThumbnailFieldChange(thumbnailField: string): { thumbnailField: string }; } interface SearchUIValues { @@ -39,6 +41,7 @@ interface SearchUIValues { validFacetFields: string[]; titleField: string; urlField: string; + thumbnailField: string; facetFields: string[]; sortFields: string[]; activeField: ActiveField; @@ -54,6 +57,7 @@ export const SearchUILogic = kea> onSortFieldsChange: (sortFields) => ({ sortFields }), onTitleFieldChange: (titleField) => ({ titleField }), onUrlFieldChange: (urlField) => ({ urlField }), + onThumbnailFieldChange: (thumbnailField) => ({ thumbnailField }), }), reducers: () => ({ dataLoading: [ @@ -79,6 +83,12 @@ export const SearchUILogic = kea> onFieldDataLoaded: (_, { urlField }) => urlField || '', }, ], + thumbnailField: [ + '', + { + onThumbnailFieldChange: (_, { thumbnailField }) => thumbnailField, + }, + ], facetFields: [[], { onFacetFieldsChange: (_, { facetFields }) => facetFields }], sortFields: [[], { onSortFieldsChange: (_, { sortFields }) => sortFields }], activeField: [ActiveField.None, { onActiveFieldChange: (_, { activeField }) => activeField }], diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/types.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/types.ts index 224aeab05af35..e5b0f2ce2ccd7 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/types.ts +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/types.ts @@ -10,5 +10,6 @@ export enum ActiveField { Filter = 'Filter', Sort = 'Sort', Url = 'Url', + Thumb = 'Thumb', None = '', }