Few refactoring

Signed-off-by: Shubh Sahu <shubhvs@amazon.com>

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"

public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx

@@ -4,20 +4,31 @@
  */
 
 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";
 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 { getUISettings } from "../../../../services/Services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 
 interface CreatePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   isEdit: boolean;
@@ -66,7 +77,7 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
       const { id } = queryString.parse(this.props.location.search);
       if (typeof id === "string" && !!id) {
         const editBreadCrumbs = this.state.useNewUX
-          ? [BREADCRUMBS.INDEX_POLICIES_NEW, { text: id }]
+          ? [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);
@@ -208,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
@@ -233,6 +245,22 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
     const { isEdit } = this.props;
     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 {
       JSON.parse(jsonString);
@@ -251,10 +279,12 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
             <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 />

public/pages/Policies/containers/Policies/Policies.tsx

@@ -445,9 +445,10 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
     const popoverActionItems = [
       <EuiContextMenuItem
         key="Edit"
-        icon="empty"
+        icon="pencil"
         disabled={selectedItems.length != 1}
         data-test-subj="editButton"
+        size="s"
         onClick={() => {
           this.closePopover();
           this.onShowEditModal();
@@ -457,9 +458,10 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
       </EuiContextMenuItem>,
       <EuiContextMenuItem
         key="Delete"
-        icon="empty"
+        icon="trash"
         disabled={!selectedItems.length}
         data-test-subj="deleteButton"
+        size="s"
         onClick={() => {
           this.closePopover();
           this.onShowDeleteModal();
@@ -523,7 +525,7 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
           ]}
         />
         <ContentPanel>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexGroup gutterSize="s" alignItems="center" style={{ padding: "0px 0px 16px 0px" }}>
             <EuiFlexItem grow={true}>
               <EuiCompressedFieldSearch
                 autoFocus
@@ -534,9 +536,6 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
                 fullWidth
               />
             </EuiFlexItem>
-            {/* <EuiFlexItem grow={false}>
-              <EuiButtonIcon iconType="refresh" onClick={this.getPolicies} aria-label="refresh" size="s" display="base" />
-            </EuiFlexItem> */}
             <EuiFlexItem grow={false}>
               <EuiPopover
                 id="action"

public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx

@@ -236,7 +236,7 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
     };
 
     const { HeaderControl } = getNavigationUI();
-    const { setAppRightControls, setAppBadgeControls } = getApplication();
+    const { setAppRightControls } = getApplication();
 
     const padding_style = useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
     return (
@@ -255,19 +255,18 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
                   controlType: "icon",
                   display: "base",
                 } as TopNavControlIconData,
-                {
-                  id: "View JSON",
-                  label: "View JSON",
-                  testId: "viewJSONButton",
-                  run: this.showJSONModal,
-                  fill: true,
-                  controlType: "button",
-                } as TopNavControlButtonData,
                 {
                   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,
@@ -311,10 +310,10 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
                 </EuiFlexGroup>
               </EuiFlexItem>
             </EuiFlexGroup>
+            <EuiSpacer />
           </>
         )}
 
-        <EuiSpacer />
         <PolicySettings
           policyId={policyId}
           errorNotification={policy.policy.error_notification}

public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx

@@ -76,7 +76,7 @@ export class VisualCreatePolicy extends Component<VisualCreatePolicyProps, Visua
       const { id } = queryString.parse(this.props.location.search);
       if (typeof id === "string" && !!id) {
         const editBreadCrumbs = this.state.useNewUX
-          ? [BREADCRUMBS.INDEX_POLICIES_NEW, { text: id }]
+          ? [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);