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(<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} />);
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<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;