Merge branch 'main' into bug-fix-mds

Signed-off-by: Riya <[email protected]>
riysaxen-amzn · Aug 30, 2024 · dfc6310 · dfc6310
2 parents 1f4faf2 + 9db14ad
commit dfc6310
Show file tree

Hide file tree

Showing 105 changed files with 3,605 additions and 2,993 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.3.2",
+    "@types/vis": "^4.21.21",
     "cypress": "9.5.4",
     "cypress-real-events": "1.7.6",
     "cypress-recurse": "^1.27.0",
@@ -72,9 +73,8 @@
     "jest-cli": "^27.5.1",
     "jest-environment-jsdom": "^27.5.1",
     "lint-staged": "^10.2.0",
-    "ts-loader": "^6.2.1",
-    "@types/vis": "^4.21.21",
-    "string.prototype.replaceall": "1.0.7"
+    "string.prototype.replaceall": "1.0.7",
+    "ts-loader": "^6.2.1"
   },
   "engines": {
     "yarn": "^1.21.1"

diff --git a/public/components/ContentPanel/ContentPanelActions.tsx b/public/components/ContentPanel/ContentPanelActions.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSmallButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ModalConsumer } from '../Modal';
 
 interface ContentPanelActionsProps {
@@ -22,22 +22,22 @@ const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions }) =
   <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
     {actions.map(({ text, buttonProps = {}, flexItemProps = {}, modal = null }, index) => {
       let button = (
-        <EuiButton {...buttonProps} data-test-subj={`${text}Button`}>
+        <EuiSmallButton {...buttonProps} data-test-subj={`${text}Button`}>
           {text}
-        </EuiButton>
+        </EuiSmallButton>
       );
 
       if (modal) {
         button = (
           <ModalConsumer>
             {({ onShow }) => (
-              <EuiButton
+              <EuiSmallButton
                 {...buttonProps}
                 onClick={modal.onClickModal(onShow)}
                 data-test-subj={`${text}Button`}
               >
                 {text}
-              </EuiButton>
+              </EuiSmallButton>
             )}
           </ModalConsumer>
         );

diff --git a/public/components/ContentPanel/__snapshots__/ContentPanelActions.test.tsx.snap b/public/components/ContentPanel/__snapshots__/ContentPanelActions.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<ContentPanelActions /> spec renders the component 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       data-test-subj="ContentPanelActionsButton"
       type="button"
     >

diff --git a/public/components/DeleteModal/DeleteModal.tsx b/public/components/DeleteModal/DeleteModal.tsx
@@ -6,9 +6,9 @@
 import React, { ChangeEvent, Component } from 'react';
 import {
   EuiConfirmModal,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiForm,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiOverlayMask,
   EuiSpacer,
 } from '@elastic/eui';
@@ -75,14 +75,14 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
             </p>
             <EuiSpacer size="s" />
             {!!confirmation && (
-              <EuiFormRow helpText={`To confirm deletion, type "${DEFAULT_DELETION_TEXT}".`}>
-                <EuiFieldText
+              <EuiCompressedFormRow helpText={`To confirm deletion, type "${DEFAULT_DELETION_TEXT}".`}>
+                <EuiCompressedFieldText
                   value={confirmDeleteText}
                   placeholder={DEFAULT_DELETION_TEXT}
                   onChange={this.onChange}
                   data-test-subj={'deleteTextField'}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             )}
           </EuiForm>
         </EuiConfirmModal>

diff --git a/public/components/Notifications/NotificationForm.tsx b/public/components/Notifications/NotificationForm.tsx
@@ -5,17 +5,17 @@
 
 import {
   EuiAccordion,
-  EuiButton,
-  EuiComboBox,
+  EuiSmallButton,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
-  EuiSwitch,
+  EuiCompressedSwitch,
   EuiText,
-  EuiTextArea,
+  EuiCompressedTextArea,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import { NOTIFICATIONS_HREF } from '../../utils/constants';
@@ -64,7 +64,7 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
 
   return (
     <>
-      <EuiSwitch
+      <EuiCompressedSwitch
         label="Send notification"
         checked={shouldSendNotification}
         onChange={(e) => {
@@ -77,14 +77,14 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
         <>
           <EuiFlexGroup alignItems={'flexEnd'}>
             <EuiFlexItem style={{ maxWidth: 400 }}>
-              <EuiFormRow
+              <EuiCompressedFormRow
                 label={
                   <EuiText size="m">
                     <p>Notification channel</p>
                   </EuiText>
                 }
               >
-                <EuiComboBox
+                <EuiCompressedComboBox
                   placeholder={'Select notification channel.'}
                   async={true}
                   isLoading={loadingNotifications}
@@ -97,17 +97,17 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
                   onFocus={refreshNotificationChannels}
                   isDisabled={!hasNotificationPlugin}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 href={NOTIFICATIONS_HREF}
                 iconType={'popout'}
                 target={'_blank'}
                 isDisabled={!hasNotificationPlugin}
               >
                 Manage channels
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
 
@@ -132,52 +132,52 @@ export const NotificationForm: React.FC<NotificationFormProps> = ({
           >
             <EuiFlexGroup direction={'column'} style={{ width: '75%' }}>
               <EuiFlexItem>
-                <EuiFormRow
+                <EuiCompressedFormRow
                   label={
                     <EuiText size={'s'}>
                       <p>Message subject</p>
                     </EuiText>
                   }
                   fullWidth={true}
                 >
-                  <EuiFieldText
+                  <EuiCompressedFieldText
                     placeholder={'Enter a subject for the notification message.'}
                     value={action?.subject_template.source}
                     onChange={(e) => onMessageSubjectChange(e.target.value)}
                     required={true}
                     fullWidth={true}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
 
               <EuiFlexItem>
-                <EuiFormRow
+                <EuiCompressedFormRow
                   label={
                     <EuiText size="s">
                       <p>Message body</p>
                     </EuiText>
                   }
                   fullWidth={true}
                 >
-                  <EuiTextArea
+                  <EuiCompressedTextArea
                     placeholder={'Enter the content of the notification message.'}
                     value={action?.message_template.source}
                     onChange={(e) => onMessageBodyChange(e.target.value)}
                     required={true}
                     fullWidth={true}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
               {prepareMessage && (
                 <EuiFlexItem>
-                  <EuiFormRow>
-                    <EuiButton
+                  <EuiCompressedFormRow>
+                    <EuiSmallButton
                       fullWidth={false}
                       onClick={() => prepareMessage(true /* updateMessage */)}
                     >
                       Generate message
-                    </EuiButton>
-                  </EuiFormRow>
+                    </EuiSmallButton>
+                  </EuiCompressedFormRow>
                 </EuiFlexItem>
               )}
             </EuiFlexGroup>

diff --git a/public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx b/public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx
@@ -6,8 +6,9 @@
 import {
   EuiBasicTable,
   EuiBasicTableColumn,
-  EuiButton,
+  EuiSmallButton,
   EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -209,7 +210,7 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
             <EuiFlexItem grow={8}>
               <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
                 <EuiFlexItem grow={false}>
-                  <EuiButton
+                  <EuiSmallButton
                     disabled={acknowledged || alertItem.state !== ALERT_STATE.ACTIVE}
                     onClick={() => {
                       this.setState({ acknowledged: true });
@@ -218,10 +219,10 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
                     data-test-subj={'alert-details-flyout-acknowledge-button'}
                   >
                     Acknowledge
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="close"
                     iconType="cross"
                     iconSize="m"