Revisit size and density changes in workspaces

Signed-off-by: Miki <[email protected]>
opensearch-project · Jul 19, 2024 · c242d2a · c242d2a
1 parent e0c45a8
commit c242d2a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 25 deletions.
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_create_action_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_create_action_panel.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSmallButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useState, useCallback } from 'react';
 import { ApplicationStart } from 'opensearch-dashboards/public';
@@ -26,17 +26,17 @@ export const WorkspaceCreateActionPanel = ({
     <>
       <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="workspaceForm-bottomBar-cancelButton"
             onClick={showCancelModal}
           >
             {i18n.translate('workspace.form.bottomBar.cancel', {
               defaultMessage: 'Cancel',
             })}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             type="submit"
             form={formId}
@@ -45,7 +45,7 @@ export const WorkspaceCreateActionPanel = ({
             {i18n.translate('workspace.form.bottomBar.createWorkspace', {
               defaultMessage: 'Create workspace',
             })}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
       {isCancelModalVisible && (

diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_enter_details_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_enter_details_panel.tsx
@@ -5,11 +5,11 @@
 
 import {
   EuiColorPicker,
-  EuiFieldText,
-  EuiFormRow,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
   EuiSpacer,
   EuiText,
-  EuiTextArea,
+  EuiCompressedTextArea,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
@@ -39,7 +39,7 @@ export const EnterDetailsPanel = ({
 }: EnterDetailsPanelProps) => {
   return (
     <>
-      <EuiFormRow
+      <EuiCompressedFormRow
         label={i18n.translate('workspace.form.workspaceDetails.name.label', {
           defaultMessage: 'Name',
         })}
@@ -50,7 +50,7 @@ export const EnterDetailsPanel = ({
         isInvalid={!!formErrors.name}
         error={formErrors.name?.message}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           value={name}
           onChange={handleNameInputChange}
           readOnly={readOnly}
@@ -59,8 +59,8 @@ export const EnterDetailsPanel = ({
             defaultMessage: 'Enter a name',
           })}
         />
-      </EuiFormRow>
-      <EuiFormRow
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label={
           <>
             Description - <i>optional</i>
@@ -74,7 +74,7 @@ export const EnterDetailsPanel = ({
                 'Help others understand the purpose of this workspace by providing an overview of the workspace you’re creating.',
             })}
           </EuiText>
-          <EuiTextArea
+          <EuiCompressedTextArea
             value={description}
             onChange={handleDescriptionChange}
             data-test-subj="workspaceForm-workspaceDetails-descriptionInputText"
@@ -84,8 +84,8 @@ export const EnterDetailsPanel = ({
             })}
           />
         </>
-      </EuiFormRow>
-      <EuiFormRow
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label={i18n.translate('workspace.form.workspaceDetails.color.label', {
           defaultMessage: 'Color',
         })}
@@ -105,7 +105,7 @@ export const EnterDetailsPanel = ({
             data-test-subj="workspaceForm-workspaceDetails-colorPicker"
           />
         </div>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 };
diff --git a/...plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx b/...plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx
@@ -4,7 +4,13 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiCompressedFormRow, EuiSpacer } from '@elastic/eui';
+import {
+  EuiSmallButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCompressedFormRow,
+  EuiSpacer,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { WorkspaceFormError, WorkspacePermissionSetting } from './types';
 import {
@@ -97,7 +103,7 @@ const UserOrGroupSection = ({
     <div>
       <EuiFlexGroup gutterSize="m">
         <EuiFlexItem style={{ maxWidth: 400 }}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label={
               type === WorkspacePermissionItemType.User
                 ? i18n.translate('workspaceForm.permissionSetting.userLabel', {
@@ -109,22 +115,26 @@ const UserOrGroupSection = ({
             }
           >
             <></>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem style={{ maxWidth: 332 }}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label={i18n.translate('workspaceForm.permissionSetting.permissionLabel', {
               defaultMessage: 'Permissions',
             })}
           >
             <></>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="xs" />
       {permissionSettings.map((item, index) => (
         <React.Fragment key={item.id}>
-          <EuiCompressedFormRow fullWidth isInvalid={!!errors?.[item.id]} error={errors?.[item.id]?.message}>
+          <EuiCompressedFormRow
+            fullWidth
+            isInvalid={!!errors?.[item.id]}
+            error={errors?.[item.id]?.message}
+          >
             <WorkspacePermissionSettingInput
               {...item}
               type={type}

diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_use_case.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_use_case.tsx
@@ -5,7 +5,13 @@
 
 import React, { useCallback } from 'react';
 import { i18n } from '@osd/i18n';
-import { EuiCheckableCard, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
+import {
+  EuiCheckableCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCompressedFormRow,
+  EuiText,
+} from '@elastic/eui';
 
 import { DEFAULT_NAV_GROUPS } from '../../../../../core/public';
 import { WorkspaceUseCase as WorkspaceUseCaseObject } from '../../types';
@@ -64,7 +70,7 @@ export const WorkspaceUseCase = ({
   availableUseCases,
 }: WorkspaceUseCaseProps) => {
   return (
-    <EuiFormRow
+    <EuiCompressedFormRow
       label={i18n.translate('workspace.form.workspaceUseCase.name.label', {
         defaultMessage: 'Use case',
       })}
@@ -88,6 +94,6 @@ export const WorkspaceUseCase = ({
             </EuiFlexItem>
           ))}
       </EuiFlexGroup>
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 };