[Infrastructure UI] Inventory educate about show button (#149981)

Closes [#149615](#149615) ## Summary This PR adds a tooltip educating the user about the filter in the Show drop-down list. Testing - Navigate to the Inventory Page and the new tour should be visible: <img width="708" alt="image" src="https://user-images.githubusercontent.com/14139027/216096889-486f07f0-f182-4f20-a4f4-bb8c535d4af9.png"> - if it's dismissed (after the button is clicked it should not be visible anymore until the session is active - can be tested with page refresh or navigating to a different page and back) - If it's not dismissed it should be persisted per user/browser session - can be also checked with page refresh
elastic · Feb 6, 2023 · 45e5776 · 45e5776
1 parent 60defc5
commit 45e5776
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 17 deletions.
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx
@@ -8,17 +8,34 @@
 import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import React, { ReactNode } from 'react';
 import { withTheme, EuiTheme } from '@kbn/kibana-react-plugin/common';
+import { KubernetesTour } from './kubernetes_tour';
 
 interface Props {
   'data-test-subj'?: string;
   label: string;
   onClick: () => void;
   theme: EuiTheme | undefined;
   children: ReactNode;
+  showKubernetesInfo?: boolean;
 }
 
+const ButtonLabel = ({ label, theme }: { label: string; theme?: EuiTheme }) => (
+  <EuiFlexItem
+    grow={false}
+    style={{
+      padding: 12,
+      background: theme?.eui.euiFormInputGroupLabelBackground,
+      fontSize: '0.75em',
+      fontWeight: 600,
+      color: theme?.eui.euiTitleColor,
+    }}
+  >
+    {label}
+  </EuiFlexItem>
+);
+
 export const DropdownButton = withTheme((props: Props) => {
-  const { onClick, label, theme, children } = props;
+  const { onClick, label, theme, children, showKubernetesInfo } = props;
   return (
     <EuiFlexGroup
       alignItems="center"
@@ -28,18 +45,13 @@ export const DropdownButton = withTheme((props: Props) => {
         boxShadow: `0px 3px 2px ${theme?.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme?.eui.euiTableActionsBorderColor}`,
       }}
     >
-      <EuiFlexItem
-        grow={false}
-        style={{
-          padding: 12,
-          background: theme?.eui.euiFormInputGroupLabelBackground,
-          fontSize: '0.75em',
-          fontWeight: 600,
-          color: theme?.eui.euiTitleColor,
-        }}
-      >
-        {label}
-      </EuiFlexItem>
+      {showKubernetesInfo ? (
+        <KubernetesTour>
+          <ButtonLabel label={label} theme={theme} />
+        </KubernetesTour>
+      ) : (
+        <ButtonLabel label={label} theme={theme} />
+      )}
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty
           data-test-subj={props['data-test-subj']}

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/kubernetes_tour.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/kubernetes_tour.tsx
@@ -0,0 +1,60 @@
+/*
+ * 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, { ReactElement } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiTourStep, EuiText, EuiButtonEmpty } from '@elastic/eui';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+
+interface Props {
+  children: ReactElement;
+}
+
+export const KUBERNETES_TOUR_STORAGE_KEY = 'isKubernetesTourSeen';
+
+export const KubernetesTour = ({ children }: Props) => {
+  const [isTourSeen, setIsTourSeen] = useLocalStorage(KUBERNETES_TOUR_STORAGE_KEY, false);
+  const markTourAsSeen = () => setIsTourSeen(true);
+
+  return (
+    <div>
+      <EuiTourStep
+        content={
+          <EuiText size="s" color="subdued" data-test-subj="infra-kubernetesTour-text">
+            {i18n.translate('xpack.infra.homePage.kubernetesTour.text', {
+              defaultMessage:
+                'Click here to see your infrastructure in different ways, including Kubernetes pods.',
+            })}
+          </EuiText>
+        }
+        isStepOpen={!isTourSeen}
+        maxWidth={350}
+        onFinish={markTourAsSeen}
+        step={1}
+        stepsTotal={1}
+        title={i18n.translate('xpack.infra.homePage.kubernetesTour.title', {
+          defaultMessage: 'Want a different view?',
+        })}
+        anchorPosition="downCenter"
+        footerAction={
+          <EuiButtonEmpty
+            data-test-subj="infra-kubernetesTour-dismiss"
+            size="s"
+            color="text"
+            onClick={markTourAsSeen}
+          >
+            {i18n.translate('xpack.infra.homePage.kubernetesTour.dismiss', {
+              defaultMessage: 'Dismiss',
+            })}
+          </EuiButtonEmpty>
+        }
+      >
+        {children}
+      </EuiTourStep>
+    </div>
+  );
+};
diff --git a/...infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx b/...infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx
@@ -124,6 +124,7 @@ export const WaffleInventorySwitcher: React.FC = () => {
       data-test-subj={'openInventorySwitcher'}
       onClick={openPopover}
       label={i18n.translate('xpack.infra.waffle.showLabel', { defaultMessage: 'Show' })}
+      showKubernetesInfo={true}
     >
       {selectedText}
     </DropdownButton>

diff --git a/x-pack/test/functional/apps/infra/home_page.ts b/x-pack/test/functional/apps/infra/home_page.ts
@@ -6,6 +6,7 @@
  */
 
 import expect from '@kbn/expect';
+import { KUBERNETES_TOUR_STORAGE_KEY } from '@kbn/infra-plugin/public/pages/metrics/inventory_view/components/kubernetes_tour';
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { DATES } from './constants';
 
@@ -59,10 +60,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await pageObjects.common.navigateToApp('infraOps');
         await pageObjects.infraHome.waitForLoading();
       });
-      after(
-        async () =>
-          await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs')
-      );
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
+        await browser.removeLocalStorageItem(KUBERNETES_TOUR_STORAGE_KEY);
+      });
 
       it('renders the correct page title', async () => {
         await pageObjects.header.waitUntilLoadingHasFinished();
@@ -71,6 +72,26 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         expect(documentTitle).to.contain('Inventory - Infrastructure - Observability - Elastic');
       });
 
+      it('renders the kubernetes tour component and allows user to dismiss it without seeing it again', async () => {
+        await pageObjects.header.waitUntilLoadingHasFinished();
+        const kubernetesTourText =
+          'Click here to see your infrastructure in different ways, including Kubernetes pods.';
+        const ensureKubernetesTourVisible =
+          await pageObjects.infraHome.ensureKubernetesTourIsVisible();
+
+        expect(ensureKubernetesTourVisible).to.contain(kubernetesTourText);
+
+        // Persist after refresh
+        await browser.refresh();
+        await pageObjects.infraHome.waitForLoading();
+
+        expect(ensureKubernetesTourVisible).to.contain(kubernetesTourText);
+
+        await pageObjects.infraHome.clickDismissKubernetesTourButton();
+
+        await pageObjects.infraHome.ensureKubernetesTourIsClosed();
+      });
+
       it('renders an empty data prompt for dates with no data', async () => {
         await pageObjects.infraHome.goToTime(DATE_WITHOUT_DATA);
         await pageObjects.infraHome.getNoMetricsDataPrompt();

diff --git a/x-pack/test/functional/apps/infra/hosts_view.ts b/x-pack/test/functional/apps/infra/hosts_view.ts
@@ -108,6 +108,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       before(async () => {
         await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
         await pageObjects.common.navigateToApp('infraOps');
+        await pageObjects.infraHome.clickDismissKubernetesTourButton();
         await pageObjects.infraHostsView.clickTryHostViewBadge();
       });
       after(async () => {
@@ -126,6 +127,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       before(async () => {
         await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
         await loginWithReadOnlyUserAndNavigateToInfra();
+        await pageObjects.infraHome.clickDismissKubernetesTourButton();
         await pageObjects.infraHostsView.clickTryHostViewBadge();
       });
       after(async () => {

diff --git a/x-pack/test/functional/page_objects/infra_home_page.ts b/x-pack/test/functional/page_objects/infra_home_page.ts
@@ -376,5 +376,19 @@ export function InfraHomePageProvider({ getService, getPageObjects }: FtrProvide
     async ensureSuggestionsPanelVisible() {
       await testSubjects.find('infraSuggestionsPanel');
     },
+
+    async ensureKubernetesTourIsVisible() {
+      const container = await testSubjects.find('infra-kubernetesTour-text');
+      const containerText = await container.getVisibleText();
+      return containerText;
+    },
+
+    async ensureKubernetesTourIsClosed() {
+      await testSubjects.missingOrFail('infra-kubernetesTour-text');
+    },
+
+    async clickDismissKubernetesTourButton() {
+      return await testSubjects.click('infra-kubernetesTour-dismiss');
+    },
   };
 }