[Enterprise Search] Adds Callout for Upcoming Decommissioning of App Search and Workplace Search (#194363)

## Summary This PR adds a callout to the overview pages for App Search and Workplace Search, informing the user of the updating decommissioning of the Enterprise Search product. Once the user clicks the "Dismiss" link, or the "x" button (upper-right), the callout will not be shown again until the user logs back in from a new tab or window. Note that the flag to show the callout or not is independent of the product (i.e. dismissing the callout in App Search will still show the callout in Workplace Search, until that one is dismissed as well). (Note that the link provided to the _App Search_ (catalog) blog post _is_ the correct URL, but the actual post will be forthcoming before the release) ![image](https://github.com/user-attachments/assets/57b41839-ca44-4bbc-af27-b8b7e65298f6) ### 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) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2024-10-10 18:58:34 -04:00 · 2024-10-10 18:58:34 -04:00 · 6910f15d2b
commit 6910f15d2b
parent e435c47a8a
11 changed files with 363 additions and 63 deletions
--- a/packages/kbn-doc-links/src/get_doc_links.ts
+++ b/packages/kbn-doc-links/src/get_doc_links.ts
@ -44,6 +44,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
  const SERVERLESS_ELASTICSEARCH_DOCS = `${SERVERLESS_DOCS}elasticsearch/`;
  const SERVERLESS_OBSERVABILITY_DOCS = `${SERVERLESS_DOCS}observability/`;
  const SEARCH_LABS_REPO = `${ELASTIC_GITHUB}elasticsearch-labs/`;
+  const SEARCH_LABS_BLOG = `${ELASTIC_WEBSITE_URL}search-labs/blog/`;
  const isServerless = buildFlavor === 'serverless';

  return deepFreeze({
@ -143,6 +144,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
      precisionTuning: `${APP_SEARCH_DOCS}precision-tuning.html`,
      relevanceTuning: `${APP_SEARCH_DOCS}relevance-tuning-guide.html`,
      resultSettings: `${APP_SEARCH_DOCS}result-settings-guide.html`,
+      searchLabsEvolutionBlog: `${SEARCH_LABS_BLOG}evolution-app-search-elasticsearch`,
      searchUI: `${APP_SEARCH_DOCS}reference-ui-guide.html`,
      security: `${APP_SEARCH_DOCS}security-and-users.html`,
      synonyms: `${APP_SEARCH_DOCS}synonyms-guide.html`,
@ -258,6 +260,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
      permissions: `${WORKPLACE_SEARCH_DOCS}workplace-search-permissions.html`,
      privateSourcePermissions: `${WORKPLACE_SEARCH_DOCS}workplace-search-permissions.html#organizational-sources-private-sources`,
      salesforce: `${WORKPLACE_SEARCH_DOCS}workplace-search-salesforce-connector.html`,
+      searchLabsEvolutionBlog: `${ELASTIC_WEBSITE_URL}blog/evolution-workplace-search-private-data-elasticsearch`,
      security: `${WORKPLACE_SEARCH_DOCS}workplace-search-security.html`,
      serviceNow: `${WORKPLACE_SEARCH_DOCS}workplace-search-servicenow-connector.html`,
      sharePoint: `${WORKPLACE_SEARCH_DOCS}workplace-search-sharepoint-online-connector.html`,
--- a/packages/kbn-doc-links/src/types.ts
+++ b/packages/kbn-doc-links/src/types.ts
@ -107,6 +107,7 @@ export interface DocLinks {
    readonly precisionTuning: string;
    readonly relevanceTuning: string;
    readonly resultSettings: string;
+    readonly searchLabsEvolutionBlog: string;
    readonly searchUI: string;
    readonly security: string;
    readonly synonyms: string;
@ -222,6 +223,7 @@ export interface DocLinks {
    readonly permissions: string;
    readonly privateSourcePermissions: string;
    readonly salesforce: string;
+    readonly searchLabsEvolutionBlog: string;
    readonly security: string;
    readonly serviceNow: string;
    readonly sharePoint: string;
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.test.tsx
@ -9,9 +9,10 @@ import { setMockValues, mockTelemetryActions } from '../../../../__mocks__/kea_l

 import React from 'react';

-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount, shallow, ShallowWrapper } from 'enzyme';

 import { EuiEmptyPrompt } from '@elastic/eui';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';

 import { SampleEngineCreationCta } from '../../sample_engine_creation_cta';

@ -74,4 +75,42 @@ describe('EmptyState', () => {
      expect(wrapper.find('[data-test-subj="NonAdminEmptyEnginesPrompt"]')).toHaveLength(1);
    });
  });
+
+  describe('deprecation callout', () => {
+    it('renders the deprecation callout when user can manage engines', () => {
+      setMockValues({ myRole: { canManageEngines: true } });
+      const wrapper = shallow(<EmptyState />);
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(1);
+    });
+
+    it('renders the deprecation callout when user cannot manage engines', () => {
+      setMockValues({ myRole: { canManageEngines: false } });
+      const wrapper = shallow(<EmptyState />);
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(1);
+    });
+
+    it('dismisses the deprecation callout', () => {
+      setMockValues({ myRole: { canManageEngines: false } });
+
+      const wrapper = mount(
+        <IntlProvider locale="en">
+          <EmptyState />
+        </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');
+      setMockValues({ myRole: { canManageEngines: true } });
+      const wrapper = shallow(<EmptyState />);
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(0);
+    });
+  });
 });
--- 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
@ -12,6 +12,7 @@ import { useValues, useActions } from 'kea';
 import { EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';

+import { EnterpriseSearchDeprecationCallout } from '../../../../shared/deprecation_callout/deprecation_callout';
 import { EuiButtonTo } from '../../../../shared/react_router_helpers';
 import { TelemetryLogic } from '../../../../shared/telemetry';
 import { AppLogic } from '../../../app_logic';
@ -26,66 +27,88 @@ export const EmptyState: React.FC = () => {
  } = useValues(AppLogic);
  const { sendAppSearchTelemetry } = useActions(TelemetryLogic);

-  return canManageEngines ? (
-    <EuiEmptyPrompt
-      data-test-subj="AdminEmptyEnginesPrompt"
-      iconType={EngineIcon}
-      title={
-        <h2>
-          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.title', {
-            defaultMessage: 'Create your first engine',
-          })}
-        </h2>
-      }
-      titleSize="l"
-      body={
-        <p>
-          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.description1', {
-            defaultMessage: 'An App Search engine stores the documents for your search experience.',
-          })}
-        </p>
-      }
-      actions={
-        <>
-          <EuiButtonTo
-            data-test-subj="EmptyStateCreateFirstEngineCta"
-            fill
-            to={ENGINE_CREATION_PATH}
-            onClick={() =>
-              sendAppSearchTelemetry({
-                action: 'clicked',
-                metric: 'create_first_engine_button',
-              })
-            }
-          >
-            {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta', {
-              defaultMessage: 'Create an engine',
-            })}
-          </EuiButtonTo>
-          <EuiSpacer size="xxl" />
-          <SampleEngineCreationCta />
-        </>
-      }
-    />
-  ) : (
-    <EuiEmptyPrompt
-      data-test-subj="NonAdminEmptyEnginesPrompt"
-      iconType={EngineIcon}
-      title={
-        <h2>
-          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.title', {
-            defaultMessage: 'No engines available',
-          })}
-        </h2>
-      }
-      body={
-        <p>
-          {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.description', {
-            defaultMessage:
-              'Contact your App Search administrator to either create or grant you access to an engine.',
-          })}
-        </p>
-      }
-    />
+  const [showDeprecationCallout, setShowDeprecationCallout] = React.useState(
+    !sessionStorage.getItem('appSearchHideDeprecationCallout')
+  );
+
+  const onDismissDeprecationCallout = () => {
+    setShowDeprecationCallout(false);
+    sessionStorage.setItem('appSearchHideDeprecationCallout', 'true');
+  };
+
+  return (
+    <>
+      {showDeprecationCallout ? (
+        <EnterpriseSearchDeprecationCallout onDismissAction={onDismissDeprecationCallout} />
+      ) : (
+        <></>
+      )}
+      {canManageEngines ? (
+        <EuiEmptyPrompt
+          data-test-subj="AdminEmptyEnginesPrompt"
+          iconType={EngineIcon}
+          title={
+            <h2>
+              {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.title', {
+                defaultMessage: 'Create your first engine',
+              })}
+            </h2>
+          }
+          titleSize="l"
+          body={
+            <p>
+              {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.description1', {
+                defaultMessage:
+                  'An App Search engine stores the documents for your search experience.',
+              })}
+            </p>
+          }
+          actions={
+            <>
+              <EuiButtonTo
+                data-test-subj="EmptyStateCreateFirstEngineCta"
+                fill
+                to={ENGINE_CREATION_PATH}
+                onClick={() =>
+                  sendAppSearchTelemetry({
+                    action: 'clicked',
+                    metric: 'create_first_engine_button',
+                  })
+                }
+              >
+                {i18n.translate(
+                  'xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta',
+                  {
+                    defaultMessage: 'Create an engine',
+                  }
+                )}
+              </EuiButtonTo>
+              <EuiSpacer size="xxl" />
+              <SampleEngineCreationCta />
+            </>
+          }
+        />
+      ) : (
+        <EuiEmptyPrompt
+          data-test-subj="NonAdminEmptyEnginesPrompt"
+          iconType={EngineIcon}
+          title={
+            <h2>
+              {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.title', {
+                defaultMessage: 'No engines available',
+              })}
+            </h2>
+          }
+          body={
+            <p>
+              {i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.description', {
+                defaultMessage:
+                  'Contact your App Search administrator to either create or grant you access to an engine.',
+              })}
+            </p>
+          }
+        />
+      )}
+    </>
  );
 };
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.test.tsx
@ -13,9 +13,11 @@ import { setMockValues } from '../../../__mocks__/kea_logic';

 import React from 'react';

-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { of } from 'rxjs';

+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+
 import { SetAppSearchChrome } from '../../../shared/kibana_chrome';
 import { EnterpriseSearchPageTemplateWrapper } from '../../../shared/layout';
 import { SendAppSearchTelemetry } from '../../../shared/telemetry';
@ -80,4 +82,32 @@ describe('AppSearchPageTemplate', () => {
    expect(wrapper.find(EnterpriseSearchPageTemplateWrapper).prop('isLoading')).toEqual(false);
    expect(wrapper.find(EnterpriseSearchPageTemplateWrapper).prop('emptyState')).toEqual(<div />);
  });
+
+  describe('deprecation callout', () => {
+    it('renders the deprecation callout', () => {
+      const wrapper = shallow(<AppSearchPageTemplate />);
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(1);
+    });
+
+    it('dismisses the deprecation callout', () => {
+      const wrapper = mount(
+        <IntlProvider locale="en">
+          <AppSearchPageTemplate />
+        </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', () => {
+      const wrapper = shallow(<AppSearchPageTemplate />);
+      sessionStorage.setItem('appSearchHideDeprecationCallout', 'true');
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(0);
+    });
+  });
 });
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx
@ -11,6 +11,7 @@ import { useValues } from 'kea';
 import useObservable from 'react-use/lib/useObservable';

 import { APP_SEARCH_PLUGIN } from '../../../../../common/constants';
+import { EnterpriseSearchDeprecationCallout } from '../../../shared/deprecation_callout/deprecation_callout';
 import { KibanaLogic } from '../../../shared/kibana';
 import { SetAppSearchChrome } from '../../../shared/kibana_chrome';
 import { EnterpriseSearchPageTemplateWrapper, PageTemplateProps } from '../../../shared/layout';
@ -36,6 +37,15 @@ export const AppSearchPageTemplate: React.FC<
    };
  }, [chromeStyle, navItems, updateSideNavDefinition]);

+  const [showDeprecationCallout, setShowDeprecationCallout] = React.useState(
+    !sessionStorage.getItem('appSearchHideDeprecationCallout')
+  );
+
+  const onDismissDeprecationCallout = () => {
+    setShowDeprecationCallout(false);
+    sessionStorage.setItem('appSearchHideDeprecationCallout', 'true');
+  };
+
  return (
    <EnterpriseSearchPageTemplateWrapper
      {...pageTemplateProps}
@ -48,6 +58,11 @@ export const AppSearchPageTemplate: React.FC<
      hideEmbeddedConsole
    >
      {pageViewTelemetry && <SendAppSearchTelemetry action="viewed" metric={pageViewTelemetry} />}
+      {showDeprecationCallout ? (
+        <EnterpriseSearchDeprecationCallout onDismissAction={onDismissDeprecationCallout} />
+      ) : (
+        <></>
+      )}
      {children}
    </EnterpriseSearchPageTemplateWrapper>
  );
--- a/x-pack/plugins/enterprise_search/public/applications/shared/deprecation_callout/deprecation_callout.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/deprecation_callout/deprecation_callout.test.tsx
@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EnterpriseSearchDeprecationCallout } from './deprecation_callout';
+
+describe('EnterpriseSearchDeprecationCallout', () => {
+  it('renders', () => {
+    const dismissFxn = jest.fn();
+    const wrapper = shallow(<EnterpriseSearchDeprecationCallout onDismissAction={dismissFxn} />);
+
+    expect(wrapper.find('EuiCallOut')).toHaveLength(1);
+    wrapper.find('EuiCallOut').simulate('dismiss');
+    expect(dismissFxn).toHaveBeenCalledTimes(1);
+  });
+
+  it('dismisses via the link', () => {
+    const dismissFxn = jest.fn();
+    const wrapper = shallow(<EnterpriseSearchDeprecationCallout onDismissAction={dismissFxn} />);
+
+    expect(wrapper.find('EuiLink')).toHaveLength(1);
+    wrapper.find('EuiLink').simulate('click');
+    expect(dismissFxn).toHaveBeenCalledTimes(1);
+  });
+});
--- 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
@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiCallOut, EuiButton, EuiLink, EuiFlexItem, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { docLinks } from '../doc_links';
+
+interface DeprecationCalloutProps {
+  onDismissAction: () => void;
+}
+
+export const EnterpriseSearchDeprecationCallout: React.FC<DeprecationCalloutProps> = ({
+  onDismissAction,
+}) => {
+  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}
+              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-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>
+  );
+};
--- a/x-pack/plugins/enterprise_search/public/applications/shared/doc_links/doc_links.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/doc_links/doc_links.ts
@ -22,6 +22,7 @@ class DocLinks {
  public appSearchDuplicateDocuments: string;
  public appSearchElasticsearchIndexedEngines: string;
  public appSearchEntryPoints: string;
+  public appSearchEvolutionBlog: string;
  public appSearchGettingStarted: string;
  public appSearchGuide: string;
  public appSearchIndexingDocs: string;
@ -158,6 +159,7 @@ class DocLinks {
  public workplaceSearchCustomSources: string;
  public workplaceSearchDocumentPermissions: string;
  public workplaceSearchDropbox: string;
+  public workplaceSearchEvolutionBlog: string;
  public workplaceSearchExternalIdentities: string;
  public workplaceSearchExternalSharePointOnline: string;
  public workplaceSearchGatedFormBlog: string;
@ -202,6 +204,7 @@ class DocLinks {
    this.appSearchDuplicateDocuments = '';
    this.appSearchEntryPoints = '';
    this.appSearchElasticsearchIndexedEngines = '';
+    this.appSearchEvolutionBlog = '';
    this.appSearchGettingStarted = '';
    this.appSearchGuide = '';
    this.appSearchIndexingDocs = '';
@ -338,6 +341,7 @@ class DocLinks {
    this.workplaceSearchCustomSourcePermissions = '';
    this.workplaceSearchDocumentPermissions = '';
    this.workplaceSearchDropbox = '';
+    this.workplaceSearchEvolutionBlog = '';
    this.workplaceSearchExternalSharePointOnline = '';
    this.workplaceSearchExternalIdentities = '';
    this.workplaceSearchGatedFormBlog = '';
@ -384,6 +388,7 @@ class DocLinks {
    this.appSearchElasticsearchIndexedEngines =
      docLinks.links.appSearch.elasticsearchIndexedEngines;
    this.appSearchEntryPoints = docLinks.links.appSearch.entryPoints;
+    this.appSearchEvolutionBlog = docLinks.links.appSearch.searchLabsEvolutionBlog;
    this.appSearchGettingStarted = docLinks.links.appSearch.gettingStarted;
    this.appSearchGuide = docLinks.links.appSearch.guide;
    this.appSearchIndexingDocs = docLinks.links.appSearch.indexingDocuments;
@ -524,6 +529,7 @@ class DocLinks {
      docLinks.links.workplaceSearch.customSourcePermissions;
    this.workplaceSearchDocumentPermissions = docLinks.links.workplaceSearch.documentPermissions;
    this.workplaceSearchDropbox = docLinks.links.workplaceSearch.dropbox;
+    this.workplaceSearchEvolutionBlog = docLinks.links.workplaceSearch.searchLabsEvolutionBlog;
    this.workplaceSearchExternalSharePointOnline =
      docLinks.links.workplaceSearch.externalSharePointOnline;
    this.workplaceSearchExternalIdentities = docLinks.links.workplaceSearch.externalIdentities;
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx
@ -69,4 +69,40 @@ describe('Overview', () => {

    expect(wrapper.find(OnboardingSteps)).toHaveLength(0);
  });
+
+  describe('deprecation callout', () => {
+    it('renders the deprecation callout', () => {
+      setMockValues({ dataLoading: false, organization: { kibanaUIsEnabled: true } });
+      const wrapper = shallow(<Overview />);
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(1);
+    });
+
+    it('dismisses the deprecation callout', () => {
+      setMockValues({ dataLoading: false, organization: { kibanaUIsEnabled: true } });
+
+      const wrapper = shallow(<Overview />);
+
+      sessionStorage.setItem('workplaceSearchHideDeprecationCallout', 'false');
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(1);
+
+      wrapper
+        .find('EnterpriseSearchDeprecationCallout')
+        .dive()
+        .find('EuiCallOut')
+        .simulate('dismiss');
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(0);
+      expect(sessionStorage.getItem('workplaceSearchHideDeprecationCallout')).toEqual('true');
+    });
+
+    it('does not render the deprecation callout if dismissed', () => {
+      setMockValues({
+        dataLoading: false,
+        hideOnboarding: true,
+        organization: { kibanaUIsEnabled: true },
+      });
+      const wrapper = shallow(<Overview />);
+      sessionStorage.setItem('workplaceSearchHideDeprecationCallout', 'true');
+      expect(wrapper.find('EnterpriseSearchDeprecationCallout')).toHaveLength(0);
+    });
+  });
 });
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
@ -12,6 +12,7 @@ import { useActions, useValues } from 'kea';
 import { EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';

+import { EnterpriseSearchDeprecationCallout } from '../../../shared/deprecation_callout/deprecation_callout';
 import { AppLogic } from '../../app_logic';
 import { WorkplaceSearchPageTemplate } from '../../components/layout';

@ -57,6 +58,15 @@ export const Overview: React.FC = () => {
  const headerTitle = hideOnboarding ? HEADER_TITLE : ONBOARDING_HEADER_TITLE;
  const headerDescription = hideOnboarding ? HEADER_DESCRIPTION : ONBOARDING_HEADER_DESCRIPTION;

+  const [showDeprecationCallout, setShowDeprecationCallout] = React.useState(
+    !sessionStorage.getItem('workplaceSearchHideDeprecationCallout')
+  );
+
+  const onDismissDeprecationCallout = () => {
+    setShowDeprecationCallout(false);
+    sessionStorage.setItem('workplaceSearchHideDeprecationCallout', 'true');
+  };
+
  return kibanaUIsEnabled ? (
    <WorkplaceSearchPageTemplate
      pageChrome={[]}
@ -66,6 +76,11 @@ export const Overview: React.FC = () => {
      pageViewTelemetry="overview"
      isLoading={dataLoading}
    >
+      {showDeprecationCallout ? (
+        <EnterpriseSearchDeprecationCallout onDismissAction={onDismissDeprecationCallout} />
+      ) : (
+        <></>
+      )}
      {!hideOnboarding && (
        <>
          <OnboardingSteps />