[Log Explorer] Add "Add data" button (elastic#166266)

## 📓 Summary Closes elastic#165486 This work restructured the entry point for the 2 different header menus (stateful, serverless) and added both of them the Add data button to navigate to the onboarding page. **Stateful** <img width="1780" alt="Screenshot 2023-09-12 at 16 01 16" src="https://github.com/elastic/kibana/assets/34506779/535a9a5c-603e-4c35-976a-70421c5e36d8"> **Serverless** <img width="1783" alt="Screenshot 2023-09-12 at 15 49 09" src="https://github.com/elastic/kibana/assets/34506779/aaa57f41-c4d8-4da1-a808-8b55954df716"> --------- Co-authored-by: Marco Antonio Ghiani <[email protected]> Co-authored-by: kibanamachine <[email protected]>
rshen91 · Sep 14, 2023 · 39cf371 · 39cf371
1 parent 5106852
commit 39cf371
Show file tree

Hide file tree

Showing 12 changed files with 259 additions and 37 deletions.
diff --git a/x-pack/plugins/observability_log_explorer/common/translations.ts b/x-pack/plugins/observability_log_explorer/common/translations.ts
@@ -28,3 +28,10 @@ export const discoverLinkTitle = i18n.translate(
     defaultMessage: 'Discover',
   }
 );
+
+export const onboardingLinkTitle = i18n.translate(
+  'xpack.observabilityLogExplorer.onboardingLinkTitle',
+  {
+    defaultMessage: 'Add data',
+  }
+);
diff --git a/x-pack/plugins/observability_log_explorer/kibana.jsonc b/x-pack/plugins/observability_log_explorer/kibana.jsonc
@@ -15,11 +15,12 @@
       "data",
       "discover",
       "logExplorer",
-      "observabilityShared"
+      "observabilityShared",
+      "share"
     ],
     "optionalPlugins": [
       "serverless"
     ],
-    "requiredBundles": ["kibanaReact"]
+    "requiredBundles": ["kibanaReact", "observabilityOnboarding"]
   }
 }
diff --git a/x-pack/plugins/observability_log_explorer/public/applications/observability_log_explorer.tsx b/x-pack/plugins/observability_log_explorer/public/applications/observability_log_explorer.tsx
@@ -52,7 +52,6 @@ export const ObservabilityLogExplorerApp = ({
   plugins,
   pluginStart,
 }: ObservabilityLogExplorerAppProps) => {
-  const { logExplorer, observabilityShared, serverless } = plugins;
   const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(
     core,
     plugins,
@@ -67,15 +66,7 @@ export const ObservabilityLogExplorerApp = ({
             <Route
               path="/"
               exact={true}
-              render={() => (
-                <ObservablityLogExplorerMainRoute
-                  appParams={appParams}
-                  core={core}
-                  logExplorer={logExplorer}
-                  observabilityShared={observabilityShared}
-                  serverless={serverless}
-                />
-              )}
+              render={() => <ObservablityLogExplorerMainRoute appParams={appParams} core={core} />}
             />
           </Routes>
         </Router>

diff --git a/x-pack/plugins/observability_log_explorer/public/components/log_explorer_top_nav_menu.tsx b/x-pack/plugins/observability_log_explorer/public/components/log_explorer_top_nav_menu.tsx
@@ -5,67 +5,156 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import deepEqual from 'fast-deep-equal';
 import useObservable from 'react-use/lib/useObservable';
 import { type BehaviorSubject, distinctUntilChanged } from 'rxjs';
 import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { AppMountParameters } from '@kbn/core-application-browser';
 import {
   EuiBetaBadge,
+  EuiButton,
+  EuiHeader,
   EuiHeaderLink,
   EuiHeaderLinks,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   useEuiTheme,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
 import { LogExplorerStateContainer } from '@kbn/log-explorer-plugin/public';
-import { useKibanaContextForPlugin } from '../utils/use_kibana';
-import { betaBadgeDescription, betaBadgeTitle, discoverLinkTitle } from '../../common/translations';
+import {
+  OBSERVABILITY_ONBOARDING_LOCATOR,
+  ObservabilityOnboardingLocatorParams,
+} from '@kbn/observability-onboarding-plugin/public';
+import { KibanaReactContextValue } from '@kbn/kibana-react-plugin/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
+import { css } from '@emotion/react';
+import { PluginKibanaContextValue } from '../utils/use_kibana';
+import {
+  betaBadgeDescription,
+  betaBadgeTitle,
+  discoverLinkTitle,
+  onboardingLinkTitle,
+} from '../../common/translations';
+import { getRouterLinkProps } from '../utils/get_router_link_props';
 
 interface LogExplorerTopNavMenuProps {
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  services: KibanaReactContextValue<PluginKibanaContextValue>['services'];
   state$: BehaviorSubject<LogExplorerStateContainer>;
   theme$: AppMountParameters['theme$'];
 }
 
 export const LogExplorerTopNavMenu = ({
   setHeaderActionMenu,
+  services,
   state$,
   theme$,
 }: LogExplorerTopNavMenuProps) => {
+  const { serverless } = services;
+
+  return Boolean(serverless) ? (
+    <ServerlessTopNav services={services} state$={state$} />
+  ) : (
+    <StatefulTopNav
+      services={services}
+      setHeaderActionMenu={setHeaderActionMenu}
+      state$={state$}
+      theme$={theme$}
+    />
+  );
+};
+
+const ServerlessTopNav = ({
+  services,
+  state$,
+}: Pick<LogExplorerTopNavMenuProps, 'services' | 'state$'>) => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+    <EuiHeader data-test-subj="logExplorerHeaderMenu">
+      <EuiHeaderSection>
+        <EuiHeaderSectionItem>
+          <EuiHeaderLinks gutterSize="xs">
+            <DiscoverLink services={services} state$={state$} />
+          </EuiHeaderLinks>
+        </EuiHeaderSectionItem>
+      </EuiHeaderSection>
       <EuiHeaderSection
-        data-test-subj="logExplorerHeaderMenu"
+        side="right"
         css={css`
           gap: ${euiTheme.size.m};
         `}
       >
         <EuiHeaderSectionItem>
           <EuiBetaBadge
+            size="s"
+            iconType="beta"
             label={betaBadgeTitle}
             tooltipContent={betaBadgeDescription}
             alignment="middle"
           />
         </EuiHeaderSectionItem>
-        <EuiHeaderLinks gutterSize="xs">
-          <DiscoverLink state$={state$} />
-        </EuiHeaderLinks>
+        <EuiHeaderSectionItem>
+          <OnboardingLink services={services} />
+        </EuiHeaderSectionItem>
+      </EuiHeaderSection>
+    </EuiHeader>
+  );
+};
+
+const StatefulTopNav = ({
+  setHeaderActionMenu,
+  services,
+  state$,
+  theme$,
+}: LogExplorerTopNavMenuProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  useEffect(() => {
+    const { chrome, i18n, theme } = services;
+
+    if (chrome) {
+      chrome.setBreadcrumbsAppendExtension({
+        content: toMountPoint(
+          <EuiHeaderSection
+            data-test-subj="logExplorerHeaderMenu"
+            css={css`
+              margin-left: ${euiTheme.size.m};
+            `}
+          >
+            <EuiHeaderSectionItem>
+              <EuiBetaBadge
+                size="s"
+                iconType="beta"
+                label={betaBadgeTitle}
+                tooltipContent={betaBadgeDescription}
+                alignment="middle"
+              />
+            </EuiHeaderSectionItem>
+          </EuiHeaderSection>,
+          { theme, i18n }
+        ),
+      });
+    }
+  }, [euiTheme, services]);
+
+  return (
+    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+      <EuiHeaderSection data-test-subj="logExplorerHeaderMenu">
+        <EuiHeaderSectionItem>
+          <EuiHeaderLinks gutterSize="xs">
+            <DiscoverLink services={services} state$={state$} />
+            <OnboardingLink services={services} />
+          </EuiHeaderLinks>
+        </EuiHeaderSectionItem>
       </EuiHeaderSection>
     </HeaderMenuPortal>
   );
 };
 
 const DiscoverLink = React.memo(
-  ({ state$ }: { state$: BehaviorSubject<LogExplorerStateContainer> }) => {
-    const {
-      services: { discover },
-    } = useKibanaContextForPlugin();
-
+  ({ services, state$ }: Pick<LogExplorerTopNavMenuProps, 'services' | 'state$'>) => {
     const { appState, logExplorerState } = useObservable<LogExplorerStateContainer>(
       state$.pipe(
         distinctUntilChanged<LogExplorerStateContainer>((prev, curr) => {
@@ -91,9 +180,20 @@ const DiscoverLink = React.memo(
       dataViewSpec: logExplorerState?.datasetSelection?.selection.dataset.toDataviewSpec(),
     };
 
+    const discoverUrl = services.discover.locator?.getRedirectUrl(discoverLinkParams);
+
+    const navigateToDiscover = () => {
+      services.discover.locator?.navigate(discoverLinkParams);
+    };
+
+    const discoverLinkProps = getRouterLinkProps({
+      href: discoverUrl,
+      onClick: navigateToDiscover,
+    });
+
     return (
       <EuiHeaderLink
-        onClick={() => discover.locator?.navigate(discoverLinkParams)}
+        {...discoverLinkProps}
         color="primary"
         iconType="discoverApp"
         data-test-subj="logExplorerDiscoverFallbackLink"
@@ -103,3 +203,32 @@ const DiscoverLink = React.memo(
     );
   }
 );
+
+const OnboardingLink = React.memo(({ services }: Pick<LogExplorerTopNavMenuProps, 'services'>) => {
+  const locator = services.share.url.locators.get<ObservabilityOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
+  );
+
+  const onboardingUrl = locator?.useUrl({});
+
+  const navigateToOnboarding = () => {
+    locator?.navigate({});
+  };
+
+  const onboardingLinkProps = getRouterLinkProps({
+    href: onboardingUrl,
+    onClick: navigateToOnboarding,
+  });
+
+  return (
+    <EuiButton
+      {...onboardingLinkProps}
+      fill
+      size="s"
+      iconType="indexOpen"
+      data-test-subj="logExplorerOnboardingLink"
+    >
+      {onboardingLinkTitle}
+    </EuiButton>
+  );
+});
diff --git a/x-pack/plugins/observability_log_explorer/public/routes/main/main_route.tsx b/x-pack/plugins/observability_log_explorer/public/routes/main/main_route.tsx
@@ -6,38 +6,35 @@
  */
 
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
-import { LogExplorerPluginStart } from '@kbn/log-explorer-plugin/public';
-import { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
-import { ServerlessPluginStart } from '@kbn/serverless/public';
 import React, { useState } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { LogExplorerTopNavMenu } from '../../components/log_explorer_top_nav_menu';
 import { ObservabilityLogExplorerPageTemplate } from '../../components/page_template';
 import { noBreadcrumbs, useBreadcrumbs } from '../../utils/breadcrumbs';
+import { useKibanaContextForPlugin } from '../../utils/use_kibana';
 
 export interface ObservablityLogExplorerMainRouteProps {
   appParams: AppMountParameters;
   core: CoreStart;
-  logExplorer: LogExplorerPluginStart;
-  observabilityShared: ObservabilitySharedPluginStart;
-  serverless?: ServerlessPluginStart;
 }
 
 export const ObservablityLogExplorerMainRoute = ({
-  appParams: { history, setHeaderActionMenu, theme$ },
+  appParams,
   core,
-  logExplorer,
-  observabilityShared,
-  serverless,
 }: ObservablityLogExplorerMainRouteProps) => {
+  const { services } = useKibanaContextForPlugin();
+  const { logExplorer, observabilityShared, serverless } = services;
   useBreadcrumbs(noBreadcrumbs, core.chrome, serverless);
 
+  const { history, setHeaderActionMenu, theme$ } = appParams;
+
   const [state$] = useState(() => new BehaviorSubject({}));
 
   return (
     <>
       <LogExplorerTopNavMenu
         setHeaderActionMenu={setHeaderActionMenu}
+        services={services}
         state$={state$}
         theme$={theme$}
       />

diff --git a/x-pack/plugins/observability_log_explorer/public/types.ts b/x-pack/plugins/observability_log_explorer/public/types.ts
@@ -10,6 +10,7 @@ import { DiscoverStart } from '@kbn/discover-plugin/public';
 import { LogExplorerPluginStart } from '@kbn/log-explorer-plugin/public';
 import { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
 import { ServerlessPluginStart } from '@kbn/serverless/public';
+import { SharePluginStart } from '@kbn/share-plugin/public';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ObservabilityLogExplorerPluginSetup {}
@@ -27,4 +28,5 @@ export interface ObservabilityLogExplorerStartDeps {
   logExplorer: LogExplorerPluginStart;
   observabilityShared: ObservabilitySharedPluginStart;
   serverless?: ServerlessPluginStart;
+  share: SharePluginStart;
 }
diff --git a/x-pack/plugins/observability_log_explorer/public/utils/get_router_link_props.ts b/x-pack/plugins/observability_log_explorer/public/utils/get_router_link_props.ts
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+interface GetRouterLinkPropsDeps {
+  href?: string;
+  onClick(): void;
+}
+
+const isModifiedEvent = (event: React.MouseEvent<HTMLAnchorElement>) =>
+  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+
+const isLeftClickEvent = (event: React.MouseEvent<HTMLAnchorElement>) => event.button === 0;
+
+export const getRouterLinkProps = ({ href, onClick }: GetRouterLinkPropsDeps) => {
+  const guardedClickHandler = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
+      return;
+    }
+
+    // Prevent regular link behavior, which causes a browser refresh.
+    event.preventDefault();
+
+    onClick();
+  };
+
+  return { href, onClick: guardedClickHandler };
+};
diff --git a/x-pack/plugins/observability_log_explorer/tsconfig.json b/x-pack/plugins/observability_log_explorer/tsconfig.json
@@ -24,6 +24,9 @@
     "@kbn/config-schema",
     "@kbn/core-application-browser",
     "@kbn/discover-plugin",
+    "@kbn/observability-onboarding-plugin",
+    "@kbn/react-kibana-mount",
+    "@kbn/share-plugin",
   ],
   "exclude": [
     "target/**/*"

diff --git a/x-pack/plugins/observability_onboarding/public/index.ts b/x-pack/plugins/observability_onboarding/public/index.ts
@@ -18,6 +18,7 @@ import {
 } from './plugin';
 
 export { OBSERVABILITY_ONBOARDING_LOCATOR } from './locators/onboarding_locator/locator_definition';
+export type { ObservabilityOnboardingLocatorParams } from './locators/onboarding_locator/types';
 
 export interface ConfigSchema {
   ui: {