From 774f64ed887f8a86af10423bb66b5128dd14c40e Mon Sep 17 00:00:00 2001 From: Joshua Li Date: Mon, 8 Jul 2024 14:19:55 -0700 Subject: [PATCH] [Discover-next] (QueryEditorExtensions) change isEnabled to an observable (#7183) * (QueryEditorExtensions) change isEnabled to an observable Signed-off-by: Joshua Li * rename search bar extension to query editor extension in comments Signed-off-by: Joshua Li * Changeset file for PR #7183 created/updated --------- Signed-off-by: Joshua Li Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/7183.yml | 2 ++ .../query_editor_extension.test.tsx | 7 ++++--- .../query_editor_extension.tsx | 18 ++++++++++-------- 3 files changed, 16 insertions(+), 11 deletions(-) create mode 100644 changelogs/fragments/7183.yml diff --git a/changelogs/fragments/7183.yml b/changelogs/fragments/7183.yml new file mode 100644 index 000000000000..f3fc5235226d --- /dev/null +++ b/changelogs/fragments/7183.yml @@ -0,0 +1,2 @@ +feat: +- [QueryEditorExtensions] change `isEnabled` to an observable ([#7183](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7183)) \ No newline at end of file diff --git a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.test.tsx b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.test.tsx index b3c8747e833d..6ff348fbf3bd 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.test.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.test.tsx @@ -5,6 +5,7 @@ import { render, waitFor } from '@testing-library/react'; import React, { ComponentProps } from 'react'; +import { of } from 'rxjs'; import { IIndexPattern } from '../../../../common'; import { QueryEditorExtension } from './query_editor_extension'; @@ -39,7 +40,7 @@ describe('QueryEditorExtension', () => { config: { id: 'test-extension', order: 1, - isEnabled: isEnabledMock, + isEnabled$: isEnabledMock, getComponent: getComponentMock, getBanner: getBannerMock, }, @@ -56,7 +57,7 @@ describe('QueryEditorExtension', () => { }); it('renders correctly when isEnabled is true', async () => { - isEnabledMock.mockResolvedValue(true); + isEnabledMock.mockReturnValue(of(true)); getComponentMock.mockReturnValue(
Test Component
); getBannerMock.mockReturnValue(
Test Banner
); @@ -72,7 +73,7 @@ describe('QueryEditorExtension', () => { }); it('does not render when isEnabled is false', async () => { - isEnabledMock.mockResolvedValue(false); + isEnabledMock.mockReturnValue(of(false)); getComponentMock.mockReturnValue(
Test Component
); const { queryByText } = render(); diff --git a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx index 30b02f0f15dc..f684aebea1d9 100644 --- a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx +++ b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx @@ -6,6 +6,7 @@ import { EuiErrorBoundary } from '@elastic/eui'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import ReactDOM from 'react-dom'; +import { Observable } from 'rxjs'; import { IIndexPattern } from '../../../../common'; import { DataSource } from '../../../data_sources/datasource'; @@ -33,7 +34,7 @@ export interface QueryEditorExtensionDependencies { export interface QueryEditorExtensionConfig { /** - * The id for the search bar extension. + * The id for the query editor extension. */ id: string; /** @@ -41,22 +42,22 @@ export interface QueryEditorExtensionConfig { */ order: number; /** - * A function that determines if the search bar extension is enabled and should be rendered on UI. + * A function that determines if the query editor extension is enabled and should be rendered on UI. * @returns whether the extension is enabled. */ - isEnabled: (dependencies: QueryEditorExtensionDependencies) => Promise; + isEnabled$: (dependencies: QueryEditorExtensionDependencies) => Observable; /** - * A function that returns the search bar extension component. The component + * A function that returns the query editor extension component. The component * will be displayed on top of the query editor in the search bar. * @param dependencies - The dependencies required for the extension. - * @returns The component the search bar extension. + * @returns The component the query editor extension. */ getComponent?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; /** - * A function that returns the search bar extension banner. The banner is a + * A function that returns the query editor extension banner. The banner is a * component that will be displayed on top of the search bar. * @param dependencies - The dependencies required for the extension. - * @returns The component the search bar extension. + * @returns The component the query editor extension. */ getBanner?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; } @@ -92,9 +93,10 @@ export const QueryEditorExtension: React.FC = (props) }, []); useEffect(() => { - props.config.isEnabled(props.dependencies).then((enabled) => { + const subscription = props.config.isEnabled$(props.dependencies).subscribe((enabled) => { if (isMounted.current) setIsEnabled(enabled); }); + return () => subscription.unsubscribe(); }, [props.dependencies, props.config]); if (!isEnabled) return null;