[Refactor] [Workspace] Use small button, small padding and compressed. (

opensearch-project#7842) * Use "small" buttons, "compressed" form inputs and small padding on popovers Signed-off-by: yubonluo <[email protected]> * Changeset file for PR opensearch-project#7842 created/updated --------- Signed-off-by: yubonluo <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
LDrago27 · Aug 26, 2024 · a5c3dc2 · a5c3dc2
1 parent ca66127
commit a5c3dc2
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 55 deletions.
diff --git a/changelogs/fragments/7842.yml 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))
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
@@ -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,15 +88,15 @@ export const UseCaseFooter = ({
 
     return (
       <>
-        <EuiButton
+        <EuiSmallButton
           iconType="plus"
           onClick={showModal}
           data-test-subj="useCase.footer.createWorkspace.button"
         >
           {i18n.translate('workspace.useCase.footer.createWorkspace', {
             defaultMessage: 'Create workspace',
           })}
-        </EuiButton>
+        </EuiSmallButton>
         {isModalVisible && (
           <EuiModal onClose={closeModal} style={{ width: '450px' }}>
             <EuiModalHeader>
@@ -108,21 +108,24 @@ export const UseCaseFooter = ({
             </EuiModalBody>
 
             <EuiModalFooter>
-              <EuiButton onClick={closeModal} data-test-subj="useCase.footer.modal.close.button">
+              <EuiSmallButton
+                onClick={closeModal}
+                data-test-subj="useCase.footer.modal.close.button"
+              >
                 {i18n.translate('workspace.useCase.footer.modal.close', {
                   defaultMessage: 'Close',
                 })}
-              </EuiButton>
+              </EuiSmallButton>
               {isDashboardAdmin && (
-                <EuiButton
+                <EuiSmallButton
                   href={core.application.getUrlForApp('workspace_create', { absolute: false })}
                   data-test-subj="useCase.footer.modal.create.button"
                   fill
                 >
                   {i18n.translate('workspace.useCase.footer.modal.create', {
                     defaultMessage: 'Create workspace',
                   })}
-                </EuiButton>
+                </EuiSmallButton>
               )}
             </EuiModalFooter>
           </EuiModal>
@@ -138,9 +141,9 @@ export const UseCaseFooter = ({
       basePath
     );
     return (
-      <EuiButton href={useCaseURL} data-test-subj="useCase.footer.openWorkspace.button">
+      <EuiSmallButton href={useCaseURL} data-test-subj="useCase.footer.openWorkspace.button">
         {i18n.translate('workspace.useCase.footer.openWorkspace', { defaultMessage: 'Open' })}
-      </EuiButton>
+      </EuiSmallButton>
     );
   }
 
@@ -176,11 +179,11 @@ export const UseCaseFooter = ({
   };
 
   const button = (
-    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+    <EuiSmallButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
       {i18n.translate('workspace.useCase.footer.selectWorkspace', {
         defaultMessage: 'Select workspace',
       })}
-    </EuiButton>
+    </EuiSmallButton>
   );
   const panels = [
     {
@@ -195,7 +198,7 @@ export const UseCaseFooter = ({
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
-      panelPaddingSize="none"
+      panelPaddingSize="s"
       anchorPosition="downCenter"
     >
       <EuiPanel hasBorder={false} color="transparent" paddingSize="s">

diff --git a/...workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap b/...workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
diff --git a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx b/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import {
   EuiText,
   EuiModal,
-  EuiButton,
+  EuiSmallButton,
   EuiModalBody,
   EuiSelectable,
   EuiModalFooter,
@@ -99,13 +99,13 @@ export const AssociationDataSourceModal = ({
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton onClick={closeModal} fill>
+        <EuiSmallButton onClick={closeModal} fill>
           <FormattedMessage
             id="workspace.detail.dataSources.associateModal.close.button"
             defaultMessage="Close"
           />
-        </EuiButton>
-        <EuiButton
+        </EuiSmallButton>
+        <EuiSmallButton
           onClick={() => 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"
           />
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );

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
@@ -6,7 +6,7 @@
 import React, { useMemo, useState } from 'react';
 import {
   EuiSpacer,
-  EuiButton,
+  EuiSmallButton,
   EuiFlexItem,
   EuiFlexGroup,
   EuiFieldSearch,
@@ -160,7 +160,7 @@ export const OpenSearchConnectionTable = ({
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         {selectedItems.length > 0 && !modalVisible && (
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               color="danger"
               onClick={() => 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 },
               })}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         )}
         <EuiFlexItem>

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
@@ -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}
         >
-          <EuiSuperSelect
+          <EuiCompressedSuperSelect
             options={options}
             valueOfSelected={value}
             onChange={(id) => {
@@ -125,7 +125,7 @@ export const WorkspaceDetailFormDetails = ({
           isInvalid={!!formErrors.color}
           error={formErrors.color?.message}
         >
-          <EuiColorPicker
+          <EuiCompressedColorPicker
             color={formData.color}
             onChange={handleColorChange}
             readOnly={!isEditing}

diff --git a/...rkspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap b/...rkspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap
diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
@@ -18,10 +18,10 @@ import {
   EuiPageBody,
   EuiFlexItem,
   EuiFlexGroup,
-  EuiButtonEmpty,
   EuiPageContent,
   EuiSmallButton,
   EuiToolTip,
+  EuiSmallButtonEmpty,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import BackgroundLightSVG from '../../assets/background_light.svg';
@@ -169,7 +169,7 @@ export const WorkspaceInitial = () => {
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false} className="eui-displayInline">
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           href="https://www.opensearch.org/"
           iconType="popout"
           iconSide="right"
@@ -181,7 +181,7 @@ export const WorkspaceInitial = () => {
               defaultMessage: 'Learn more from documentation and more.',
             })}
           </EuiText>
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false} style={{ maxWidth: '540px' }}>
@@ -216,7 +216,7 @@ export const WorkspaceInitial = () => {
             >
               {content}
             </EuiPageContent>
-            <EuiButtonEmpty
+            <EuiSmallButtonEmpty
               iconType="gear"
               iconSide="left"
               flush="left"
@@ -228,7 +228,7 @@ export const WorkspaceInitial = () => {
                   defaultMessage: 'Settings and setup',
                 })}
               </EuiText>
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPageBody>