[APM] Fast filter callout improvements (#181464)

closes #180609 General improvements to the Try out section. Adding an option to hide it. <img width="615" alt="Screenshot 2024-04-23 at 17 00 48" src="https://github.com/elastic/kibana/assets/55978943/bdf455aa-1e06-4fc6-baa1-a0d656bf0997"> <img width="694" alt="Screenshot 2024-04-23 at 17 01 01" src="https://github.com/elastic/kibana/assets/55978943/b511eb9d-208e-45d6-a037-438a1a8537ac"> <img width="681" alt="Screenshot 2024-04-23 at 17 01 16" src="https://github.com/elastic/kibana/assets/55978943/416a6eb8-e38c-43cc-8301-ec904cefb58a"> <img width="434" alt="Screenshot 2024-04-23 at 17 01 52" src="https://github.com/elastic/kibana/assets/55978943/00e45927-ca31-4484-8311-2ddced85416e"> <img width="469" alt="Screenshot 2024-04-23 at 17 02 13" src="https://github.com/elastic/kibana/assets/55978943/29ac2126-1934-40f3-b30a-85dc1e9ca942">
elastic · May 2, 2024 · e591561 · e591561
1 parent c8d7f42
commit e591561
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 75 deletions.
diff --git a/.../observability_solution/apm/ftr_e2e/cypress/e2e/service_inventory/service_inventory.cy.ts b/.../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/...observability_solution/apm/public/components/app/service_inventory/service_list/index.tsx b/...observability_solution/apm/public/components/app/service_inventory/service_list/index.tsx
@@ -382,19 +382,15 @@ export function ServiceList({
       <EuiFlexItem>
         <TryItButton
           isFeatureEnabled={isTableSearchBarEnabled}
-          promoLabel={i18n.translate('xpack.apm.serviceList.promoLabel', {
-            defaultMessage: 'Want to filter your services faster?',
-          })}
           linkLabel={
             isTableSearchBarEnabled
-              ? i18n.translate('xpack.apm.serviceList.turnFastFilterOff', {
-                  defaultMessage: 'Turn off Fast Filter',
+              ? i18n.translate('xpack.apm.serviceList.disableFastFilter', {
+                  defaultMessage: 'Disable fast filter',
                 })
-              : i18n.translate('xpack.apm.serviceList.turnFastFilterOn', {
-                  defaultMessage: 'Try the new Fast Filter',
+              : i18n.translate('xpack.apm.serviceList.enableFastFilter', {
+                  defaultMessage: 'Enable fast filter',
                 })
           }
-          icon="beaker"
           onClick={onChangeTableSearchBarVisibility}
           isLoading={isSavingSetting}
           popoverContent={

diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx
@@ -153,6 +153,13 @@ function UnoptimizedManagedTable<T extends object>(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<TableOptions<T>>) => {

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
@@ -9,24 +9,26 @@ 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;
   promoLabel?: string;
   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 (
       <EuiFlexItem grow={false}>
@@ -57,29 +65,6 @@ export function TryItButton({
     );
   }
 
-  function Icon() {
-    if (!icon) {
-      return null;
-    }
-    return (
-      <EuiFlexItem grow={false}>
-        <EuiBetaBadge
-          color="hollow"
-          iconType={icon}
-          label={
-            icon === 'beaker'
-              ? i18n.translate('xpack.apm.tryIt.techPreview', {
-                  defaultMessage: 'Technical preview',
-                })
-              : i18n.translate('xpack.apm.tryIt.beta', {
-                  defaultMessage: 'Beta',
-                })
-          }
-        />
-      </EuiFlexItem>
-    );
-  }
-
   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={
             <EuiButtonIcon
               data-test-subj="apmPopoverButton"
-              iconType="questionInCircle"
+              iconType="iInCircle"
               aria-label={i18n.translate(
                 'xpack.apm.tryItButton.euiButtonIcon.tryItHelperButtonLabel',
                 { defaultMessage: 'Try it helper button' }
@@ -113,35 +98,74 @@ export function TryItButton({
           closePopover={togglePopover}
           anchorPosition="upCenter"
         >
-          <>
-            {popoverContent}
-            {!canEditAdvancedSettings && (
-              <>
-                <EuiSpacer size="s" />
-                {i18n.translate('xpack.apm.tryItButton.euiButtonIcon.adminAccess', {
-                  defaultMessage:
-                    'Please ask your administrator to turn it on by enabling it in within settings.',
-                })}
-              </>
-            )}
-          </>
+          <>{popoverContent}</>
         </EuiPopover>
       </EuiFlexItem>
     );
   }
 
   function Link() {
-    return (
-      <>
-        {linkLabel && canEditAdvancedSettings && (
-          <EuiFlexItem grow={false}>
-            <EuiLink data-test-subj="apmLink" disabled={isLoading} onClick={onClick}>
-              {linkLabel}
-            </EuiLink>
-          </EuiFlexItem>
-        )}
-      </>
+    if (!linkLabel) {
+      return null;
+    }
+
+    const linkComponent = (
+      <EuiFlexItem grow={false}>
+        <EuiLink
+          data-test-subj="apmLink"
+          disabled={isLoading || !canEditAdvancedSettings}
+          onClick={onClick}
+        >
+          {linkLabel}
+        </EuiLink>
+      </EuiFlexItem>
     );
+
+    if (!canEditAdvancedSettings) {
+      return (
+        <EuiToolTip
+          content={
+            <EuiFlexGroup gutterSize="s" direction="column">
+              <EuiFlexItem>
+                <EuiFlexGroup gutterSize="s" direction="row">
+                  <EuiFlexItem grow={false}>
+                    <EuiIcon type="lock" size="s" />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiText size="xs">
+                      {i18n.translate('xpack.apm.tryItButton.euiButtonIcon.featureDisabled', {
+                        defaultMessage: 'This feature is currently disabled.',
+                      })}
+                    </EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiText size="xs">
+                  {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',
+                          }),
+                    },
+                  })}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          }
+        >
+          {linkComponent}
+        </EuiToolTip>
+      );
+    }
+
+    return <>{linkComponent}</>;
   }
 
   function Loading() {
@@ -156,25 +180,31 @@ export function TryItButton({
     );
   }
 
-  if (isFeatureEnabled) {
+  function HideThisButton() {
     return (
-      <EuiFlexGroup gutterSize="s" alignItems="center">
-        <Icon />
-        <Link />
-        <Popover />
-        <Loading />
-      </EuiFlexGroup>
+      <EuiFlexItem grow={false}>
+        <EuiToolTip content="Hide this">
+          <EuiButtonIcon
+            data-test-subj="apmHideThisButtonButton"
+            iconType="cross"
+            onClick={() => {
+              setShowFastFilterTryCallout(false);
+            }}
+          />
+        </EuiToolTip>
+      </EuiFlexItem>
     );
   }
 
   return (
     <EuiFlexGroup gutterSize="s" alignItems="center">
-      <TryItBadge />
-      <Icon />
-      <PromoLabel />
-      <Popover />
+      {isFeatureEnabled ? null : <TryItBadge />}
+      <TechnicalPreviewBadge icon="beaker" />
+      {isFeatureEnabled ? null : <PromoLabel />}
       <Link />
+      <Popover />
       <Loading />
+      <HideThisButton />
     </EuiFlexGroup>
   );
 }