diff --git a/changelogs/fragments/6678.yml b/changelogs/fragments/6678.yml
new file mode 100644
index 000000000000..46e9568f5653
--- /dev/null
+++ b/changelogs/fragments/6678.yml
@@ -0,0 +1,2 @@
+fix:
+- [MDS] Add a new message to data source components when there are no compatible datasources ([#6678](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6678))
\ No newline at end of file
diff --git a/src/plugins/data_source_management/public/components/constants.tsx b/src/plugins/data_source_management/public/components/constants.tsx
index 0d22aed50179..720e2d175867 100644
--- a/src/plugins/data_source_management/public/components/constants.tsx
+++ b/src/plugins/data_source_management/public/components/constants.tsx
@@ -12,3 +12,8 @@ export const LocalCluster: DataSourceOption = {
   }),
   id: '',
 };
+
+export const NO_DATASOURCES_CONNECTED_MESSAGE = 'No data sources connected yet.';
+export const CONNECT_DATASOURCES_MESSAGE = 'Connect your data sources to get started.';
+export const NO_COMPATIBLE_DATASOURCES_MESSAGE = 'No compatible data sources are available.';
+export const ADD_COMPATIBLE_DATASOURCES_MESSAGE = 'Add a compatible data source.';
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx
index f7493ff843be..43b22ed219ee 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx
@@ -5,8 +5,9 @@
 
 import { ShallowWrapper, shallow } from 'enzyme';
 import React from 'react';
+import { i18n } from '@osd/i18n';
 import { DataSourceAggregatedView } from './data_source_aggregated_view';
-import { SavedObject, SavedObjectsClientContract } from '../../../../../core/public';
+import { IToasts, SavedObject, SavedObjectsClientContract } from '../../../../../core/public';
 import {
   applicationServiceMock,
   notificationServiceMock,
@@ -21,6 +22,12 @@ import {
 import * as utils from '../utils';
 import { EuiSelectable, EuiSwitch } from '@elastic/eui';
 import { DataSourceAttributes } from '../../types';
+import {
+  ADD_COMPATIBLE_DATASOURCES_MESSAGE,
+  CONNECT_DATASOURCES_MESSAGE,
+  NO_COMPATIBLE_DATASOURCES_MESSAGE,
+  NO_DATASOURCES_CONNECTED_MESSAGE,
+} from '../constants';
 
 describe('DataSourceAggregatedView: read all view (displayAllCompatibleDataSources is set to true)', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -409,6 +416,7 @@ describe('DataSourceAggregatedView empty state test due to filter out with local
           dataSourceFilter={filter}
         />
       );
+      const noCompatibleDataSourcesMessage = `${NO_COMPATIBLE_DATASOURCES_MESSAGE} ${ADD_COMPATIBLE_DATASOURCES_MESSAGE}`;
 
       expect(component).toMatchSnapshot();
       await nextTick();
@@ -416,7 +424,7 @@ describe('DataSourceAggregatedView empty state test due to filter out with local
       expect(toasts.add.mock.calls[0][0]).toEqual({
         color: 'warning',
         text: expect.any(Function),
-        title: 'No data sources connected yet. Connect your data sources to get started.',
+        title: noCompatibleDataSourcesMessage,
       });
       expect(component.state('showEmptyState')).toBe(true);
       await nextTick();
@@ -502,3 +510,64 @@ describe('DataSourceAggregatedView error state test no matter hide local cluster
     }
   );
 });
+
+describe('DataSourceAggregatedView warning messages', () => {
+  const client = {} as any;
+  const uiSettings = uiSettingsServiceMock.createStartContract();
+  const nextTick = () => new Promise((res) => process.nextTick(res));
+  let toasts: IToasts;
+  const noDataSourcesConnectedMessage = `${NO_DATASOURCES_CONNECTED_MESSAGE} ${CONNECT_DATASOURCES_MESSAGE}`;
+  const noCompatibleDataSourcesMessage = `${NO_COMPATIBLE_DATASOURCES_MESSAGE} ${ADD_COMPATIBLE_DATASOURCES_MESSAGE}`;
+
+  beforeEach(() => {
+    toasts = notificationServiceMock.createStartContract().toasts;
+    mockUiSettingsCalls(uiSettings, 'get', 'test1');
+  });
+
+  it.each([
+    {
+      findFunc: jest.fn().mockResolvedValue(getDataSourcesWithFieldsResponse),
+      defaultMessage: noCompatibleDataSourcesMessage,
+      activeDataSourceIds: ['test2'],
+    },
+    {
+      findFunc: jest.fn().mockResolvedValue({ savedObjects: [] }),
+      defaultMessage: noDataSourcesConnectedMessage,
+      activeDataSourceIds: ['test2'],
+    },
+    {
+      findFunc: jest.fn().mockResolvedValue(getDataSourcesWithFieldsResponse),
+      defaultMessage: noCompatibleDataSourcesMessage,
+      activeDataSourceIds: undefined,
+    },
+    {
+      findFunc: jest.fn().mockResolvedValue({ savedObjects: [] }),
+      defaultMessage: noDataSourcesConnectedMessage,
+      activeDataSourceIds: undefined,
+    },
+  ])(
+    'should display correct warning message when no datasource selections are available and local cluster is hidden',
+    async ({ findFunc, defaultMessage, activeDataSourceIds }) => {
+      client.find = findFunc;
+      shallow(
+        <DataSourceAggregatedView
+          fullWidth={false}
+          hideLocalCluster={true}
+          savedObjectsClient={client}
+          notifications={toasts}
+          displayAllCompatibleDataSources={!!!activeDataSourceIds}
+          activeDataSourceIds={activeDataSourceIds}
+          dataSourceFilter={(_) => false}
+          uiSettings={uiSettings}
+        />
+      );
+      await nextTick();
+
+      expect(toasts.add).toBeCalledWith(
+        expect.objectContaining({
+          title: i18n.translate('dataSource.noAvailableDataSourceError', { defaultMessage }),
+        })
+      );
+    }
+  );
+});
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
index 00eacb2ea844..8d8cd2ed0ef9 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
@@ -45,6 +45,7 @@ interface DataSourceAggregatedViewState extends DataSourceBaseState {
   allDataSourcesIdToTitleMap: Map<string, any>;
   switchChecked: boolean;
   defaultDataSource: string | null;
+  incompatibleDataSourcesExist: boolean;
 }
 
 interface DataSourceOptionDisplay extends DataSourceOption {
@@ -68,6 +69,7 @@ export class DataSourceAggregatedView extends React.Component<
       showError: false,
       switchChecked: false,
       defaultDataSource: null,
+      incompatibleDataSourcesExist: false,
     };
   }
 
@@ -113,11 +115,12 @@ export class DataSourceAggregatedView extends React.Component<
         }
 
         if (allDataSourcesIdToTitleMap.size === 0) {
-          handleNoAvailableDataSourceError(
-            this.onEmptyState.bind(this),
-            this.props.notifications,
-            this.props.application
-          );
+          handleNoAvailableDataSourceError({
+            changeState: this.onEmptyState.bind(this, !!fetchedDataSources?.length),
+            notifications: this.props.notifications,
+            application: this.props.application,
+            incompatibleDataSourcesExist: !!fetchedDataSources?.length,
+          });
           return;
         }
 
@@ -133,8 +136,8 @@ export class DataSourceAggregatedView extends React.Component<
       });
   }
 
-  onEmptyState() {
-    this.setState({ showEmptyState: true });
+  onEmptyState(incompatibleDataSourcesExist: boolean) {
+    this.setState({ showEmptyState: true, incompatibleDataSourcesExist });
   }
 
   onError() {
@@ -143,7 +146,12 @@ export class DataSourceAggregatedView extends React.Component<
 
   render() {
     if (this.state.showEmptyState) {
-      return <NoDataSource application={this.props.application} />;
+      return (
+        <NoDataSource
+          application={this.props.application}
+          incompatibleDataSourcesExist={this.state.incompatibleDataSourcesExist}
+        />
+      );
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu application={this.props.application} />;
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
index 85506ec84b61..481df093d741 100644
--- a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
@@ -34,6 +34,7 @@ interface DataSourceMultiSeletableState extends DataSourceBaseState {
   dataSourceOptions: SelectedDataSourceOption[];
   selectedOptions: SelectedDataSourceOption[];
   defaultDataSource: string | null;
+  incompatibleDataSourcesExist: boolean;
 }
 
 export class DataSourceMultiSelectable extends React.Component<
@@ -51,6 +52,7 @@ export class DataSourceMultiSelectable extends React.Component<
       defaultDataSource: null,
       showEmptyState: false,
       showError: false,
+      incompatibleDataSourcesExist: false,
     };
   }
 
@@ -90,12 +92,13 @@ export class DataSourceMultiSelectable extends React.Component<
       if (!this._isMounted) return;
 
       if (selectedOptions.length === 0) {
-        handleNoAvailableDataSourceError(
-          this.onEmptyState.bind(this),
-          this.props.notifications,
-          this.props.application,
-          this.props.onSelectedDataSources
-        );
+        handleNoAvailableDataSourceError({
+          changeState: this.onEmptyState.bind(this, !!fetchedDataSources?.length),
+          notifications: this.props.notifications,
+          application: this.props.application,
+          callback: this.props.onSelectedDataSources,
+          incompatibleDataSourcesExist: !!fetchedDataSources?.length,
+        });
         return;
       }
 
@@ -115,8 +118,8 @@ export class DataSourceMultiSelectable extends React.Component<
     }
   }
 
-  onEmptyState() {
-    this.setState({ showEmptyState: true });
+  onEmptyState(incompatibleDataSourcesExist: boolean) {
+    this.setState({ showEmptyState: true, incompatibleDataSourcesExist });
   }
 
   onError() {
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
index f1cef722c3c1..6521aaddb258 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -4,6 +4,7 @@
  */
 
 import { ShallowWrapper, shallow, mount } from 'enzyme';
+import { i18n } from '@osd/i18n';
 import { SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
@@ -12,6 +13,12 @@ import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
 import { render } from '@testing-library/react';
 import * as utils from '../utils';
+import {
+  NO_DATASOURCES_CONNECTED_MESSAGE,
+  CONNECT_DATASOURCES_MESSAGE,
+  NO_COMPATIBLE_DATASOURCES_MESSAGE,
+  ADD_COMPATIBLE_DATASOURCES_MESSAGE,
+} from '../constants';
 
 describe('DataSourceSelectable', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -19,6 +26,8 @@ describe('DataSourceSelectable', () => {
   let client: SavedObjectsClientContract;
   const { toasts } = notificationServiceMock.createStartContract();
   const nextTick = () => new Promise((res) => process.nextTick(res));
+  const noDataSourcesConnectedMessage = `${NO_DATASOURCES_CONNECTED_MESSAGE} ${CONNECT_DATASOURCES_MESSAGE}`;
+  const noCompatibleDataSourcesMessage = `${NO_COMPATIBLE_DATASOURCES_MESSAGE} ${ADD_COMPATIBLE_DATASOURCES_MESSAGE}`;
 
   beforeEach(() => {
     client = {
@@ -145,6 +154,7 @@ describe('DataSourceSelectable', () => {
         },
       ],
       showError: false,
+      incompatibleDataSourcesExist: false,
     });
 
     containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
@@ -167,6 +177,7 @@ describe('DataSourceSelectable', () => {
         },
       ],
       showError: false,
+      incompatibleDataSourcesExist: false,
     });
 
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
@@ -345,6 +356,7 @@ describe('DataSourceSelectable', () => {
         },
       ],
       showError: false,
+      incompatibleDataSourcesExist: false,
     });
   });
 
@@ -374,6 +386,7 @@ describe('DataSourceSelectable', () => {
       selectedOption: [],
       showEmptyState: false,
       showError: true,
+      incompatibleDataSourcesExist: false,
     });
 
     containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
@@ -396,27 +409,59 @@ describe('DataSourceSelectable', () => {
         },
       ],
       showError: true,
+      incompatibleDataSourcesExist: false,
     });
 
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
     expect(onSelectedDataSource).toHaveBeenCalled();
   });
-  it('should render no data source when no data source filtered out and hide local cluster', async () => {
-    const onSelectedDataSource = jest.fn();
-    render(
-      <DataSourceSelectable
-        savedObjectsClient={client}
-        notifications={toasts}
-        onSelectedDataSources={onSelectedDataSource}
-        disabled={false}
-        hideLocalCluster={true}
-        fullWidth={false}
-        selectedOption={[{ id: 'test2' }]}
-        dataSourceFilter={(ds) => false}
-      />
-    );
-    await nextTick();
-    expect(toasts.add).toBeCalled();
-    expect(onSelectedDataSource).toBeCalledWith([]);
-  });
+
+  it.each([
+    {
+      findFunc: jest.fn().mockResolvedValue({ savedObjects: [] }),
+      defaultMessage: noDataSourcesConnectedMessage,
+      selectedOption: undefined,
+    },
+    {
+      findFunc: jest.fn().mockResolvedValue({ savedObjects: [] }),
+      defaultMessage: noDataSourcesConnectedMessage,
+      selectedOption: [{ id: 'test2' }],
+    },
+    {
+      findFunc: jest.fn().mockResolvedValue(getDataSourcesWithFieldsResponse),
+      defaultMessage: noCompatibleDataSourcesMessage,
+      selectedOption: undefined,
+    },
+    {
+      findFunc: jest.fn().mockResolvedValue(getDataSourcesWithFieldsResponse),
+      defaultMessage: noCompatibleDataSourcesMessage,
+      selectedOption: [{ id: 'test2' }],
+    },
+  ])(
+    'should render correct message when there are no datasource options available and local cluster is hidden',
+    async ({ findFunc, selectedOption, defaultMessage }) => {
+      client.find = findFunc;
+      const onSelectedDataSource = jest.fn();
+      render(
+        <DataSourceSelectable
+          savedObjectsClient={client}
+          notifications={toasts}
+          onSelectedDataSources={onSelectedDataSource}
+          disabled={false}
+          hideLocalCluster={true}
+          fullWidth={false}
+          selectedOption={selectedOption}
+          dataSourceFilter={(ds) => false}
+        />
+      );
+      await nextTick();
+
+      expect(toasts.add).toBeCalledWith(
+        expect.objectContaining({
+          title: i18n.translate('dataSource.noAvailableDataSourceError', { defaultMessage }),
+        })
+      );
+      expect(onSelectedDataSource).toBeCalledWith([]);
+    }
+  );
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index 63b9eebf26c1..fd1c685676f0 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -54,8 +54,9 @@ interface DataSourceSelectableProps {
 interface DataSourceSelectableState extends DataSourceBaseState {
   dataSourceOptions: DataSourceOption[];
   isPopoverOpen: boolean;
-  selectedOption?: DataSourceOption[];
   defaultDataSource: string | null;
+  incompatibleDataSourcesExist: boolean;
+  selectedOption?: DataSourceOption[];
 }
 
 export class DataSourceSelectable extends React.Component<
@@ -74,6 +75,7 @@ export class DataSourceSelectable extends React.Component<
       defaultDataSource: null,
       showEmptyState: false,
       showError: false,
+      incompatibleDataSourcesExist: false,
     };
 
     this.onChange.bind(this);
@@ -187,12 +189,13 @@ export class DataSourceSelectable extends React.Component<
       }
 
       if (dataSourceOptions.length === 0) {
-        handleNoAvailableDataSourceError(
-          this.onEmptyState.bind(this),
-          this.props.notifications,
-          this.props.application,
-          this.props.onSelectedDataSources
-        );
+        handleNoAvailableDataSourceError({
+          changeState: this.onEmptyState.bind(this, !!fetchedDataSources?.length),
+          notifications: this.props.notifications,
+          application: this.props.application,
+          callback: this.props.onSelectedDataSources,
+          incompatibleDataSourcesExist: !!fetchedDataSources?.length,
+        });
         return;
       }
 
@@ -214,8 +217,8 @@ export class DataSourceSelectable extends React.Component<
     }
   }
 
-  onEmptyState() {
-    this.setState({ showEmptyState: true });
+  onEmptyState(incompatibleDataSourcesExist: boolean) {
+    this.setState({ showEmptyState: true, incompatibleDataSourcesExist });
   }
 
   onError() {
@@ -242,7 +245,12 @@ export class DataSourceSelectable extends React.Component<
 
   render() {
     if (this.state.showEmptyState) {
-      return <NoDataSource application={this.props.application} />;
+      return (
+        <NoDataSource
+          application={this.props.application}
+          incompatibleDataSourcesExist={this.state.incompatibleDataSourcesExist}
+        />
+      );
     }
 
     if (this.state.showError) {
diff --git a/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
index ee8f2120012f..f7f3e41b9cb5 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/no_data_source/__snapshots__/no_data_source.test.tsx.snap
@@ -83,7 +83,90 @@ exports[`NoDataSource should render correctly with the provided totalDataSourceC
 </EuiPopover>
 `;
 
-exports[`NoDataSource should render normally 1`] = `
+exports[`NoDataSource should render normally when incompatibleDataSourcesExist is %b 1`] = `
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <EuiButtonIcon
+      aria-label="dataSourceEmptyMenuHeaderLink"
+      className="euiHeaderLink"
+      data-test-subj="dataSourceEmptyMenuHeaderLink"
+      iconType={[Function]}
+      onClick={[Function]}
+      size="s"
+    />
+  }
+  closePopover={[Function]}
+  data-test-subj="dataSourceEmptyStatePopover"
+  display="inlineBlock"
+  hasArrow={true}
+  id="dataSourceEmptyStatePopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="none"
+>
+  <DataSourceDropDownHeader
+    totalDataSourceCount={0}
+  />
+  <EuiPanel
+    className="dataSourceEmptyStatePanel"
+    data-test-subj="dataSourceEmptyStatePanel"
+    hasBorder={false}
+    hasShadow={false}
+  >
+    <EuiFlexGroup
+      justifyContent="center"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiText
+          size="s"
+          textAlign="center"
+        >
+          <FormattedMessage
+            defaultMessage="No data sources connected yet."
+            id="dataSourcesManagement.dataSourceEmptyMenu.noData"
+            values={Object {}}
+          />
+        </EuiText>
+        <EuiText
+          size="s"
+          textAlign="center"
+        >
+          <FormattedMessage
+            defaultMessage="Connect your data sources to get started."
+            id="dataSourcesManagement.dataSourceEmptyMenu.connect"
+            values={Object {}}
+          />
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiFlexGroup
+      justifyContent="center"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButton
+          data-test-subj="dataSourceEmptyStateManageDataSourceButton"
+          fill={false}
+          onClick={[Function]}
+          size="s"
+        >
+          <FormattedMessage
+            defaultMessage="Manage data sources"
+            id="dataSourcesManagement.dataSourceMenu.manageDataSource"
+            values={Object {}}
+          />
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPanel>
+</EuiPopover>
+`;
+
+exports[`NoDataSource should render normally when incompatibleDataSourcesExist is %b 2`] = `
 <EuiPopover
   anchorPosition="downLeft"
   button={
diff --git a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.test.tsx b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.test.tsx
index 7dec36bda609..1ac82e364bea 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.test.tsx
+++ b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.test.tsx
@@ -16,14 +16,20 @@ describe('NoDataSource', () => {
   const nextTick = () => new Promise((res) => process.nextTick(res));
 
   it('should render correctly with the provided totalDataSourceCount', () => {
-    const wrapper = shallow(<NoDataSource totalDataSourceCount={totalDataSourceCount} />);
+    const wrapper = shallow(
+      <NoDataSource totalDataSourceCount={totalDataSourceCount} hasIncompatibleDatasource={false} />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should display popover when click "No data sources" button', async () => {
     const applicationMock = coreMock.createStart().application;
     const container = render(
-      <NoDataSource totalDataSourceCount={totalDataSourceCount} application={applicationMock} />
+      <NoDataSource
+        totalDataSourceCount={totalDataSourceCount}
+        application={applicationMock}
+        hasIncompatibleDatasource={false}
+      />
     );
 
     await nextTick();
@@ -39,7 +45,11 @@ describe('NoDataSource', () => {
     const navigateToAppMock = applicationMock.navigateToApp;
 
     const container = render(
-      <NoDataSource totalDataSourceCount={totalDataSourceCount} application={applicationMock} />
+      <NoDataSource
+        totalDataSourceCount={totalDataSourceCount}
+        application={applicationMock}
+        hasIncompatibleDatasource={false}
+      />
     );
 
     await nextTick();
@@ -55,8 +65,16 @@ describe('NoDataSource', () => {
     });
   });
 
-  it('should render normally', () => {
-    component = shallow(<NoDataSource totalDataSourceCount={0} />);
-    expect(component).toMatchSnapshot();
-  });
+  it.each([false, true])(
+    'should render normally when incompatibleDataSourcesExist is %b',
+    (incompatibleDataSourcesExist) => {
+      component = shallow(
+        <NoDataSource
+          totalDataSourceCount={0}
+          hasIncompatibleDatasource={incompatibleDataSourcesExist}
+        />
+      );
+      expect(component).toMatchSnapshot();
+    }
+  );
 });
diff --git a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
index d10efe8c4a7b..6b48a7a7a0b4 100644
--- a/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx
@@ -20,12 +20,22 @@ import { FormattedMessage } from 'react-intl';
 import { DataSourceDropDownHeader } from '../drop_down_header';
 import { DSM_APP_ID } from '../../plugin';
 import { EmptyIcon } from '../custom_database_icon';
+import {
+  ADD_COMPATIBLE_DATASOURCES_MESSAGE,
+  CONNECT_DATASOURCES_MESSAGE,
+  NO_COMPATIBLE_DATASOURCES_MESSAGE,
+  NO_DATASOURCES_CONNECTED_MESSAGE,
+} from '../constants';
 
 interface DataSourceDropDownHeaderProps {
+  incompatibleDataSourcesExist: boolean;
   application?: ApplicationStart;
 }
 
-export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({ application }) => {
+export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
+  application,
+  incompatibleDataSourcesExist,
+}) => {
   const [showPopover, setShowPopover] = useState<boolean>(false);
   const button = (
     <EuiButtonIcon
@@ -63,7 +73,11 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({ applicat
         {
           <FormattedMessage
             id="dataSourcesManagement.dataSourceEmptyMenu.noData"
-            defaultMessage="No data sources connected yet."
+            defaultMessage={
+              incompatibleDataSourcesExist
+                ? NO_COMPATIBLE_DATASOURCES_MESSAGE
+                : NO_DATASOURCES_CONNECTED_MESSAGE
+            }
           />
         }
       </EuiText>
@@ -72,7 +86,11 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({ applicat
         {
           <FormattedMessage
             id="dataSourcesManagement.dataSourceEmptyMenu.connect"
-            defaultMessage="Connect your data sources to get started."
+            defaultMessage={
+              incompatibleDataSourcesExist
+                ? ADD_COMPATIBLE_DATASOURCES_MESSAGE
+                : CONNECT_DATASOURCES_MESSAGE
+            }
           />
         }
       </EuiText>
diff --git a/src/plugins/data_source_management/public/components/utils.test.ts b/src/plugins/data_source_management/public/components/utils.test.ts
index b2628e3d3062..7e842345812e 100644
--- a/src/plugins/data_source_management/public/components/utils.test.ts
+++ b/src/plugins/data_source_management/public/components/utils.test.ts
@@ -42,10 +42,17 @@ import {
   sigV4AuthMethod,
   usernamePasswordAuthMethod,
 } from '../types';
-import { HttpStart, SavedObject } from 'opensearch-dashboards/public';
+import { HttpStart, IToasts, SavedObject } from 'opensearch-dashboards/public';
+import { i18n } from '@osd/i18n';
 import { AuthenticationMethod, AuthenticationMethodRegistry } from '../auth_registry';
 import { deepEqual } from 'assert';
 import { DataSourceAttributes } from 'src/plugins/data_source/common/data_sources';
+import {
+  ADD_COMPATIBLE_DATASOURCES_MESSAGE,
+  CONNECT_DATASOURCES_MESSAGE,
+  NO_COMPATIBLE_DATASOURCES_MESSAGE,
+  NO_DATASOURCES_CONNECTED_MESSAGE,
+} from './constants';
 
 const { savedObjects } = coreMock.createStart();
 const { uiSettings } = coreMock.createStart();
@@ -84,13 +91,40 @@ describe('DataSourceManagement: Utils.ts', () => {
   });
 
   describe('Handle no available data source error', () => {
-    const { toasts } = notificationServiceMock.createStartContract();
+    let toasts: IToasts;
+    const noDataSourcesConnectedMessage = `${NO_DATASOURCES_CONNECTED_MESSAGE} ${CONNECT_DATASOURCES_MESSAGE}`;
+    const noCompatibleDataSourcesMessage = `${NO_COMPATIBLE_DATASOURCES_MESSAGE} ${ADD_COMPATIBLE_DATASOURCES_MESSAGE}`;
 
-    test('should  send warning when data source is not available', () => {
-      const changeState = jest.fn();
-      handleNoAvailableDataSourceError(changeState, toasts);
-      expect(toasts.add).toBeCalledTimes(1);
-    });
+    beforeEach(() => {
+      toasts = notificationServiceMock.createStartContract().toasts;
+    });
+
+    test.each([
+      {
+        incompatibleDataSourcesExist: false,
+        defaultMessage: noDataSourcesConnectedMessage,
+      },
+      {
+        incompatibleDataSourcesExist: true,
+        defaultMessage: noCompatibleDataSourcesMessage,
+      },
+    ])(
+      'should send warning when data source is not available',
+      ({ incompatibleDataSourcesExist, defaultMessage }) => {
+        const changeState = jest.fn();
+        handleNoAvailableDataSourceError({
+          changeState,
+          notifications: toasts,
+          incompatibleDataSourcesExist,
+        });
+        expect(toasts.add).toBeCalledTimes(1);
+        expect(toasts.add).toBeCalledWith(
+          expect.objectContaining({
+            title: i18n.translate('dataSource.noAvailableDataSourceError', { defaultMessage }),
+          })
+        );
+      }
+    );
   });
 
   describe('Get data source by ID', () => {
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index 8f635f840aec..7a4ec06d5cfb 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -25,6 +25,12 @@ import { DataSourceGroupLabelOption } from './data_source_menu/types';
 import { createGetterSetter } from '../../../opensearch_dashboards_utils/public';
 import { toMountPoint } from '../../../opensearch_dashboards_react/public';
 import { getManageDataSourceButton, getReloadButton } from './toast_button';
+import {
+  ADD_COMPATIBLE_DATASOURCES_MESSAGE,
+  CONNECT_DATASOURCES_MESSAGE,
+  NO_COMPATIBLE_DATASOURCES_MESSAGE,
+  NO_DATASOURCES_CONNECTED_MESSAGE,
+} from './constants';
 
 export async function getDataSources(savedObjectsClient: SavedObjectsClientContract) {
   return savedObjectsClient
@@ -87,18 +93,25 @@ export async function setFirstDataSourceAsDefault(
   }
 }
 
-export function handleNoAvailableDataSourceError(
-  changeState: () => void,
-  notifications: ToastsStart,
-  application?: ApplicationStart,
-  callback?: (ds: DataSourceOption[]) => void
-) {
+export interface HandleNoAvailableDataSourceErrorProps {
+  changeState: () => void;
+  notifications: ToastsStart;
+  incompatibleDataSourcesExist: boolean;
+  application?: ApplicationStart;
+  callback?: (ds: DataSourceOption[]) => void;
+}
+
+export function handleNoAvailableDataSourceError(props: HandleNoAvailableDataSourceErrorProps) {
+  const { changeState, notifications, application, callback, incompatibleDataSourcesExist } = props;
+
+  const defaultMessage = incompatibleDataSourcesExist
+    ? `${NO_COMPATIBLE_DATASOURCES_MESSAGE} ${ADD_COMPATIBLE_DATASOURCES_MESSAGE}`
+    : `${NO_DATASOURCES_CONNECTED_MESSAGE} ${CONNECT_DATASOURCES_MESSAGE}`;
+
   changeState();
   if (callback) callback([]);
   notifications.add({
-    title: i18n.translate('dataSource.noAvailableDataSourceError', {
-      defaultMessage: 'No data sources connected yet. Connect your data sources to get started.',
-    }),
+    title: i18n.translate('dataSource.noAvailableDataSourceError', { defaultMessage }),
     text: toMountPoint(getManageDataSourceButton(application)),
     color: 'warning',
   });