[SharedUX] Allow creation of adHoc data views from no data page (#144596)

* [NoDataPage][Discover] Support creation of adHoc data views

* [SharedUX] Allow option to create adHoc data views

* [SharedUX] Allow option to create adHoc data views

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

packages/shared-ux/page/analytics_no_data/impl/src/analytics_no_data_page.component.test.tsx

@@ -42,4 +42,21 @@ describe('AnalyticsNoDataPageComponent', () => {
     expect(noDataConfig.docsLink).toEqual('http://www.test.com');
     expect(noDataConfig.action.elasticAgent).not.toBeNull();
   });
+
+  it('allows ad-hoc data view creation', async () => {
+    const component = mountWithIntl(
+      <AnalyticsNoDataPageProvider {...services}>
+        <AnalyticsNoDataPage
+          onDataViewCreated={onDataViewCreated}
+          kibanaGuideDocLink={'http://www.test.com'}
+          allowAdHocDataView={true}
+        />
+      </AnalyticsNoDataPageProvider>
+    );
+
+    await act(() => new Promise(setImmediate));
+
+    expect(component.find(KibanaNoDataPage).length).toBe(1);
+    expect(component.find(KibanaNoDataPage).props().allowAdHocDataView).toBe(true);
+  });
 });

packages/shared-ux/page/analytics_no_data/impl/src/analytics_no_data_page.component.tsx

@@ -17,6 +17,8 @@ export interface Props {
   kibanaGuideDocLink: string;
   /** Handler for successfully creating a new data view. */
   onDataViewCreated: (dataView: unknown) => void;
+  /** if set to true allows creation of an ad-hoc dataview from data view editor */
+  allowAdHocDataView?: boolean;
 }
 
 const solution = i18n.translate('sharedUXPackages.noDataConfig.analytics', {
@@ -41,7 +43,11 @@ const addIntegrationsDescription = i18n.translate(
 /**
  * A pure component of an entire page that can be displayed when Kibana "has no data", specifically for Analytics.
  */
-export const AnalyticsNoDataPage = ({ kibanaGuideDocLink, onDataViewCreated }: Props) => {
+export const AnalyticsNoDataPage = ({
+  kibanaGuideDocLink,
+  onDataViewCreated,
+  allowAdHocDataView,
+}: Props) => {
   const noDataConfig = {
     solution,
     pageTitle,
@@ -55,6 +61,5 @@ export const AnalyticsNoDataPage = ({ kibanaGuideDocLink, onDataViewCreated }: P
     },
     docsLink: kibanaGuideDocLink,
   };
-
-  return <KibanaNoDataPage {...{ noDataConfig, onDataViewCreated }} />;
+  return <KibanaNoDataPage {...{ noDataConfig, onDataViewCreated, allowAdHocDataView }} />;
 };

packages/shared-ux/page/analytics_no_data/impl/src/analytics_no_data_page.test.tsx

@@ -27,7 +27,7 @@ describe('AnalyticsNoDataPage', () => {
   it('renders correctly', async () => {
     const component = mountWithIntl(
       <AnalyticsNoDataPageProvider {...services}>
-        <AnalyticsNoDataPage onDataViewCreated={onDataViewCreated} />
+        <AnalyticsNoDataPage onDataViewCreated={onDataViewCreated} allowAdHocDataView={true} />
       </AnalyticsNoDataPageProvider>
     );
 
@@ -36,5 +36,6 @@ describe('AnalyticsNoDataPage', () => {
     expect(component.find(Component).length).toBe(1);
     expect(component.find(Component).props().kibanaGuideDocLink).toBe(services.kibanaGuideDocLink);
     expect(component.find(Component).props().onDataViewCreated).toBe(onDataViewCreated);
+    expect(component.find(Component).props().allowAdHocDataView).toBe(true);
   });
 });

packages/shared-ux/page/analytics_no_data/impl/src/analytics_no_data_page.tsx

@@ -15,7 +15,10 @@ import { AnalyticsNoDataPage as Component } from './analytics_no_data_page.compo
  * An entire page that can be displayed when Kibana "has no data", specifically for Analytics.  Uses
  * services from a Provider to supply props to a pure component.
  */
-export const AnalyticsNoDataPage = ({ onDataViewCreated }: AnalyticsNoDataPageProps) => {
+export const AnalyticsNoDataPage = ({
+  onDataViewCreated,
+  allowAdHocDataView,
+}: AnalyticsNoDataPageProps) => {
   const services = useServices();
   const { kibanaGuideDocLink } = services;
 
@@ -23,6 +26,7 @@ export const AnalyticsNoDataPage = ({ onDataViewCreated }: AnalyticsNoDataPagePr
     <Component
       {...{
         onDataViewCreated,
+        allowAdHocDataView,
         kibanaGuideDocLink,
       }}
     />

packages/shared-ux/page/analytics_no_data/types/index.d.ts

@@ -47,4 +47,6 @@ export type AnalyticsNoDataPageKibanaDependencies = KibanaDependencies &
 export interface AnalyticsNoDataPageProps {
   /** Handler for successfully creating a new data view. */
   onDataViewCreated: (dataView: unknown) => void;
+  /** if set to true allows creation of an ad-hoc data view from data view editor */
+  allowAdHocDataView?: boolean;
 }

packages/shared-ux/page/kibana_no_data/impl/src/kibana_no_data_page.tsx

@@ -16,7 +16,11 @@ import { useServices } from './services';
 /**
  * A page to display when Kibana has no data, prompting a person to add integrations or create a new data view.
  */
-export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: KibanaNoDataPageProps) => {
+export const KibanaNoDataPage = ({
+  onDataViewCreated,
+  noDataConfig,
+  allowAdHocDataView,
+}: KibanaNoDataPageProps) => {
   // These hooks are temporary, until this component is moved to a package.
   const services = useServices();
   const { hasESData, hasUserDataView } = services;
@@ -43,7 +47,12 @@ export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: KibanaNoDa
   }
 
   if (!hasUserDataViews && dataExists) {
-    return <NoDataViewsPrompt onDataViewCreated={onDataViewCreated} />;
+    return (
+      <NoDataViewsPrompt
+        onDataViewCreated={onDataViewCreated}
+        allowAdHocDataView={allowAdHocDataView}
+      />
+    );
   }
 
   if (!dataExists) {

packages/shared-ux/page/kibana_no_data/types/index.d.ts

@@ -22,6 +22,8 @@ export interface Services {
   hasESData: () => Promise<boolean>;
   /** True if Kibana instance contains user-created data view, false otherwise. */
   hasUserDataView: () => Promise<boolean>;
+  /** if set to true allows creation of an ad-hoc data view from data view editor */
+  allowAdHocDataView?: boolean;
 }
 
 /**
@@ -53,4 +55,6 @@ export interface KibanaNoDataPageProps {
   onDataViewCreated: (dataView: unknown) => void;
   /** `NoDataPage` configuration; see `NoDataPageProps`. */
   noDataConfig: NoDataPageProps;
+  /** if set to true allows creation of an ad-hoc dataview from data view editor */
+  allowAdHocDataView?: boolean;
 }

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

@@ -24,7 +24,10 @@ type CloseDataViewEditorFn = ReturnType<NoDataViewsPromptServices['openDataViewE
  *
  * Use of this component requires both the `EuiTheme` context as well as a `NoDataViewsPrompt` provider.
  */
-export const NoDataViewsPrompt = ({ onDataViewCreated }: NoDataViewsPromptProps) => {
+export const NoDataViewsPrompt = ({
+  onDataViewCreated,
+  allowAdHocDataView = false,
+}: NoDataViewsPromptProps) => {
   const { canCreateNewDataView, openDataViewEditor, dataViewsDocLink } = useServices();
   const closeDataViewEditor = useRef<CloseDataViewEditorFn>();
 
@@ -54,12 +57,19 @@ export const NoDataViewsPrompt = ({ onDataViewCreated }: NoDataViewsPromptProps)
       onSave: (dataView) => {
         onDataViewCreated(dataView);
       },
+      allowAdHocDataView,
     });
 
     if (setDataViewEditorRef) {
       setDataViewEditorRef(ref);
     }
-  }, [canCreateNewDataView, openDataViewEditor, setDataViewEditorRef, onDataViewCreated]);
+  }, [
+    canCreateNewDataView,
+    openDataViewEditor,
+    allowAdHocDataView,
+    setDataViewEditorRef,
+    onDataViewCreated,
+  ]);
 
   return (
     <NoDataViewsPromptComponent {...{ onClickCreate, canCreateNewDataView, dataViewsDocLink }} />

packages/shared-ux/prompt/no_data_views/types/index.d.ts

@@ -26,6 +26,8 @@ type DataView = unknown;
 interface DataViewEditorOptions {
   /** Handler to be invoked when the Data View Editor completes a save operation. */
   onSave: (dataView: DataView) => void;
+  /** if set to true allows creation of an ad-hoc data view from data view editor */
+  allowAdHocDataView?: boolean;
 }
 
 /**
@@ -75,4 +77,6 @@ export interface NoDataViewsPromptComponentProps {
 export interface NoDataViewsPromptProps {
   /** Handler for successfully creating a new data view. */
   onDataViewCreated: (dataView: unknown) => void;
+  /** if set to true allows creation of an ad-hoc data view from data view editor */
+  allowAdHocDataView?: boolean;
 }