[Discover-next] (QueryEditorExtensions) change isEnabled to an observable

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;