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

…1105) * Use EuiSmallButton Signed-off-by: Miki <miki@amazon.com> * Use EuiSmallButtonIcon Signed-off-by: Miki <miki@amazon.com> * Use EuiSmallButtonEmpty Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedFormRow Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedField* Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedSelect and EuiCompressedSuperSelect Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedFilePicker Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedRadio and EuiCompressedRadioGroup Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedSwitch Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedEuiTextArea Signed-off-by: Miki <miki@amazon.com> * Use EuiCompressedComboBox Signed-off-by: Miki <miki@amazon.com> * Use EuiSmallFilterButton Signed-off-by: Miki <miki@amazon.com> * Undo unnecessary EuiSmallButton* uses Signed-off-by: Miki <miki@amazon.com> * Update snapshots and tests Signed-off-by: Miki <miki@amazon.com> * Introduce the redesign page and applications headers behind a switch (#7637) * Bump OUI to 1.9.0 Signed-off-by: Miki <miki@amazon.com> * Introduce the redesigned page header Signed-off-by: Miki <miki@amazon.com> Update UX of breadcrumbs, menu toggle, and the new contribution points Signed-off-by: Miki <miki@amazon.com> Add renderElement option in HeaderControls Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> Update application mocks and rearrange header layout Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> Break and restyle breadcrumb Signed-off-by: Zhongnan Su <szhongna@amazon.com> Implement header updates Signed-off-by: Miki <miki@amazon.com> * Introduce HeaderVariant Signed-off-by: Miki <miki@amazon.com> * Organize Header's layout Signed-off-by: Miki <miki@amazon.com> * Fix header control spacing Signed-off-by: Miki <miki@amazon.com> * Conditionally append breadcrumb to recent popover Fix mock for recent items Co-authored-by: Zhongnan Su <szhongna@amazon.com> Co-authored-by: Shenoy Pratik <sgguruda@amazon.com> * Update top nav render and add app header Use ScreenTitle instead of appname from topnav menu Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * Compress QueryStringInput appearance Signed-off-by: Miki <miki@amazon.com> * Update header for applications Signed-off-by: Miki <miki@amazon.com> * Eliminate colors from the borders of grouped action menu items Signed-off-by: Miki <miki@amazon.com> * Update TopNavControl*Data type to controlType for consistency Signed-off-by: Miki <miki@amazon.com> * Add tests for chrome Header Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * Update Breadcrumbs tests Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * Add tests for HeaderControlsContainer Signed-off-by: Miki <miki@amazon.com> * Add tests for TopNavControls and TopNavControlItem Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * Updated tests for TopNavMenu and TopNavMenuItem Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * Fix `uiSettingsServiceMock` missing `start` Signed-off-by: Miki <miki@amazon.com> * Add the `target` property to TopNavControlItem Signed-off-by: Miki <miki@amazon.com> * Update Navigation mock and start contract Signed-off-by: Miki <miki@amazon.com> * Add createGetterSetter mock in dashboards app state Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * Add tests for setting and unsetting header variant Signed-off-by: Miki <miki@amazon.com> * Add tests for setting header controls Signed-off-by: Miki <miki@amazon.com> * Re-skin DataSource selection's trigger button Signed-off-by: Miki <miki@amazon.com> * Conditionally change where theme management menu item shows up Signed-off-by: Miki <miki@amazon.com> * Conditionally change where the help menu items shows up Signed-off-by: Miki <miki@amazon.com> * Make IndexPatternTable page conditionally use the new page header Signed-off-by: Miki <miki@amazon.com> * Make Discover conditionally use the new application header Signed-off-by: Miki <miki@amazon.com> * Make Dashboards conditionally use the new application header Signed-off-by: Miki <miki@amazon.com> * Add changelog fragment Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> Signed-off-by: Miki <miki@amazon.com> * Add tracking issue for empty label for DataSourceMenuPopoverButton Signed-off-by: Miki <miki@amazon.com> * Use EUI aliases in CSS variables Signed-off-by: Miki <miki@amazon.com> * Remove TopNavMenuLink Signed-off-by: Miki <miki@amazon.com> * Make sure OuiHeader doesn't contribute to the background Also: * Remove unused code Signed-off-by: Miki <miki@amazon.com> * Better border hiding for DSM popover button Signed-off-by: Miki <miki@amazon.com> * Make popover button overflow later Signed-off-by: Miki <miki@amazon.com> --------- Signed-off-by: Miki <miki@amazon.com> Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> Co-authored-by: Zhongnan Su <szhongna@amazon.com> Co-authored-by: Shenoy Pratik <sgguruda@amazon.com> (cherry picked from commit 265a176390f337ddc2f3cc20dcd367e77b9abd9f) Signed-off-by: Miki <miki@amazon.com> * Update snapshots Signed-off-by: Miki <miki@amazon.com> --------- Signed-off-by: Miki <miki@amazon.com> Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> Co-authored-by: Zhongnan Su <szhongna@amazon.com> Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>
opensearch-project · Aug 19, 2024 · 9db14ad · 9db14ad
1 parent c0f2bf8
commit 9db14ad
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"