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] Cleanups for Deprecation Callout and Add to Roles Empty State #196337

Merged
merged 5 commits into from
Oct 15, 2024
Merged

[Enterprise Search] Cleanups for Deprecation Callout and Add to Roles Empty State #196337

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
589160f
add callout to roles empty; add restrictWidth prop
markjhoy Oct 15, 2024
c7e8550
updating wording of deprecation callout
markjhoy Oct 15, 2024
38d0f22
Merge branch '8.x' into markjhoy/fix-ent-search-dep-banner-updates
markjhoy Oct 15, 2024
84aa2aa
fix test; add Enterprise Search to message
markjhoy Oct 15, 2024
4e9d3b6
fix misspelled word
markjhoy Oct 15, 2024
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
5 changes: 4 additions & 1 deletion ...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ export const EmptyState: React.FC = () => {
return (
<>
{showDeprecationCallout ? (
<EnterpriseSearchDeprecationCallout onDismissAction={onDismissDeprecationCallout} />
<EnterpriseSearchDeprecationCallout
onDismissAction={onDismissDeprecationCallout}
restrictWidth
/>
) : (
<></>
)}
Expand Down
149 changes: 82 additions & 67 deletions .../enterprise_search/public/applications/shared/deprecation_callout/deprecation_callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.dissmissLink', {
Copy link
Member

Choose a reason for hiding this comment

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

Typo in dismiss?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

😱 Thanks!

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>
);
};
36 changes: 35 additions & 1 deletion ...ins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);
});
});
});
84 changes: 52 additions & 32 deletions .../plugins/enterprise_search/public/applications/shared/role_mapping/roles_empty_prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>,
]}
/>
</>
);
};