From d0579e3568ca8ab6ec3d38e817aabf78a038ea5f Mon Sep 17 00:00:00 2001
From: "Mark J. Hoy" <mark.hoy@elastic.co>
Date: Tue, 15 Oct 2024 17:09:12 -0400
Subject: [PATCH] [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 https://github.com/elastic/kibana/pull/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)
---
 .../engines/components/empty_state.tsx        |   5 +-
 .../deprecation_callout.tsx                   | 149 ++++++++++--------
 .../role_mapping/roles_empty_prompt.test.tsx  |  36 ++++-
 .../role_mapping/roles_empty_prompt.tsx       |  84 ++++++----
 4 files changed, 173 insertions(+), 101 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx
index 1c2b8b7d4e83d..ef2f48dbe6c20 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx
+++ b/x-pack/plugins/enterprise_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/x-pack/plugins/enterprise_search/public/applications/shared/deprecation_callout/deprecation_callout.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/deprecation_callout/deprecation_callout.tsx
index b9d1157843df1..0c8ba65291ecf 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/deprecation_callout/deprecation_callout.tsx
+++ b/x-pack/plugins/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/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.test.tsx
index cde080aa70fbd..f293f092ff0f5 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.test.tsx
+++ b/x-pack/plugins/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/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.tsx
index 8b3b6ad4d6975..4a9e969916d2f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.tsx
+++ b/x-pack/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>,
+        ]}
+      />
+    </>
   );
 };