[Enterprise Search] Cleanups for Deprecation Callout and Add to Roles…

… Empty State (#196337) ## Summary Light cleanup of the callout for adding margins, and also adds the callout to the Users and Roles in App Search empty state. This is a follow-on to #194363 ![image](https://github.com/user-attachments/assets/2404f3cc-1f4a-4a26-89a7-81d267a12f98) ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
elastic · Oct 15, 2024 · d0579e3 · d0579e3
1 parent d3fddc7
commit d0579e3
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 101 deletions.
diff --git a/...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx b/...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx
@@ -39,7 +39,10 @@ export const EmptyState: React.FC = () => {
   return (
     <>
       {showDeprecationCallout ? (
-        <EnterpriseSearchDeprecationCallout onDismissAction={onDismissDeprecationCallout} />
+        <EnterpriseSearchDeprecationCallout
+          onDismissAction={onDismissDeprecationCallout}
+          restrictWidth
+        />
       ) : (
         <></>
       )}

diff --git a/.../enterprise_search/public/applications/shared/deprecation_callout/deprecation_callout.tsx b/.../enterprise_search/public/applications/shared/deprecation_callout/deprecation_callout.tsx
@@ -15,85 +15,100 @@ import { docLinks } from '../doc_links';
 
 interface DeprecationCalloutProps {
   onDismissAction: () => void;
+  restrictWidth?: boolean;
 }
 
 export const EnterpriseSearchDeprecationCallout: React.FC<DeprecationCalloutProps> = ({
   onDismissAction,
+  restrictWidth = false,
 }) => {
+  const maxWidth = restrictWidth ? '75%' : '100%';
+  const cssStyles = {
+    maxWidth,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: '16px',
+    marginBottom: '16px',
+  };
   return (
-    <EuiCallOut
-      onDismiss={onDismissAction}
-      iconType={'warning'}
-      color={'warning'}
-      title={i18n.translate(
-        'xpack.enterpriseSearch.enterpriseSearchDeprecationCallout.euiCallOut.title',
-        { defaultMessage: 'Important Note' }
-      )}
-      data-test-subj="EnterpriseSearchDeprecationCallout"
-    >
-      <FormattedMessage
-        id="xpack.enterpriseSearch.deprecationCallout.first_message"
-        defaultMessage="The standalone App Search and Workplace Search products remain available in maintenance mode, and are not recommended for new search experiences. Instead, we recommend using our Elasticsearch-native tools which we are actively developing and improving, for your search use cases. These tools offer the flexibility and composability of working directly with Elasticsearch indices."
-      />
-      <EuiSpacer size="s" />
-      <FormattedMessage
-        id="xpack.enterpriseSearch.deprecationCallout.second_message"
-        defaultMessage="See this {workplaceSearchBlogUrl} for more information about upgrading your internal knowledge search or this {appSearchBlogUrl} about upgrading your catalog search."
-        values={{
-          workplaceSearchBlogUrl: (
-            <EuiLink
-              data-test-subj="workplaceSearch-deprecationCallout-blog-link"
-              href={docLinks.workplaceSearchEvolutionBlog}
+    <div style={cssStyles}>
+      <EuiCallOut
+        onDismiss={onDismissAction}
+        iconType={'warning'}
+        color={'warning'}
+        title={i18n.translate(
+          'xpack.enterpriseSearch.enterpriseSearchDeprecationCallout.euiCallOut.title',
+          { defaultMessage: 'Important Note' }
+        )}
+        data-test-subj="EnterpriseSearchDeprecationCallout"
+      >
+        <FormattedMessage
+          id="xpack.enterpriseSearch.deprecationCallout.first_message"
+          defaultMessage="The standalone Enterprise Search product, including App Search and Workplace Search, remains available in maintenance mode, but are not recommended for new search experiences. Instead, we recommend using our actively developed Elasticsearch-native tools. These tools offer the flexibility and composability of working directly with Elasticsearch indices."
+        />
+        <EuiSpacer size="s" />
+        <FormattedMessage
+          id="xpack.enterpriseSearch.deprecationCallout.second_message"
+          defaultMessage="See this {workplaceSearchBlogUrl} for more information about upgrading your internal knowledge search or this {appSearchBlogUrl} about upgrading your catalog search."
+          values={{
+            workplaceSearchBlogUrl: (
+              <EuiLink
+                data-test-subj="workplaceSearch-deprecationCallout-blog-link"
+                href={docLinks.workplaceSearchEvolutionBlog}
+                target="_blank"
+                data-telemetry-id="workplaceSearch-deprecationCallout-blog-viewLink"
+              >
+                {i18n.translate(
+                  'xpack.enterpriseSearch.deprecationCallout.viewWorkplaceSearchBlog',
+                  {
+                    defaultMessage: 'blog post',
+                  }
+                )}
+              </EuiLink>
+            ),
+            appSearchBlogUrl: (
+              <EuiLink
+                data-test-subj="appSearch-deprecationCallout-blog-link"
+                href={docLinks.appSearchEvolutionBlog}
+                target="_blank"
+                data-telemetry-id="appSearch-deprecationCallout-blog-viewLink"
+              >
+                {i18n.translate('xpack.enterpriseSearch.deprecationCallout.viewAppSearchBlog', {
+                  defaultMessage: 'blog post',
+                })}
+              </EuiLink>
+            ),
+          }}
+        />
+        <EuiSpacer size="s" />
+        <EuiFlexGroup direction="row" alignItems="center" justifyContent="flexStart">
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              href={docLinks.appSearchEvolutionBlog}
+              color="warning"
+              iconType="popout"
+              iconSide="right"
               target="_blank"
-              data-telemetry-id="workplaceSearch-deprecationCallout-blog-viewLink"
+              data-test-subj="ent-search-deprecation-callout-cta"
+              fill
             >
-              {i18n.translate('xpack.enterpriseSearch.deprecationCallout.viewWorkplaceSearchBlog', {
-                defaultMessage: 'blog post',
-              })}
-            </EuiLink>
-          ),
-          appSearchBlogUrl: (
+              Learn more
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <EuiLink
-              data-test-subj="appSearch-deprecationCallout-blog-link"
-              href={docLinks.appSearchEvolutionBlog}
               target="_blank"
-              data-telemetry-id="appSearch-deprecationCallout-blog-viewLink"
+              onClick={onDismissAction}
+              color="warning"
+              data-test-subj="dismiss-ent-search-deprecation-callout"
             >
-              {i18n.translate('xpack.enterpriseSearch.deprecationCallout.viewAppSearchBlog', {
-                defaultMessage: 'blog post',
+              {i18n.translate('xpack.enterpriseSearch.deprecationCallout.dismissLink', {
+                defaultMessage: 'Dismiss',
               })}
             </EuiLink>
-          ),
-        }}
-      />
-      <EuiSpacer size="s" />
-      <EuiFlexGroup direction="row" alignItems="center" justifyContent="flexStart">
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            href={docLinks.appSearchEvolutionBlog}
-            color="warning"
-            iconType="popout"
-            iconSide="right"
-            target="_blank"
-            data-test-subj="ent-search-deprecation-callout-cta"
-            fill
-          >
-            Learn more
-          </EuiButton>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiLink
-            target="_blank"
-            onClick={onDismissAction}
-            color="warning"
-            data-test-subj="dismiss-ent-search-deprecation-callout"
-          >
-            {i18n.translate('xpack.enterpriseSearch.deprecationCallout.dissmissLink', {
-              defaultMessage: 'Dismiss',
-            })}
-          </EuiLink>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiCallOut>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiCallOut>
+    </div>
   );
 };
diff --git a/...ins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.test.tsx b/...ins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.test.tsx
@@ -11,9 +11,10 @@ import { setMockValues } from '../../__mocks__/kea_logic';
 
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import { EuiButton, EuiLink, EuiEmptyPrompt } from '@elastic/eui';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 
 import { RolesEmptyPrompt } from './roles_empty_prompt';
 
@@ -74,4 +75,37 @@ describe('RolesEmptyPrompt', () => {
 
     expect(onEnable).toHaveBeenCalled();
   });
+
+  describe('deprecation callout', () => {
+    it('renders the deprecation callout when user can manage engines', () => {
+      const wrapper = shallow(<RolesEmptyPrompt {...props} />);
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(1);
+    });
+
+    it('renders the deprecation callout when user cannot manage engines', () => {
+      const wrapper = shallow(<RolesEmptyPrompt {...props} />);
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(1);
+    });
+
+    it('dismisses the deprecation callout', () => {
+      const wrapper = mount(
+        <IntlProvider locale="en">
+          <RolesEmptyPrompt {...props} />
+        </IntlProvider>
+      );
+
+      sessionStorage.setItem('appSearchHideDeprecationCallout', 'false');
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(1);
+
+      wrapper.find('button[data-test-subj="euiDismissCalloutButton"]').simulate('click');
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(0);
+      expect(sessionStorage.getItem('appSearchHideDeprecationCallout')).toEqual('true');
+    });
+
+    it('does not render the deprecation callout if dismissed', () => {
+      sessionStorage.setItem('appSearchHideDeprecationCallout', 'true');
+      const wrapper = shallow(<RolesEmptyPrompt {...props} />);
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(0);
+    });
+  });
 });
diff --git a/.../plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.tsx b/.../plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.tsx
@@ -11,6 +11,7 @@ import { useValues } from 'kea';
 
 import { EuiEmptyPrompt, EuiButton, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
 
+import { EnterpriseSearchDeprecationCallout } from '../deprecation_callout/deprecation_callout';
 import { KibanaLogic } from '../kibana/kibana_logic';
 import { ProductName } from '../types';
 
@@ -38,42 +39,61 @@ export const RolesEmptyPrompt: React.FC<Props> = ({ onEnable, docsLink, productN
     </EuiText>
   );
 
+  const [showDeprecationCallout, setShowDeprecationCallout] = React.useState(
+    !sessionStorage.getItem('appSearchHideDeprecationCallout')
+  );
+
+  const onDismissDeprecationCallout = () => {
+    setShowDeprecationCallout(false);
+    sessionStorage.setItem('appSearchHideDeprecationCallout', 'true');
+  };
+
   if (!currentUser) {
     return null;
   }
 
   return (
-    <EuiEmptyPrompt
-      iconType="lockOpen"
-      title={<h2>{ROLES_DISABLED_TITLE}</h2>}
-      body={
-        <>
-          <p>{ROLES_DISABLED_DESCRIPTION(productName)}</p>
-          <p>{ROLES_DISABLED_NOTE}</p>
-        </>
-      }
-      actions={[
-        <EuiButton
-          data-test-subj="enterpriseSearchRolesEmptyPromptButton"
-          disabled={!isSuperUser}
-          key="enableRolesButton"
-          fill
-          onClick={onEnable}
-        >
-          {ENABLE_ROLES_BUTTON}
-        </EuiButton>,
-        rbacDisabledLabel,
-        <EuiSpacer key="spacer" size="xs" />,
-        <EuiLink
-          data-test-subj="enterpriseSearchRolesEmptyPromptLink"
-          key="enableRolesLink"
-          href={docsLink}
-          target="_blank"
-          external
-        >
-          {ENABLE_ROLES_LINK}
-        </EuiLink>,
-      ]}
-    />
+    <>
+      {showDeprecationCallout ? (
+        <EnterpriseSearchDeprecationCallout
+          onDismissAction={onDismissDeprecationCallout}
+          restrictWidth
+        />
+      ) : (
+        <></>
+      )}
+      <EuiEmptyPrompt
+        iconType="lockOpen"
+        title={<h2>{ROLES_DISABLED_TITLE}</h2>}
+        body={
+          <>
+            <p>{ROLES_DISABLED_DESCRIPTION(productName)}</p>
+            <p>{ROLES_DISABLED_NOTE}</p>
+          </>
+        }
+        actions={[
+          <EuiButton
+            data-test-subj="enterpriseSearchRolesEmptyPromptButton"
+            disabled={!isSuperUser}
+            key="enableRolesButton"
+            fill
+            onClick={onEnable}
+          >
+            {ENABLE_ROLES_BUTTON}
+          </EuiButton>,
+          rbacDisabledLabel,
+          <EuiSpacer key="spacer" size="xs" />,
+          <EuiLink
+            data-test-subj="enterpriseSearchRolesEmptyPromptLink"
+            key="enableRolesLink"
+            href={docsLink}
+            target="_blank"
+            external
+          >
+            {ENABLE_ROLES_LINK}
+          </EuiLink>,
+        ]}
+      />
+    </>
   );
 };