From a5c3dc2ac42b8acb9bc223f38eb61b6d0ae208e8 Mon Sep 17 00:00:00 2001 From: yuboluo Date: Tue, 27 Aug 2024 01:05:41 +0800 Subject: [PATCH] [Refactor] [Workspace] Use small button, small padding and compressed. (#7842) * Use "small" buttons, "compressed" form inputs and small padding on popovers Signed-off-by: yubonluo * Changeset file for PR #7842 created/updated --------- Signed-off-by: yubonluo Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/7842.yml | 2 ++ .../home_get_start_card/use_case_footer.tsx | 27 +++++++++------- .../workspace_detail.test.tsx.snap | 10 +++--- .../association_data_source_modal.tsx | 10 +++--- .../opensearch_connections_table.tsx | 6 ++-- .../workspace_detail_form_details.tsx | 8 ++--- .../workspace_initial.test.tsx.snap | 12 +++---- .../workspace_initial/workspace_initial.tsx | 10 +++--- .../workspace_menu/workspace_menu.tsx | 32 ++++++++++--------- 9 files changed, 62 insertions(+), 55 deletions(-) create mode 100644 changelogs/fragments/7842.yml diff --git a/changelogs/fragments/7842.yml b/changelogs/fragments/7842.yml new file mode 100644 index 000000000000..210ae0638c64 --- /dev/null +++ b/changelogs/fragments/7842.yml @@ -0,0 +1,2 @@ +refactor: +- [Workspace] Use small button, small padding and compressed. ([#7842](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7842)) \ No newline at end of file diff --git a/src/plugins/workspace/public/components/home_get_start_card/use_case_footer.tsx b/src/plugins/workspace/public/components/home_get_start_card/use_case_footer.tsx index 5a32d1534ce4..d9bfef12d5ab 100644 --- a/src/plugins/workspace/public/components/home_get_start_card/use_case_footer.tsx +++ b/src/plugins/workspace/public/components/home_get_start_card/use_case_footer.tsx @@ -10,7 +10,6 @@ import { EuiPanel, EuiAvatar, EuiSpacer, - EuiButton, EuiPopover, EuiFlexItem, EuiModalBody, @@ -20,6 +19,7 @@ import { EuiModalHeader, EuiContextMenu, EuiModalHeaderTitle, + EuiSmallButton, } from '@elastic/eui'; import React, { useMemo, useState } from 'react'; import { i18n } from '@osd/i18n'; @@ -88,7 +88,7 @@ export const UseCaseFooter = ({ return ( <> - + {isModalVisible && ( @@ -108,13 +108,16 @@ export const UseCaseFooter = ({ - + {i18n.translate('workspace.useCase.footer.modal.close', { defaultMessage: 'Close', })} - + {isDashboardAdmin && ( - + )} @@ -138,9 +141,9 @@ export const UseCaseFooter = ({ basePath ); return ( - + {i18n.translate('workspace.useCase.footer.openWorkspace', { defaultMessage: 'Open' })} - + ); } @@ -176,11 +179,11 @@ export const UseCaseFooter = ({ }; const button = ( - + {i18n.translate('workspace.useCase.footer.selectWorkspace', { defaultMessage: 'Select workspace', })} - + ); const panels = [ { @@ -195,7 +198,7 @@ export const UseCaseFooter = ({ button={button} isOpen={isPopoverOpen} closePopover={closePopover} - panelPaddingSize="none" + panelPaddingSize="s" anchorPosition="downCenter" > diff --git a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap index b1036d4d80ed..cf670fddf4df 100644 --- a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap +++ b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap @@ -445,7 +445,7 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = ` value="observability" />
- + - - + handleAssignDataSources(selectedDataSources)} isDisabled={!selectedDataSources || selectedDataSources.length === 0} fill @@ -114,7 +114,7 @@ export const AssociationDataSourceModal = ({ id="workspace.detail.dataSources.associateModal.save.button" defaultMessage="Save changes" /> - + ); diff --git a/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx b/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx index 278b7ffcba85..57cffab2e1c8 100644 --- a/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx @@ -6,7 +6,7 @@ import React, { useMemo, useState } from 'react'; import { EuiSpacer, - EuiButton, + EuiSmallButton, EuiFlexItem, EuiFlexGroup, EuiFieldSearch, @@ -160,7 +160,7 @@ export const OpenSearchConnectionTable = ({ {selectedItems.length > 0 && !modalVisible && ( - setModalVisible(true)} data-test-subj="workspace-detail-dataSources-table-bulkRemove" @@ -169,7 +169,7 @@ export const OpenSearchConnectionTable = ({ defaultMessage: 'Remove {numberOfSelect} association(s)', values: { numberOfSelect: selectedItems.length }, })} - + )} diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx index ec79f063acc5..3de52f3aabff 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx @@ -4,8 +4,8 @@ */ import { - EuiSuperSelect, - EuiColorPicker, + EuiCompressedSuperSelect, + EuiCompressedColorPicker, EuiCompressedFormRow, EuiDescribedFormGroup, } from '@elastic/eui'; @@ -104,7 +104,7 @@ export const WorkspaceDetailFormDetails = ({ error={formErrors.features?.message} helpText={detailsUseCaseHelpText} > - { @@ -125,7 +125,7 @@ export const WorkspaceDetailFormDetails = ({ isInvalid={!!formErrors.color} error={formErrors.color?.message} > -