[Backport 2.x] [Discover-next] (QueryEditorExtensions) change isEnabled to an observable

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))

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(<div>Test Component</div>);
     getBannerMock.mockReturnValue(<div>Test Banner</div>);
 
@@ -72,7 +73,7 @@ describe('QueryEditorExtension', () => {
   });
 
   it('does not render when isEnabled is false', async () => {
-    isEnabledMock.mockResolvedValue(false);
+    isEnabledMock.mockReturnValue(of(false));
     getComponentMock.mockReturnValue(<div>Test Component</div>);
 
     const { queryByText } = render(<QueryEditorExtension {...defaultProps} />);

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,30 +34,30 @@ export interface QueryEditorExtensionDependencies {
 
 export interface QueryEditorExtensionConfig {
   /**
-   * The id for the search bar extension.
+   * The id for the query editor extension.
    */
   id: string;
   /**
    * Lower order indicates higher position on UI.
    */
   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<boolean>;
+  isEnabled$: (dependencies: QueryEditorExtensionDependencies) => Observable<boolean>;
   /**
-   * 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<QueryEditorExtensionProps> = (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;