Use smaller and compressed varients of buttons and form components (#…

…1010) (#1017) * Use EuiSmallButton * Use EuiSmallButtonIcon * Use EuiSmallButtonEmpty * Use EuiCompressedFormRow * Use EuiCompressedField* * Use EuiCompressedSelect and EuiCompressedSuperSelect * Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup * Use EuiCompressedRadio and EuiCompressedRadioGroup * Use EuiCompressedSwitch * Use EuiCompressedEuiTextArea * Use EuiCompressedComboBox * Undo unnecessary EuiSmallButton* uses * Introduce `compressed` FrequencyPicker` and `DateRangePicker` Also: * Clean up some code * Update snapshots and fix errors Also: * Clean up some code --------- (cherry picked from commit cc8b959) Signed-off-by: Miki <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Jul 24, 2024 · b6735bd · b6735bd
1 parent aa96fa3
commit b6735bd
Show file tree

Hide file tree

Showing 133 changed files with 1,735 additions and 1,426 deletions.
diff --git a/public/components/Comments/AlertCommentsFlyout.tsx b/public/components/Comments/AlertCommentsFlyout.tsx
@@ -5,17 +5,17 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { Comment } from "../../models/Comments";
-import { 
-  EuiFlyout, 
-  EuiFlyoutHeader, 
-  EuiFlyoutBody, 
-  EuiCommentList, 
-  EuiText, 
-  EuiButtonIcon, 
-  EuiContextMenuItem, 
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiCommentList,
+  EuiText,
+  EuiButtonIcon,
+  EuiContextMenuItem,
   EuiContextMenuPanel,
-  EuiPopover, 
-  EuiTitle, 
+  EuiPopover,
+  EuiTitle,
   EuiSpacer,
   EuiCallOut,
   EuiLink
@@ -77,7 +77,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
 
   const createComment = async () => {
     setCreatePending(true);
-    await httpClient.post(`../api/alerting/comments/${alertId}`, { body: JSON.stringify({ 
+    await httpClient.post(`../api/alerting/comments/${alertId}`, { body: JSON.stringify({
       content: draftCommentContent
     })});
 
@@ -150,7 +150,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         onCancel={() => onEditCancel(comment, idx)}
       />
     );
-  
+
     const customActions = comment.state === 'readonly' && (
       <EuiPopover
         button={
@@ -186,7 +186,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         />
       </EuiPopover>
     );
-  
+
     return {
       username: comment.user || 'Unknown',
       event: `${comment.last_updated_time ? 'edited' : 'added'} comment on`,
@@ -204,12 +204,12 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <EuiCallOut 
+        <EuiCallOut
           iconType='iInCircle'
           title='Experimental'>
-          <span>The feature is experimental and should not be used in a production environment. 
+          <span>The feature is experimental and should not be used in a production environment.
             The posted comments will be impacted if the feature is deactivated.
-            For more information see <EuiLink href="https://opensearch.org/docs/latest/observing-your-data/alerting/index/" target="_blank">Documentation.</EuiLink> 
+            For more information see <EuiLink href="https://opensearch.org/docs/latest/observing-your-data/alerting/index/" target="_blank">Documentation.</EuiLink>
             To leave feedback, visit <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues/6999" target="_blank">github.com</EuiLink>.
           </span>
         </EuiCallOut>
@@ -236,4 +236,4 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
       </EuiFlyoutBody>
     </EuiFlyout>
   )
-}
+}
diff --git a/public/components/Comments/CommentEditor.tsx b/public/components/Comments/CommentEditor.tsx
@@ -4,10 +4,10 @@
 */
 
 import React from "react";
-import { 
-  EuiFlexGroup, 
-  EuiFlexItem, 
-  EuiButton 
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSmallButton
 } from "@elastic/eui";
 
 export interface CommentEditorProps {
@@ -19,13 +19,13 @@ export interface CommentEditorProps {
   onContentChange: React.ChangeEventHandler<HTMLTextAreaElement>;
 }
 
-export const CommentEditor: React.FC<CommentEditorProps> = ({ 
-  isLoading, 
+export const CommentEditor: React.FC<CommentEditorProps> = ({
+  isLoading,
   draftCommentContent,
   saveDisabled,
-  onSave, 
+  onSave,
   onCancel,
-  onContentChange, 
+  onContentChange,
 }) => (
   <EuiFlexGroup gutterSize="s" direction="column" >
     <EuiFlexItem>
@@ -35,17 +35,17 @@ export const CommentEditor: React.FC<CommentEditorProps> = ({
       <EuiFlexGroup gutterSize="s">
         {onCancel && (
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={onCancel}>
+            <EuiSmallButton onClick={onCancel}>
               Cancel
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         )}
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={onSave} color="primary" isLoading={isLoading} disabled={saveDisabled} fill>
+          <EuiSmallButton onClick={onSave} color="primary" isLoading={isLoading} disabled={saveDisabled} fill>
             Save
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexItem>
   </EuiFlexGroup>
-)
+)
diff --git a/public/components/Comments/ShowAlertComments.tsx b/public/components/Comments/ShowAlertComments.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { Comment } from "../../models/Comments";
-import { EuiButtonIcon, EuiToolTip } from "@elastic/eui";
+import { EuiSmallButtonIcon, EuiToolTip } from "@elastic/eui";
 import { AlertCommentsFlyout } from "./AlertCommentsFlyout";
 
 export interface ShowAlertCommentsProps {
@@ -15,19 +15,19 @@ export interface ShowAlertCommentsProps {
 
 export const ShowAlertComments: React.FC<ShowAlertCommentsProps> = ({ alert, httpClient }) => {
   const [commentsFlyout, setCommentsFlyout] = useState<React.ReactNode | null>(null);
-  
-  const showCommentsFlyout = useCallback(() => { 
+
+  const showCommentsFlyout = useCallback(() => {
     setCommentsFlyout(<AlertCommentsFlyout
       alertId={alert.id}
       httpClient={httpClient}
-      closeFlyout={() => setCommentsFlyout(null)} 
+      closeFlyout={() => setCommentsFlyout(null)}
     />);
   }, [setCommentsFlyout]);
 
   return (
     <>
       <EuiToolTip content={'Show comments'}>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           aria-label={'Show comments'}
           data-test-subj={`show-comments-icon`}
           iconType={'editorComment'}
@@ -37,4 +37,4 @@ export const ShowAlertComments: React.FC<ShowAlertCommentsProps> = ({ alert, htt
       {commentsFlyout}
     </>
   )
-}
+}
diff --git a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.tsx b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.tsx
@@ -12,8 +12,8 @@ import {
   EuiFlyoutFooter,
   EuiTitle,
   EuiSpacer,
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiFormFieldset,
   EuiCheckableCard,
   EuiText
@@ -225,17 +225,17 @@ function AddAlertingMonitor({
               <EuiFlyoutFooter>
                 <EuiFlexGroup justifyContent="spaceBetween">
                   <EuiFlexItem grow={false}>
-                    <EuiButtonEmpty onClick={closeFlyout}>Cancel</EuiButtonEmpty>
+                    <EuiSmallButtonEmpty onClick={closeFlyout}>Cancel</EuiSmallButtonEmpty>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton
+                    <EuiSmallButton
                       onClick={() => onSubmit({ handleSubmit, validateForm })}
                       fill
                       isLoading={isLoading}
                       disabled={!isAssociateAllowed}
                     >
                       {flyoutMode === 'existing' ? 'Associate' : 'Create'} monitor
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlyoutFooter>

diff --git a/...ents/FeatureAnywhereContextMenu/AddAlertingMonitor/AssociateExisting/AssociateExisting.js b/...ents/FeatureAnywhereContextMenu/AddAlertingMonitor/AssociateExisting/AssociateExisting.js
@@ -9,7 +9,7 @@ import {
   EuiSpacer,
   EuiIcon,
   EuiText,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiLoadingSpinner,
   EuiLink,
   EuiFlexGroup,
@@ -94,7 +94,7 @@ function AssociateExisting({ monitors, selectedMonitorId, setSelectedMonitorId }
       <EuiSpacer size="m" />
       {!monitors && <EuiLoadingSpinner size="l" />}
       {monitors && (
-        <EuiComboBox
+        <EuiCompressedComboBox
           id="associate-existing__select"
           options={options}
           selectedOptions={selectedOptions}

diff --git a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.tsx b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { EuiCallOut, EuiIcon, EuiSpacer, EuiSwitch, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiCallOut, EuiIcon, EuiSpacer, EuiCompressedSwitch, EuiText, EuiTitle } from '@elastic/eui';
 import _ from 'lodash';
 import { FieldArray } from 'formik';
 import { EmbeddableRenderer, ErrorEmbeddable } from '../../../../../../../src/plugins/embeddable/public';
@@ -123,7 +123,7 @@ function CreateNew({ embeddable, flyoutMode, formikProps, history, setFlyout, de
             {title}
           </h4>
         </EuiTitle>
-        <EuiSwitch
+        <EuiCompressedSwitch
           label="Show visualization"
           checked={isShowVis}
           onChange={() => setIsShowVis(!isShowVis)}

diff --git a/...tureAnywhereContextMenu/AddAlertingMonitor/CreateNew/__snapshots__/CreateNew.test.js.snap b/...tureAnywhereContextMenu/AddAlertingMonitor/CreateNew/__snapshots__/CreateNew.test.js.snap
@@ -36,7 +36,7 @@ exports[`CreateNew renders 1`] = `
         />
       </h4>
     </EuiTitle>
-    <EuiSwitch
+    <EuiCompressedSwitch
       checked={false}
       label="Show visualization"
       onChange={[Function]}

diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/AssociatedMonitors.tsx b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/AssociatedMonitors.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useState } from 'react';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -125,9 +125,9 @@ const AssociatedMonitors = ({ embeddable, closeFlyout, setFlyoutMode, monitors,
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton iconType="link" isDisabled={!isAssociateAllowed} fill onClick={() => setFlyoutMode('existing')}>
+            <EuiSmallButton iconType="link" isDisabled={!isAssociateAllowed} fill onClick={() => setFlyoutMode('existing')}>
               Associate a monitor
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="l" />

diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/ConfirmUnlinkModal.js b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/ConfirmUnlinkModal.js
@@ -5,8 +5,8 @@
 
 import React, { useState } from 'react';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -35,11 +35,11 @@ export const ConfirmUnlinkDetectorModal = (props) => {
         </EuiModalBody>
         <EuiModalFooter>
           {isLoading ? null : (
-            <EuiButtonEmpty data-test-subj="cancelButton" onClick={props.onHide}>
+            <EuiSmallButtonEmpty data-test-subj="cancelButton" onClick={props.onHide}>
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           )}
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="confirmButton"
             color="primary"
             fill
@@ -50,7 +50,7 @@ export const ConfirmUnlinkDetectorModal = (props) => {
             }}
           >
             {'Remove association'}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>

diff --git a/...atureAnywhereContextMenu/AssociatedMonitors/__snapshots__/AssociatedMonitors.test.js.snap b/...atureAnywhereContextMenu/AssociatedMonitors/__snapshots__/AssociatedMonitors.test.js.snap
@@ -33,14 +33,14 @@ exports[`AssociatedMonitors renders 1`] = `
       <EuiFlexItem
         grow={false}
       >
-        <EuiButton
+        <EuiSmallButton
           fill={true}
           iconType="link"
           isDisabled={true}
           onClick={[Function]}
         >
           Associate a monitor
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiSpacer

diff --git a/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.js b/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.js
@@ -7,8 +7,8 @@ import React from 'react';
 import {
   EuiTitle,
   EuiSpacer,
-  EuiButtonIcon,
-  EuiButtonEmpty,
+  EuiSmallButtonIcon,
+  EuiSmallButtonEmpty,
   EuiAccordion,
   EuiPanel,
 } from '@elastic/eui';
@@ -27,7 +27,7 @@ const EnhancedAccordion = ({
 }) => (
   <div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard">
     <div className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner">
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         color="text"
         onClick={onToggle}
         iconType="arrowRight"
@@ -72,13 +72,13 @@ const EnhancedAccordion = ({
         </EuiAccordion>
       )}
       {isButton && (
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           onClick={onToggle}
           iconType={iconType}
           className="enhanced-accordion__button"
         >
           Add trigger
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       )}
     </div>
   </div>

diff --git a/...FeatureAnywhereContextMenu/EnhancedAccordion/__snapshots__/EnhancedAccordion.test.js.snap b/...FeatureAnywhereContextMenu/EnhancedAccordion/__snapshots__/EnhancedAccordion.test.js.snap
@@ -7,7 +7,7 @@ exports[`EnhancedAccordion renders 1`] = `
   <div
     className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner"
   >
-    <EuiButtonIcon
+    <EuiSmallButtonIcon
       aria-label="Expand"
       className="enhanced-accordion__arrow  "
       color="text"

diff --git a/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap b/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
@@ -34,7 +34,7 @@ Object {
     <EuiFlexItem
       grow={false}
     >
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         data-test-subj="alertsDashboardFlyout_closeButton_undefined"
         display="empty"
         iconSize="m"

diff --git a/public/components/Flyout/flyouts/alertsDashboard.js b/public/components/Flyout/flyouts/alertsDashboard.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiButtonIcon, EuiText, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiSmallButtonIcon, EuiText, EuiFlexItem } from '@elastic/eui';
 import AlertsDashboardFlyoutComponent from './components/AlertsDashboardFlyoutComponent';
 
 const alertsDashboard = (payload) => {
@@ -29,7 +29,7 @@ const alertsDashboard = (payload) => {
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             data-test-subj={`alertsDashboardFlyout_closeButton_${trigger_name}`}
             iconType="cross"
             display="empty"