diff --git a/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts b/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts index da2d57c2939edc..7fdb8724243a33 100644 --- a/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts +++ b/x-pack/plugins/observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts @@ -121,7 +121,7 @@ describe('Service inventory', () => { it('Toggles fast filter when clicking on link', () => { cy.visitKibana(serviceInventoryHref); cy.get('[data-test-subj="tableSearchInput"]').should('not.exist'); - cy.contains('Try the new Fast Filter').click(); + cy.contains('Enable fast filter').click(); cy.get('[data-test-subj="tableSearchInput"]').should('exist'); cy.contains('Try it').should('not.exist'); cy.contains('opbeans-node'); @@ -135,7 +135,7 @@ describe('Service inventory', () => { cy.contains('opbeans-node'); cy.contains('opbeans-java'); cy.contains('opbeans-rum'); - cy.contains('Turn off Fast Filter').click(); + cy.contains('Disable fast filter').click(); cy.contains('Try it').should('exist'); cy.get('[data-test-subj="tableSearchInput"]').should('not.exist'); }); @@ -149,9 +149,7 @@ describe('Service inventory', () => { it('Should not be able to turn it on', () => { cy.visitKibana(serviceInventoryHref); cy.get('[data-test-subj="tableSearchInput"]').should('not.exist'); - cy.contains('Try the new Fast Filter').should('not.exist'); - cy.get('[data-test-subj="apmPopoverButton"]').click(); - cy.contains('Please ask your administrator to turn it on by enabling it in within settings.'); + cy.get('[data-test-subj="apmLink"]').should('be.disabled'); }); }); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/index.tsx index f4674b5828e474..49850707cb8047 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/index.tsx @@ -382,19 +382,15 @@ export function ServiceList({ (props: { // update table options state when url params change useEffect(() => setTableOptions(getStateFromUrl()), [getStateFromUrl]); + // Clean up searchQuery when fast filter is toggled off + useEffect(() => { + if (!tableSearchBar.isEnabled) { + setSearchQuery(''); + } + }, [tableSearchBar.isEnabled]); + // update table options state when `onTableChange` is invoked and persist to url const onTableChange = useCallback( (newTableOptions: Partial>) => { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/try_it_button/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/try_it_button/index.tsx index 58e0012ec041a4..61a4fd4204db05 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/try_it_button/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/try_it_button/index.tsx @@ -9,16 +9,19 @@ import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, + EuiIcon, EuiLink, EuiLoadingSpinner, EuiPopover, - EuiSpacer, EuiText, + EuiToolTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import useToggle from 'react-use/lib/useToggle'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; +import { useLocalStorage } from '../../../hooks/use_local_storage'; +import { TechnicalPreviewBadge } from '../technical_preview_badge'; interface Props { isFeatureEnabled: boolean; @@ -26,7 +29,6 @@ interface Props { linkLabel: string; onClick: () => void; popoverContent?: React.ReactElement; - icon?: 'beta' | 'beaker'; isLoading: boolean; } @@ -36,14 +38,20 @@ export function TryItButton({ onClick, popoverContent, promoLabel, - icon, isLoading, }: Props) { + const [showFastFilterTryCallout, setShowFastFilterTryCallout] = useLocalStorage( + 'apm.showFastFilterTryCallout', + true + ); const { core } = useApmPluginContext(); const canEditAdvancedSettings = core.application.capabilities.advancedSettings?.save; - const [isPopoverOpen, togglePopover] = useToggle(false); + if (!showFastFilterTryCallout) { + return null; + } + function TryItBadge() { return ( @@ -57,29 +65,6 @@ export function TryItButton({ ); } - function Icon() { - if (!icon) { - return null; - } - return ( - - - - ); - } - function PromoLabel() { if (!promoLabel) { return null; @@ -92,7 +77,7 @@ export function TryItButton({ } function Popover() { - if (!popoverContent && canEditAdvancedSettings) { + if (!popoverContent) { return null; } return ( @@ -101,7 +86,7 @@ export function TryItButton({ button={ - <> - {popoverContent} - {!canEditAdvancedSettings && ( - <> - - {i18n.translate('xpack.apm.tryItButton.euiButtonIcon.adminAccess', { - defaultMessage: - 'Please ask your administrator to turn it on by enabling it in within settings.', - })} - - )} - + <>{popoverContent} ); } function Link() { - return ( - <> - {linkLabel && canEditAdvancedSettings && ( - - - {linkLabel} - - - )} - + if (!linkLabel) { + return null; + } + + const linkComponent = ( + + + {linkLabel} + + ); + + if (!canEditAdvancedSettings) { + return ( + + + + + + + + + {i18n.translate('xpack.apm.tryItButton.euiButtonIcon.featureDisabled', { + defaultMessage: 'This feature is currently disabled.', + })} + + + + + + + {i18n.translate('xpack.apm.tryItButton.euiButtonIcon.admin', { + defaultMessage: + 'Please speak to you administrator to turn {featureEnabled} this feature.', + values: { + featureEnabled: isFeatureEnabled + ? i18n.translate('xpack.apm.tryItButton.euiButtonIcon.admin.off', { + defaultMessage: 'off', + }) + : i18n.translate('xpack.apm.tryItButton.euiButtonIcon.admin.on', { + defaultMessage: 'on', + }), + }, + })} + + + + } + > + {linkComponent} + + ); + } + + return <>{linkComponent}; } function Loading() { @@ -156,25 +180,31 @@ export function TryItButton({ ); } - if (isFeatureEnabled) { + function HideThisButton() { return ( - - - - - - + + + { + setShowFastFilterTryCallout(false); + }} + /> + + ); } return ( - - - - + {isFeatureEnabled ? null : } + + {isFeatureEnabled ? null : } + + ); }