[Multiple Datasource]set fixed totalcount number for empty state

CHANGELOG.md

@@ -87,6 +87,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add installedPlugins list to data source saved object ([#6348](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6348))
 - [Multiple Datasource] Add default icon in multi-selectable picker ([#6357](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6357))
 - [Multiple Datasource] Add empty state component for no connected data source ([#6499](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6499))
+- [Multiple Datasource] Set fixed totalcount number for empty state ([#6561](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6561))
 - [Multiple Datasource] Add popover for empty state and redirect to data source management page([#6514](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6514))
 - [Multiple Datasource] Update empty state font size and footer button size to small ([6549](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6549))
 - [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))

changelogs/fragments/6561.yml

@@ -0,0 +1,2 @@
+fix:
+- Set fixed totalcount number for empty state ([#6561](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6561))

src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx

@@ -14,6 +14,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
+  ApplicationStart,
   IUiSettingsClient,
   SavedObjectsClientContract,
   ToastsStart,
@@ -35,6 +36,7 @@ interface DataSourceAggregatedViewProps {
   hideLocalCluster: boolean;
   fullWidth: boolean;
   activeDataSourceIds?: string[];
+  application?: ApplicationStart;
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
   displayAllCompatibleDataSources: boolean;
   uiSettings?: IUiSettingsClient;
@@ -130,7 +132,7 @@ export class DataSourceAggregatedView extends React.Component<
 
   render() {
     if (this.state.showEmptyState) {
-      return <NoDataSource />;
+      return <NoDataSource application={this.props.application} />;
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu />;

src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx

@@ -57,6 +57,7 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
         notifications={notifications!.toasts}
         onSelectedDataSources={onSelectedDataSources!}
         uiSettings={uiSettings}
+        application={application}
       />
     );
   }
@@ -108,6 +109,7 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
         dataSourceFilter={dataSourceFilter}
         displayAllCompatibleDataSources={displayAllCompatibleDataSources}
         uiSettings={uiSettings}
+        application={application}
       />
     );
   }

src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx

@@ -4,7 +4,11 @@
  */
 
 import React from 'react';
-import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
+import {
+  ApplicationStart,
+  SavedObjectsClientContract,
+  ToastsStart,
+} from 'opensearch-dashboards/public';
 import { IUiSettingsClient } from 'src/core/public';
 import { DataSourceFilterGroup, SelectedDataSourceOption } from './data_source_filter_group';
 import { NoDataSource } from '../no_data_source';
@@ -18,6 +22,7 @@ export interface DataSourceMultiSeletableProps {
   onSelectedDataSources: (dataSources: SelectedDataSourceOption[]) => void;
   hideLocalCluster: boolean;
   fullWidth: boolean;
+  application?: ApplicationStart;
   uiSettings?: IUiSettingsClient;
 }
 
@@ -111,7 +116,7 @@ export class DataSourceMultiSelectable extends React.Component<
 
   render() {
     if (this.state.showEmptyState) {
-      return <NoDataSource />;
+      return <NoDataSource application={this.props.application} />;
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu />;

src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx

@@ -227,12 +227,7 @@ export class DataSourceSelectable extends React.Component<
 
   render() {
     if (this.state.showEmptyState) {
-      return (
-        <NoDataSource
-          totalDataSourceCount={this.state.dataSourceOptions.length}
-          application={this.props.application}
-        />
-      );
+      return <NoDataSource application={this.props.application} />;
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu />;

src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx

@@ -146,12 +146,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
 
   render() {
     if (this.state.showEmptyState) {
-      return (
-        <NoDataSource
-          totalDataSourceCount={this.state.selectedOption.length}
-          application={this.props.application}
-        />
-      );
+      return <NoDataSource application={this.props.application} />;
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu />;

src/plugins/data_source_management/public/components/no_data_source/no_data_source.tsx

@@ -21,16 +21,10 @@ import { DataSourceDropDownHeader } from '../drop_down_header';
 import { DSM_APP_ID } from '../../plugin';
 
 interface DataSourceDropDownHeaderProps {
-  totalDataSourceCount: number;
-  activeDataSourceCount?: number;
   application?: ApplicationStart;
 }
 
-export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
-  activeDataSourceCount,
-  totalDataSourceCount,
-  application,
-}) => {
+export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({ application }) => {
   const [showPopover, setShowPopover] = useState<boolean>(false);
   const label = ' No data sources';
   const button = (
@@ -83,7 +77,7 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
         {
           <FormattedMessage
             id="dataSourcesManagement.dataSourceMenu.connect"
-            defaultMessage="Connect data source to get started"
+            defaultMessage="Connect data source to get started."
           />
         }
       </EuiText>
@@ -101,11 +95,7 @@ export const NoDataSource: React.FC<DataSourceDropDownHeaderProps> = ({
       anchorPosition="downLeft"
       data-test-subj={'dataSourceEmptyStatePopover'}
     >
-      <DataSourceDropDownHeader
-        activeDataSourceCount={activeDataSourceCount}
-        totalDataSourceCount={totalDataSourceCount}
-        application={application}
-      />
+      <DataSourceDropDownHeader totalDataSourceCount={0} application={application} />
       <EuiPanel
         className={'dataSourceSelectableOuiPanel'}
         hasBorder={false}