[Enterprise Search] Error state UI tweaks to account for current Clou…

…d SSO behavior (#73324) * Do not disable the Launch App Search button on the error page - so users always have access to App Search * Add troubleshooting steps that mention user authentication - more info can be found in setup guide * Tweak styling/spacing on troubleshooting steps * Copyedits (thanks Chris!)
elastic · Jul 27, 2020 · 57997be · 57997be
1 parent 157fb09
commit 57997be
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 27 deletions.
diff --git a/.../enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx b/.../enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx
@@ -21,7 +21,7 @@ export const ErrorState: React.FC = () => {
       <SendTelemetry action="error" metric="cannot_connect" />
 
       <EuiPageBody>
-        <EngineOverviewHeader isButtonDisabled />
+        <EngineOverviewHeader />
         <EuiPageContent>
           <ErrorStatePrompt />
         </EuiPageContent>

diff --git a/...applications/app_search/components/engine_overview_header/engine_overview_header.test.tsx b/...applications/app_search/components/engine_overview_header/engine_overview_header.test.tsx
@@ -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();
-  });
 });
diff --git a/...blic/applications/app_search/components/engine_overview_header/engine_overview_header.tsx b/...blic/applications/app_search/components/engine_overview_header/engine_overview_header.tsx
@@ -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>

diff --git a/.../plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.scss b/.../plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.scss
@@ -0,0 +1,12 @@
+.troubleshootingSteps {
+  text-align: left;
+
+  li {
+    margin: $euiSizeS auto;
+  }
+
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
diff --git a/...k/plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.tsx b/...k/plugins/enterprise_search/public/applications/shared/error_state/error_state_prompt.tsx
@@ -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;
 
@@ -38,7 +40,7 @@ export const ErrorStatePrompt: React.FC = () => {
               }}
             />
           </p>
-          <ol className="eui-textLeft">
+          <ol className="troubleshootingSteps">
             <li>
               <FormattedMessage
                 id="xpack.enterpriseSearch.errorConnectingState.description2"
@@ -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="You must authenticate using Elasticsearch Native auth or SSO/SAML."
+                  />
+                </li>
+                <li>
+                  <FormattedMessage
+                    id="xpack.enterpriseSearch.errorConnectingState.troubleshootAuthSAML"
+                    defaultMessage="If using SSO/SAML, your SAML realm must also be set up on Enterprise Search."
+                  />
+                </li>
+              </ul>
+            </li>
             <li>
               <FormattedMessage
                 id="xpack.enterpriseSearch.errorConnectingState.description4"