final commit

Signed-off-by: Shubh Sahu <[email protected]>
opensearch-project · Aug 15, 2024 · a8d92b0 · a8d92b0
1 parent 2cee96a
commit a8d92b0
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 41 deletions.
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
@@ -66,7 +66,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, BREADCRUMBS.EDIT_POLICY, { text: id }]
+          ? [BREADCRUMBS.INDEX_POLICIES_NEW, { text: id }]
           : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.EDIT_POLICY, { text: id }];
         this.context.chrome.setBreadcrumbs(editBreadCrumbs);
         await this.getPolicyToEdit(id);

diff --git 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,42 +219,100 @@ 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, setAppBadgeControls } = 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: "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,
+                  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 />
         <PolicySettings
@@ -249,12 +337,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
@@ -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, BREADCRUMBS.EDIT_POLICY, { text: id }]
+          ? [BREADCRUMBS.INDEX_POLICIES_NEW, { text: id }]
           : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.EDIT_POLICY, { text: id }];
         this.context.chrome.setBreadcrumbs(editBreadCrumbs);
         await this.getPolicyToEdit(id);