update newHeader for component template pages

public/components/FilterGroup/index.tsx

@@ -5,10 +5,11 @@ export interface IFilterGroupProps {
   options: { label: string }[];
   value?: string[];
   filterButtonProps?: EuiFilterButtonProps;
+  useNewUx?: boolean;
   onChange?: (val: IFilterGroupProps["value"]) => void;
 }
 
-export default function FilterGroup({ options, value, filterButtonProps, onChange }: IFilterGroupProps) {
+export default function FilterGroup({ options, value, filterButtonProps, useNewUx, onChange }: IFilterGroupProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const onButtonClick = () => {
@@ -30,6 +31,7 @@ export default function FilterGroup({ options, value, filterButtonProps, onChang
             numFilters={options?.length}
             hasActiveFilters={!!value?.length}
             numActiveFilters={value?.length}
+            size={useNewUx ? "s" : undefined}
             {...filterButtonProps}
           />
         }

public/components/IndexMapping/IndexMapping.tsx

@@ -20,7 +20,7 @@ export * from "./helper";
 export * from "./interfaces";
 
 const IndexMapping = (
-  { value: propsValue, onChange: propsOnChange, isEdit, oldValue, readonly, docVersion }: IndexMappingProps,
+  { value: propsValue, onChange: propsOnChange, isEdit, oldValue, readonly, docVersion, useNewUx }: IndexMappingProps,
   ref: Ref<IIndexMappingsRef>
 ) => {
   const value = propsValue?.properties || [];
@@ -194,10 +194,16 @@ const IndexMapping = (
           {readonly ? null : (
             <>
               <EuiSpacer />
-              <EuiButton style={{ marginRight: 8 }} data-test-subj="createIndexAddFieldButton" onClick={() => addField("")}>
+              <EuiButton
+                size={useNewUx ? "s" : undefined}
+                style={{ marginRight: 8 }}
+                data-test-subj="createIndexAddFieldButton"
+                onClick={() => addField("")}
+              >
                 Add new field
               </EuiButton>
               <EuiButton
+                size={useNewUx ? "s" : undefined}
                 data-test-subj="createIndexAddObjectFieldButton"
                 onClick={() =>
                   addField("", {

public/components/IndexMapping/interfaces.ts

@@ -23,6 +23,7 @@ export interface IndexMappingProps {
   oldMappingsEditable?: boolean; // in template edit case, existing mappings is editable
   readonly?: boolean;
   docVersion: string;
+  useNewUx?: boolean;
 }
 
 export enum EDITOR_MODE {

public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
-import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiButton, EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import FilterGroup from "../../../../components/FilterGroup";
 import { IndicesUpdateMode } from "../../../../utils/constants";
 
@@ -13,6 +13,7 @@ export interface SearchControlsProps {
     search: string;
     selectedTypes: string[];
   };
+  useNewUX?: boolean;
   onSearchChange: (args: SearchControlsProps["value"]) => void;
 }
 
@@ -32,7 +33,13 @@ export default function SearchControls(props: SearchControlsProps) {
   return (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
-        <EuiFieldSearch fullWidth placeholder="Search..." value={state.search} onChange={(e) => onChange("search", e.target.value)} />
+        <EuiFieldSearch
+          compressed={props.useNewUX}
+          fullWidth
+          placeholder="Search..."
+          value={state.search}
+          onChange={(e) => onChange("search", e.target.value)}
+        />
       </EuiFlexItem>
       <EuiFlexItem style={{ flexBasis: "100px" }} grow={false}>
         <FilterGroup
@@ -41,6 +48,7 @@ export default function SearchControls(props: SearchControlsProps) {
           }}
           onChange={(val) => onChange("selectedTypes", val || [])}
           value={state.selectedTypes}
+          useNewUx={props.useNewUX}
           options={[
             {
               label: IndicesUpdateMode.alias,

public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.test.tsx

@@ -15,6 +15,23 @@ import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import userEvent from "@testing-library/user-event";
 import { ICatComposableTemplate } from "../../interface";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter() {
   return {