[Look&Feel] Use smaller and compressed varients of buttons and form components

public/components/ConfigCell/ConfigCell.tsx

@@ -9,11 +9,11 @@
  * GitHub history for details.
  */
 
-import { EuiText, EuiFormRow, EuiFormRowProps } from '@elastic/eui';
+import { EuiText, EuiCompressedFormRow, EuiFormRowProps } from '@elastic/eui';
 import React from 'react';
 
 export const FixedWidthRow = (props: EuiFormRowProps) => (
-  <EuiFormRow {...props} style={{ width: '250px' }} />
+  <EuiCompressedFormRow {...props} style={{ width: '250px' }} />
 );
 
 interface ConfigCellProps {

public/components/CreateDetectorButtons/CreateDetectorButtons.tsx

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSmallButton } from '@elastic/eui';
 import React from 'react';
 import { APP_PATH, PLUGIN_NAME } from '../../utils/constants';
 import { useLocation } from 'react-router-dom';
@@ -23,27 +23,27 @@ export const CreateDetectorButtons = () => {
   const createDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.CREATE_DETECTOR}`, dataSourceId, false);
 
   const sampleDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.OVERVIEW}`, dataSourceId, false);
-  
+
   return (
     <EuiFlexGroup direction="row" gutterSize="m" justifyContent="center">
       <EuiFlexItem grow={false}>
-        <EuiButton
+        <EuiSmallButton
           style={{ width: '200px' }}
           href={sampleDetectorUrl}
           data-test-subj="sampleDetectorButton"
         >
           Try a sample detector
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton
+        <EuiSmallButton
           style={{ width: '200px' }}
           fill
           href={createDetectorUrl}
           data-test-subj="createDetectorButton"
         >
           Create detector
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx

@@ -7,8 +7,8 @@ import React, { useState } from 'react';
 import {
   EuiText,
   EuiOverlayMask,
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalHeader,
   EuiModalFooter,
@@ -51,14 +51,14 @@ export const ConfirmUnlinkDetectorModal = (
         </EuiModalBody>
         <EuiModalFooter>
           {isLoading ? null : (
-            <EuiButtonEmpty
+            <EuiSmallButtonEmpty
               data-test-subj="cancelUnlinkButton"
               onClick={props.onHide}
             >
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           )}
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="confirmUnlinkButton"
             color="primary"
             fill
@@ -70,7 +70,7 @@ export const ConfirmUnlinkDetectorModal = (
             }}
           >
             {'Remove association'}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx

@@ -10,7 +10,7 @@ import {
   EuiSpacer,
   EuiInMemoryTable,
   EuiFlyoutBody,
-  EuiButton,
+  EuiSmallButton,
   EuiFlyout,
   EuiFlexItem,
   EuiFlexGroup,
@@ -85,7 +85,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
       const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
       const refs = indexPattern.references as References[];
       const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
-      setDataSourceId(foundDataSourceId); 
+      setDataSourceId(foundDataSourceId);
     } catch (error) {
       console.error("Error fetching index pattern:", error);
     }
@@ -270,7 +270,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
       getDetectorList(
         getAllDetectorsQueryParamsWithDataSourceId(dataSourceId)
       )
-    );  
+    );
   };
 
   const handleUnlinkDetectorAction = (detector: DetectorListItem) => {
@@ -371,7 +371,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <div>
-                <EuiButton
+                <EuiSmallButton
                   data-test-subj="associateDetectorButton"
                   fill
                   disabled={associationLimitReached}
@@ -381,7 +381,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
                   }}
                 >
                   Associate a detector
-                </EuiButton>
+                </EuiSmallButton>
               </div>
             </EuiFlexItem>
           </EuiFlexGroup>

public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx

@@ -9,21 +9,21 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiTitle,
-  EuiButton,
+  EuiSmallButton,
   EuiFormFieldset,
   EuiCheckableCard,
   EuiSpacer,
   EuiIcon,
   EuiText,
-  EuiSwitch,
-  EuiFormRow,
-  EuiFieldText,
-  EuiCheckbox,
+  EuiCompressedSwitch,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
+  EuiCompressedCheckbox,
   EuiFlexItem,
   EuiFlexGroup,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiCallOut,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiPanel,
 } from '@elastic/eui';
 import './styles.scss';
@@ -141,7 +141,7 @@ function AddAnomalyDetector({
       const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
       const refs = indexPattern.references as References[];
       const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
-      setDataSourceId(foundDataSourceId); 
+      setDataSourceId(foundDataSourceId);
     } catch (error) {
       console.error("Error fetching index pattern:", error);
     }
@@ -167,7 +167,7 @@ function AddAnomalyDetector({
     }
     fetchData();
     createEmbeddable();
-  }, [dataSourceId]); 
+  }, [dataSourceId]);
 
   const [isShowVis, setIsShowVis] = useState(false);
   const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true });
@@ -311,7 +311,7 @@ function AddAnomalyDetector({
               {title}
             </h4>
           </EuiTitle>
-          <EuiSwitch
+          <EuiCompressedSwitch
             label="Show visualization"
             checked={isShowVis}
             onChange={() => setIsShowVis(!isShowVis)}
@@ -478,9 +478,9 @@ function AddAnomalyDetector({
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <div>
-                <EuiButton onClick={() => openAlerting(detectorId)}>
+                <EuiSmallButton onClick={() => openAlerting(detectorId)}>
                   Set up alerts
-                </EuiButton>
+                </EuiSmallButton>
               </div>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -684,7 +684,7 @@ function AddAnomalyDetector({
                               isInvalid={isInvalid(field.name, form)}
                               error={getError(field.name, form)}
                             >
-                              <EuiFieldText
+                              <EuiCompressedFieldText
                                 data-test-subj="detectorNameTextInputFlyout"
                                 isInvalid={isInvalid(field.name, form)}
                                 {...field}
@@ -713,7 +713,7 @@ function AddAnomalyDetector({
                                     alignItems="center"
                                   >
                                     <EuiFlexItem grow={false}>
-                                      <EuiFieldNumber
+                                      <EuiCompressedFieldNumber
                                         id="detectionInterval"
                                         placeholder="Detector interval"
                                         data-test-subj="detectionInterval"
@@ -750,7 +750,7 @@ function AddAnomalyDetector({
                             >
                               <EuiFlexGroup gutterSize="s" alignItems="center">
                                 <EuiFlexItem grow={false}>
-                                  <EuiFieldNumber
+                                  <EuiCompressedFieldNumber
                                     id="windowDelay"
                                     placeholder="Window delay"
                                     data-test-subj="windowDelay"
@@ -829,7 +829,7 @@ function AddAnomalyDetector({
                                   alignItems="center"
                                 >
                                   <EuiFlexItem grow={false}>
-                                    <EuiFieldNumber
+                                    <EuiCompressedFieldNumber
                                       id="shingleSize"
                                       placeholder="Shingle size"
                                       data-test-subj="shingleSize"
@@ -857,7 +857,7 @@ function AddAnomalyDetector({
                             {({ field, form }: FieldProps) => (
                               <EuiFlexGroup direction="column">
                                 <EuiFlexItem>
-                                  <EuiCheckbox
+                                  <EuiCompressedCheckbox
                                     id={'resultIndexCheckbox'}
                                     label="Enable custom result index"
                                     checked={enabled}
@@ -884,18 +884,18 @@ function AddAnomalyDetector({
 
                                 {enabled ? (
                                   <EuiFlexItem>
-                                    <EuiFormRow
+                                    <EuiCompressedFormRow
                                       label="Field"
                                       isInvalid={isInvalid(field.name, form)}
                                       helpText={`Custom result index name must contain less than 255 characters including the prefix "opensearch-ad-plugin-result-". Valid characters are a-z, 0-9, -(hyphen) and _(underscore).`}
                                     >
-                                      <EuiFieldText
+                                      <EuiCompressedFieldText
                                         id="resultIndex"
                                         placeholder="Enter result index name"
                                         prepend={CUSTOM_AD_RESULT_INDEX_PREFIX}
                                         {...field}
                                       />
-                                    </EuiFormRow>
+                                    </EuiCompressedFormRow>
                                   </EuiFlexItem>
                                 ) : null}
                               </EuiFlexGroup>
@@ -960,7 +960,7 @@ function AddAnomalyDetector({
 
                                 <EuiSpacer size="m" />
                                 <EuiPanel paddingSize="none">
-                                  <EuiButton
+                                  <EuiSmallButton
                                     className="featureButton"
                                     data-test-subj="addFeature"
                                     isDisabled={
@@ -972,7 +972,7 @@ function AddAnomalyDetector({
                                     }}
                                   >
                                     Add another feature
-                                  </EuiButton>
+                                  </EuiSmallButton>
                                 </EuiPanel>
                                 <EuiSpacer size="s" />
                                 <EuiText className="content-panel-subTitle">
@@ -1000,20 +1000,20 @@ function AddAnomalyDetector({
             <EuiFlyoutFooter>
               <EuiFlexGroup justifyContent="spaceBetween">
                 <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty onClick={closeFlyout}>Cancel</EuiButtonEmpty>
+                  <EuiSmallButtonEmpty onClick={closeFlyout}>Cancel</EuiSmallButtonEmpty>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   {mode === FLYOUT_MODES.existing ? (
-                    <EuiButton
+                    <EuiSmallButton
                       fill={true}
                       data-test-subj="adAnywhereAssociateDetectorButton"
                       isLoading={formikProps.isSubmitting}
                       onClick={() => handleAssociate(selectedDetector)}
                     >
                       Associate detector
-                    </EuiButton>
+                    </EuiSmallButton>
                   ) : (
-                    <EuiButton
+                    <EuiSmallButton
                       fill={true}
                       disabled={associationLimitReached}
                       data-test-subj="adAnywhereCreateDetectorButton"
@@ -1023,7 +1023,7 @@ function AddAnomalyDetector({
                       }}
                     >
                       Create detector
-                    </EuiButton>
+                    </EuiSmallButton>
                   )}
                 </EuiFlexItem>
               </EuiFlexGroup>

public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx

@@ -9,7 +9,7 @@ import {
   EuiSpacer,
   EuiIcon,
   EuiText,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiLoadingSpinner,
   EuiLink,
   EuiFlexGroup,
@@ -78,7 +78,7 @@ export function AssociateExisting(
       const indexPattern = await getSavedObjectsClient().get('index-pattern', associateExistingProps.indexPatternId);
       const refs = indexPattern.references as References[];
       const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
-      setDataSourceId(foundDataSourceId); 
+      setDataSourceId(foundDataSourceId);
     } catch (error) {
       console.error("Error fetching index pattern:", error);
     }
@@ -228,7 +228,7 @@ export function AssociateExisting(
         Eligible detectors don't include high-cardinality detectors.
       </EuiText>
       {existingDetectorsAvailableToAssociate ? (
-        <EuiComboBox
+        <EuiCompressedComboBox
           isLoading={isLoading}
           id="associate-existing__select"
           options={options}

public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.tsx

@@ -6,8 +6,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"
         iconType="arrowRight"
         aria-label="Expand"
@@ -76,10 +76,10 @@ const EnhancedAccordion = ({
         </EuiAccordion>
       )}
       {isButton && (
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           iconType={iconType}
           className="enhanced-accordion__button"
-        ></EuiButtonEmpty>
+        ></EuiSmallButtonEmpty>
       )}
     </div>
   </div>