Modify the button of selectable component to fix the title overflow i…

…ssue

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>

CHANGELOG.md

@@ -117,6 +117,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][Multiple Datasource]Read hideLocalCluster setting from yml and set in data source selector and data source menu ([#6361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6361))
 - [BUG][Multiple Datasource] Refactor read-only component to cover more edge cases ([#6416](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6416))
 - [BUG] Fix for checkForFunctionProperty so that order does not matter ([#6248](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6248))
+- [BUG][Multiple Datasource] Modify the button of selectable component to fix the title overflow issue ([#6465](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6465))
 - [BUG][Multiple Datasource] Validation succeed as long as status code in response is 200 ([#6399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6399))
 
 ### 🚞 Infrastructure

src/plugins/data_source_management/public/components/button_title.scss

@@ -0,0 +1,7 @@
+.dataSourceComponentButtonTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: auto;
+  max-width: 16ch;
+}

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

@@ -26,6 +26,7 @@ import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
+import '../button_title.scss';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -227,7 +228,7 @@ export class DataSourceSelectable extends React.Component<
     const button = (
       <>
         <EuiButtonEmpty
-          className="euiHeaderLink"
+          className={`euiHeaderLink dataSourceComponentButtonTitle`}
           onClick={this.onClick.bind(this)}
           data-test-subj="dataSourceSelectableContextMenuHeaderLink"
           aria-label={i18n.translate('dataSourceSelectable.dataSourceOptionsButtonAriaLabel', {