Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Enterprise Search] Error state UI tweaks to account for current Cloud SSO behavior #73324

Merged
merged 4 commits into from
Jul 27, 2020
Merged

[Enterprise Search] Error state UI tweaks to account for current Cloud SSO behavior #73324

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80a6629
Do not disable the Launch App Search button on the error page
cee-chen Jul 27, 2020
b8da5a3
Add troubleshooting steps that mention user authentication
cee-chen Jul 27, 2020
04a4adb
Tweak styling/spacing on troubleshooting steps
cee-chen Jul 27, 2020
994eca7
Copyedits (thanks Chris!)
cee-chen Jul 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .../enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const ErrorState: React.FC = () => {
<SendTelemetry action="error" metric="cannot_connect" />

<EuiPageBody>
<EngineOverviewHeader isButtonDisabled />
<EngineOverviewHeader />
<EuiPageContent>
<ErrorStatePrompt />
</EuiPageContent>
Expand Down
8 changes: 0 additions & 8 deletions ...applications/app_search/components/engine_overview_header/engine_overview_header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,4 @@ describe('EngineOverviewHeader', () => {
button.simulate('click');
expect(sendTelemetry).toHaveBeenCalled();
});

it('renders a disabled button when isButtonDisabled is true', () => {
const wrapper = shallow(<EngineOverviewHeader isButtonDisabled />);
const button = wrapper.find('[data-test-subj="launchButton"]');

expect(button.prop('isDisabled')).toBe(true);
expect(button.prop('href')).toBeUndefined();
});
});
23 changes: 6 additions & 17 deletions ...blic/applications/app_search/components/engine_overview_header/engine_overview_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,34 +18,23 @@ import { FormattedMessage } from '@kbn/i18n/react';
import { sendTelemetry } from '../../../shared/telemetry';
import { KibanaContext, IKibanaContext } from '../../../index';

interface IEngineOverviewHeaderProps {
isButtonDisabled?: boolean;
}

export const EngineOverviewHeader: React.FC<IEngineOverviewHeaderProps> = ({
isButtonDisabled,
}) => {
export const EngineOverviewHeader: React.FC = () => {
const { enterpriseSearchUrl, http } = useContext(KibanaContext) as IKibanaContext;

const buttonProps = {
fill: true,
iconType: 'popout',
'data-test-subj': 'launchButton',
} as EuiButtonProps & EuiLinkProps;

if (isButtonDisabled) {
buttonProps.isDisabled = true;
} else {
buttonProps.href = `${enterpriseSearchUrl}/as`;
buttonProps.target = '_blank';
buttonProps.onClick = () =>
href: `${enterpriseSearchUrl}/as`,
target: '_blank',
onClick: () =>
sendTelemetry({
http,
product: 'app_search',
action: 'clicked',
metric: 'header_launch_button',
});
}
}),
} as EuiButtonProps & EuiLinkProps;

return (
<EuiPageHeader>
Expand Down
12 changes: 12 additions & 0 deletions .../plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.troubleshootingSteps {
text-align: left;

li {
margin: $euiSizeS auto;
}

ul,
ol {
margin-bottom: 0;
}
}
24 changes: 23 additions & 1 deletion ...k/plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
import { EuiButton } from '../react_router_helpers';
import { KibanaContext, IKibanaContext } from '../../index';

import './error_state_prompt.scss';

export const ErrorStatePrompt: React.FC = () => {
const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext;

Expand Down Expand Up @@ -38,7 +40,7 @@ export const ErrorStatePrompt: React.FC = () => {
}}
/>
</p>
<ol className="eui-textLeft">
<ol className="troubleshootingSteps">
<li>
<FormattedMessage
id="xpack.enterpriseSearch.errorConnectingState.description2"
Expand All @@ -54,6 +56,26 @@ export const ErrorStatePrompt: React.FC = () => {
defaultMessage="Confirm that the Enterprise Search server is responsive."
/>
</li>
<li>
<FormattedMessage
id="xpack.enterpriseSearch.errorConnectingState.troubleshootAuth"
defaultMessage="Check your user authentication:"
/>
<ul>
<li>
<FormattedMessage
id="xpack.enterpriseSearch.errorConnectingState.troubleshootAuthNative"
defaultMessage="Are you using Elasticsearch Native auth?"
/>
</li>
<li>
<FormattedMessage
id="xpack.enterpriseSearch.errorConnectingState.troubleshootAuthSAML"
defaultMessage="If you’re on SSO or SAML, is your SAML realm also set up on Enterprise Search?"
/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gchaps / @chriscressman - apologies for the last minute notice, but is there any chance we can get a quick copy check/pass on this new text? (Feel free to view the screenshot if that's easier!)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing @constancecchen . Here are some suggested changes. I'm trying to be a bit more explicit about what they must do to fix the issue:

Confirm your user authentication:

  • You must authenticate using Elasticsearch Native auth or SSO/SAML
  • If using SSO/SAML, you must set up your SAML realm on Enterprise Search

Copy link
Contributor Author

@cee-chen cee-chen Jul 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If using SSO/SAML, you must set up your SAML realm on Enterprise Search

I know this is a bit more passive, but do we want to consider changing this to:

If using SSO/SAML, your SAML realm must be set up on Enterprise Search

The only reason why I ask this is because on Elastic Cloud, SSO is currently not set up for Enterprise Search and there is absolutely nothing the admin/operator can do about it until Cloud itself ships that functionality in 6 weeks.

I know this is a pretty special case though, and do think the active voice is generally better/applies to other SAML setups - just wanted to throw that context out there!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, your version looks good to me. I can see how in that scenario (and possibly others) the person setting up Enterprise Search in Kibana doesn't have control over the SAML setup.

</li>
</ul>
</li>
<li>
<FormattedMessage
id="xpack.enterpriseSearch.errorConnectingState.description4"
Expand Down