From 713a43ff7e39087af2a62e43a25b338543d22590 Mon Sep 17 00:00:00 2001
From: Ritvi Bhatt <ribhatt@amazon.com>
Date: Fri, 13 Dec 2024 09:12:05 -0800
Subject: [PATCH 1/4] update data source details tabs to use small buttons

Signed-off-by: Ritvi Bhatt <ribhatt@amazon.com>
---
 .../acceleration_management/acceleration_table.tsx    | 10 +++++-----
 .../acceleration_management/acceleration_utils.tsx    |  6 +++---
 .../associated_objects_tab.tsx                        |  2 +-
 .../utils/associated_objects_refresh_button.tsx       | 11 ++++++++---
 .../connection_detail/access_control_tab.tsx          |  6 +++---
 .../integrations/installed_integrations_table.tsx     |  6 +++---
 6 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx
index 5437032ee6b6..e205676cf50d 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx
@@ -4,7 +4,6 @@
  */
 
 import {
-  EuiButton,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -13,6 +12,7 @@ import {
   EuiLink,
   EuiLoadingSpinner,
   EuiPanel,
+  EuiSmallButton,
   EuiSpacer,
   EuiTableFieldDataColumnType,
   EuiText,
@@ -133,15 +133,15 @@ export const AccelerationTable = ({
 
   const RefreshButton = () => {
     return (
-      <EuiButton
+      <EuiSmallButton
         onClick={handleRefresh}
         isLoading={
           isRefreshing ||
           isCatalogCacheFetching(databasesLoadStatus, tablesLoadStatus, accelerationsLoadStatus)
         }
       >
-        Refresh
-      </EuiButton>
+        Update
+      </EuiSmallButton>
     );
   };
 
@@ -165,7 +165,7 @@ export const AccelerationTable = ({
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup direction="rowReverse" alignItems="flexEnd">
+            <EuiFlexGroup direction="rowReverse" alignItems="flexEnd" gutterSize="s">
               <EuiFlexItem grow={false}>
                 <CreateAccelerationFlyoutButton
                   dataSourceName={dataSourceName}
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_utils.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_utils.tsx
index aa49093b3473..7c7daea8410b 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_utils.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_utils.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiHealth } from '@elastic/eui';
+import { EuiHealth, EuiSmallButton } from '@elastic/eui';
 import React from 'react';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { DATA_SOURCE_TYPES } from '../../../../framework/constants';
@@ -103,7 +103,7 @@ export const CreateAccelerationFlyoutButton = ({
   dataSourceMDSId?: string;
 }) => {
   return (
-    <EuiButton
+    <EuiSmallButton
       onClick={() =>
         renderCreateAccelerationFlyout({
           dataSourceName,
@@ -114,7 +114,7 @@ export const CreateAccelerationFlyoutButton = ({
       fill
     >
       Create acceleration
-    </EuiButton>
+    </EuiSmallButton>
   );
 };
 
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/associated_objects_tab.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/associated_objects_tab.tsx
index 2f676e98b177..3592e0f43dfd 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/associated_objects_tab.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/associated_objects_tab.tsx
@@ -137,7 +137,7 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (props)
     };
 
     return (
-      <EuiFlexGroup direction="row" alignItems="center">
+      <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
         <EuiFlexItem>
           <EuiText size="s">
             <h2 className="panel-title">{panelTitle}</h2>
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/utils/associated_objects_refresh_button.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/utils/associated_objects_refresh_button.tsx
index e737a83562d8..d38ea893a5e5 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/utils/associated_objects_refresh_button.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/utils/associated_objects_refresh_button.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton } from '@elastic/eui';
+import { EuiSmallButton } from '@elastic/eui';
 import React from 'react';
 import { ASSC_OBJ_REFRESH_BTN } from './associated_objects_tab_utils';
 
@@ -18,8 +18,13 @@ export const AssociatedObjectsRefreshButton: React.FC<AssociatedObjectsRefreshBu
   const { isLoading, onClick } = props;
 
   return (
-    <EuiButton iconType="refresh" onClick={onClick} isLoading={isLoading} isDisabled={isLoading}>
+    <EuiSmallButton
+      iconType="refresh"
+      onClick={onClick}
+      isLoading={isLoading}
+      isDisabled={isLoading}
+    >
       {ASSC_OBJ_REFRESH_BTN}
-    </EuiButton>
+    </EuiSmallButton>
   );
 };
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/access_control_tab.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/access_control_tab.tsx
index e5665d4884c0..8edf2cfa70cd 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/access_control_tab.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/access_control_tab.tsx
@@ -9,7 +9,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiHorizontalRule,
-  EuiButton,
+  EuiSmallButton,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
@@ -108,12 +108,12 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="createButton"
             onClick={() => setMode(mode === 'view' ? 'edit' : 'view')}
           >
             {mode === 'view' ? 'Edit' : 'Cancel'}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/installed_integrations_table.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/installed_integrations_table.tsx
index 69070372e1cc..867bf954b477 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/installed_integrations_table.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/installed_integrations_table.tsx
@@ -13,7 +13,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFieldSearch,
-  EuiButton,
+  EuiSmallButton,
   EuiIcon,
   EuiText,
   EuiFlyout,
@@ -73,9 +73,9 @@ const AddIntegrationButton = ({
   toggleFlyout: () => void;
 }) => {
   return (
-    <EuiButton fill={fill} onClick={toggleFlyout}>
+    <EuiSmallButton fill={fill} onClick={toggleFlyout}>
       Add Integrations
-    </EuiButton>
+    </EuiSmallButton>
   );
 };
 

From a2e16c61d07e506399aacd5c924f78baec5f80f3 Mon Sep 17 00:00:00 2001
From: "opensearch-changeset-bot[bot]"
 <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Date: Fri, 13 Dec 2024 19:44:31 +0000
Subject: [PATCH 2/4] Changeset file for PR #9057 created/updated

---
 changelogs/fragments/9057.yml | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 changelogs/fragments/9057.yml

diff --git a/changelogs/fragments/9057.yml b/changelogs/fragments/9057.yml
new file mode 100644
index 000000000000..bd9d8d55c58b
--- /dev/null
+++ b/changelogs/fragments/9057.yml
@@ -0,0 +1,2 @@
+refactor:
+- Update data source details tabs to use small buttons ([#9057](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9057))
\ No newline at end of file

From 694f85ddf5192438833f9627454d23d79c0a658c Mon Sep 17 00:00:00 2001
From: Ritvi Bhatt <ribhatt@amazon.com>
Date: Fri, 13 Dec 2024 14:16:14 -0800
Subject: [PATCH 3/4] update snapshots

Signed-off-by: Ritvi Bhatt <ribhatt@amazon.com>
---
 .../acceleration_table.test.tsx.snap          |   8 +-
 ...iated_objects_refresh_button.test.tsx.snap |   4 +-
 .../access_control_tab.test.tsx.snap          |   2 +-
 ...installed_integrations_table.test.tsx.snap | 129 ++++++++++--------
 4 files changed, 78 insertions(+), 65 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/__snapshots__/acceleration_table.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/__snapshots__/acceleration_table.test.tsx.snap
index 29ee4665d5dc..7b54eab80530 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/__snapshots__/acceleration_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/__snapshots__/acceleration_table.test.tsx.snap
@@ -29,13 +29,13 @@ Array [
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRowReverse euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRowReverse euiFlexGroup--responsive"
         >
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               type="button"
             >
               <span
@@ -53,7 +53,7 @@ Array [
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               type="button"
             >
               <span
@@ -62,7 +62,7 @@ Array [
                 <span
                   class="euiButton__text"
                 >
-                  Refresh
+                  Update
                 </span>
               </span>
             </button>
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/utils/__snapshots__/associated_objects_refresh_button.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/utils/__snapshots__/associated_objects_refresh_button.test.tsx.snap
index 36127548fd1b..86740cfe3ff9 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/utils/__snapshots__/associated_objects_refresh_button.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/associated_object_management/utils/__snapshots__/associated_objects_refresh_button.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AssociatedObjectsRefreshButton renders correctly 1`] = `
-<EuiButton
+<EuiSmallButton
   iconType="refresh"
   isDisabled={false}
   isLoading={false}
   onClick={[MockFunction]}
 >
   Refresh
-</EuiButton>
+</EuiSmallButton>
 `;
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap
index 311cf24611ed..845095474ae2 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`AccessControlTab Component matches snapshot 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           data-test-subj="createButton"
           type="button"
         >
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/__snapshots__/installed_integrations_table.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/__snapshots__/installed_integrations_table.test.tsx.snap
index 923e6db4381c..15352d526d7b 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/__snapshots__/installed_integrations_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/integrations/__snapshots__/installed_integrations_table.test.tsx.snap
@@ -100,51 +100,57 @@ exports[`Installed Integrations Table test Renders the empty installed integrati
                 <AddIntegrationButton
                   toggleFlyout={[Function]}
                 >
-                  <EuiButton
+                  <EuiSmallButton
                     onClick={[Function]}
                   >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      disabled={false}
-                      element="button"
-                      isDisabled={false}
+                    <EuiButton
                       onClick={[Function]}
-                      type="button"
+                      size="s"
                     >
-                      <button
-                        className="euiButton euiButton--primary"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
                         disabled={false}
+                        element="button"
+                        isDisabled={false}
                         onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
+                        size="s"
                         type="button"
                       >
-                        <EuiButtonContent
-                          className="euiButton__content"
-                          iconGap="m"
-                          iconSide="left"
-                          textProps={
+                        <button
+                          className="euiButton euiButton--primary euiButton--small"
+                          disabled={false}
+                          onClick={[Function]}
+                          style={
                             Object {
-                              "className": "euiButton__text",
+                              "minWidth": undefined,
                             }
                           }
+                          type="button"
                         >
-                          <span
-                            className="euiButtonContent euiButton__content"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconGap="m"
+                            iconSide="left"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
                             <span
-                              className="euiButton__text"
+                              className="euiButtonContent euiButton__content"
                             >
-                              Add Integrations
+                              <span
+                                className="euiButton__text"
+                              >
+                                Add Integrations
+                              </span>
                             </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </EuiSmallButton>
                 </AddIntegrationButton>
               </div>
             </EuiFlexItem>
@@ -312,53 +318,60 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
                 fill={true}
                 toggleFlyout={[Function]}
               >
-                <EuiButton
+                <EuiSmallButton
                   fill={true}
                   onClick={[Function]}
                 >
-                  <EuiButtonDisplay
-                    baseClassName="euiButton"
-                    disabled={false}
-                    element="button"
+                  <EuiButton
                     fill={true}
-                    isDisabled={false}
                     onClick={[Function]}
-                    type="button"
+                    size="s"
                   >
-                    <button
-                      className="euiButton euiButton--primary euiButton--fill"
+                    <EuiButtonDisplay
+                      baseClassName="euiButton"
                       disabled={false}
+                      element="button"
+                      fill={true}
+                      isDisabled={false}
                       onClick={[Function]}
-                      style={
-                        Object {
-                          "minWidth": undefined,
-                        }
-                      }
+                      size="s"
                       type="button"
                     >
-                      <EuiButtonContent
-                        className="euiButton__content"
-                        iconGap="m"
-                        iconSide="left"
-                        textProps={
+                      <button
+                        className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                        disabled={false}
+                        onClick={[Function]}
+                        style={
                           Object {
-                            "className": "euiButton__text",
+                            "minWidth": undefined,
                           }
                         }
+                        type="button"
                       >
-                        <span
-                          className="euiButtonContent euiButton__content"
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconGap="m"
+                          iconSide="left"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
                         >
                           <span
-                            className="euiButton__text"
+                            className="euiButtonContent euiButton__content"
                           >
-                            Add Integrations
+                            <span
+                              className="euiButton__text"
+                            >
+                              Add Integrations
+                            </span>
                           </span>
-                        </span>
-                      </EuiButtonContent>
-                    </button>
-                  </EuiButtonDisplay>
-                </EuiButton>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </EuiSmallButton>
               </AddIntegrationButton>
             </div>
           </EuiFlexItem>

From 3703ee7cbf2f7d0ef66b507cbcf1f920beb39cb0 Mon Sep 17 00:00:00 2001
From: Ritvi Bhatt <ribhatt@amazon.com>
Date: Fri, 13 Dec 2024 15:00:38 -0800
Subject: [PATCH 4/4] update unit test

Signed-off-by: Ritvi Bhatt <ribhatt@amazon.com>
---
 .../acceleration_management/acceleration_util.test.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_util.test.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_util.test.tsx
index 65abcec1fef1..8d237ef46b94 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_util.test.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_util.test.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { EuiButton, EuiHealth } from '@elastic/eui';
+import { EuiHealth, EuiSmallButton } from '@elastic/eui';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { CachedAcceleration } from '../../../../framework/types';
 import {
@@ -136,7 +136,7 @@ describe('acceleration_utils', () => {
         />
       );
 
-      wrapper.find(EuiButton).simulate('click');
+      wrapper.find(EuiSmallButton).simulate('click');
       expect(renderCreateAccelerationFlyout).toHaveBeenCalledWith({
         dataSourceName: 'test_data_source',
         handleRefresh,