Update data source details to use small buttons (opensearch-project#9057

) * update data source details tabs to use small buttons Signed-off-by: Ritvi Bhatt <[email protected]> * Changeset file for PR opensearch-project#9057 created/updated * update snapshots Signed-off-by: Ritvi Bhatt <[email protected]> * update unit test Signed-off-by: Ritvi Bhatt <[email protected]> --------- Signed-off-by: Ritvi Bhatt <[email protected]> Co-authored-by: Ritvi Bhatt <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
AMoo-Miki · Jan 10, 2025 · 08ded92 · 08ded92
1 parent d287207
commit 08ded92
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 85 deletions.
diff --git a/changelogs/fragments/9057.yml 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))
diff --git a/...sources_components/acceleration_management/__snapshots__/acceleration_table.test.tsx.snap b/...sources_components/acceleration_management/__snapshots__/acceleration_table.test.tsx.snap
diff --git a/...nents/direct_query_data_sources_components/acceleration_management/acceleration_table.tsx b/...nents/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/...s/direct_query_data_sources_components/acceleration_management/acceleration_util.test.tsx b/...s/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,

diff --git a/...nents/direct_query_data_sources_components/acceleration_management/acceleration_utils.tsx b/...nents/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/...ect_query_data_sources_components/associated_object_management/associated_objects_tab.tsx b/...ect_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/...ted_object_management/utils/__snapshots__/associated_objects_refresh_button.test.tsx.snap b/...ted_object_management/utils/__snapshots__/associated_objects_refresh_button.test.tsx.snap
diff --git a/...urces_components/associated_object_management/utils/associated_objects_refresh_button.tsx b/...urces_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/..._data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap b/..._data_sources_components/connection_detail/__snapshots__/access_control_tab.test.tsx.snap
diff --git a/.../components/direct_query_data_sources_components/connection_detail/access_control_tab.tsx b/.../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/..._sources_components/integrations/__snapshots__/installed_integrations_table.test.tsx.snap b/..._sources_components/integrations/__snapshots__/installed_integrations_table.test.tsx.snap
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		refactor:
		- Update data source details tabs to use small buttons ([#9057](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9057))