Update data source details to use small buttons

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))

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}

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,

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>
   );
 };
 

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>

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>
   );
 };

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>
     );