From 1e6df0b366e8cdc1fe1c35206b1b270e9455e07c Mon Sep 17 00:00:00 2001
From: Kshitij Tandon <tandonks@amazon.com>
Date: Mon, 19 Aug 2024 13:03:10 +0530
Subject: [PATCH] Fixing a few bugs in old UI

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
---
 .../containers/ChangePolicy/ChangePolicy.tsx  | 109 +--
 .../__snapshots__/ChangePolicy.test.tsx.snap  |  20 +-
 .../CreateIndexTemplate.test.tsx.snap         |   3 -
 .../TemplateDetail/TemplateDetail.tsx         |   1 -
 .../CreateTransformForm.test.tsx.snap         | 664 +++++++++---------
 .../DefineTransformsStep.tsx                  |   4 +-
 .../ReviewAndCreateStep.tsx                   |   4 +-
 .../SetUpIndicesStep/SetUpIndicesStep.tsx     |  12 +-
 .../SpecifyScheduleStep.tsx                   |   4 +-
 .../ConfigureTransform/Configure.tsx          |   2 +-
 .../Transforms/components/Indices/Indices.tsx |   2 +-
 .../components/Schedule/Schedule.tsx          |   2 +-
 .../containers/Transforms/EditTransform.tsx   |  16 +-
 .../__snapshots__/EditTransform.test.tsx.snap |   6 +-
 14 files changed, 421 insertions(+), 428 deletions(-)

diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
index 2b73723e4..97ececf11 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
@@ -159,66 +159,67 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
       hasSubmitted,
     } = this.state;
 
-    const Title = !useUpdatedUX
-      ? () => {
-          return (
-            <EuiFlexItem>
-              <EuiTitle size="l">
-                <h1>Change Policy</h1>
-              </EuiTitle>
-              <EuiSpacer />
+    const Common = () => {
+      return (
+        <>
+          <ChangeManagedIndices
+            key={`changeManagedIndices-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
+            {...this.props}
+            managedIndexService={managedIndexService}
+            selectedManagedIndices={selectedManagedIndices}
+            selectedStateFilters={selectedStateFilters}
+            onChangeManagedIndices={this.onChangeManagedIndices}
+            onChangeStateFilters={this.onChangeStateFilters}
+            managedIndicesError={hasSubmitted ? managedIndicesError : ""}
+            useUpdatedUX={useUpdatedUX}
+          />
+
+          <EuiSpacer />
+
+          <NewPolicy
+            key={`newPolicy-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
+            {...this.props}
+            indexService={indexService}
+            selectedPolicies={selectedPolicies}
+            stateRadioIdSelected={stateRadioIdSelected}
+            stateSelected={stateSelected}
+            onChangePolicy={this.onChangeSelectedPolicy}
+            onChangeStateRadio={this.onChangeStateRadio}
+            onStateSelectChange={this.onStateSelectChange}
+            selectedPoliciesError={hasSubmitted ? selectedPoliciesError : ""}
+            useUpdatedUX={useUpdatedUX}
+          />
+
+          <EuiSpacer />
+
+          <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
+                Cancel
+              </EuiButtonEmpty>
             </EuiFlexItem>
-          );
-        }
-      : () => {};
-
-    return (
-      <div style={{ padding: "0px 0px" }}>
-        {Title()}
-
-        <ChangeManagedIndices
-          key={`changeManagedIndices-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
-          {...this.props}
-          managedIndexService={managedIndexService}
-          selectedManagedIndices={selectedManagedIndices}
-          selectedStateFilters={selectedStateFilters}
-          onChangeManagedIndices={this.onChangeManagedIndices}
-          onChangeStateFilters={this.onChangeStateFilters}
-          managedIndicesError={hasSubmitted ? managedIndicesError : ""}
-          useUpdatedUX={useUpdatedUX}
-        />
-
-        <EuiSpacer />
+            <EuiFlexItem grow={false}>
+              <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
+                Change
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      );
+    };
 
-        <NewPolicy
-          key={`newPolicy-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
-          {...this.props}
-          indexService={indexService}
-          selectedPolicies={selectedPolicies}
-          stateRadioIdSelected={stateRadioIdSelected}
-          stateSelected={stateSelected}
-          onChangePolicy={this.onChangeSelectedPolicy}
-          onChangeStateRadio={this.onChangeStateRadio}
-          onStateSelectChange={this.onStateSelectChange}
-          selectedPoliciesError={hasSubmitted ? selectedPoliciesError : ""}
-          useUpdatedUX={useUpdatedUX}
-        />
+    return !useUpdatedUX ? (
+      <div style={{ padding: "0px 25px" }}>
+        <EuiTitle size="l">
+          <h1>Change policy</h1>
+        </EuiTitle>
 
         <EuiSpacer />
 
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
-              Cancel
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
-              Change
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        {Common()}
       </div>
+    ) : (
+      <div style={{ padding: "0px 0px" }}>{Common()}</div>
     );
   }
 }
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
index 054623d47..1f40cb70b 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
@@ -2,20 +2,16 @@
 
 exports[`<ChangePolicy /> spec renders the component 1`] = `
 <div
-  style="padding: 0px 0px;"
+  style="padding: 0px 25px;"
 >
-  <div
-    class="euiFlexItem"
+  <h1
+    class="euiTitle euiTitle--large"
   >
-    <h1
-      class="euiTitle euiTitle--large"
-    >
-      Change Policy
-    </h1>
-    <div
-      class="euiSpacer euiSpacer--l"
-    />
-  </div>
+    Change policy
+  </h1>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding-left: 0px; padding-right: 0px;"
diff --git a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
index 54d4317ad..ce2e5f5f0 100644
--- a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
@@ -52,9 +52,6 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
           </span>
         </button>
       </div>
-      <div
-        class="euiSpacer euiSpacer--l"
-      />
     </div>
     <div
       class="euiSpacer euiSpacer--l"
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
index 81cb9f062..f79077eab 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
@@ -333,7 +333,6 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
                   }}
                 />
               </EuiFlexItem>
-              <EuiSpacer />
             </>
           ) : null}
         </EuiFlexGroup>
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
index 16deeb136..48c7ae204 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
@@ -153,21 +153,145 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
         <div
           class="euiFlexItem"
         >
+          <h1
+            class="euiTitle euiTitle--large"
+          >
+            Set up indices
+          </h1>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
           <div
-            class="euiFlexItem"
+            class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+            style="padding: 20px 20px;"
           >
-            <h1
-              class="euiTitle euiTitle--large"
-            >
-              Set up indices
-            </h1>
             <div
-              class="euiSpacer euiSpacer--l"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              style="padding: 0px 10px;"
+            >
+              <div
+                class="euiFlexItem"
+              >
+                <h3
+                  class="euiTitle euiTitle--medium"
+                >
+                  Job name and description
+                  <span
+                    class="panel-header-count"
+                  >
+                     
+                     
+                  </span>
+                </h3>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
             />
+            <div
+              style="padding: 10px;"
+            >
+              <div>
+                <div
+                  class="euiFormRow"
+                  id="some_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      aria-invalid="false"
+                      class="euiFormLabel euiFormRow__label"
+                      for="some_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          aria-describedby="some_html_id-help-0"
+                          class="euiFieldText"
+                          id="some_html_id"
+                          placeholder="my-transformjob1"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="euiFormHelpText euiFormRow__text"
+                      id="some_html_id-help-0"
+                    >
+                      Specify a unique, descriptive name.
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiSpacer euiSpacer--l"
+                />
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <div
+                      class="euiText euiText--extraSmall"
+                    >
+                      <h4>
+                        Description
+                      </h4>
+                    </div>
+                  </div>
+                  <div
+                    class="euiFlexItem"
+                  >
+                    <div
+                      class="euiText euiText--extraSmall"
+                    >
+                      <div
+                        class="euiTextColor euiTextColor--subdued"
+                      >
+                        <i>
+                           – optional
+                        </i>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiSpacer euiSpacer--xs"
+                />
+                <div
+                  class="euiFormRow"
+                  id="some_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <textarea
+                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+                      data-test-subj="description"
+                      id="some_html_id"
+                      rows="3"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <div
-            class="euiFlexItem"
-          >
+            class="euiSpacer euiSpacer--l"
+          />
+          <div>
             <div
               class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
               style="padding: 20px 20px;"
@@ -182,7 +306,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                   <h3
                     class="euiTitle euiTitle--medium"
                   >
-                    Job name and description
+                    Indices
                     <span
                       class="panel-header-count"
                     >
@@ -211,38 +335,81 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                         class="euiFormLabel euiFormRow__label"
                         for="some_html_id"
                       >
-                        Name
+                        Source index
                       </label>
                     </div>
                     <div
                       class="euiFormRow__fieldWrapper"
                     >
                       <div
-                        class="euiFormControlLayout"
+                        aria-describedby="some_html_id-help-0"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        class="euiComboBox"
+                        data-test-subj="sourceIndexCombobox"
+                        role="combobox"
                       >
                         <div
-                          class="euiFormControlLayout__childrenWrapper"
+                          class="euiFormControlLayout"
                         >
-                          <input
-                            aria-describedby="some_html_id-help-0"
-                            class="euiFieldText"
-                            id="some_html_id"
-                            placeholder="my-transformjob1"
-                            type="text"
-                            value=""
-                          />
+                          <div
+                            class="euiFormControlLayout__childrenWrapper"
+                          >
+                            <div
+                              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                              data-test-subj="comboBoxInput"
+                              tabindex="-1"
+                            >
+                              <p
+                                class="euiComboBoxPlaceholder"
+                              >
+                                Select source index
+                              </p>
+                              <div
+                                class="euiComboBox__input"
+                                style="font-size: 14px; display: inline-block;"
+                              >
+                                <input
+                                  aria-controls=""
+                                  data-test-subj="comboBoxSearchInput"
+                                  id="some_html_id"
+                                  role="textbox"
+                                  style="box-sizing: content-box; width: 2px;"
+                                  value=""
+                                />
+                                <div
+                                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                />
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                            >
+                              <span
+                                class="euiLoadingSpinner euiLoadingSpinner--medium"
+                              />
+                              <button
+                                aria-label="Open list of options"
+                                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                data-test-subj="comboBoxToggleListButton"
+                                type="button"
+                              >
+                                EuiIconMock
+                              </button>
+                            </div>
+                          </div>
                         </div>
                       </div>
                       <div
                         class="euiFormHelpText euiFormRow__text"
                         id="some_html_id-help-0"
                       >
-                        Specify a unique, descriptive name.
+                        The index where this transform job is performed on. Type in * as wildcard for index pattern. Indices cannot be changed once the job is created. Please ensure that you select the right source index.
                       </div>
                     </div>
                   </div>
                   <div
-                    class="euiSpacer euiSpacer--l"
+                    class="euiSpacer euiSpacer--s"
                   />
                   <div
                     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -254,7 +421,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                         class="euiText euiText--extraSmall"
                       >
                         <h4>
-                          Description
+                          Source index filter
                         </h4>
                       </div>
                     </div>
@@ -275,372 +442,197 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </div>
                   </div>
                   <div
-                    class="euiSpacer euiSpacer--xs"
-                  />
-                  <div
-                    class="euiFormRow"
-                    id="some_html_id-row"
+                    class="euiText euiText--extraSmall"
+                    style="width: 400px;"
                   >
                     <div
-                      class="euiFormRow__fieldWrapper"
+                      class="euiTextColor euiTextColor--subdued"
                     >
-                      <textarea
-                        class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
-                        data-test-subj="description"
-                        id="some_html_id"
-                        rows="3"
-                      />
+                      You can use the custom DSL to filter a subset of the source index to use in the transform job, which optimizes the job for performance and computing resources. You cannot change these filters once the job is created.
                     </div>
                   </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div>
-              <div
-                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                style="padding: 20px 20px;"
-              >
-                <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  style="padding: 0px 10px;"
-                >
                   <div
-                    class="euiFlexItem"
+                    class="euiText euiText--extraSmall"
                   >
-                    <h3
-                      class="euiTitle euiTitle--medium"
+                    <a
+                      class="euiLink euiLink--primary"
+                      href="https://opensearch.org/docs/opensearch/query-dsl/index/"
+                      rel="noopener noreferrer"
+                      target="_blank"
                     >
-                      Indices
+                       
+                      Learn more
+                      EuiIconMock
                       <span
-                        class="panel-header-count"
+                        class="euiScreenReaderOnly"
                       >
-                         
-                         
+                        (opens in a new tab or window)
                       </span>
-                    </h3>
+                    </a>
                   </div>
-                </div>
-                <hr
-                  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-                />
-                <div
-                  style="padding: 10px;"
-                >
-                  <div>
-                    <div
-                      class="euiFormRow"
-                      id="some_html_id-row"
-                    >
-                      <div
-                        class="euiFormRow__labelWrapper"
-                      >
-                        <label
-                          aria-invalid="false"
-                          class="euiFormLabel euiFormRow__label"
-                          for="some_html_id"
-                        >
-                          Source index
-                        </label>
-                      </div>
-                      <div
-                        class="euiFormRow__fieldWrapper"
-                      >
-                        <div
-                          aria-describedby="some_html_id-help-0"
-                          aria-expanded="false"
-                          aria-haspopup="listbox"
-                          class="euiComboBox"
-                          data-test-subj="sourceIndexCombobox"
-                          role="combobox"
-                        >
-                          <div
-                            class="euiFormControlLayout"
-                          >
-                            <div
-                              class="euiFormControlLayout__childrenWrapper"
-                            >
-                              <div
-                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
-                                data-test-subj="comboBoxInput"
-                                tabindex="-1"
-                              >
-                                <p
-                                  class="euiComboBoxPlaceholder"
-                                >
-                                  Select source index
-                                </p>
-                                <div
-                                  class="euiComboBox__input"
-                                  style="font-size: 14px; display: inline-block;"
-                                >
-                                  <input
-                                    aria-controls=""
-                                    data-test-subj="comboBoxSearchInput"
-                                    id="some_html_id"
-                                    role="textbox"
-                                    style="box-sizing: content-box; width: 2px;"
-                                    value=""
-                                  />
-                                  <div
-                                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                                  />
-                                </div>
-                              </div>
-                              <div
-                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                              >
-                                <span
-                                  class="euiLoadingSpinner euiLoadingSpinner--medium"
-                                />
-                                <button
-                                  aria-label="Open list of options"
-                                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                  data-test-subj="comboBoxToggleListButton"
-                                  type="button"
-                                >
-                                  EuiIconMock
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          class="euiFormHelpText euiFormRow__text"
-                          id="some_html_id-help-0"
-                        >
-                          The index where this transform job is performed on. Type in * as wildcard for index pattern. Indices cannot be changed once the job is created. Please ensure that you select the right source index.
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiSpacer euiSpacer--s"
-                    />
-                    <div
-                      class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <div
-                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
-                        <div
-                          class="euiText euiText--extraSmall"
-                        >
-                          <h4>
-                            Source index filter
-                          </h4>
-                        </div>
-                      </div>
-                      <div
-                        class="euiFlexItem"
-                      >
-                        <div
-                          class="euiText euiText--extraSmall"
-                        >
-                          <div
-                            class="euiTextColor euiTextColor--subdued"
-                          >
-                            <i>
-                               – optional
-                            </i>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiText euiText--extraSmall"
-                      style="width: 400px;"
-                    >
-                      <div
-                        class="euiTextColor euiTextColor--subdued"
-                      >
-                        You can use the custom DSL to filter a subset of the source index to use in the transform job, which optimizes the job for performance and computing resources. You cannot change these filters once the job is created.
-                      </div>
-                    </div>
-                    <div
-                      class="euiText euiText--extraSmall"
-                    >
-                      <a
-                        class="euiLink euiLink--primary"
-                        href="https://opensearch.org/docs/opensearch/query-dsl/index/"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                         
-                        Learn more
-                        EuiIconMock
-                        <span
-                          class="euiScreenReaderOnly"
-                        >
-                          (opens in a new tab or window)
-                        </span>
-                      </a>
-                    </div>
-                    <div
-                      class="euiSpacer euiSpacer--s"
-                    />
+                  <div
+                    class="euiSpacer euiSpacer--s"
+                  />
+                  <span
+                    class="euiBadge euiBadge--iconRight"
+                    style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                  >
                     <span
-                      class="euiBadge euiBadge--iconRight"
-                      style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                      class="euiBadge__content"
                     >
-                      <span
-                        class="euiBadge__content"
+                      <button
+                        aria-label="Edit Source Index Filter"
+                        class="euiBadge__childButton"
+                      />
+                      <button
+                        aria-label="Clear Source Index Filter"
+                        class="euiBadge__iconButton"
+                        title="Clear Source Index Filter"
+                        type="button"
                       >
-                        <button
-                          aria-label="Edit Source Index Filter"
-                          class="euiBadge__childButton"
-                        />
-                        <button
-                          aria-label="Clear Source Index Filter"
-                          class="euiBadge__iconButton"
-                          title="Clear Source Index Filter"
-                          type="button"
-                        >
-                          EuiIconMock
-                        </button>
-                      </span>
+                        EuiIconMock
+                      </button>
                     </span>
+                  </span>
+                  <div
+                    class="euiPopover euiPopover--anchorDownCenter"
+                  >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter"
+                      class="euiPopover__anchor"
                     >
-                      <div
-                        class="euiPopover__anchor"
+                      <button
+                        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall globalFilterBar__addButton"
+                        data-test-subj="addFilter"
+                        type="button"
                       >
-                        <button
-                          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall globalFilterBar__addButton"
-                          data-test-subj="addFilter"
-                          type="button"
+                        <span
+                          class="euiButtonContent euiButtonEmpty__content"
                         >
                           <span
-                            class="euiButtonContent euiButtonEmpty__content"
+                            class="euiButtonEmpty__text"
                           >
-                            <span
-                              class="euiButtonEmpty__text"
-                            >
-                              Edit data filter
-                            </span>
+                            Edit data filter
                           </span>
-                        </button>
-                      </div>
-                    </div>
-                    <div
-                      class="euiText euiText--extraSmall"
-                    >
-                      <div
-                        class="euiTextColor euiTextColor--danger"
-                      />
+                        </span>
+                      </button>
                     </div>
+                  </div>
+                  <div
+                    class="euiText euiText--extraSmall"
+                  >
                     <div
-                      class="euiSpacer euiSpacer--s"
-                    />
-                    <hr
-                      class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                      class="euiTextColor euiTextColor--danger"
                     />
+                  </div>
+                  <div
+                    class="euiSpacer euiSpacer--s"
+                  />
+                  <hr
+                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                  />
+                  <div
+                    class="euiFormRow"
+                    id="some_html_id-row"
+                  >
                     <div
-                      class="euiFormRow"
-                      id="some_html_id-row"
+                      class="euiFormRow__labelWrapper"
                     >
-                      <div
-                        class="euiFormRow__labelWrapper"
+                      <label
+                        aria-invalid="false"
+                        class="euiFormLabel euiFormRow__label"
+                        for="some_html_id"
                       >
-                        <label
-                          aria-invalid="false"
-                          class="euiFormLabel euiFormRow__label"
-                          for="some_html_id"
-                        >
-                          Target index
-                        </label>
-                      </div>
+                        Target index
+                      </label>
+                    </div>
+                    <div
+                      class="euiFormRow__fieldWrapper"
+                    >
                       <div
-                        class="euiFormRow__fieldWrapper"
+                        aria-describedby="some_html_id-help-0"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        class="euiComboBox"
+                        data-test-subj="targetIndexCombobox"
+                        role="combobox"
                       >
                         <div
-                          aria-describedby="some_html_id-help-0"
-                          aria-expanded="false"
-                          aria-haspopup="listbox"
-                          class="euiComboBox"
-                          data-test-subj="targetIndexCombobox"
-                          role="combobox"
+                          class="euiFormControlLayout"
                         >
                           <div
-                            class="euiFormControlLayout"
+                            class="euiFormControlLayout__childrenWrapper"
                           >
                             <div
-                              class="euiFormControlLayout__childrenWrapper"
+                              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                              data-test-subj="comboBoxInput"
+                              tabindex="-1"
                             >
-                              <div
-                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
-                                data-test-subj="comboBoxInput"
-                                tabindex="-1"
+                              <p
+                                class="euiComboBoxPlaceholder"
                               >
-                                <p
-                                  class="euiComboBoxPlaceholder"
-                                >
-                                  Select or create target index
-                                </p>
-                                <div
-                                  class="euiComboBox__input"
-                                  style="font-size: 14px; display: inline-block;"
-                                >
-                                  <input
-                                    aria-controls=""
-                                    data-test-subj="comboBoxSearchInput"
-                                    id="some_html_id"
-                                    role="textbox"
-                                    style="box-sizing: content-box; width: 2px;"
-                                    value=""
-                                  />
-                                  <div
-                                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                                  />
-                                </div>
-                              </div>
+                                Select or create target index
+                              </p>
                               <div
-                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                class="euiComboBox__input"
+                                style="font-size: 14px; display: inline-block;"
                               >
-                                <span
-                                  class="euiLoadingSpinner euiLoadingSpinner--medium"
+                                <input
+                                  aria-controls=""
+                                  data-test-subj="comboBoxSearchInput"
+                                  id="some_html_id"
+                                  role="textbox"
+                                  style="box-sizing: content-box; width: 2px;"
+                                  value=""
+                                />
+                                <div
+                                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
                                 />
-                                <button
-                                  aria-label="Open list of options"
-                                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                  data-test-subj="comboBoxToggleListButton"
-                                  type="button"
-                                >
-                                  EuiIconMock
-                                </button>
                               </div>
                             </div>
+                            <div
+                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                            >
+                              <span
+                                class="euiLoadingSpinner euiLoadingSpinner--medium"
+                              />
+                              <button
+                                aria-label="Open list of options"
+                                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                data-test-subj="comboBoxToggleListButton"
+                                type="button"
+                              >
+                                EuiIconMock
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiFormHelpText euiFormRow__text"
-                          id="some_html_id-help-0"
-                        >
-                          The index stores transform results. You can look up an existing index to reuse or type to create a new index.
-                        </div>
+                      </div>
+                      <div
+                        class="euiFormHelpText euiFormRow__text"
+                        id="some_html_id-help-0"
+                      >
+                        The index stores transform results. You can look up an existing index to reuse or type to create a new index.
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiCallOut euiCallOut--warning"
+            >
               <div
-                class="euiSpacer euiSpacer--l"
-              />
-              <div
-                class="euiCallOut euiCallOut--warning"
+                class="euiText euiText--small"
               >
                 <div
-                  class="euiText euiText--small"
+                  class="euiTextColor euiTextColor--default"
                 >
-                  <div
-                    class="euiTextColor euiTextColor--default"
-                  >
-                    <p>
-                      You can't change indices after creating a job. Double-check the source and target index names before proceeding.
-                    </p>
-                  </div>
+                  <p>
+                    You can't change indices after creating a job. Double-check the source and target index names before proceeding.
+                  </p>
                 </div>
               </div>
             </div>
diff --git a/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx b/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
index d79537f0c..fe7419ef4 100644
--- a/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
+++ b/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
@@ -62,12 +62,12 @@ export default class DefineTransformsStep extends Component<DefineTransformsStep
     const Title = !useUpdatedUX
       ? () => {
           return (
-            <EuiFlexItem>
+            <>
               <EuiTitle size="l">
                 <h1>Define transform</h1>
               </EuiTitle>
               <EuiSpacer />
-            </EuiFlexItem>
+            </>
           );
         }
       : () => {};
diff --git a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
index 71ff50281..e75ea6efe 100644
--- a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
+++ b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
@@ -64,12 +64,12 @@ export default class ReviewAndCreateStep extends Component<ReviewAndCreateStepPr
     const Title = !this.props.useUpdatedUX
       ? () => {
           return (
-            <EuiFlexItem>
+            <>
               <EuiTitle size="l">
                 <h1>Review and Create</h1>
               </EuiTitle>
               <EuiSpacer />
-            </EuiFlexItem>
+            </>
           );
         }
       : () => {};
diff --git a/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx b/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
index c6aeea1bb..f6ca048a1 100644
--- a/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
+++ b/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
@@ -51,12 +51,12 @@ export default class SetUpIndicesStep extends Component<SetUpIndicesStepProps> {
     const Title = !this.props.useUpdatedUX
       ? () => {
           return (
-            <EuiFlexItem>
+            <>
               <EuiTitle size="l">
                 <h1>Set up indices</h1>
               </EuiTitle>
               <EuiSpacer />
-            </EuiFlexItem>
+            </>
           );
         }
       : () => {};
@@ -69,11 +69,9 @@ export default class SetUpIndicesStep extends Component<SetUpIndicesStepProps> {
           </EuiFlexItem>
           <EuiFlexItem>
             {Title()}
-            <EuiFlexItem>
-              <ConfigureTransform isEdit={false} {...this.props} />
-              <EuiSpacer />
-              <TransformIndices key={this.props.dataSourceId} {...this.props} />
-            </EuiFlexItem>
+            <ConfigureTransform isEdit={false} {...this.props} />
+            <EuiSpacer />
+            <TransformIndices key={this.props.dataSourceId} {...this.props} />
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer />
diff --git a/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx b/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
index 9ea5e6a4c..307070bb9 100644
--- a/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
+++ b/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
@@ -128,12 +128,12 @@ export default class SpecifyScheduleStep extends Component<SpecifyScheduleStepPr
     const Title = !useUpdatedUX
       ? () => {
           return (
-            <EuiFlexItem>
+            <>
               <EuiTitle size="l">
                 <h1>Specify Schedule</h1>
               </EuiTitle>
               <EuiSpacer />
-            </EuiFlexItem>
+            </>
           );
         }
       : () => {};
diff --git a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
index d2a09aba3..2b07a5439 100644
--- a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
+++ b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
@@ -14,7 +14,7 @@ interface ConfigureTransformProps {
   onChangeName: (value: ChangeEvent<HTMLInputElement>) => void;
   onChangeDescription: (value: ChangeEvent<HTMLTextAreaElement>) => void;
   description: string;
-  size: "s" | undefined;
+  size: "s" | "m";
 }
 
 const ConfigureTransform = ({
diff --git a/public/pages/Transforms/components/Indices/Indices.tsx b/public/pages/Transforms/components/Indices/Indices.tsx
index 9ec627d12..f5d5fca09 100644
--- a/public/pages/Transforms/components/Indices/Indices.tsx
+++ b/public/pages/Transforms/components/Indices/Indices.tsx
@@ -11,7 +11,7 @@ interface IndicesProps {
   sourceIndex: string;
   targetIndex: string;
   sourceIndexFilter: string;
-  size: "s" | undefined;
+  size: "s" | "m";
 }
 
 export default class Indices extends Component<IndicesProps> {
diff --git a/public/pages/Transforms/components/Schedule/Schedule.tsx b/public/pages/Transforms/components/Schedule/Schedule.tsx
index 21625c075..04f6fa5fe 100644
--- a/public/pages/Transforms/components/Schedule/Schedule.tsx
+++ b/public/pages/Transforms/components/Schedule/Schedule.tsx
@@ -28,7 +28,7 @@ interface ScheduleProps {
   onCronTimeZoneChange: (e: ChangeEvent<HTMLSelectElement>) => void;
   onIntervalChange: (e: ChangeEvent<HTMLInputElement>) => void;
   onIntervalTimeUnitChange: (e: ChangeEvent<HTMLSelectElement>) => void;
-  size: "s" | undefined;
+  size: "s" | "m";
 }
 
 export default class Schedule extends Component<ScheduleProps> {
diff --git a/public/pages/Transforms/containers/Transforms/EditTransform.tsx b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
index 6ccb44700..ff179f23c 100644
--- a/public/pages/Transforms/containers/Transforms/EditTransform.tsx
+++ b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
@@ -146,7 +146,7 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
       schedule,
     } = this.state;
 
-    const size = this.state.useUpdatedUX ? "s" : undefined;
+    const size = this.state.useUpdatedUX ? "s" : "m";
 
     const Common = () => {
       return (
@@ -188,12 +188,22 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
 
           <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty size={size} onClick={this.onCancel} data-test-subj="editTransformCancelButton">
+              <EuiButtonEmpty
+                size={this.state.useUpdatedUX ? "s" : undefined}
+                onClick={this.onCancel}
+                data-test-subj="editTransformCancelButton"
+              >
                 Cancel
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton size={size} fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="editTransformSaveButton">
+              <EuiButton
+                size={this.state.useUpdatedUX ? "s" : undefined}
+                fill
+                onClick={this.onSubmit}
+                isLoading={isSubmitting}
+                data-test-subj="editTransformSaveButton"
+              >
                 Save changes
               </EuiButton>
             </EuiFlexItem>
diff --git a/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap b/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
index b3ad00a9d..390277feb 100644
--- a/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
+++ b/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
         class="euiFlexItem"
       >
         <h3
-          class="euiTitle euiTitle--large"
+          class="euiTitle euiTitle--medium"
         >
           Job name and description
           <span
@@ -160,7 +160,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
         class="euiFlexItem"
       >
         <h3
-          class="euiTitle euiTitle--large"
+          class="euiTitle euiTitle--medium"
         >
           Indices
           <span
@@ -339,7 +339,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
         class="euiFlexItem"
       >
         <h3
-          class="euiTitle euiTitle--large"
+          class="euiTitle euiTitle--medium"
         >
           Schedule
           <span