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

…1103) * 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 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> * Use EuiCompressedSuperDatePicker Signed-off-by: Miki <miki@amazon.com> * Update snapshots Signed-off-by: Miki <miki@amazon.com> * Fix bad `useNewUX` applications Signed-off-by: Miki <miki@amazon.com> * Fix tests Signed-off-by: Miki <miki@amazon.com> * Update tests and snapshots post-conflict resolution Signed-off-by: Miki <miki@amazon.com> * fix: e2e test Signed-off-by: SuZhou-Joe <suzhou@amazon.com> --------- Signed-off-by: Miki <miki@amazon.com> Signed-off-by: SuZhou-Joe <suzhou@amazon.com> Co-authored-by: SuZhou-Joe <suzhou@amazon.com> (cherry picked from commit 7077166) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Aug 21, 2024 · b254f97 · b254f97
1 parent 7cf4b84
commit b254f97
Show file tree

Hide file tree

Showing 286 changed files with 2,324 additions and 2,218 deletions.
diff --git a/cypress/integration/plugins/index-management-dashboards-plugin/aliases.js b/cypress/integration/plugins/index-management-dashboards-plugin/aliases.js
@@ -60,7 +60,7 @@ describe("Aliases", () => {
   describe("can create a alias with wildcard and specific name", () => {
     it("successfully", () => {
       cy.get('[data-test-subj="Create aliasButton"]').click();
-      cy.get('[data-test-subj="form-name-alias"]').type(CREATE_ALIAS);
+      cy.get('[data-test-subj="form-name-alias"] input').type(CREATE_ALIAS);
       cy.get('[data-test-subj="form-name-indexArray"] [data-test-subj="comboBoxSearchInput"]').type(
         `${EDIT_INDEX}{enter}${SAMPLE_INDEX_PREFIX}-*{enter}`
       );

diff --git a/public/JobHandler/components/ErrorToastContentForJob.tsx b/public/JobHandler/components/ErrorToastContentForJob.tsx
@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { EuiButton, EuiSpacer, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiSpacer, EuiText } from "@elastic/eui";
 import React from "react";
 import { Modal } from "../../components/Modal";
 
@@ -14,7 +14,7 @@ export const ErrorToastContentForJob = (props: { shortError?: React.ReactChild;
       {fullError ? (
         <>
           <EuiSpacer />
-          <EuiButton
+          <EuiSmallButton
             onClick={
               /* istanbul ignore next */ () => {
                 Modal.show({
@@ -34,7 +34,7 @@ export const ErrorToastContentForJob = (props: { shortError?: React.ReactChild;
             color="danger"
           >
             See full error
-          </EuiButton>
+          </EuiSmallButton>
         </>
       ) : null}
     </div>

diff --git a/public/JobHandler/components/__snapshots__/components.test.tsx.snap b/public/JobHandler/components/__snapshots__/components.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`<ErrorToastContentForJob /> spec render with action 1`] = `
       class="euiSpacer euiSpacer--l"
     />
     <button
-      class="euiButton euiButton--danger"
+      class="euiButton euiButton--danger euiButton--small"
       style="float: right;"
       type="button"
     >

diff --git a/public/components/AdvancedSettings/__snapshots__/AdvancedSettings.test.tsx.snap b/public/components/AdvancedSettings/__snapshots__/AdvancedSettings.test.tsx.snap
@@ -41,7 +41,7 @@ HTMLCollection [
               class="euiSpacer euiSpacer--s"
             />
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div

diff --git a/public/components/AliasSelect/__snapshots__/AliasSelect.test.tsx.snap b/public/components/AliasSelect/__snapshots__/AliasSelect.test.tsx.snap
@@ -4,17 +4,17 @@ exports[`<AliasSelect /> spec renders the component and remove duplicate aliases
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="euiComboBox"
+  class="euiComboBox euiComboBox--compressed"
   role="combobox"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayout--compressed"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
         tabindex="-1"
       >
@@ -61,17 +61,17 @@ exports[`<AliasSelect /> spec renders with error 1`] = `
   <div
     aria-expanded="false"
     aria-haspopup="listbox"
-    class="euiComboBox"
+    class="euiComboBox euiComboBox--compressed"
     role="combobox"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayout euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <div
-          class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+          class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
           data-test-subj="comboBoxInput"
           tabindex="-1"
         >

diff --git a/public/components/ChannelNotification/ChannelNotification.tsx b/public/components/ChannelNotification/ChannelNotification.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiFormRow, EuiTextArea, EuiSelect, EuiButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiTextArea, EuiCompressedSelect, EuiSmallButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { FeatureChannelList } from "../../../server/models/interfaces";
@@ -36,7 +36,7 @@ const ChannelNotification = ({
       <CustomFormRow label="Channel ID">
         <EuiFlexGroup gutterSize="s" style={{ maxWidth: 600, width: 600 }}>
           <EuiFlexItem>
-            <EuiSelect
+            <EuiCompressedSelect
               id={actionNotification ? "action-channel-id" : "channel-id"}
               placeholder="Select channel ID"
               hasNoInitialSelection
@@ -48,7 +48,7 @@ const ChannelNotification = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               iconType="refresh"
               onClick={getChannels}
               disabled={loadingChannels}
@@ -57,9 +57,9 @@ const ChannelNotification = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+            <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
               Manage channels
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </CustomFormRow>
@@ -68,7 +68,7 @@ const ChannelNotification = ({
         <>
           <EuiSpacer size="m" />
 
-          <EuiFormRow title="Notification message" helpText="Embed variables in your message using Mustache template.">
+          <EuiCompressedFormRow title="Notification message" helpText="Embed variables in your message using Mustache template.">
             <EuiTextArea
               placeholder="The index {{ctx.index}} failed during policy execution."
               style={{ minHeight: "150px" }}
@@ -77,7 +77,7 @@ const ChannelNotification = ({
               onChange={onChangeMessage}
               data-test-subj={actionNotification ? "create-policy-notification-action-message" : "create-policy-notification-message"}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
     </>

diff --git a/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap b/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ChannelNotification /> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="some_html_id-row"
 >
   <div
@@ -26,13 +26,13 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
         class="euiFlexItem"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <select
-              class="euiSelect"
+              class="euiSelect euiSelect--compressed"
               data-test-subj="create-policy-notification-channel-id"
               id="channel-id"
               placeholder="Select channel ID"
@@ -67,7 +67,7 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary refresh-button"
+          class="euiButton euiButton--primary euiButton--small refresh-button"
           data-test-subj="channel-notification-refresh"
           type="button"
         >
@@ -85,7 +85,7 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <a
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           href="notifications-dashboards#/channels"
           rel="noopener noreferrer"
           target="_blank"

diff --git a/public/components/ComboBoxWithoutWarning/index.tsx b/public/components/ComboBoxWithoutWarning/index.tsx
@@ -2,14 +2,14 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { EuiComboBox, EuiComboBoxProps } from "@elastic/eui";
+import { EuiCompressedComboBox, EuiComboBoxProps } from "@elastic/eui";
 
 /**
  * The EuiComboBox has an issue when calling closeList.
  * It does not check if the component is still mounted.
  * And it will give a warning in browser console and terminal when running unittest.
  */
-export default class ComboBoxWithoutWarning<T> extends EuiComboBox<T> {
+export default class ComboBoxWithoutWarning<T> extends EuiCompressedComboBox<T> {
   memoriedCloseList: (event?: Event) => void;
   constructor(props: EuiComboBoxProps<T>) {
     super(props as any);

diff --git a/public/components/ConfirmationModal/ConfirmationModal.tsx b/public/components/ConfirmationModal/ConfirmationModal.tsx
@@ -5,14 +5,14 @@
 
 import React from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   // @ts-ignore
 } from "@elastic/eui";
 
@@ -47,10 +47,10 @@ const ConfirmationModal: React.SFC<ConfirmationModalProps> = ({
         <EuiModalBody>{bodyMessage}</EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={onClose} data-test-subj="confirmationModalCloseButton">
+          <EuiSmallButtonEmpty onClick={onClose} data-test-subj="confirmationModalCloseButton">
             Cancel
-          </EuiButtonEmpty>
-          <EuiButton
+          </EuiSmallButtonEmpty>
+          <EuiSmallButton
             onClick={() => {
               onAction();
               onClose();
@@ -60,7 +60,7 @@ const ConfirmationModal: React.SFC<ConfirmationModalProps> = ({
             {...actionProps}
           >
             {actionMessage}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>

diff --git a/public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap b/public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ConfirmationModal /> spec renders the component 1`] = `
           class="euiModalFooter"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--primary"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
             data-test-subj="confirmationModalCloseButton"
             type="button"
           >
@@ -66,7 +66,7 @@ exports[`<ConfirmationModal /> spec renders the component 1`] = `
             </span>
           </button>
           <button
-            class="euiButton euiButton--primary euiButton--fill"
+            class="euiButton euiButton--primary euiButton--small euiButton--fill"
             data-test-subj="confirmationModalActionButton"
             type="button"
           >

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 {
@@ -26,18 +26,18 @@ const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions, siz
       let button = children ? (
         children
       ) : (
-        <EuiButton {...buttonProps} data-test-subj={`${text}Button`} size={size ? size : "m"}>
+        <EuiSmallButton {...buttonProps} data-test-subj={`${text}Button`}>
           {text}
-        </EuiButton>
+        </EuiSmallButton>
       );
 
       if (modal) {
         button = (
           <ModalConsumer>
             {({ onShow }) => (
-              <EuiButton {...buttonProps} onClick={modal.onClickModal(onShow)} data-test-subj={`${text}Button`}>
+              <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"
     >