[Enterprise Search] Update Product Selector and add Setup Guide #78233

scottybollinger · 2020-09-22T23:04:18Z

Summary

This PR adds for the use-case where a user has not configured Enterprise Search but lands on the Product Selector. It also adds a Enterprise Search-level Setup Guide when there is an error connecting.

(Image to be updated)

QA

Ensure there is no enterpriseSearch.host set in the kibana.dev.yml file and visit the Enterprise Search Overview page. Links should say Setup Workplace Search and Setup App Search and link to the setup guide.
Ensure there is enterpriseSearch.host set in the kibana.dev.yml file and make sure Enterprise Search is not running. Visit the Enterprise Search Overview page. Error connecting page should render and button should take you to Enterprise Search setup guide.
Ensure there is enterpriseSearch.host set in the kibana.dev.yml file and make sure Enterprise Search is running. Visit the Enterprise Search Overview page. Product selector should be shown with links that say Launch Workplace Search and Launch App Search and link to the product overview pages.

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
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility

- Only shows error connectign if host is set - Removes conditional rendering of cards - Changes the action text from “Launch” to “Setup”

scottybollinger · 2020-09-22T23:06:20Z

...terprise_search/public/applications/enterprise_search/components/setup_guide/setup_guide.tsx

+        src={GettingStarted}
+        alt={i18n.translate('xpack.enterpriseSearch.enterpriseSearch.setupGuide.videoAlt', {
+          defaultMessage:
+            "Getting started with App Search - in this short video we'll guide you through how to get App Search up and running",


Fixed in future commit

JasonStoltz

Left some comments and feedback. Let me know what you think.

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

...earch/public/applications/enterprise_search/components/product_selector/product_selector.tsx

x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.test.tsx

...terprise_search/public/applications/enterprise_search/components/setup_guide/setup_guide.tsx

JasonStoltz · 2020-09-23T19:08:13Z

...earch/public/applications/enterprise_search/components/product_selector/product_selector.tsx

+
+import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
+
+import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';


Why do we alias this? I feel like it confuses things a bit.

Copying Constance's pattern from other components. If we want to change IMO that is beyond the scope of this PR and we should discuss as a team and change all in a separate PR

Hey! This pattern's on me (also one we use in multiple places, e.g., with telemetry, so def open to discussing and refactoring separately from this PR).

Most of these components Set<Product>Chrome, Set<Product>Telemetry are a very very light wrapper around what's essentially a generic function with a product key passed in. Examples:

Breadcrumbs

Document titles

Telemetry

I thought it would feel and read more nicely from a dev experience perspective - for example, if you're an App Search dev you know you're already working in the App Search plugin, so no need to be overly specific when calling the component - just rename it to a more generic <SetChrome /> component, or <SendTelemetry />, etc. without having to repeat App Search or pass the app search ID again and again.

Definitely happy to discuss the overall pattern and if you have any thoughts on refactoring, but would very likely be in a separate PR if that sounds cool!

JasonStoltz · 2020-09-23T19:11:27Z

...ise_search/public/applications/enterprise_search/components/setup_guide/setup_guide.test.tsx

+import { shallow } from 'enzyme';
+
+import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide';


I feel we should just rename shared/setup_guide to shared/setup_guide_layout.tsx and export SetupGuideLayout. It's confusing having a file named one way but used another way everywhere.

Copying Constance's pattern from other components. If we want to change IMO that is beyond the scope of this PR and we should discuss as a team and change all in a separate PR

This one's on me again, and almost definitely an alias we don't need 🤔 Historical context for this shenanigans:

The (very early) MVP only had a single <SetupGuide /> component

When WS was added, I refactored out the instructions part of the Setup Guide to a reusable component, and left it named as SetupGuide and just alias'ed it

Here we are today and I look like a fool

EDIT: Went back and actually re-looked at what I was doing, I'm +1 for just renaming this SetupGuideLayout or similar. Thanks @JasonStoltz!

^ Sorry, to clarify - in a separate PR of course

…e_search/index.test.tsx Co-authored-by: Jason Stoltzfus <[email protected]>

...rprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx

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

...rprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx

cee-chen · 2020-09-23T20:23:12Z

Super duper quick request - can we run the getting_started.png file through https://tinypng.com/? It should shave ~half of the filesize of that image, and maybe prevent Kibana Machine from ⚠️ing at us about our assets size, haha

scottybollinger · 2020-09-23T20:25:12Z

Super duper quick request - can we run the getting_started.png file through https://tinypng.com/? It should shave ~half of the filesize of that image, and maybe prevent Kibana Machine from ⚠️ing at us about our assets size, haha

2 things:

I already ran it through
@daveyholler is going to provide a new image before 7.10. This is a placeholder and I didn't want to hold up the PR while it was being made. Will open a separate PR to add the image once complete

...earch/public/applications/enterprise_search/components/product_selector/product_selector.tsx

.../public/applications/enterprise_search/components/product_selector/product_selector.test.tsx

...e_search/public/applications/enterprise_search/components/product_card/product_card.test.tsx

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

cee-chen · 2020-09-23T20:43:43Z

Super good to know re: the images! Also interesting that tinypng re-compressed it for me apparently, normally it's pretty good / only shows single-digit perf improvements when I re-run images through it 🤔 ++ to leaving it alone since Davey will get back to us anyway!

scottybollinger · 2020-09-23T20:47:57Z

Super good to know re: the images! Also interesting that tinypng re-compressed it for me apparently, normally it's pretty good / only shows single-digit perf improvements when I re-run images through it 🤔 ++ to leaving it alone since Davey will get back to us anyway!

Yeah, so apparently I uploaded the wrong one because I still had the TinyPng compressed one in my downloads folder. Updated anyway 😂

cee-chen · 2020-09-23T20:49:12Z

Haha I've definitely done the same thing before, good to know I'm not the only one!!

cee-chen

kibanamachine's doin' a yell, I think these removals should fix them

...rprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx

...e_search/public/applications/enterprise_search/components/product_card/product_card.test.tsx

cee-chen · 2020-09-23T20:58:15Z

Ooo was gonna ask about the lodash imports as well - you read my mind!! Thanks Scotty, you rock 🚀

kibanamachine · 2020-09-23T22:29:19Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: ce91c42

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
enterpriseSearch	252	-23	275

async chunks size

id	value	diff	baseline
enterpriseSearch	638.7KB	+128.5KB	510.2KB

miscellaneous assets size

id	value	diff	baseline
enterpriseSearch	834.9KB	+190.0KB	644.9KB

page load bundle size

id	value	diff	baseline
enterpriseSearch	23.2KB	+25.0B	23.2KB

distributable file count

id	value	diff	baseline
default	45942	+1	45941

History

💔 Build #76708 failed d8fe17c
💚 Build #76693 succeeded a43ecc4
💚 Build #76678 succeeded 84b7a85
💚 Build #76402 succeeded 9a81fbf
💔 Build #76397 failed def8361

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

…tic#78233) * Add conditional button text - Only shows error connectign if host is set - Removes conditional rendering of cards - Changes the action text from “Launch” to “Setup” * Add setup guide * Extract ProductSelector to component * Update index and add routes * Change setup guide text * Fix imports * Add missing mock * Update x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.test.tsx Co-authored-by: Jason Stoltzfus <[email protected]> * Remove Literals Co-authored-by: Constance <[email protected]> * Remove Literals II - The Force Awakens Co-authored-by: Constance <[email protected]> * Add back access checks * Remove hard-coded props 🤦🏼‍♂️ * Remove data-test-subj attr * Reafactor access check variables * Remove unused beforeEach Co-authored-by: Constance <[email protected]> * Add newline Co-authored-by: Constance <[email protected]> * Update image to compressed * Remove unused things * Update to new way of using lodash things 🤷🏽‍♀️ Co-authored-by: Jason Stoltzfus <[email protected]> Co-authored-by: Constance <[email protected]>

…) (#78381) * Add conditional button text - Only shows error connectign if host is set - Removes conditional rendering of cards - Changes the action text from “Launch” to “Setup” * Add setup guide * Extract ProductSelector to component * Update index and add routes * Change setup guide text * Fix imports * Add missing mock * Update x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.test.tsx Co-authored-by: Jason Stoltzfus <[email protected]> * Remove Literals Co-authored-by: Constance <[email protected]> * Remove Literals II - The Force Awakens Co-authored-by: Constance <[email protected]> * Add back access checks * Remove hard-coded props 🤦🏼‍♂️ * Remove data-test-subj attr * Reafactor access check variables * Remove unused beforeEach Co-authored-by: Constance <[email protected]> * Add newline Co-authored-by: Constance <[email protected]> * Update image to compressed * Remove unused things * Update to new way of using lodash things 🤷🏽‍♀️ Co-authored-by: Jason Stoltzfus <[email protected]> Co-authored-by: Constance <[email protected]> Co-authored-by: Jason Stoltzfus <[email protected]> Co-authored-by: Constance <[email protected]>

scottybollinger added 5 commits September 22, 2020 16:53

Add conditional button text

2e4e766

- Only shows error connectign if host is set - Removes conditional rendering of cards - Changes the action text from “Launch” to “Setup”

Add setup guide

bacdc4d

Extract ProductSelector to component

1b1335c

Update index and add routes

b71aaa4

Change setup guide text

bc6f4fc

scottybollinger added Feature:Plugins release_note:skip Skip the PR/issue when compiling release notes v7.10.0 labels Sep 22, 2020

scottybollinger commented Sep 22, 2020

View reviewed changes

Merge branch 'master' into scottybollinger/product-selector-fixes

07bdfda

scottybollinger marked this pull request as ready for review September 22, 2020 23:10

scottybollinger requested a review from a team September 22, 2020 23:10

scottybollinger added 2 commits September 22, 2020 19:57

Fix imports

def8361

Add missing mock

9a81fbf

JasonStoltz self-assigned this Sep 23, 2020

JasonStoltz requested changes Sep 23, 2020

View reviewed changes

Update x-pack/plugins/enterprise_search/public/applications/enterpris…

84b7a85

…e_search/index.test.tsx Co-authored-by: Jason Stoltzfus <[email protected]>

JasonStoltz approved these changes Sep 23, 2020

View reviewed changes

cee-chen reviewed Sep 23, 2020

View reviewed changes

...rprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx Outdated Show resolved Hide resolved

cee-chen reviewed Sep 23, 2020

View reviewed changes

...rprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx Outdated Show resolved Hide resolved

scottybollinger and others added 4 commits September 23, 2020 14:44

Remove Literals

b2a6329

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

Remove Literals II - The Force Awakens

a43ecc4

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

Add back access checks

b047435

Remove hard-coded props 🤦🏼‍♂️

c668c19

cee-chen reviewed Sep 23, 2020

View reviewed changes

...rprise_search/public/applications/enterprise_search/components/product_card/product_card.tsx Outdated Show resolved Hide resolved

Remove data-test-subj attr

d8fe17c

cee-chen reviewed Sep 23, 2020

View reviewed changes

...earch/public/applications/enterprise_search/components/product_selector/product_selector.tsx Outdated Show resolved Hide resolved

Reafactor access check variables

76aa5b9

cee-chen reviewed Sep 23, 2020

View reviewed changes

scottybollinger and others added 2 commits September 23, 2020 15:42

Remove unused beforeEach

0540515

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

Add newline

f351e00

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

Update image to compressed

5f2a108

Remove unused things

12e43a0

cee-chen reviewed Sep 23, 2020

View reviewed changes

Update to new way of using lodash things 🤷🏽‍♀️

ce91c42

cee-chen approved these changes Sep 23, 2020

View reviewed changes

scottybollinger merged commit 6a04a64 into elastic:master Sep 24, 2020

scottybollinger deleted the scottybollinger/product-selector-fixes branch September 24, 2020 03:55

scottybollinger mentioned this pull request Sep 24, 2020

[7.x] [Enterprise Search] Update Product Selector and add Setup Guide (#78233) #78381

Merged


		import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';

		import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';

[Enterprise Search] Update Product Selector and add Setup Guide #78233

[Enterprise Search] Update Product Selector and add Setup Guide #78233

Uh oh!

Conversation

scottybollinger commented Sep 22, 2020 • edited by JasonStoltz Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

Checklist

Uh oh!

scottybollinger Sep 22, 2020

Choose a reason for hiding this comment

Uh oh!

JasonStoltz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JasonStoltz Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

scottybollinger Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

cee-chen Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

JasonStoltz Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

scottybollinger Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

cee-chen Sep 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cee-chen Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cee-chen commented Sep 23, 2020

Uh oh!

scottybollinger commented Sep 23, 2020

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cee-chen commented Sep 23, 2020

Uh oh!

scottybollinger commented Sep 23, 2020

Uh oh!

cee-chen commented Sep 23, 2020

Uh oh!

cee-chen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cee-chen commented Sep 23, 2020

Uh oh!

kibanamachine commented Sep 23, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

miscellaneous assets size

page load bundle size

distributable file count

History

Uh oh!

scottybollinger commented Sep 22, 2020 •

edited by JasonStoltz

Loading

cee-chen Sep 23, 2020 •

edited

Loading