Initial commit for header update for snapshot management policy page

Signed-off-by: Shubh Sahu <[email protected]>
opensearch-project · Aug 14, 2024 · d0b8d86 · d0b8d86
1 parent bbc14dc
commit d0b8d86
Show file tree

Hide file tree

Showing 9 changed files with 360 additions and 55 deletions.
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -3,7 +3,7 @@
   "version": "3.0.0.0",
   "opensearchDashboardsVersion": "3.0.0",
   "configPath": ["opensearch_index_management"],
-  "requiredPlugins": ["navigation", "opensearchDashboardsReact"],
+  "requiredPlugins": ["navigation", "opensearchDashboardsReact", "opensearchDashboardsUtils"],
   "optionalPlugins": ["managementOverview", "dataSource", "dataSourceManagement"],
   "server": true,
   "ui": true,

diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
@@ -68,19 +68,21 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
       justifyContent="spaceBetween"
       alignItems="flexStart"
     >
-      <EuiFlexItem>
-        {typeof title === "string" ? (
-          <EuiTitle size={titleSize}>
-            <h3>
-              {title}
-              <span className="panel-header-count"> {itemCount > 0 ? `(${itemCount})` : null} </span>
-            </h3>
-          </EuiTitle>
-        ) : (
-          title
-        )}
-        {renderSubTitleText(subTitleText)}
-      </EuiFlexItem>
+      {title ? (
+        <EuiFlexItem>
+          {typeof title === "string" ? (
+            <EuiTitle size={titleSize}>
+              <h3>
+                {title}
+                <span className="panel-header-count"> {itemCount > 0 ? `(${itemCount})` : null} </span>
+              </h3>
+            </EuiTitle>
+          ) : (
+            title
+          )}
+          {renderSubTitleText(subTitleText)}
+        </EuiFlexItem>
+      ) : null}
       {actions ? (
         <EuiFlexItem grow={false}>
           <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">

diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
@@ -17,6 +17,7 @@ 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";
 
 interface CreatePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   isEdit: boolean;
@@ -32,13 +33,16 @@ interface CreatePolicyState {
   submitError: string;
   isSubmitting: boolean;
   hasSubmitted: boolean;
+  useNewUX: boolean;
 }
 
 export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState> {
   static contextType = CoreServicesContext;
   _isMount: boolean;
   constructor(props: CreatePolicyProps) {
     super(props);
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
 
     this.state = {
       policySeqNo: null,
@@ -49,29 +53,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, BREADCRUMBS.EDIT_POLICY, { text: id }]
+          : [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]
+        : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDEX_POLICIES, BREADCRUMBS.CREATE_POLICY];
+      this.context.chrome.setBreadcrumbs(createBreadCrumbs);
       this.setState({ jsonString: DEFAULT_POLICY });
     }
   };
@@ -224,7 +231,7 @@ 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;
 
     let hasJSONError = false;
     try {
@@ -233,12 +240,19 @@ 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 />
+          </>
+        ) : (
+          <></>
+        )}
         {this.renderEditCallOut()}
         <ConfigurePolicy policyId={policyId} policyIdError={policyIdError} isEdit={isEdit} onChange={this.onChange} />
         <EuiSpacer />

diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
@@ -71,6 +71,7 @@ import * as pluginManifest from "../../../opensearch_dashboards.json";
 import { DataSourceAttributes } from "../../../../../src/plugins/data_source/common/data_sources";
 import { BehaviorSubject } from "rxjs";
 import { i18n } from "@osd/i18n";
+import { getUISettings } from "../../services/Services";
 
 enum Navigation {
   IndexManagement = "Index Management",
@@ -404,7 +405,9 @@ export default class Main extends Component<MainProps, MainState> {
 
     const { landingPage } = this.props;
 
-    const ROUTE_STYLE = { padding: "25px 25px" };
+    const uiSettings = getUISettings();
+    const showActionsInHeader = uiSettings.get("home:useNewHomePage");
+    const ROUTE_STYLE = showActionsInHeader ? { padding: "0px 0px" } : { padding: "25px 25px" };
 
     const DataSourceMenu = this.props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceSelectableConfig>();
     const DataSourceViewer = this.props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();