[ES|QL] Bypass no data views screen

packages/deeplinks/analytics/constants.ts

@@ -11,3 +11,5 @@ export const DISCOVER_APP_ID = 'discover';
 export const DASHBOARD_APP_ID = 'dashboards';
 
 export const VISUALIZE_APP_ID = 'visualize';
+
+export const DISCOVER_ESQL_LOCATOR = 'DISCOVER_ESQL_LOCATOR';

packages/deeplinks/analytics/deep_links.ts

@@ -6,8 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { DASHBOARD_APP_ID, DISCOVER_APP_ID, VISUALIZE_APP_ID } from './constants';
+import {
+  DASHBOARD_APP_ID,
+  DISCOVER_APP_ID,
+  DISCOVER_ESQL_LOCATOR,
+  VISUALIZE_APP_ID,
+} from './constants';
 
 export type AppId = typeof DISCOVER_APP_ID | typeof DASHBOARD_APP_ID | typeof VISUALIZE_APP_ID;
 
 export type DeepLinkId = AppId;
+
+export type LocatorId = typeof DISCOVER_ESQL_LOCATOR;

packages/deeplinks/analytics/index.ts

@@ -6,6 +6,11 @@
  * Side Public License, v 1.
  */
 
-export { DASHBOARD_APP_ID, DISCOVER_APP_ID, VISUALIZE_APP_ID } from './constants';
+export {
+  DASHBOARD_APP_ID,
+  DISCOVER_APP_ID,
+  VISUALIZE_APP_ID,
+  DISCOVER_ESQL_LOCATOR,
+} from './constants';
 
 export type { AppId, DeepLinkId } from './deep_links';

packages/kbn-es-query/index.ts

@@ -51,6 +51,7 @@ export {
   migrateFilter,
   fromCombinedFilter,
   isOfQueryType,
+  isOfEsqlQueryType,
   isOfAggregateQueryType,
   getAggregateQueryMode,
   getIndexPatternFromSQLQuery,

packages/kbn-es-query/src/es_query/es_aggregate_query.ts

@@ -26,6 +26,15 @@ export function isOfAggregateQueryType(
   return Boolean(query && ('sql' in query || 'esql' in query));
 }
 
+/**
+ * True if the query is of type AggregateQuery and is of type esql, false otherwise.
+ */
+export function isOfEsqlQueryType(
+  query?: AggregateQuery | Query | { [key: string]: any }
+): query is AggregateQuery {
+  return Boolean(query && 'esql' in query && !('sql' in query));
+}
+
 // returns the language of the aggregate Query, sql, esql etc
 export function getAggregateQueryMode(query: AggregateQuery): Language {
   return Object.keys(query)[0] as Language;

packages/kbn-es-query/src/es_query/index.ts

@@ -16,6 +16,7 @@ export { decorateQuery } from './decorate_query';
 export {
   isOfQueryType,
   isOfAggregateQueryType,
+  isOfEsqlQueryType,
   getAggregateQueryMode,
   getIndexPatternFromSQLQuery,
   getLanguageDisplayName,

packages/shared-ux/page/kibana_no_data/mocks/src/storybook.ts

@@ -25,7 +25,7 @@ import {
   NoDataCardStorybookParams,
 } from '@kbn/shared-ux-card-no-data-mocks';
 
-type PropArguments = Pick<NoDataPageProps, 'solution' | 'logo'>;
+type PropArguments = Pick<NoDataPageProps, 'solution' | 'logo' | 'esqlLink'>;
 type ServiceArguments = Pick<KibanaNoDataPageServices, 'hasUserDataView' | 'hasESData'>;
 
 export type Params = ArgumentParams<PropArguments, ServiceArguments> &
@@ -51,6 +51,10 @@ export class StorybookMock extends AbstractStorybookMock<
       options: ['logoElastic', 'logoKibana', 'logoCloud', undefined],
       defaultValue: undefined,
     },
+    esqlLink: {
+      control: 'text',
+      defaultValue: 'elastic.co',
+    },
   };
 
   serviceArguments = {
@@ -67,7 +71,7 @@ export class StorybookMock extends AbstractStorybookMock<
   dependencies = [noDataViewsMock, noDataCardMock];
 
   getProps(params: Params) {
-    const { logo, solution } = params;
+    const { logo, solution, esqlLink } = params;
     const noDataConfig = {
       solution: solution || 'Analytics',
       logo: logo || 'logoKibana',
@@ -77,12 +81,14 @@ export class StorybookMock extends AbstractStorybookMock<
         },
       },
       docsLink: 'http://docs.elastic.dev',
+      esqlLink: esqlLink || 'http://elastic.co',
     };
 
     return {
       showPlainSpinner: false,
       noDataConfig,
       onDataViewCreated: action('onDataViewCreated'),
+      esqlLink,
     };
   }
 

packages/shared-ux/prompt/no_data_views/impl/index.ts

@@ -17,3 +17,4 @@ export { NoDataViewsPrompt } from './src/no_data_views';
 export { NoDataViewsPrompt as NoDataViewsPromptComponent } from './src/no_data_views.component';
 export { NoDataViewsPromptKibanaProvider, NoDataViewsPromptProvider } from './src/services';
 export { DataViewIllustration } from './src/data_view_illustration';
+export { useOnTryEsql } from './src/hooks';

packages/shared-ux/prompt/no_data_views/impl/src/actions.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiButton, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+
+interface NoDataButtonProps {
+  onClickCreate: (() => void) | undefined;
+  canCreateNewDataView: boolean;
+  onTryEsql?: () => void;
+}
+
+const createDataViewText = i18n.translate('sharedUXPackages.noDataViewsPrompt.addDataViewText', {
+  defaultMessage: 'Create data view',
+});
+
+export const NoDataButtonLink = ({
+  onClickCreate,
+  canCreateNewDataView,
+  onTryEsql,
+}: NoDataButtonProps) => {
+  if (!onTryEsql && !canCreateNewDataView) {
+    return null;
+  }
+
+  let tryEsqlPrompt = null;
+  let createDataViewButton = null;
+  let orDivider = null;
+
+  if (onTryEsql) {
+    tryEsqlPrompt = (
+      <EuiText size="s">
+        <FormattedMessage
+          id="sharedUXPackages.no_data_views.button"
+          defaultMessage="Query your data directly with ES|QL (Beta).  "
+        />
+        <EuiLink onClick={onTryEsql}>Try ES|QL</EuiLink>
+      </EuiText>
+    );
+  }
+
+  if (canCreateNewDataView) {
+    createDataViewButton = (
+      <EuiButton
+        onClick={onClickCreate}
+        iconType="plusInCircle"
+        fill={true}
+        data-test-subj="createDataViewButton"
+      >
+        {createDataViewText}
+      </EuiButton>
+    );
+  }
+
+  if (canCreateNewDataView && onTryEsql) {
+    orDivider = (
+      <>
+        <EuiSpacer size="m" />- OR -
+        <EuiSpacer size="m" />
+      </>
+    );
+  }
+
+  return (
+    <>
+      {createDataViewButton}
+      {orDivider}
+      {tryEsqlPrompt}
+    </>
+  );
+};

packages/shared-ux/prompt/no_data_views/impl/src/hooks/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { useOnTryEsql, type UseOnTryEsqlParams } from './use_on_try_esql';

packages/shared-ux/prompt/no_data_views/impl/src/hooks/use_on_try_esql.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEffect, useState } from 'react';
+import { DISCOVER_ESQL_LOCATOR } from '@kbn/deeplinks-analytics';
+import { DiscoverEsqlLocatorParams } from '@kbn/discover-plugin/common';
+
+import { NavigateToAppFn, LocatorClient } from '@kbn/shared-ux-prompt-no-data-views-types';
+
+export interface UseOnTryEsqlParams {
+  locatorClient?: LocatorClient;
+  navigateToApp: NavigateToAppFn;
+}
+
+export const useOnTryEsql = ({ locatorClient, navigateToApp }: UseOnTryEsqlParams) => {
+  const [onTryEsql, setOnTryEsql] = useState<(() => void) | undefined>();
+
+  useEffect(() => {
+    (async () => {
+      const location = await locatorClient
+        ?.get<DiscoverEsqlLocatorParams>(DISCOVER_ESQL_LOCATOR)
+        ?.getLocation({});
+
+      if (!location) {
+        return;
+      }
+
+      const { app, path, state } = location;
+
+      setOnTryEsql(() => () => navigateToApp(app, { path, state }));
+    })();
+  }, [locatorClient, navigateToApp]);
+
+  return onTryEsql;
+};

packages/shared-ux/prompt/no_data_views/impl/src/no_data_views.component.tsx

@@ -9,17 +9,13 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
-import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { withSuspense } from '@kbn/shared-ux-utility';
 import { NoDataViewsPromptComponentProps } from '@kbn/shared-ux-prompt-no-data-views-types';
 
 import { DocumentationLink } from './documentation_link';
-
-const createDataViewText = i18n.translate('sharedUXPackages.noDataViewsPrompt.addDataViewText', {
-  defaultMessage: 'Create data view',
-});
+import { NoDataButtonLink } from './actions';
 
 // Using raw value because it is content dependent
 const MAX_WIDTH = 830;
@@ -31,19 +27,9 @@ export const NoDataViewsPrompt = ({
   onClickCreate,
   canCreateNewDataView,
   dataViewsDocLink,
+  onTryEsql,
   emptyPromptColor = 'plain',
 }: NoDataViewsPromptComponentProps) => {
-  const actions = canCreateNewDataView && (
-    <EuiButton
-      onClick={onClickCreate}
-      iconType="plusInCircle"
-      fill={true}
-      data-test-subj="createDataViewButton"
-    >
-      {createDataViewText}
-    </EuiButton>
-  );
-
   const title = canCreateNewDataView ? (
     <h2>
       <FormattedMessage
@@ -94,6 +80,7 @@ export const NoDataViewsPrompt = ({
   );
 
   const icon = <Illustration />;
+  const actions = <NoDataButtonLink {...{ onClickCreate, canCreateNewDataView, onTryEsql }} />;
 
   return (
     <EuiEmptyPrompt

packages/shared-ux/prompt/no_data_views/impl/src/no_data_views.tsx

@@ -28,7 +28,7 @@ export const NoDataViewsPrompt = ({
   onDataViewCreated,
   allowAdHocDataView = false,
 }: NoDataViewsPromptProps) => {
-  const { canCreateNewDataView, openDataViewEditor, dataViewsDocLink } = useServices();
+  const { canCreateNewDataView, openDataViewEditor, dataViewsDocLink, onTryEsql } = useServices();
   const closeDataViewEditor = useRef<CloseDataViewEditorFn>();
 
   useEffect(() => {
@@ -72,6 +72,8 @@ export const NoDataViewsPrompt = ({
   ]);
 
   return (
-    <NoDataViewsPromptComponent {...{ onClickCreate, canCreateNewDataView, dataViewsDocLink }} />
+    <NoDataViewsPromptComponent
+      {...{ onClickCreate, canCreateNewDataView, dataViewsDocLink, onTryEsql }}
+    />
   );
 };

packages/shared-ux/prompt/no_data_views/impl/src/services.tsx

@@ -7,10 +7,12 @@
  */
 
 import React, { FC, useContext } from 'react';
+
 import type {
   NoDataViewsPromptServices,
   NoDataViewsPromptKibanaDependencies,
 } from '@kbn/shared-ux-prompt-no-data-views-types';
+import { useOnTryEsql } from './hooks';
 
 const NoDataViewsPromptContext = React.createContext<NoDataViewsPromptServices | null>(null);
 
@@ -23,11 +25,16 @@ export const NoDataViewsPromptProvider: FC<NoDataViewsPromptServices> = ({
 }) => {
   // Typescript types are widened to accept more than what is needed.  Take only what is necessary
   // so the context remains clean.
-  const { canCreateNewDataView, dataViewsDocLink, openDataViewEditor } = services;
+  const { canCreateNewDataView, dataViewsDocLink, openDataViewEditor, onTryEsql } = services;
 
   return (
     <NoDataViewsPromptContext.Provider
-      value={{ canCreateNewDataView, dataViewsDocLink, openDataViewEditor }}
+      value={{
+        canCreateNewDataView,
+        dataViewsDocLink,
+        openDataViewEditor,
+        onTryEsql,
+      }}
     >
       {children}
     </NoDataViewsPromptContext.Provider>
@@ -41,12 +48,21 @@ export const NoDataViewsPromptKibanaProvider: FC<NoDataViewsPromptKibanaDependen
   children,
   ...services
 }) => {
+  const {
+    share,
+    coreStart: {
+      application: { navigateToApp },
+    },
+  } = services;
+  const onTryEsql = useOnTryEsql({ locatorClient: share?.url.locators, navigateToApp });
+
   return (
     <NoDataViewsPromptContext.Provider
       value={{
         dataViewsDocLink: services.coreStart.docLinks.links.indexPatterns?.introduction,
         canCreateNewDataView: services.dataViewEditor.userPermissions.editDataView(),
         openDataViewEditor: services.dataViewEditor.openEditor,
+        onTryEsql,
       }}
     >
       {children}

packages/shared-ux/prompt/no_data_views/impl/tsconfig.json

@@ -21,6 +21,8 @@
     "@kbn/test-jest-helpers",
     "@kbn/shared-ux-prompt-no-data-views-types",
     "@kbn/shared-ux-prompt-no-data-views-mocks",
+    "@kbn/deeplinks-analytics",
+    "@kbn/discover-plugin",
   ],
   "exclude": [
     "target/**/*",