From b7606e0b37a32fcdb15ff9ab98cdd5293016f0d8 Mon Sep 17 00:00:00 2001
From: Kshitij Tandon <tandonks@amazon.com>
Date: Mon, 19 Aug 2024 12:06:06 +0530
Subject: [PATCH] Fixing a few bugs and addressing comments

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
---
 .../__snapshots__/FilterGroup.test.tsx.snap   |   8 +-
 .../Aliases/containers/AliasActions/index.tsx |   2 +-
 .../Aliases/containers/Aliases/Aliases.tsx    |   6 +-
 .../ChangeManagedIndices.tsx                  |   6 +-
 .../components/NewPolicy/NewPolicy.tsx        |   5 +-
 .../containers/ChangePolicy/ChangePolicy.tsx  |  20 +--
 .../__snapshots__/ChangePolicy.test.tsx.snap  |  14 +-
 .../__snapshots__/IndexControls.test.tsx.snap |   2 +-
 .../ComposableTemplates.test.tsx.snap         |   2 +-
 .../containers/CreateIndex/CreateIndex.tsx    |  16 +-
 .../containers/IndexForm/index.tsx            |  13 +-
 .../CreateIndexTemplate.tsx                   |  21 +--
 .../CreateIndexTemplate.test.tsx.snap         |   3 +
 .../TemplateDetail/TemplateDetail.tsx         | 157 +++++++++---------
 .../TemplateDetail.test.tsx.snap              |   3 +
 .../CreateTransformForm.tsx                   |   7 +-
 .../DefineTransformsStep.tsx                  |   8 +-
 .../ReviewAndCreateStep.tsx                   |  12 +-
 .../SetUpIndicesStep/SetUpIndicesStep.tsx     |   9 +-
 .../SpecifyScheduleStep.tsx                   |  10 +-
 .../IndexControls/IndexControls.tsx           |   1 +
 .../Indices/containers/Indices/Indices.tsx    |  25 ++-
 .../containers/IndicesActions/index.tsx       |   2 +-
 .../ManagedIndexControls.tsx                  |   9 +
 .../ManagedIndices/ManagedIndices.tsx         |  11 +-
 .../ManagedIndices.test.tsx.snap              |   2 +-
 .../containers/Templates/Templates.tsx        |   2 +-
 .../containers/TemplatesActions/index.tsx     |   2 +-
 .../ConfigureTransform/Configure.tsx          |   2 +-
 .../GeneralInformation/GeneralInformation.tsx |   2 +-
 .../Transforms/components/Indices/Indices.tsx |   2 +-
 .../components/Schedule/Schedule.tsx          |   2 +-
 .../TransformEmptyPrompt.tsx                  |   4 +-
 .../TransformStatus/TransformStatus.tsx       |   2 +-
 .../containers/Transforms/EditTransform.tsx   |   4 +-
 .../Transforms/TransformSettings.tsx          |   2 +-
 .../containers/Transforms/Transforms.tsx      |   2 -
 .../__snapshots__/EditTransform.test.tsx.snap |   8 +-
 public/utils/constants.ts                     |   6 +-
 39 files changed, 227 insertions(+), 187 deletions(-)

diff --git a/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap b/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
index 37c38f309..adc9be3b8 100644
--- a/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
+++ b/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
@@ -13,7 +13,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -63,7 +63,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -181,7 +181,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -299,7 +299,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
diff --git a/public/pages/Aliases/containers/AliasActions/index.tsx b/public/pages/Aliases/containers/AliasActions/index.tsx
index 18c8d5f09..8aece3cd4 100644
--- a/public/pages/Aliases/containers/AliasActions/index.tsx
+++ b/public/pages/Aliases/containers/AliasActions/index.tsx
@@ -48,7 +48,7 @@ export default function AliasesActions(props: AliasesActionsProps) {
   const uiSettings = getUISettings();
   const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
-  const size = useUpdatedUX ? "s" : "m";
+  const size = useUpdatedUX ? "s" : undefined;
 
   return (
     <>
diff --git a/public/pages/Aliases/containers/Aliases/Aliases.tsx b/public/pages/Aliases/containers/Aliases/Aliases.tsx
index d83e8098a..6adbbb8e0 100644
--- a/public/pages/Aliases/containers/Aliases/Aliases.tsx
+++ b/public/pages/Aliases/containers/Aliases/Aliases.tsx
@@ -161,7 +161,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
   }
 
   componentDidMount() {
-    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.ALIASES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ALIASES];
+    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.NEW_ALIASES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ALIASES];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
     this.getAliases();
   }
@@ -310,7 +310,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
           <EuiFormRow
             fullWidth
             helpText={
-              <div style={{ width: "50%" }}>
+              <div style={{ width: "51%" }}>
                 An alias is a virtual index name that can point to one or more indexes. If your data is spread across multiple indexes, you
                 can create and query an alias instead of keeping track of which indexes to query.{" "}
                 <EuiLink target="_blank" external href={(this.context as CoreStart).docLinks.links.opensearch.indexAlias.base}>
@@ -325,7 +325,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
       },
     ];
 
-    const Buttonsize = this.state.useUpdatedUX ? "s" : "m";
+    const Buttonsize = this.state.useUpdatedUX ? "s" : undefined;
 
     const commonRender = () => {
       return (
diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
index 73d2009ee..c4bc4c259 100644
--- a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
+++ b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
@@ -17,6 +17,7 @@ interface ChangeManagedIndicesProps {
   onChangeManagedIndices: (selectedManagedIndices: { label: string; value?: ManagedIndexItem }[]) => void;
   onChangeStateFilters: (stateFilter: { label: string }[]) => void;
   managedIndicesError: string;
+  useUpdatedUX?: boolean;
 }
 
 interface ChangeManagedIndicesState {
@@ -71,8 +72,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
 
   render() {
     const { managedIndices, managedIndicesIsLoading, stateFilterSearchValue } = this.state;
-    const { selectedManagedIndices, selectedStateFilters, managedIndicesError } = this.props;
-
+    const { selectedManagedIndices, selectedStateFilters, managedIndicesError, useUpdatedUX } = this.props;
     const uniqueStates = selectedManagedIndices.reduce(
       (accu: Set<any>, selectedManagedIndex: { label: string; value?: ManagedIndexItem }) => {
         if (!selectedManagedIndex.value) return accu;
@@ -109,6 +109,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               // @ts-ignore
               onChange={this.props.onChangeManagedIndices}
               onSearchChange={this.onManagedIndexSearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
 
@@ -121,6 +122,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               // @ts-ignore
               onChange={this.props.onChangeStateFilters}
               onSearchChange={this.onStateFilterSearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
         </div>
diff --git a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
index f9171056f..9dad0f9f3 100644
--- a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
+++ b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
@@ -24,6 +24,7 @@ interface NewPolicyProps {
   onChangePolicy: (selectedPolicies: PolicyOption[]) => void;
   onChangeStateRadio: (optionId: string) => void;
   onStateSelectChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  useUpdatedUX?: boolean;
 }
 
 interface NewPolicyState {
@@ -70,7 +71,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
   };
 
   render() {
-    const { selectedPolicies, stateRadioIdSelected, stateSelected, selectedPoliciesError } = this.props;
+    const { selectedPolicies, stateRadioIdSelected, stateSelected, selectedPoliciesError, useUpdatedUX } = this.props;
     const { policies, policiesIsLoading } = this.state;
 
     const hasSelectedPolicy = !!selectedPolicies.length;
@@ -113,6 +114,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               // @ts-ignore
               onChange={this.props.onChangePolicy}
               onSearchChange={this.onPolicySearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
 
@@ -129,6 +131,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               value={stateSelected}
               onChange={this.props.onStateSelectChange}
               aria-label="Start state for new policy"
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
         </div>
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
index 9fff9d0b3..2b73723e4 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
@@ -21,6 +21,7 @@ import { getUISettings } from "../../../../services/Services";
 interface ChangePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   managedIndexService: ManagedIndexService;
   indexService: IndexService;
+  useUpdatedUX?: boolean;
 }
 
 interface ChangePolicyState {
@@ -54,9 +55,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
   state: ChangePolicyState = ChangePolicy.emptyState;
 
   async componentDidMount(): Promise<void> {
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-    const breadCrumbs = useUpdatedUX
+    const breadCrumbs = this.props.useUpdatedUX
       ? [BREADCRUMBS.MANAGED_INDICES, BREADCRUMBS.CHANGE_POLICY]
       : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.MANAGED_INDICES, BREADCRUMBS.CHANGE_POLICY];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
@@ -148,7 +147,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
   };
 
   render() {
-    const { indexService, managedIndexService } = this.props;
+    const { indexService, managedIndexService, useUpdatedUX } = this.props;
     const {
       selectedPolicies,
       selectedManagedIndices,
@@ -160,9 +159,6 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
       hasSubmitted,
     } = this.state;
 
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
     const Title = !useUpdatedUX
       ? () => {
           return (
@@ -189,6 +185,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
           onChangeManagedIndices={this.onChangeManagedIndices}
           onChangeStateFilters={this.onChangeStateFilters}
           managedIndicesError={hasSubmitted ? managedIndicesError : ""}
+          useUpdatedUX={useUpdatedUX}
         />
 
         <EuiSpacer />
@@ -204,18 +201,19 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
           onChangeStateRadio={this.onChangeStateRadio}
           onStateSelectChange={this.onStateSelectChange}
           selectedPoliciesError={hasSubmitted ? selectedPoliciesError : ""}
+          useUpdatedUX={useUpdatedUX}
         />
 
         <EuiSpacer />
 
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty size={useUpdatedUX ? "s" : "l"} onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
+            <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
               Cancel
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton size={useUpdatedUX ? "s" : "m"} fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
+            <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
               Change
             </EuiButton>
           </EuiFlexItem>
@@ -228,5 +226,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
 export default function (props: Omit<ChangePolicyProps, keyof DataSourceMenuProperties>) {
   const dataSourceMenuProperties = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <ChangePolicy {...props} {...dataSourceMenuProperties} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <ChangePolicy {...props} {...dataSourceMenuProperties} useUpdatedUX={useUpdatedUX} />;
 }
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 ab03a9949..054623d47 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
@@ -4,6 +4,18 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
 <div
   style="padding: 0px 0px;"
 >
+  <div
+    class="euiFlexItem"
+  >
+    <h1
+      class="euiTitle euiTitle--large"
+    >
+      Change Policy
+    </h1>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+  </div>
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     style="padding-left: 0px; padding-right: 0px;"
@@ -424,7 +436,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--large"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         data-test-subj="changePolicyCancelButton"
         type="button"
       >
diff --git a/public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
index 9979679a4..f824985b6 100644
--- a/public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
+++ b/public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
             type="button"
           >
             <span
diff --git a/public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap b/public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap
index a9a9a60e0..2bdc5d49d 100644
--- a/public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap
+++ b/public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap
@@ -149,7 +149,7 @@ exports[`<ComposableTemplates /> spec renders the component 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--large euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+                class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
                 type="button"
               >
                 <span
diff --git a/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx b/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx
index c7f2778de..968193746 100644
--- a/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx
+++ b/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx
@@ -15,6 +15,7 @@ import { getUISettings } from "../../../../services/Services";
 
 interface CreateIndexPropsBase extends RouteComponentProps<{ index?: string; mode?: IndicesUpdateMode }> {
   isEdit?: boolean;
+  useUpdatedUX?: boolean;
 }
 
 interface CreateIndexProps extends CreateIndexPropsBase, DataSourceMenuProperties {}
@@ -32,9 +33,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
 
   componentDidMount = async (): Promise<void> => {
     const isEdit = this.isEdit;
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-    const breadCrumbs = useUpdatedUX
+    const breadCrumbs = this.props.useUpdatedUX
       ? [BREADCRUMBS.INDICES, isEdit ? BREADCRUMBS.EDIT_INDEX : BREADCRUMBS.CREATE_INDEX]
       : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDICES, isEdit ? BREADCRUMBS.EDIT_INDEX : BREADCRUMBS.CREATE_INDEX];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
@@ -47,10 +46,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
   render() {
     const isEdit = this.isEdit;
 
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
-    return useUpdatedUX ? (
+    return this.props.useUpdatedUX ? (
       <div style={{ padding: "0px 0px" }}>
         <IndexForm
           index={this.index}
@@ -58,6 +54,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.INDICES)}
           dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
         />
       </div>
     ) : (
@@ -72,6 +69,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.INDICES)}
           dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
         />
       </div>
     );
@@ -81,5 +79,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
 export default function (props: CreateIndexPropsBase) {
   const dataSourceMenuProperties = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <CreateIndex {...props} {...dataSourceMenuProperties} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <CreateIndex {...props} {...dataSourceMenuProperties} useUpdatedUX={useUpdatedUX} />;
 }
diff --git a/public/pages/CreateIndex/containers/IndexForm/index.tsx b/public/pages/CreateIndex/containers/IndexForm/index.tsx
index e4bdd0ede..f50334ca6 100644
--- a/public/pages/CreateIndex/containers/IndexForm/index.tsx
+++ b/public/pages/CreateIndex/containers/IndexForm/index.tsx
@@ -55,6 +55,7 @@ export interface IndexFormProps
   onCancel?: () => void;
   onSubmitSuccess?: (indexName: string) => void;
   hideButtons?: boolean;
+  useUpdatedUX?: boolean;
 }
 
 interface CreateIndexState {
@@ -423,7 +424,7 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
 
   render() {
     const isEdit = this.isEdit;
-    const { hideButtons, readonly } = this.props;
+    const { hideButtons, readonly, useUpdatedUX } = this.props;
     const { indexDetail, isSubmitting, oldIndexDetail, loading } = this.state;
 
     if (loading) {
@@ -466,12 +467,18 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
             <EuiSpacer />
             <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createIndexCancelButton">
+                <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="createIndexCancelButton">
                   Cancel
                 </EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createIndexCreateButton">
+                <EuiButton
+                  fill
+                  size={useUpdatedUX ? "s" : undefined}
+                  onClick={this.onSubmit}
+                  isLoading={isSubmitting}
+                  data-test-subj="createIndexCreateButton"
+                >
                   {isEdit ? "Update" : "Create"}
                 </EuiButton>
               </EuiFlexItem>
diff --git a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.tsx b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.tsx
index 6eb304ba0..729815c00 100644
--- a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.tsx
+++ b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.tsx
@@ -18,7 +18,9 @@ interface CreateIndexTemplateProps
       template?: string;
       mode?: string;
     }>,
-    DataSourceMenuProperties {}
+    DataSourceMenuProperties {
+  useUpdatedUX?: boolean;
+}
 
 class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
   static contextType = CoreServicesContext;
@@ -47,10 +49,8 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
     } else {
       lastBread = BREADCRUMBS.CREATE_TEMPLATE;
     }
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-    const breadCrumbs = useUpdatedUX
-      ? [BREADCRUMBS.TEMPLATES, lastBread]
+    const breadCrumbs = this.props.useUpdatedUX
+      ? [BREADCRUMBS.NEW_TEMPLATES, lastBread]
       : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TEMPLATES, lastBread];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
   }
@@ -70,10 +70,7 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
   };
 
   render() {
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
-    return !useUpdatedUX ? (
+    return !this.props.useUpdatedUX ? (
       <div style={{ padding: "0px 50px" }}>
         <TemplateDetail
           history={this.props.history}
@@ -82,6 +79,7 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.TEMPLATES)}
           dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
         />
       </div>
     ) : (
@@ -93,6 +91,7 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.TEMPLATES)}
           dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
         />
       </div>
     );
@@ -102,5 +101,7 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
 export default function (props: Omit<CreateIndexTemplateProps, keyof DataSourceMenuProperties>) {
   const dataSourceMenuProps = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <CreateIndexTemplate {...props} {...dataSourceMenuProps} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <CreateIndexTemplate {...props} {...dataSourceMenuProps} useUpdatedUX={useUpdatedUX} />;
 }
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 4ca774614..54d4317ad 100644
--- a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
@@ -56,6 +56,9 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
         class="euiSpacer euiSpacer--l"
       />
     </div>
+    <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/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
index 2373a7790..81cb9f062 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
@@ -46,7 +46,6 @@ import UnsavedChangesBottomBar from "../../../../components/UnsavedChangesBottom
 import { IndexForm } from "../../../../containers/IndexForm";
 import { TABS_ENUM, tabs } from "../../constant";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
-import { TopNavControlDescriptionData, TopNavControlIconData } from "src/plugins/navigation/public";
 
 export interface TemplateDetailProps {
   templateName?: string;
@@ -55,10 +54,11 @@ export interface TemplateDetailProps {
   history: RouteComponentProps["history"];
   location: RouteComponentProps["location"];
   dataSourceId: string;
+  useUpdatedUX?: boolean;
 }
 
 const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) => {
-  const { templateName, onCancel, onSubmitSuccess, history } = props;
+  const { templateName, onCancel, onSubmitSuccess, history, useUpdatedUX } = props;
   const isEdit = !!templateName;
   const services = useContext(ServicesContext) as BrowserServices;
   const coreServices = useContext(CoreServicesContext) as CoreStart;
@@ -195,9 +195,6 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
       </EuiButton>
     </EuiFlexItem>
   );
-
-  const uiSettings = getUISettings();
-  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
   const { HeaderControl } = getNavigationUI();
   const { setAppDescriptionControls, setAppRightControls } = getApplication();
 
@@ -269,84 +266,86 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
 
   const Title = () => {
     return !useUpdatedUX ? (
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
-          <EuiTitle size="l">
-            {isEdit ? <h1 title={values.name}>{templateName}</h1> : <h1>{isEdit ? "Edit" : "Create"} template</h1>}
-          </EuiTitle>
-          {isEdit ? null : (
-            <CustomFormRow
-              fullWidth
-              label=""
-              helpText={
-                <div>
-                  Index templates let you initialize new indexes with predefined mappings and settings.{" "}
-                  <EuiLink external target="_blank" href={coreServices.docLinks.links.opensearch.indexTemplates.base}>
-                    Learn more
-                  </EuiLink>
-                </div>
-              }
-            >
-              <></>
-            </CustomFormRow>
-          )}
-        </EuiFlexItem>
-        {isEdit ? (
-          <>
-            <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
-              <EuiButton
-                style={{ marginRight: 20 }}
-                onClick={() => {
-                  const showValue: TemplateItemRemote = {
-                    ...values,
-                    template: IndexForm.transformIndexDetailToRemote(values.template),
-                  };
-                  Modal.show({
-                    locale: {
-                      ok: "Close",
-                    },
-                    style: {
-                      width: 800,
-                    },
-                    "data-test-subj": "templateJSONDetailModal",
-                    title: values.name,
-                    content: (
-                      <EuiCodeBlock language="json" isCopyable>
-                        {JSON.stringify(showValue, null, 2)}
-                      </EuiCodeBlock>
-                    ),
-                  });
-                }}
+      <>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem>
+            <EuiTitle size="l">
+              {isEdit ? <h1 title={values.name}>{templateName}</h1> : <h1>{isEdit ? "Edit" : "Create"} template</h1>}
+            </EuiTitle>
+            {isEdit ? null : (
+              <CustomFormRow
+                fullWidth
+                label=""
+                helpText={
+                  <div>
+                    Index templates let you initialize new indexes with predefined mappings and settings.{" "}
+                    <EuiLink external target="_blank" href={coreServices.docLinks.links.opensearch.indexTemplates.base}>
+                      Learn more
+                    </EuiLink>
+                  </div>
+                }
               >
-                View JSON
-              </EuiButton>
-              <EuiButton color="danger" onClick={() => setVisible(true)}>
-                Delete
-              </EuiButton>
-              <DeleteTemplateModal
-                visible={visible}
-                selectedItems={[templateName]}
-                onClose={() => {
-                  setVisible(false);
-                }}
-                onDelete={() => {
-                  setVisible(false);
-                  history.replace(ROUTES.TEMPLATES);
-                }}
-              />
-            </EuiFlexItem>
-            <EuiSpacer />
-          </>
-        ) : null}
-      </EuiFlexGroup>
+                <></>
+              </CustomFormRow>
+            )}
+          </EuiFlexItem>
+          {isEdit ? (
+            <>
+              <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
+                <EuiButton
+                  style={{ marginRight: 20 }}
+                  onClick={() => {
+                    const showValue: TemplateItemRemote = {
+                      ...values,
+                      template: IndexForm.transformIndexDetailToRemote(values.template),
+                    };
+                    Modal.show({
+                      locale: {
+                        ok: "Close",
+                      },
+                      style: {
+                        width: 800,
+                      },
+                      "data-test-subj": "templateJSONDetailModal",
+                      title: values.name,
+                      content: (
+                        <EuiCodeBlock language="json" isCopyable>
+                          {JSON.stringify(showValue, null, 2)}
+                        </EuiCodeBlock>
+                      ),
+                    });
+                  }}
+                >
+                  View JSON
+                </EuiButton>
+                <EuiButton color="danger" onClick={() => setVisible(true)}>
+                  Delete
+                </EuiButton>
+                <DeleteTemplateModal
+                  visible={visible}
+                  selectedItems={[templateName]}
+                  onClose={() => {
+                    setVisible(false);
+                  }}
+                  onDelete={() => {
+                    setVisible(false);
+                    history.replace(ROUTES.TEMPLATES);
+                  }}
+                />
+              </EuiFlexItem>
+              <EuiSpacer />
+            </>
+          ) : null}
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </>
     ) : (
       <>
-        {!isEdit ? <HeaderControl controls={descriptionData} setMountPoint={setAppDescriptionControls} /> : null}
         {isEdit ? (
-          <>
-            <HeaderControl controls={HeaderRight} setMountPoint={setAppRightControls} />
-          </>
-        ) : null}
+          <HeaderControl controls={HeaderRight} setMountPoint={setAppRightControls} />
+        ) : (
+          <HeaderControl controls={descriptionData} setMountPoint={setAppDescriptionControls} />
+        )}
       </>
     );
   };
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
index f809bbbe7..6677172dc 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
@@ -48,6 +48,9 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
       </div>
     </div>
   </div>
+  <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/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
index a0eb83a00..c984a880d 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
@@ -136,7 +136,6 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
 
   constructor(props: CreateTransformFormProps) {
     super(props);
-
     this.state = CreateTransformForm.baseState;
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
@@ -591,6 +590,8 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
       beenWarned,
       isLoading,
     } = this.state;
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
     return (
       <div style={{ width: "100%" }}>
         <SetUpIndices
@@ -617,6 +618,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           fields={fields}
           fieldSelectedOption={fieldSelectedOption}
           beenWarned={beenWarned}
+          useUpdatedUX={useUpdatedUX}
         />
         <DefineTransformsStep
           {...this.props}
@@ -632,6 +634,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           onEditTransformation={this.onEditTransformation}
           onRemoveTransformation={this.onRemoveTransformation}
           previewTransform={previewTransform}
+          useUpdatedUX={useUpdatedUX}
         />
         <SpecifyScheduleStep
           {...this.props}
@@ -647,6 +650,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           onChangeIntervalTime={this.onChangeIntervalTime}
           onChangePage={this.onChangePage}
           onChangeIntervalTimeunit={this.onChangeIntervalTimeunit}
+          useUpdatedUX={useUpdatedUX}
         />
         <ReviewAndCreateStep
           {...this.props}
@@ -671,6 +675,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           currentStep={this.state.currentStep}
           onChangeStep={this.onChangeStep}
           submitError={submitError}
+          useUpdatedUX={useUpdatedUX}
         />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={{ padding: "5px 50px" }}>
           <EuiFlexItem grow={false}>
diff --git a/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx b/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
index c732085be..d79537f0c 100644
--- a/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
+++ b/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
@@ -12,7 +12,6 @@ import CreateTransformSteps from "../../components/CreateTransformSteps";
 import { CoreServicesContext } from "../../../../components/core_services";
 import DefineTransforms from "../../components/DefineTransforms";
 import { FieldItem, TransformAggItem, TransformGroupItem } from "../../../../../models/interfaces";
-import { getUISettings } from "../../../../services/Services";
 
 interface DefineTransformsStepProps extends RouteComponentProps {
   transformService: TransformService;
@@ -28,6 +27,7 @@ interface DefineTransformsStepProps extends RouteComponentProps {
   onEditTransformation: (oldName: string, newName: string) => void;
   onRemoveTransformation: (name: string) => void;
   previewTransform: any[];
+  useUpdatedUX: boolean;
 }
 
 export default class DefineTransformsStep extends Component<DefineTransformsStepProps> {
@@ -55,12 +55,10 @@ export default class DefineTransformsStep extends Component<DefineTransformsStep
       onAggregationSelectionChange,
       onEditTransformation,
       onRemoveTransformation,
+      useUpdatedUX,
     } = this.props;
     if (currentStep !== 2) return null;
 
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
     const Title = !useUpdatedUX
       ? () => {
           return (
@@ -75,7 +73,7 @@ export default class DefineTransformsStep extends Component<DefineTransformsStep
       : () => {};
 
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={this.props.useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateTransformSteps step={2} />
diff --git a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
index d7703e626..71ff50281 100644
--- a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
+++ b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
@@ -41,6 +41,7 @@ interface ReviewAndCreateStepProps extends RouteComponentProps {
 
   interval: number;
   intervalTimeunit: string;
+  useUpdatedUX: boolean;
 }
 
 export default class ReviewAndCreateStep extends Component<ReviewAndCreateStepProps> {
@@ -60,15 +61,12 @@ export default class ReviewAndCreateStep extends Component<ReviewAndCreateStepPr
   render() {
     if (this.props.currentStep != 4) return null;
 
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
-    const Title = !useUpdatedUX
+    const Title = !this.props.useUpdatedUX
       ? () => {
           return (
             <EuiFlexItem>
               <EuiTitle size="l">
-                <h1>Specify Schedule</h1>
+                <h1>Review and Create</h1>
               </EuiTitle>
               <EuiSpacer />
             </EuiFlexItem>
@@ -77,13 +75,13 @@ export default class ReviewAndCreateStep extends Component<ReviewAndCreateStepPr
       : () => {};
 
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={this.props.useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateTransformSteps step={4} />
           </EuiFlexItem>
           <EuiFlexItem style={{ overflow: "auto", flex: 1 }} grow={false}>
-            {Title}
+            {Title()}
             <JobNameAndIndices {...this.props} />
             <EuiSpacer />
             <ReviewDefinition {...this.props} notifications={this.context.notifications} sourceIndex={this.props.sourceIndex[0].label} />
diff --git a/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx b/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
index 29a82f77c..c6aeea1bb 100644
--- a/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
+++ b/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
@@ -13,7 +13,6 @@ import CreateTransformSteps from "../../components/CreateTransformSteps";
 import IndexService from "../../../../services/IndexService";
 import { FieldItem, IndexItem } from "../../../../../models/interfaces";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
-import { getUISettings } from "../../../../services/Services";
 
 interface SetUpIndicesStepProps extends RouteComponentProps, DataSourceMenuProperties {
   transformService: TransformService;
@@ -40,6 +39,7 @@ interface SetUpIndicesStepProps extends RouteComponentProps, DataSourceMenuPrope
   fields: FieldItem[];
   fieldSelectedOption: string;
   beenWarned: boolean;
+  useUpdatedUX: boolean;
 }
 
 export default class SetUpIndicesStep extends Component<SetUpIndicesStepProps> {
@@ -48,10 +48,7 @@ export default class SetUpIndicesStep extends Component<SetUpIndicesStepProps> {
       return null;
     }
 
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
-    const Title = !useUpdatedUX
+    const Title = !this.props.useUpdatedUX
       ? () => {
           return (
             <EuiFlexItem>
@@ -65,7 +62,7 @@ export default class SetUpIndicesStep extends Component<SetUpIndicesStepProps> {
       : () => {};
 
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={this.props.useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateTransformSteps step={1} />
diff --git a/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx b/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
index 3ebc2b4ed..9ea5e6a4c 100644
--- a/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
+++ b/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
@@ -14,7 +14,6 @@ import CreateTransformSteps from "../../components/CreateTransformSteps";
 import Schedule from "../../components/Schedule";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { createdTransformToastMessage } from "../../utils/helpers";
-import { getUISettings } from "../../../../services/Services";
 
 interface SpecifyScheduleStepProps extends RouteComponentProps {
   transformService: TransformService;
@@ -30,6 +29,7 @@ interface SpecifyScheduleStepProps extends RouteComponentProps {
   onChangeIntervalTime: (e: ChangeEvent<HTMLInputElement>) => void;
   onChangePage: (e: ChangeEvent<HTMLInputElement>) => void;
   onChangeIntervalTimeunit: (e: ChangeEvent<HTMLSelectElement>) => void;
+  useUpdatedUX: boolean;
 }
 
 interface SpecifyScheduleStepState {
@@ -121,12 +121,10 @@ export default class SpecifyScheduleStep extends Component<SpecifyScheduleStepPr
       onChangeIntervalTime,
       onChangePage,
       onChangeIntervalTimeunit,
+      useUpdatedUX,
     } = this.props;
     const { transformId, transformIdError } = this.state;
 
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-
     const Title = !useUpdatedUX
       ? () => {
           return (
@@ -141,13 +139,13 @@ export default class SpecifyScheduleStep extends Component<SpecifyScheduleStepPr
       : () => {};
 
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={this.props.useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateTransformSteps step={3} />
           </EuiFlexItem>
           <EuiFlexItem>
-            {Title}
+            {Title()}
             <Schedule
               {...this.props}
               isEdit={false}
diff --git a/public/pages/Indices/components/IndexControls/IndexControls.tsx b/public/pages/Indices/components/IndexControls/IndexControls.tsx
index 8ef970780..e69a8d08c 100644
--- a/public/pages/Indices/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Indices/components/IndexControls/IndexControls.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlexItem,
   EuiSearchBar,
   EuiSwitch,
+  EuiButtonEmpty,
 } from "@elastic/eui";
 import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
 import IndicesActions from "../../containers/IndicesActions";
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 2d3b4edf5..7978958ca 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -101,6 +101,11 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
     listenEvent(EVENT_MAP.SPLIT_COMPLETE, this.getIndices);
     listenEvent(EVENT_MAP.OPEN_COMPLETE, this.getIndices);
     await this.getIndices();
+    if (this.state.useUpdatedUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.INDICES.text.concat(` (${this.state.totalIndices})`), href: BREADCRUMBS.INDICES.href },
+      ]);
+    }
   }
 
   componentWillUnmount(): void {
@@ -116,6 +121,11 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
     if (!_.isEqual(prevQuery, currQuery)) {
       await this.getIndices();
     }
+    if (this.state.useUpdatedUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.INDICES.text.concat(` (${this.state.totalIndices})`), href: BREADCRUMBS.INDICES.href },
+      ]);
+    }
   }
 
   getQueryObjectFromState({
@@ -259,26 +269,11 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
 
     const { HeaderControl } = getNavigationUI();
     const { setAppRightControls } = getApplication();
-    const { setAppBadgeControls } = getApplication();
 
     const { history } = this.props;
-    const numberIndices = "(" + totalIndices.toString() + ")";
-
-    const title = [
-      {
-        renderComponent: (
-          <EuiTitle size="m">
-            <h3>
-              <span className="panel-header-count"> {totalIndices > 0 ? `(${totalIndices})` : null} </span>
-            </h3>
-          </EuiTitle>
-        ),
-      },
-    ];
 
     return this.state.useUpdatedUX ? (
       <>
-        <HeaderControl setMountPoint={setAppBadgeControls} controls={title} />
         <HeaderControl
           setMountPoint={setAppRightControls}
           controls={[
diff --git a/public/pages/Indices/containers/IndicesActions/index.tsx b/public/pages/Indices/containers/IndicesActions/index.tsx
index 353b339e3..366cb3c94 100644
--- a/public/pages/Indices/containers/IndicesActions/index.tsx
+++ b/public/pages/Indices/containers/IndicesActions/index.tsx
@@ -129,7 +129,7 @@ export default function IndicesActions(props: IndicesActionsProps) {
   const uiSettings = getUISettings();
   const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
-  const size = useUpdatedUX ? "s" : "m";
+  const size = useUpdatedUX ? "s" : undefined;
 
   return (
     <>
diff --git a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
index 8205d95f9..7f648b69c 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
+++ b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
@@ -16,11 +16,13 @@ import {
   EuiPopover,
   EuiContextMenuPanel,
   EuiButtonIcon,
+  EuiButtonEmpty,
 } from "@elastic/eui";
 import { DataStream } from "../../../../../server/models/interfaces";
 import { ManagedIndices } from "../../containers/ManagedIndices/ManagedIndices";
 import { ManagedIndexItem } from "plugins/index-management-dashboards-plugin/models/interfaces";
 import { getUISettings } from "../../../../services/Services";
+import { size } from "lodash";
 
 interface ManagedIndexControlsProps {
   search: string;
@@ -71,6 +73,13 @@ export default class ManagedIndexControls extends Component<ManagedIndexControls
             multiSelect: false,
             cache: 60000,
             options: () => this.getDataStreams(),
+            popoverProps: {
+              button: (
+                <EuiButtonEmpty size="s" iconType="arrowDown" iconSide="right" flush="right">
+                  Data streams2
+                </EuiButtonEmpty>
+              ),
+            },
           },
         ]
       : undefined;
diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
index 15a78914d..c00e99b20 100644
--- a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
+++ b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
@@ -207,6 +207,11 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
       : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.MANAGED_INDICES];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
     await this.getManagedIndices();
+    if (this.state.useUpdatedUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.MANAGED_INDICES.text.concat(` (${this.state.totalManagedIndices})`), href: BREADCRUMBS.MANAGED_INDICES.href },
+      ]);
+    }
   }
 
   async componentDidUpdate(prevProps: ManagedIndicesProps, prevState: ManagedIndicesState) {
@@ -215,6 +220,11 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
     if (!_.isEqual(prevQuery, currQuery)) {
       await this.getManagedIndices();
     }
+    if (this.state.useUpdatedUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.MANAGED_INDICES.text.concat(` (${this.state.totalManagedIndices})`), href: BREADCRUMBS.MANAGED_INDICES.href },
+      ]);
+    }
   }
 
   static getQueryObjectFromState({
@@ -660,7 +670,6 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
               toggleShowDataStreams={this.toggleShowDataStreams}
               Actions={Action()}
             />
-            {/* {Action()} */}
             {CommonTable()}
           </ContentPanel>
           {RetryPolicyModal()}
diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/__snapshots__/ManagedIndices.test.tsx.snap b/public/pages/ManagedIndices/containers/ManagedIndices/__snapshots__/ManagedIndices.test.tsx.snap
index 2458144b7..bd13c9e87 100644
--- a/public/pages/ManagedIndices/containers/ManagedIndices/__snapshots__/ManagedIndices.test.tsx.snap
+++ b/public/pages/ManagedIndices/containers/ManagedIndices/__snapshots__/ManagedIndices.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ManagedIndices /> spec renders the component 1`] = `
 <div
-  style="padding: 0px 0px;"
+  style="padding: 0px 25px;"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
diff --git a/public/pages/Templates/containers/Templates/Templates.tsx b/public/pages/Templates/containers/Templates/Templates.tsx
index b98e713bf..0ac946b32 100644
--- a/public/pages/Templates/containers/Templates/Templates.tsx
+++ b/public/pages/Templates/containers/Templates/Templates.tsx
@@ -113,7 +113,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
     }
   }
   componentDidMount() {
-    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.TEMPLATES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TEMPLATES];
+    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.NEW_TEMPLATES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TEMPLATES];
     this.context.chrome.setBreadcrumbs(breadCrumbs);
     this.getTemplates();
   }
diff --git a/public/pages/Templates/containers/TemplatesActions/index.tsx b/public/pages/Templates/containers/TemplatesActions/index.tsx
index 85146239e..8f59e884c 100644
--- a/public/pages/Templates/containers/TemplatesActions/index.tsx
+++ b/public/pages/Templates/containers/TemplatesActions/index.tsx
@@ -30,7 +30,7 @@ export default function TemplatesActions(props: TemplatesActionsProps) {
   const uiSettings = getUISettings();
   const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
-  const size = useUpdatedUX ? "s" : "m";
+  const size = useUpdatedUX ? "s" : undefined;
 
   return (
     <>
diff --git a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
index 2b07a5439..d2a09aba3 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" | "m";
+  size: "s" | undefined;
 }
 
 const ConfigureTransform = ({
diff --git a/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx b/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
index 42c06a4e6..4521a2c8b 100644
--- a/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
+++ b/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
@@ -47,7 +47,7 @@ export default class GeneralInformation extends Component<GeneralInformationProp
     ];
     const uiSettings = getUISettings();
     const useUpdatedUX = uiSettings.get("home:useNewHomePage");
-    const size = useUpdatedUX ? "s" : "m";
+    const size = useUpdatedUX ? "s" : undefined;
 
     return (
       <ContentPanel
diff --git a/public/pages/Transforms/components/Indices/Indices.tsx b/public/pages/Transforms/components/Indices/Indices.tsx
index f5d5fca09..9ec627d12 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" | "m";
+  size: "s" | undefined;
 }
 
 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 04f6fa5fe..21625c075 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" | "m";
+  size: "s" | undefined;
 }
 
 export default class Schedule extends Component<ScheduleProps> {
diff --git a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
index 945be1943..defa31e12 100644
--- a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
+++ b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
@@ -36,7 +36,7 @@ const getActions: React.SFC<TransformEmptyPromptProps> = ({ filterIsApplied, loa
 
   if (filterIsApplied) {
     return (
-      <EuiButton size={useUpdatedUX ? "s" : "m"} fill onClick={resetFilters} data-test-subj="transformEmptyPromptRestFilters">
+      <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={resetFilters} data-test-subj="transformEmptyPromptRestFilters">
         Reset Filters
       </EuiButton>
     );
@@ -44,7 +44,7 @@ const getActions: React.SFC<TransformEmptyPromptProps> = ({ filterIsApplied, loa
 
   return (
     <EuiButton
-      size={useUpdatedUX ? "s" : "m"}
+      size={useUpdatedUX ? "s" : undefined}
       href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`}
       data-test-subj="emptyPromptCreateTransformButton"
     >
diff --git a/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx b/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
index b516576fe..ea12f8270 100644
--- a/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
+++ b/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
@@ -24,7 +24,7 @@ export default class TransformStatus extends Component<TransformStatusProps> {
     const uiSettings = getUISettings();
     const useUpdatedUX = uiSettings.get("home:useNewHomePage");
     return (
-      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform status" titleSize={useUpdatedUX ? "s" : "m"}>
+      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform status" titleSize={useUpdatedUX ? "s" : undefined}>
         <div style={{ paddingLeft: "10px" }}>
           <EuiSpacer size="s" />
           <EuiFlexGrid columns={4}>
diff --git a/public/pages/Transforms/containers/Transforms/EditTransform.tsx b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
index f9e9a32f4..6ccb44700 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" : "m";
+    const size = this.state.useUpdatedUX ? "s" : undefined;
 
     const Common = () => {
       return (
@@ -188,7 +188,7 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
 
           <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty size={this.state.useUpdatedUX ? "s" : "l"} onClick={this.onCancel} data-test-subj="editTransformCancelButton">
+              <EuiButtonEmpty size={size} onClick={this.onCancel} data-test-subj="editTransformCancelButton">
                 Cancel
               </EuiButtonEmpty>
             </EuiFlexItem>
diff --git a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
index f790e24a3..43d6524b8 100644
--- a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
@@ -92,7 +92,7 @@ export default class TransformSettings extends Component<TransformSettingsProps,
     const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
     return (
-      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform settings" titleSize={useUpdatedUX ? "s" : "m"}>
+      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform settings" titleSize={useUpdatedUX ? "s" : undefined}>
         <div style={{ paddingLeft: "10px" }}>
           <EuiSpacer size="m" />
           <EuiFlexGrid columns={4}>
diff --git a/public/pages/Transforms/containers/Transforms/Transforms.tsx b/public/pages/Transforms/containers/Transforms/Transforms.tsx
index 3eae08d93..c042dafe0 100644
--- a/public/pages/Transforms/containers/Transforms/Transforms.tsx
+++ b/public/pages/Transforms/containers/Transforms/Transforms.tsx
@@ -253,8 +253,6 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
     const { HeaderControl } = getNavigationUI();
     const { setAppRightControls } = getApplication();
 
-    const Bsize = this.state.useUpdatedUX ? "s" : "m";
-
     return this.state.useUpdatedUX ? (
       <div style={{ padding: "0px" }}>
         <HeaderControl
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 e01d6f6f9..b3ad00a9d 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--medium"
+          class="euiTitle euiTitle--large"
         >
           Job name and description
           <span
@@ -160,7 +160,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
         class="euiFlexItem"
       >
         <h3
-          class="euiTitle euiTitle--medium"
+          class="euiTitle euiTitle--large"
         >
           Indices
           <span
@@ -339,7 +339,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
         class="euiFlexItem"
       >
         <h3
-          class="euiTitle euiTitle--medium"
+          class="euiTitle euiTitle--large"
         >
           Schedule
           <span
@@ -578,7 +578,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--large"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         data-test-subj="editTransformCancelButton"
         type="button"
       >
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index c5c581e49..b7df09e5f 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -112,8 +112,10 @@ export const BREADCRUMBS = Object.freeze({
   EDIT_INDEX: { text: "Edit Index", href: `#${ROUTES.CREATE_INDEX}` },
   INDEX_DETAIL: { text: "Index Detail", href: "#" },
   REINDEX: { text: "Reindex", href: `#${ROUTES.REINDEX}` },
-  ALIASES: { text: "Index aliases", href: `#${ROUTES.ALIASES}` },
-  TEMPLATES: { text: "Index templates", href: `#${ROUTES.TEMPLATES}` },
+  ALIASES: { text: "Aliases", href: `#${ROUTES.ALIASES}` },
+  NEW_ALIASES: { text: "Index aliases", href: `#${ROUTES.ALIASES}` },
+  TEMPLATES: { text: "Templates", href: `#${ROUTES.TEMPLATES}` },
+  NEW_TEMPLATES: { text: "Index templates", href: `#${ROUTES.TEMPLATES}` },
   CREATE_TEMPLATE: { text: "Create index template", href: `#${ROUTES.CREATE_TEMPLATE}` },
   EDIT_TEMPLATE: { text: "Edit template", href: `#${ROUTES.CREATE_TEMPLATE}` },
   SPLIT_INDEX: { text: "Split Index", href: `#${ROUTES.SPLIT_INDEX}` },