From 102c2070251e812dafb512f1518858886fc8d750 Mon Sep 17 00:00:00 2001 From: Devon Thomson Date: Mon, 29 Apr 2024 15:28:48 -0400 Subject: [PATCH] [Embeddables Rebuild] Example aesthetics (#181920) Slight aesthetic changes to the example embeddables --- .../data_table/create_data_table_action.ts | 4 +- ...ing.ts => embeddable_examples_grouping.ts} | 3 +- .../create_eui_markdown_action.tsx | 4 +- .../field_list/create_field_list_action.tsx | 4 +- .../register_add_search_panel_action.tsx | 4 +- .../search/search_react_embeddable.tsx | 73 +++++++++++++------ 6 files changed, 59 insertions(+), 33 deletions(-) rename examples/embeddable_examples/public/react_embeddables/{add_panel_grouping.ts => embeddable_examples_grouping.ts} (84%) diff --git a/examples/embeddable_examples/public/react_embeddables/data_table/create_data_table_action.ts b/examples/embeddable_examples/public/react_embeddables/data_table/create_data_table_action.ts index 3d0c99289b121..9971535e148dd 100644 --- a/examples/embeddable_examples/public/react_embeddables/data_table/create_data_table_action.ts +++ b/examples/embeddable_examples/public/react_embeddables/data_table/create_data_table_action.ts @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { apiIsPresentationContainer } from '@kbn/presentation-containers'; import { EmbeddableApiContext } from '@kbn/presentation-publishing'; import { IncompatibleActionError, UiActionsStart } from '@kbn/ui-actions-plugin/public'; -import { addPanelGrouping } from '../add_panel_grouping'; +import { embeddableExamplesGrouping } from '../embeddable_examples_grouping'; import { ADD_DATA_TABLE_ACTION_ID, DATA_TABLE_ID } from './constants'; // ----------------------------------------------------------------------------- @@ -20,7 +20,7 @@ import { ADD_DATA_TABLE_ACTION_ID, DATA_TABLE_ID } from './constants'; export const registerCreateDataTableAction = (uiActions: UiActionsStart) => { uiActions.registerAction({ id: ADD_DATA_TABLE_ACTION_ID, - grouping: [addPanelGrouping], + grouping: [embeddableExamplesGrouping], getIconType: () => 'tableDensityNormal', isCompatible: async ({ embeddable }) => { return apiIsPresentationContainer(embeddable); diff --git a/examples/embeddable_examples/public/react_embeddables/add_panel_grouping.ts b/examples/embeddable_examples/public/react_embeddables/embeddable_examples_grouping.ts similarity index 84% rename from examples/embeddable_examples/public/react_embeddables/add_panel_grouping.ts rename to examples/embeddable_examples/public/react_embeddables/embeddable_examples_grouping.ts index 2c043569d5cfb..fa2ecd03b5d25 100644 --- a/examples/embeddable_examples/public/react_embeddables/add_panel_grouping.ts +++ b/examples/embeddable_examples/public/react_embeddables/embeddable_examples_grouping.ts @@ -6,7 +6,8 @@ * Side Public License, v 1. */ -export const addPanelGrouping = { +export const embeddableExamplesGrouping = { id: 'embeddableExamples', + getIconType: () => 'documentation', getDisplayName: () => 'Embeddable examples', }; diff --git a/examples/embeddable_examples/public/react_embeddables/eui_markdown/create_eui_markdown_action.tsx b/examples/embeddable_examples/public/react_embeddables/eui_markdown/create_eui_markdown_action.tsx index cd95ba582d2d1..81c23a4d960b8 100644 --- a/examples/embeddable_examples/public/react_embeddables/eui_markdown/create_eui_markdown_action.tsx +++ b/examples/embeddable_examples/public/react_embeddables/eui_markdown/create_eui_markdown_action.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { apiCanAddNewPanel } from '@kbn/presentation-containers'; import { EmbeddableApiContext } from '@kbn/presentation-publishing'; import { IncompatibleActionError, UiActionsStart } from '@kbn/ui-actions-plugin/public'; -import { addPanelGrouping } from '../add_panel_grouping'; +import { embeddableExamplesGrouping } from '../embeddable_examples_grouping'; import { ADD_EUI_MARKDOWN_ACTION_ID, EUI_MARKDOWN_ID } from './constants'; import { MarkdownEditorSerializedState } from './types'; @@ -21,7 +21,7 @@ import { MarkdownEditorSerializedState } from './types'; export const registerCreateEuiMarkdownAction = (uiActions: UiActionsStart) => { uiActions.registerAction({ id: ADD_EUI_MARKDOWN_ACTION_ID, - grouping: [addPanelGrouping], + grouping: [embeddableExamplesGrouping], getIconType: () => 'editorCodeBlock', isCompatible: async ({ embeddable }) => { return apiCanAddNewPanel(embeddable); diff --git a/examples/embeddable_examples/public/react_embeddables/field_list/create_field_list_action.tsx b/examples/embeddable_examples/public/react_embeddables/field_list/create_field_list_action.tsx index 7aa799a55f6e2..e05868e7737d1 100644 --- a/examples/embeddable_examples/public/react_embeddables/field_list/create_field_list_action.tsx +++ b/examples/embeddable_examples/public/react_embeddables/field_list/create_field_list_action.tsx @@ -11,14 +11,14 @@ import { apiCanAddNewPanel } from '@kbn/presentation-containers'; import { EmbeddableApiContext } from '@kbn/presentation-publishing'; import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public'; import { UiActionsPublicStart } from '@kbn/ui-actions-plugin/public/plugin'; +import { embeddableExamplesGrouping } from '../embeddable_examples_grouping'; import { ADD_FIELD_LIST_ACTION_ID, FIELD_LIST_ID } from './constants'; import { FieldListSerializedStateState } from './types'; -import { addPanelGrouping } from '../add_panel_grouping'; export const registerCreateFieldListAction = (uiActions: UiActionsPublicStart) => { uiActions.registerAction({ id: ADD_FIELD_LIST_ACTION_ID, - grouping: [addPanelGrouping], + grouping: [embeddableExamplesGrouping], getIconType: () => 'indexOpen', isCompatible: async ({ embeddable }) => { return apiCanAddNewPanel(embeddable); diff --git a/examples/embeddable_examples/public/react_embeddables/search/register_add_search_panel_action.tsx b/examples/embeddable_examples/public/react_embeddables/search/register_add_search_panel_action.tsx index cb20f288bf032..18bd40fe69dae 100644 --- a/examples/embeddable_examples/public/react_embeddables/search/register_add_search_panel_action.tsx +++ b/examples/embeddable_examples/public/react_embeddables/search/register_add_search_panel_action.tsx @@ -9,14 +9,14 @@ import { apiCanAddNewPanel } from '@kbn/presentation-containers'; import { EmbeddableApiContext } from '@kbn/presentation-publishing'; import { IncompatibleActionError, UiActionsStart } from '@kbn/ui-actions-plugin/public'; -import { addPanelGrouping } from '../add_panel_grouping'; +import { embeddableExamplesGrouping } from '../embeddable_examples_grouping'; import { ADD_SEARCH_ACTION_ID, SEARCH_EMBEDDABLE_ID } from './constants'; import { SearchSerializedState } from './types'; export const registerAddSearchPanelAction = (uiActions: UiActionsStart) => { uiActions.registerAction({ id: ADD_SEARCH_ACTION_ID, - grouping: [addPanelGrouping], + grouping: [embeddableExamplesGrouping], getDisplayName: () => 'Search example', getIconType: () => 'search', isCompatible: async ({ embeddable }) => { diff --git a/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx index 3664c1cb4a411..2b789a17da4ae 100644 --- a/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx +++ b/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx @@ -6,14 +6,17 @@ * Side Public License, v 1. */ -import { EuiCallOut } from '@elastic/eui'; +import { EuiBadge, EuiStat } from '@elastic/eui'; +import { css } from '@emotion/react'; import { DataView } from '@kbn/data-views-plugin/common'; import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public'; +import { i18n } from '@kbn/i18n'; import { - initializeTimeRange, fetch$, + initializeTimeRange, useBatchedPublishingSubjects, } from '@kbn/presentation-publishing'; +import { euiThemeVars } from '@kbn/ui-theme'; import React, { useEffect } from 'react'; import { BehaviorSubject, switchMap, tap } from 'rxjs'; import { SEARCH_EMBEDDABLE_ID } from './constants'; @@ -31,10 +34,22 @@ export const getSearchEmbeddableFactory = (services: Services) => { defaultDataView ? [defaultDataView] : undefined ); const dataLoading$ = new BehaviorSubject(false); + const blockingError$ = new BehaviorSubject(undefined); + + if (!defaultDataView) { + blockingError$.next( + new Error( + i18n.translate('embeddableExamples.search.noDataViewError', { + defaultMessage: 'Please install a data view to view this example', + }) + ) + ); + } const api = buildApi( { ...timeRange.api, + blockingError: blockingError$, dataViews: dataViews$, dataLoading: dataLoading$, serializeState: () => { @@ -51,7 +66,6 @@ export const getSearchEmbeddableFactory = (services: Services) => { } ); - const error$ = new BehaviorSubject(undefined); const count$ = new BehaviorSubject(0); let prevRequestAbortController: AbortController | undefined; const fetchSubscription = fetch$(api) @@ -62,7 +76,7 @@ export const getSearchEmbeddableFactory = (services: Services) => { } }), switchMap(async (fetchContext) => { - error$.next(undefined); + blockingError$.next(undefined); if (!defaultDataView) { return; } @@ -101,14 +115,14 @@ export const getSearchEmbeddableFactory = (services: Services) => { count$.next(next.count); } if (next && next.hasOwnProperty('error')) { - error$.next(next.error); + blockingError$.next(next.error); } }); return { api, Component: () => { - const [count, error] = useBatchedPublishingSubjects(count$, error$); + const [count, error] = useBatchedPublishingSubjects(count$, blockingError$); useEffect(() => { return () => { @@ -116,26 +130,37 @@ export const getSearchEmbeddableFactory = (services: Services) => { }; }, []); - if (!defaultDataView) { - return ( - -

Please install a sample data set to run example.

- - ); - } - - if (error) { - return ( - -

{error.message}

- - ); - } + // in error case we can return null because the panel will handle rendering the blocking error. + if (error || !defaultDataView) return null; return ( -

- Found {count} from {defaultDataView.name} -

+
+ + + {i18n.translate('embeddableExamples.search.dataViewName', { + defaultMessage: '{dataViewName}', + values: { dataViewName: defaultDataView.name }, + })} + + + } + titleSize="l" + > + {i18n.translate('embeddableExamples.search.result', { + defaultMessage: '{count, plural, one {document} other {documents}} found', + values: { count }, + })} + +
); }, };