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

…ssue (#6465) * Modify the button of selectable component to fix the title overflow issue Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com> * update snapshot Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com> --------- Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com> (cherry picked from commit b619ccb)
opensearch-project · Apr 18, 2024 · d33fbf8 · d33fbf8
1 parent b275b4e
commit d33fbf8
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -66,6 +66,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add api registry and allow it to be added into client config in data source plugin ([#5895](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5895))
 - [Multiple Datasource] Refactor client and legacy client to use authentication registry ([#5881](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5881))
 
+
 ### 🐛 Bug Fixes
 
 - [Chore] Update deprecated url methods (url.parse(), url.format()) ([#2910](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2910))
@@ -86,6 +87,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG] Remove duplicate sample data as id 90943e30-9a47-11e8-b64d-95841ca0b247 ([5668](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5668))
 - [BUG][Multiple Datasource] Fix datasource testing connection unexpectedly passed with wrong endpoint [#5663](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5663)
 - [BUG][Multiple Datasource] Fix missing customApiRegistryPromise param for test connection ([#5944](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5944))
+- [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))
 
 
 ### 🚞 Infrastructure

diff --git a/src/plugins/data_source_management/public/components/button_title.scss b/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;
+}
diff --git a/...nt/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/...nt/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
diff --git a/...blic/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/...blic/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
diff --git a/...ata_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/...ata_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -37,8 +37,9 @@ import {
 } from '../data_source_menu/types';
 import { DataSourceErrorMenu } from '../data_source_error_menu';
 import { DataSourceItem } from '../data_source_item';
-import './data_source_selectable.scss';
 import { DataSourceDropDownHeader } from '../drop_down_header';
+import '../button_title.scss';
+import './data_source_selectable.scss';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -248,7 +249,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', {