From 1610144588e9280889b4a5755e922ad6f5183560 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Mon, 19 Aug 2024 11:32:54 +0800
Subject: [PATCH] update newHeader for Index state management policies (#1108)
 (#1120)

* Initial commit for header update for snapshot management policy page



* some correction



* final commit



* Update pages snapshots (#1111)




* Fix for snapshot test race condition (#1113)




* Few refactoring



* resolving UT build failures



---------









(cherry picked from commit 12f28d1f9ae4682c6f839175e66259c01a3eb520)

Signed-off-by: Shubh Sahu <shubhvs@amazon.com>
Signed-off-by: Sandeep Kumawat <skumwt@amazon.com>
Signed-off-by: Prabhat Sharma <ptsharma@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Shubh Sahu <shubhvs@amazon.com>
Co-authored-by: Sandeep Kumawat <2025sandeepkumawat@gmail.com>
Co-authored-by: Sandeep Kumawat <skumwt@amazon.com>
Co-authored-by: Prabhat <20185657+CaptainDredge@users.noreply.github.com>
Co-authored-by: Prabhat Sharma <ptsharma@amazon.com>
---
 .../ConfigurePolicy/ConfigurePolicy.tsx       |  15 +-
 .../CreatePolicy/CreatePolicy.test.tsx        |  17 ++
 .../containers/CreatePolicy/CreatePolicy.tsx  |  80 ++++--
 .../containers/Policies/Policies.test.tsx     |  21 +-
 .../Policies/containers/Policies/Policies.tsx | 243 +++++++++++++++++-
 .../PolicyDetails/PolicyDetails.tsx           | 163 +++++++++---
 .../VisualCreatePolicy/VisualCreatePolicy.tsx |  73 ++++--
 public/utils/constants.ts                     |   2 +
 8 files changed, 524 insertions(+), 90 deletions(-)

diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx b/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
index 20d471c9b..e7a29c53c 100644
--- a/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
+++ b/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
@@ -12,14 +12,19 @@ interface ConfigurePolicyProps {
   policyIdError: string;
   isEdit: boolean;
   onChange: (value: ChangeEvent<HTMLInputElement>) => void;
+  useNewUx?: boolean;
 }
 
-const ConfigurePolicy = ({ isEdit, policyId, policyIdError, onChange }: ConfigurePolicyProps) => (
-  <ContentPanel bodyStyles={{ padding: "initial" }} title="Name policy" titleSize="s">
+const ConfigurePolicy = ({ isEdit, policyId, policyIdError, onChange, useNewUx }: ConfigurePolicyProps) => (
+  <ContentPanel bodyStyles={useNewUx ? { padding: "0px 0px" } : { padding: "initial" }} title="Name policy" titleSize="s">
     <div style={{ paddingLeft: "10px" }}>
-      <EuiText size="xs">
-        <p>Policies let you automatically perform administrative operations on indices.</p>
-      </EuiText>
+      {!useNewUx ? (
+        <EuiText size="xs">
+          <p>Policies let you automatically perform administrative operations on indices.</p>
+        </EuiText>
+      ) : (
+        <></>
+      )}
       <EuiSpacer size="s" />
       <EuiFormRow
         label="Policy ID"
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.test.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.test.tsx
index f99f3a3ec..4f70064fe 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.test.tsx
+++ b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.test.tsx
@@ -16,9 +16,26 @@ import { ModalProvider, ModalRoot } from "../../../../components/Modal";
 import { DEFAULT_POLICY } from "../../utils/constants";
 import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesConsumer, CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 
 jest.mock("../../components/DefinePolicy", () => require("../../components/DefinePolicy/__mocks__/DefinePolicyMock"));
 
+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 renderCreatePolicyWithRouter(initialEntries = ["/"]) {
   return {
     ...render(
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
index 98070fc95..855e6acfb 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
+++ b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
@@ -4,7 +4,18 @@
  */
 
 import React, { ChangeEvent, Component, Fragment, useContext } from "react";
-import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiCallOut, EuiLink, EuiIcon } from "@elastic/eui";
+import {
+  EuiSpacer,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiLink,
+  EuiIcon,
+  EuiText,
+} from "@elastic/eui";
 import queryString from "query-string";
 import { RouteComponentProps } from "react-router-dom";
 import { DEFAULT_POLICY } from "../../utils/constants";
@@ -12,11 +23,12 @@ import DefinePolicy from "../../components/DefinePolicy";
 import ConfigurePolicy from "../../components/ConfigurePolicy";
 import { Policy } from "../../../../../models/interfaces";
 import { PolicyService } from "../../../../services";
-import { BREADCRUMBS, DOCUMENTATION_URL, ROUTES } from "../../../../utils/constants";
+import { BREADCRUMBS, DOCUMENTATION_URL, ROUTES, POLICY_DOCUMENTATION_URL } from "../../../../utils/constants";
 import { getErrorMessage } from "../../../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 
 interface CreatePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   isEdit: boolean;
@@ -32,6 +44,7 @@ interface CreatePolicyState {
   submitError: string;
   isSubmitting: boolean;
   hasSubmitted: boolean;
+  useNewUX: boolean;
 }
 
 export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState> {
@@ -39,6 +52,8 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
   _isMount: boolean;
   constructor(props: CreatePolicyProps) {
     super(props);
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
 
     this.state = {
       policySeqNo: null,
@@ -49,29 +64,32 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
       jsonString: "",
       isSubmitting: false,
       hasSubmitted: false,
+      useNewUX: useNewUx,
     };
 
     this._isMount = true;
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES]);
+    const breadCrumbs = this.state.useNewUX ? [BREADCRUMBS.INDEX_POLICIES_NEW] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     if (this.props.isEdit) {
       const { id } = queryString.parse(this.props.location.search);
       if (typeof id === "string" && !!id) {
-        this.context.chrome.setBreadcrumbs([
-          BREADCRUMBS.INDEX_MANAGEMENT,
-          BREADCRUMBS.INDEX_POLICIES,
-          BREADCRUMBS.EDIT_POLICY,
-          { text: id },
-        ]);
+        const editBreadCrumbs = this.state.useNewUX
+          ? [BREADCRUMBS.INDEX_POLICIES_NEW, { text: id }, BREADCRUMBS.EDIT_POLICY]
+          : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.EDIT_POLICY, { text: id }];
+        this.context.chrome.setBreadcrumbs(editBreadCrumbs);
         await this.getPolicyToEdit(id);
       } else {
         this.context.notifications.toasts.addDanger(`Invalid policy id: ${id}`);
         this.props.history.push(ROUTES.INDEX_POLICIES);
       }
     } else {
-      this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.CREATE_POLICY]);
+      const createBreadCrumbs = this.state.useNewUX
+        ? [BREADCRUMBS.INDEX_POLICIES_NEW, BREADCRUMBS.CREATE_POLICY_NEW]
+        : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.CREATE_POLICY];
+      this.context.chrome.setBreadcrumbs(createBreadCrumbs);
       this.setState({ jsonString: DEFAULT_POLICY });
     }
   };
@@ -201,12 +219,13 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
   renderEditCallOut = (): React.ReactNode | null => {
     const { isEdit } = this.props;
     if (!isEdit) return null;
-
+    const titleSize = this.state.useNewUX ? "s" : undefined;
     return (
       <Fragment>
         <EuiCallOut
           title="Edits to the policy are not automatically applied to indices that are already being managed by this policy."
           iconType="questionInCircle"
+          size={titleSize}
         >
           <p>
             This ensures that any update to a policy doesn't harm indices that are running under an older version of the policy. To carry
@@ -224,7 +243,23 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
 
   render() {
     const { isEdit } = this.props;
-    const { policyId, policyIdError, jsonString, submitError, isSubmitting } = this.state;
+    const { policyId, policyIdError, jsonString, submitError, isSubmitting, useNewUX } = this.state;
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppDescriptionControls } = getApplication();
+
+    const descriptionData = [
+      {
+        renderComponent: (
+          <EuiText size="s" color="subdued">
+            Policies let you automatically perform administrative operations on indices.{" "}
+            <EuiLink href={POLICY_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
+              Learn more
+            </EuiLink>
+          </EuiText>
+        ),
+      },
+    ];
 
     let hasJSONError = false;
     try {
@@ -233,14 +268,23 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
       hasJSONError = true;
     }
 
+    const padding_style = useNewUX ? { padding: "0px 0px" } : { padding: "25px 50px" };
     return (
-      <div style={{ padding: "25px 50px" }}>
-        <EuiTitle size="l">
-          <h1>{isEdit ? "Edit" : "Create"} policy</h1>
-        </EuiTitle>
-        <EuiSpacer />
+      <div style={padding_style}>
+        {!useNewUX ? (
+          <>
+            <EuiTitle size="l">
+              <h1>{isEdit ? "Edit" : "Create"} policy</h1>
+            </EuiTitle>
+            <EuiSpacer />
+          </>
+        ) : (
+          <>
+            <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
+          </>
+        )}
         {this.renderEditCallOut()}
-        <ConfigurePolicy policyId={policyId} policyIdError={policyIdError} isEdit={isEdit} onChange={this.onChange} />
+        <ConfigurePolicy policyId={policyId} policyIdError={policyIdError} isEdit={isEdit} onChange={this.onChange} useNewUx={useNewUX} />
         <EuiSpacer />
         <DefinePolicy jsonString={jsonString} onChange={this.onChangeJSON} onAutoIndent={this.onAutoIndent} hasJSONError={hasJSONError} />
         <EuiSpacer />
diff --git a/public/pages/Policies/containers/Policies/Policies.test.tsx b/public/pages/Policies/containers/Policies/Policies.test.tsx
index c991b5673..c14511048 100644
--- a/public/pages/Policies/containers/Policies/Policies.test.tsx
+++ b/public/pages/Policies/containers/Policies/Policies.test.tsx
@@ -1,4 +1,4 @@
-  /*
+/*
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
@@ -18,6 +18,23 @@ import { ServicesConsumer, ServicesContext } from "../../../../services";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { BrowserServices } from "../../../../models/interfaces";
 import { CoreServicesContext } from "../../../../components/core_services";
+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({});
+});
 
 // TODO: Move common renderWith or with___ helpers into top level tests directory
 function renderPoliciesWithRouter() {
@@ -42,7 +59,7 @@ function renderPoliciesWithRouter() {
                       />
                       <Route path={ROUTES.CREATE_POLICY} render={(props) => <div>Testing create policy</div>} />
                       <Route path={ROUTES.EDIT_POLICY} render={(props) => <div>Testing edit policy: {props.location.search}</div>} />
-                      <Route path={ROUTES.POLICY_DETAILS} render={(props) =><div>Testing policy details: {props.location.search}</div>} />
+                      <Route path={ROUTES.POLICY_DETAILS} render={(props) => <div>Testing policy details: {props.location.search}</div>} />
                       <Redirect from="/" to={ROUTES.INDEX_POLICIES} />
                     </Switch>
                   </ModalProvider>
diff --git a/public/pages/Policies/containers/Policies/Policies.tsx b/public/pages/Policies/containers/Policies/Policies.tsx
index 8a9e8d5cb..5d3640827 100644
--- a/public/pages/Policies/containers/Policies/Policies.tsx
+++ b/public/pages/Policies/containers/Policies/Policies.tsx
@@ -18,6 +18,14 @@ import {
   // @ts-ignore
   Pagination,
   EuiTableSelectionType,
+  EuiButton,
+  EuiContextMenuItem,
+  EuiTextColor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCompressedFieldSearch,
+  EuiPopover,
+  EuiContextMenuPanel,
 } from "@elastic/eui";
 import _ from "lodash";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
@@ -37,6 +45,8 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { DataSource } from "src/plugins/data/public";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData, TopNavControlTextData } from "src/plugins/navigation/public";
 
 interface PoliciesProps extends RouteComponentProps, DataSourceMenuProperties {
   policyService: PolicyService;
@@ -52,6 +62,11 @@ interface PoliciesState extends DataSourceMenuProperties {
   selectedItems: PolicyItem[];
   policies: PolicyItem[];
   loadingPolicies: boolean;
+  useNewUX: boolean;
+  showCreatePolicyModal: boolean;
+  showDeleteModal: boolean;
+  showEditModal: boolean;
+  isPopoverOpen: boolean;
 }
 
 export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState> {
@@ -60,9 +75,11 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
 
   constructor(props: PoliciesProps) {
     super(props);
-
     const { from, size, search, sortField, sortDirection } = getURLQueryParams(this.props.location);
 
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
+
     this.state = {
       ...this.state,
       totalPolicies: 0,
@@ -74,6 +91,11 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
       selectedItems: [],
       policies: [],
       loadingPolicies: true,
+      useNewUX: useNewUx,
+      showCreatePolicyModal: false,
+      showDeleteModal: false,
+      showEditModal: false,
+      isPopoverOpen: false,
     };
 
     this.getPolicies = _.debounce(this.getPolicies, 500, { leading: true });
@@ -113,8 +135,14 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
   }
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES]);
+    const breadCrumbs = this.state.useNewUX ? [BREADCRUMBS.INDEX_POLICIES_NEW] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     await this.getPolicies();
+    if (this.state.useNewUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.INDEX_POLICIES_NEW.text.concat(` (${this.state.totalPolicies})`), href: BREADCRUMBS.INDEX_POLICIES_NEW.href },
+      ]);
+    }
   }
 
   async componentDidUpdate(prevProps: PoliciesProps, prevState: PoliciesState) {
@@ -122,6 +150,11 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
     const currQuery = Policies.getQueryObjectFromState(this.state);
     if (!_.isEqual(prevQuery, currQuery)) {
       await this.getPolicies();
+      if (this.state.useNewUX) {
+        this.context.chrome.setBreadcrumbs([
+          { text: BREADCRUMBS.INDEX_POLICIES_NEW.text.concat(` (${this.state.totalPolicies})`), href: BREADCRUMBS.INDEX_POLICIES_NEW.href },
+        ]);
+      }
     }
   }
 
@@ -157,6 +190,11 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
       this.context.notifications.toasts.addDanger(getErrorMessage(err, "There was a problem loading the policies"));
     }
     this.setState({ loadingPolicies: false });
+    if (this.state.useNewUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.INDEX_POLICIES_NEW.text.concat(` (${this.state.totalPolicies})`), href: BREADCRUMBS.INDEX_POLICIES_NEW.href },
+      ]);
+    }
   };
 
   deletePolicy = async (policyId: string): Promise<boolean> => {
@@ -215,7 +253,14 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
     const deletePromises = policyIds.map((policyId) => this.deletePolicy(policyId));
 
     const deleted = (await Promise.all(deletePromises)).reduce((deleted: boolean, result: boolean) => deleted && result);
-    if (deleted) await this.getPolicies();
+    if (deleted) {
+      await this.getPolicies();
+      if (this.state.useNewUX) {
+        this.context.chrome.setBreadcrumbs([
+          { text: BREADCRUMBS.INDEX_POLICIES_NEW.text.concat(` (${this.state.totalPolicies})`), href: BREADCRUMBS.INDEX_POLICIES_NEW.href },
+        ]);
+      }
+    }
   };
 
   onClickModalEdit = (item: PolicyItem, onClose: () => void, visual: boolean = false): void => {
@@ -224,11 +269,60 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
     this.props.history.push(`${ROUTES.EDIT_POLICY}?id=${item.id}${visual ? "&type=visual" : ""}`);
   };
 
+  onShowCreatePolicyModal = (): void => {
+    this.setState({ showCreatePolicyModal: true });
+  };
+
+  onCloseCreatePolicyModal = (): void => {
+    this.setState({ showCreatePolicyModal: false });
+  };
+
+  onShowDeleteModal = () => {
+    this.setState({ showDeleteModal: true });
+  };
+
+  onCloseDeleteModal = () => {
+    this.setState({ showDeleteModal: false });
+  };
+
+  onShowEditModal = () => {
+    this.setState({ showEditModal: true });
+  };
+
+  onCloseEditModal = () => {
+    this.setState({ showEditModal: false });
+  };
+
+  closePopover = () => {
+    this.setState({ isPopoverOpen: false });
+  };
+
+  onActionButtonClick = () => {
+    this.setState({ isPopoverOpen: !this.state.isPopoverOpen });
+  };
+
   render() {
-    const { totalPolicies, from, size, search, sortField, sortDirection, selectedItems, policies, loadingPolicies } = this.state;
+    const {
+      totalPolicies,
+      from,
+      size,
+      search,
+      sortField,
+      sortDirection,
+      selectedItems,
+      policies,
+      loadingPolicies,
+      useNewUX,
+      showCreatePolicyModal,
+      showDeleteModal,
+      showEditModal,
+      isPopoverOpen,
+    } = this.state;
 
     const filterIsApplied = !!search;
     const page = Math.floor(from / size);
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls, setAppBadgeControls } = getApplication();
 
     const pagination: Pagination = {
       pageIndex: page,
@@ -284,7 +378,100 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
       },
     ];
 
-    return (
+    const CommonTable = () => {
+      return (
+        <EuiBasicTable
+          items={policies}
+          itemId="id"
+          columns={this.columns}
+          pagination={pagination}
+          sorting={sorting}
+          isSelectable={true}
+          selection={selection}
+          onChange={this.onTableChange}
+          noItemsMessage={
+            <PolicyEmptyPrompt
+              history={this.props.history}
+              filterIsApplied={filterIsApplied}
+              loading={loadingPolicies}
+              resetFilters={this.resetFilters}
+            />
+          }
+        />
+      );
+    };
+
+    const CreateModal = () => {
+      return (
+        showCreatePolicyModal && (
+          <CreatePolicyModal isEdit={false} onClose={this.onCloseCreatePolicyModal} onClickContinue={this.onClickCreate} />
+        )
+      );
+    };
+
+    const EditModal = () => {
+      return showEditModal && <CreatePolicyModal isEdit={true} onClose={this.onCloseEditModal} onClickContinue={this.onClickEdit} />;
+    };
+
+    const DeleteModal = () => {
+      return (
+        showDeleteModal && (
+          <ConfirmationModal
+            title={`Delete ${selectedItems.length === 1 ? selectedItems[0].id : `${selectedItems.length} policies`}`}
+            bodyMessage={`Delete ${
+              selectedItems.length === 1 ? selectedItems[0].id : `${selectedItems.length} policies`
+            } permanently? This action cannot be undone.`}
+            actionMessage={"Delete"}
+            onAction={() => this.onClickDelete(selectedItems.map((item) => item.id))}
+            onClose={this.onCloseDeleteModal}
+          />
+        )
+      );
+    };
+
+    const actionsButton = (
+      <EuiButton
+        iconType="arrowDown"
+        iconSide="right"
+        disabled={!selectedItems.length}
+        onClick={this.onActionButtonClick}
+        data-test-subj="actionButton"
+        size="s"
+      >
+        Actions
+      </EuiButton>
+    );
+
+    const popoverActionItems = [
+      <EuiContextMenuItem
+        key="Edit"
+        icon="pencil"
+        disabled={selectedItems.length != 1}
+        data-test-subj="editButton"
+        size="s"
+        onClick={() => {
+          this.closePopover();
+          this.onShowEditModal();
+        }}
+      >
+        Edit
+      </EuiContextMenuItem>,
+      <EuiContextMenuItem
+        key="Delete"
+        icon="trash"
+        disabled={!selectedItems.length}
+        data-test-subj="deleteButton"
+        size="s"
+        onClick={() => {
+          this.closePopover();
+          this.onShowDeleteModal();
+        }}
+      >
+        <EuiTextColor color="danger">Delete</EuiTextColor>
+      </EuiContextMenuItem>,
+    ];
+
+    return !useNewUX ? (
       <ContentPanel
         actions={<ContentPanelActions actions={actions} />}
         bodyStyles={{ padding: "initial" }}
@@ -321,6 +508,52 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
           sorting={sorting}
         />
       </ContentPanel>
+    ) : (
+      <>
+        <HeaderControl
+          setMountPoint={setAppRightControls}
+          controls={[
+            {
+              id: "Create policy",
+              label: "Create policy",
+              iconType: "plus",
+              fill: true,
+              testId: "createButton",
+              controlType: "button",
+              run: this.onShowCreatePolicyModal,
+            } as TopNavControlButtonData,
+          ]}
+        />
+        <ContentPanel>
+          <EuiFlexGroup gutterSize="s" alignItems="center" style={{ padding: "0px 0px 16px 0px" }}>
+            <EuiFlexItem grow={true}>
+              <EuiCompressedFieldSearch
+                autoFocus
+                placeholder={search}
+                incremental={false}
+                onChange={this.onSearchChange}
+                aria-label={search}
+                fullWidth
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiPopover
+                id="action"
+                button={actionsButton}
+                isOpen={isPopoverOpen}
+                closePopover={this.closePopover}
+                anchorPosition="downRight"
+              >
+                <EuiContextMenuPanel items={popoverActionItems} />
+              </EuiPopover>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          {CommonTable()}
+        </ContentPanel>
+        {CreateModal()}
+        {DeleteModal()}
+        {EditModal()}
+      </>
     );
   }
 }
diff --git a/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx b/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
index 8db46ede5..b39caab6f 100644
--- a/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
+++ b/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
@@ -35,6 +35,8 @@ import CreatePolicyModal from "../../../../components/CreatePolicyModal";
 import { ModalConsumer } from "../../../../components/Modal";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData, TopNavControlIconData } from "../../../../../../../src/plugins/navigation/public";
 
 interface PolicyDetailsProps extends RouteComponentProps, DataSourceMenuProperties {
   policyService: PolicyService;
@@ -45,32 +47,42 @@ interface PolicyDetailsState {
   isJSONModalOpen: boolean;
   policy: DocumentPolicy | null;
   isDeleteModalVisible: boolean;
+  isEditModalVisible: boolean;
   pageIndex: number;
   pageSize: number;
   showPerPageOptions: boolean;
+  useNewUX: boolean;
 }
 
 export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsState> {
   static contextType = CoreServicesContext;
   constructor(props: PolicyDetailsProps) {
     super(props);
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
 
     this.state = {
       policyId: "",
       isJSONModalOpen: false,
       policy: null,
       isDeleteModalVisible: false,
+      isEditModalVisible: false,
       pageIndex: 0,
       pageSize: 10,
       showPerPageOptions: true,
+      useNewUX: useNewUx,
     };
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES]);
+    this.state.useNewUX
+      ? this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_POLICIES_NEW])
+      : this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES]);
     const { id } = queryString.parse(this.props.location.search);
     if (typeof id === "string") {
-      this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, { text: id }]);
+      this.state.useNewUX
+        ? this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_POLICIES_NEW, { text: id }])
+        : this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, { text: id }]);
       await this.getPolicy(id);
     } else {
       this.context.notifications.toasts.addDanger(`Invalid policy id: ${id}`);
@@ -117,6 +129,14 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
     if (policyId) this.props.history.push(`${ROUTES.EDIT_POLICY}?id=${policyId}${visual ? "&type=visual" : ""}`);
   };
 
+  closeEditModal = (): void => {
+    this.setState({ isEditModalVisible: false });
+  };
+
+  showEditModal = (): void => {
+    this.setState({ isEditModalVisible: true });
+  };
+
   closeDeleteModal = (): void => {
     this.setState({ isDeleteModalVisible: false });
   };
@@ -156,7 +176,17 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
   };
 
   render() {
-    const { policyId, isJSONModalOpen, policy, isDeleteModalVisible, pageIndex, pageSize, showPerPageOptions } = this.state;
+    const {
+      policyId,
+      isJSONModalOpen,
+      policy,
+      isDeleteModalVisible,
+      isEditModalVisible,
+      pageIndex,
+      pageSize,
+      showPerPageOptions,
+      useNewUX,
+    } = this.state;
 
     if (!policy) {
       return (
@@ -189,44 +219,101 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
       hidePerPageOptions: !showPerPageOptions,
     };
 
+    const editModal = () => {
+      return isEditModalVisible && <CreatePolicyModal isEdit={true} onClose={this.closeEditModal} onClickContinue={this.onEdit} />;
+    };
+
+    const jsonModal = () => {
+      return isJSONModalOpen && <JSONModal title={"View JSON of " + policyId} json={policy} onClose={this.closeJSONModal} />;
+    };
+
+    const deleteModal = () => {
+      return (
+        isDeleteModalVisible && (
+          <DeleteModal policyId={policyId} closeDeleteModal={this.closeDeleteModal} onClickDelete={this.onClickDelete} />
+        )
+      );
+    };
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls } = getApplication();
+
+    const padding_style = useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
     return (
-      <div style={{ padding: "5px 50px" }}>
-        <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="m">
-              <h2>{policyId}</h2>
-            </EuiTitle>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup alignItems="center" gutterSize="s">
+      <div style={padding_style}>
+        {useNewUX ? (
+          <>
+            <HeaderControl
+              setMountPoint={setAppRightControls}
+              controls={[
+                {
+                  iconType: "trash",
+                  testId: "deleteButton",
+                  color: "danger",
+                  ariaLabel: "delete",
+                  run: this.showDeleteModal,
+                  controlType: "icon",
+                  display: "base",
+                } as TopNavControlIconData,
+                {
+                  id: "Edit",
+                  label: "Edit policy",
+                  testId: "editButton",
+                  run: this.showEditModal,
+                  controlType: "button",
+                } as TopNavControlButtonData,
+                {
+                  id: "View JSON",
+                  label: "View JSON",
+                  testId: "viewJSONButton",
+                  run: this.showJSONModal,
+                  fill: true,
+                  controlType: "button",
+                } as TopNavControlButtonData,
+              ]}
+            />
+            {editModal()}
+          </>
+        ) : (
+          <>
+            <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
               <EuiFlexItem grow={false}>
-                <ModalConsumer>
-                  {({ onShow }) => (
-                    <EuiButton
-                      onClick={() => onShow(CreatePolicyModal, { isEdit: true, onClickContinue: this.onEdit })}
-                      data-test-subj="policy-details-edit-button"
-                    >
-                      Edit
-                    </EuiButton>
-                  )}
-                </ModalConsumer>
+                <EuiTitle size="m">
+                  <h2>{policyId}</h2>
+                </EuiTitle>
               </EuiFlexItem>
+
               <EuiFlexItem grow={false}>
-                <EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
-                  Delete
-                </EuiButton>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiButton onClick={this.showJSONModal} data-test-subj="viewButton">
-                  View JSON
-                </EuiButton>
+                <EuiFlexGroup alignItems="center" gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <ModalConsumer>
+                      {({ onShow }) => (
+                        <EuiButton
+                          onClick={() => onShow(CreatePolicyModal, { isEdit: true, onClickContinue: this.onEdit })}
+                          data-test-subj="policy-details-edit-button"
+                        >
+                          Edit
+                        </EuiButton>
+                      )}
+                    </ModalConsumer>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
+                      Delete
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiButton onClick={this.showJSONModal} data-test-subj="viewButton">
+                      View JSON
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+            <EuiSpacer />
+          </>
+        )}
 
-        <EuiSpacer />
         <PolicySettings
           policyId={policyId}
           errorNotification={policy.policy.error_notification}
@@ -249,12 +336,8 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
           onClickDeleteState={() => {}}
           isReadOnly={true}
         />
-
-        {isJSONModalOpen && <JSONModal title={"View JSON of " + policyId} json={policy} onClose={this.closeJSONModal} />}
-
-        {isDeleteModalVisible && (
-          <DeleteModal policyId={policyId} closeDeleteModal={this.closeDeleteModal} onClickDelete={this.onClickDelete} />
-        )}
+        {jsonModal()}
+        {deleteModal()}
       </div>
     );
   }
diff --git a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
index 52dccc716..db528c814 100644
--- a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
+++ b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
@@ -22,6 +22,7 @@ import ErrorNotification from "../ErrorNotification";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 import { Data } from "vega";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 
 interface VisualCreatePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   isEdit: boolean;
@@ -41,12 +42,15 @@ interface VisualCreatePolicyState {
   showFlyout: boolean;
   editingState: State | null;
   errorNotificationJsonString: string;
+  useNewUX: boolean;
 }
 
 export class VisualCreatePolicy extends Component<VisualCreatePolicyProps, VisualCreatePolicyState> {
   static contextType = CoreServicesContext;
   constructor(props: VisualCreatePolicyProps) {
     super(props);
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
 
     this.state = {
       policyId: "",
@@ -61,27 +65,30 @@ export class VisualCreatePolicy extends Component<VisualCreatePolicyProps, Visua
       isSubmitting: false,
       hasSubmitted: false,
       errorNotificationJsonString: "",
+      useNewUX: useNewUx,
     };
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES]);
+    const breadCrumbs = this.state.useNewUX ? [BREADCRUMBS.INDEX_POLICIES_NEW] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     if (this.props.isEdit) {
       const { id } = queryString.parse(this.props.location.search);
       if (typeof id === "string" && !!id) {
-        this.context.chrome.setBreadcrumbs([
-          BREADCRUMBS.INDEX_MANAGEMENT,
-          BREADCRUMBS.INDEX_POLICIES,
-          BREADCRUMBS.EDIT_POLICY,
-          { text: id },
-        ]);
+        const editBreadCrumbs = this.state.useNewUX
+          ? [BREADCRUMBS.INDEX_POLICIES_NEW, { text: id }, BREADCRUMBS.EDIT_POLICY]
+          : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.EDIT_POLICY, { text: id }];
+        this.context.chrome.setBreadcrumbs(editBreadCrumbs);
         await this.getPolicyToEdit(id);
       } else {
         this.context.notifications.toasts.addDanger(`Invalid policy id: ${id}`);
         this.props.history.push(ROUTES.INDEX_POLICIES);
       }
     } else {
-      this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.CREATE_POLICY]);
+      const createBreadCrumbs = this.state.useNewUX
+        ? [BREADCRUMBS.INDEX_POLICIES_NEW, BREADCRUMBS.CREATE_POLICY_NEW]
+        : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.CREATE_POLICY];
+      this.context.chrome.setBreadcrumbs(createBreadCrumbs);
     }
   };
 
@@ -278,22 +285,48 @@ export class VisualCreatePolicy extends Component<VisualCreatePolicyProps, Visua
 
   render() {
     const { isEdit, notificationService } = this.props;
-    const { policyId, policyIdError, policy, showFlyout, editingState, errorNotificationJsonString } = this.state;
-    return (
-      <div style={{ padding: "25px 50px" }}>
-        <EuiTitle size="l">
-          <h1>{isEdit ? "Edit" : "Create"} policy</h1>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiText size="s">
-          <p>
+    const { policyId, policyIdError, policy, showFlyout, editingState, errorNotificationJsonString, useNewUX } = this.state;
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppDescriptionControls } = getApplication();
+
+    const descriptionData = [
+      {
+        renderComponent: (
+          <EuiText size="s" color="subdued">
             Policies let you automatically perform administrative operations on indices.{" "}
             <EuiLink href={POLICY_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
               Learn more
             </EuiLink>
-          </p>
-        </EuiText>
-        <EuiSpacer size="m" />
+          </EuiText>
+        ),
+      },
+    ];
+    const padding_style = useNewUX ? { padding: "0px 0px" } : { padding: "25px 50px" };
+    return (
+      <div style={padding_style}>
+        {!useNewUX ? (
+          <>
+            <EuiTitle size="l">
+              <h1>{isEdit ? "Edit" : "Create"} policy</h1>
+            </EuiTitle>
+            <EuiSpacer />
+            <EuiText size="s">
+              <p>
+                Policies let you automatically perform administrative operations on indices.{" "}
+                <EuiLink href={POLICY_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
+                  Learn more
+                </EuiLink>
+              </p>
+            </EuiText>
+            <EuiSpacer size="m" />
+          </>
+        ) : (
+          <>
+            <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
+          </>
+        )}
+
         <PolicyInfo
           isEdit={isEdit}
           policyId={policyId}
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index a924b2bc9..9be5d1f16 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -74,9 +74,11 @@ export const BREADCRUMBS = Object.freeze({
   INDEX_MANAGEMENT: { text: "Index Management", href: "#/" },
   INDICES: { text: "Indexes", href: `#${ROUTES.INDICES}` },
   INDEX_POLICIES: { text: "State management policies", href: `#${ROUTES.INDEX_POLICIES}` },
+  INDEX_POLICIES_NEW: { text: "Index state management policies", href: `#${ROUTES.INDEX_POLICIES}` },
   MANAGED_INDICES: { text: "Policy managed indexes", href: `#${ROUTES.MANAGED_INDICES}` },
   EDIT_POLICY: { text: "Edit policy" },
   CREATE_POLICY: { text: "Create policy" },
+  CREATE_POLICY_NEW: { text: "Create index state management policy" },
   CHANGE_POLICY: { text: "Change policy" },
   POLICY_DETAILS: { text: "Policy details" },
   ROLLUPS: { text: "Rollup jobs", href: `#${ROUTES.ROLLUPS}` },