Update newHeader for snapshot policies page

Signed-off-by: Sandeep Kumawat <[email protected]>
opensearch-project · Aug 13, 2024 · 8db8494 · 8db8494
1 parent 4b167a6
commit 8db8494
Show file tree

Hide file tree

Showing 10 changed files with 329 additions and 88 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/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
@@ -55,6 +55,8 @@ import Notification from "../../components/Notification";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { ExternalLink } from "../../../utils/display-utils";
 
 interface CreateSMPolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   snapshotManagementService: SnapshotManagementService;
@@ -97,6 +99,7 @@ interface CreateSMPolicyState extends DataSourceMenuProperties {
   minCountError: string;
   repoError: string;
   timezoneError: string;
+  useNewUX: boolean;
 }
 
 export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProps, CreateSMPolicyState> {
@@ -105,6 +108,8 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
   constructor(props: CreateSMPolicyProps) {
     super(props);
 
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
     this.state = {
       ...this.state,
       policy: getDefaultSMPolicy(),
@@ -139,30 +144,28 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
       repoError: "",
       minCountError: "",
       timezoneError: "",
+      useNewUX: useNewUx,
     };
   }
 
   async componentDidMount() {
     if (this.props.isEdit) {
       const { id } = queryString.parse(this.props.location.search);
       if (typeof id === "string" && !!id) {
-        this.context.chrome.setBreadcrumbs([
-          BREADCRUMBS.SNAPSHOT_MANAGEMENT,
-          BREADCRUMBS.SNAPSHOT_POLICIES,
-          BREADCRUMBS.EDIT_SNAPSHOT_POLICY,
-          { text: id },
-        ]);
+        const breadCrumbs = this.state.useNewUX
+          ? [BREADCRUMBS.SNAPSHOT_POLICIES, { text: id }]
+          : [BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.SNAPSHOT_POLICIES, BREADCRUMBS.EDIT_SNAPSHOT_POLICY, { text: id }];
+        this.context.chrome.setBreadcrumbs(breadCrumbs);
         await this.getPolicy(id);
       } else {
         this.context.notifications.toasts.addDanger(`Invalid policy id: ${id}`);
         this.props.history.push(ROUTES.SNAPSHOT_POLICIES);
       }
     } else {
-      this.context.chrome.setBreadcrumbs([
-        BREADCRUMBS.SNAPSHOT_MANAGEMENT,
-        BREADCRUMBS.SNAPSHOT_POLICIES,
-        BREADCRUMBS.CREATE_SNAPSHOT_POLICY,
-      ]);
+      const breadCrumbs = this.state.useNewUX
+        ? [BREADCRUMBS.SNAPSHOT_POLICIES, BREADCRUMBS.CREATE_SNAPSHOT_POLICY]
+        : [BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.SNAPSHOT_POLICIES, BREADCRUMBS.CREATE_SNAPSHOT_POLICY];
+      this.context.chrome.setBreadcrumbs(breadCrumbs);
     }
     this.updateOptions();
   }
@@ -551,12 +554,32 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
     const showNotificationChannel = showNotification(policy);
 
+    const { HeaderControl } = getNavigationUI();
+    const { setAppDescriptionControls } = getApplication();
+
+    const descriptionData = [
+      {
+        renderComponent: (
+          <EuiText size="s" color="subdued">
+            Snapshot policies allow you to define an automated snapshot schedule and retention period.{" "}
+            <ExternalLink href={SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL} />
+          </EuiText>
+        ),
+      },
+    ];
+    const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
     return (
-      <div style={{ padding: "5px 50px" }}>
-        <EuiTitle size="l">
-          <h1>{isEdit ? "Edit" : "Create"} policy</h1>
-        </EuiTitle>
-        {subTitleText}
+      <div style={padding_style}>
+        {this.state.useNewUX ? (
+          <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
+        ) : (
+          <>
+            <EuiTitle size="l">
+              <h1>{isEdit ? "Edit" : "Create"} policy</h1>
+            </EuiTitle>
+            {subTitleText}
+          </>
+        )}
 
         <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>();

diff --git a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/NewSnapshotPolicy.tsx b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/NewSnapshotPolicy.tsx