From b619ccb5fea8b23a748d74ba3dec21aabb1a7765 Mon Sep 17 00:00:00 2001
From: "Yuanqi(Ella) Zhu" <53279298+zhyuanqi@users.noreply.github.com>
Date: Tue, 16 Apr 2024 14:38:25 -0700
Subject: [PATCH] Modify the button of selectable component to fix the title
 overflow issue (#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>
---
 CHANGELOG.md                                           |  1 +
 .../public/components/button_title.scss                |  7 +++++++
 .../create_data_source_menu.test.tsx.snap              |  6 +++---
 .../__snapshots__/data_source_selectable.test.tsx.snap | 10 +++++-----
 .../data_source_selectable/data_source_selectable.tsx  |  5 +++--
 5 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 src/plugins/data_source_management/public/components/button_title.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9cf4d4b0570d..f49b43d1e946 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -124,6 +124,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [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))
 - [Dynamic Configurations] Fix dynamic config API calls to pass correct input ([#6474](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6474))
+- [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))
 - [BUG][Multiple Datasource] Add validation for title length to be no longer than 32 characters [#6452](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6452))
 
diff --git a/src/plugins/data_source_management/public/components/button_title.scss b/src/plugins/data_source_management/public/components/button_title.scss
new file mode 100644
index 000000000000..66b32d4ee8b7
--- /dev/null
+++ 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/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
index c520768a6890..c705db9194b0 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
@@ -104,7 +104,7 @@ Object {
         >
           <button
             aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
             data-test-subj="dataSourceSelectableContextMenuHeaderLink"
             type="button"
           >
@@ -136,7 +136,7 @@ Object {
       >
         <button
           aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
           data-test-subj="dataSourceSelectableContextMenuHeaderLink"
           type="button"
         >
@@ -233,7 +233,7 @@ Object {
             >
               <button
                 aria-label="dataSourceMenuButton"
-                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
                 data-test-subj="dataSourceSelectableContextMenuHeaderLink"
                 type="button"
               >
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index 4601e70491d2..8089f79d5487 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
     <React.Fragment>
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
-        className="euiHeaderLink"
+        className="euiHeaderLink dataSourceComponentButtonTitle"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
         iconSide="left"
@@ -98,7 +98,7 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
     <React.Fragment>
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
-        className="euiHeaderLink"
+        className="euiHeaderLink dataSourceComponentButtonTitle"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
         iconSide="left"
@@ -166,7 +166,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
     <React.Fragment>
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
-        className="euiHeaderLink"
+        className="euiHeaderLink dataSourceComponentButtonTitle"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
         iconSide="left"
@@ -242,7 +242,7 @@ Object {
         >
           <button
             aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
             data-test-subj="dataSourceSelectableContextMenuHeaderLink"
             type="button"
           >
@@ -411,7 +411,7 @@ Object {
       >
         <button
           aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
           data-test-subj="dataSourceSelectableContextMenuHeaderLink"
           type="button"
         >
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 47e54fae671f..4e2278c280b6 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
@@ -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', {