refactor: Update page header for edit object page (#7910) (#7963)

* refactor: update page header for edit object page * Changeset file for PR #7910 created/updated * style: update paddingSize of settings page * test: add mock for test cases * style: update title size --------- (cherry picked from commit 054186f) Signed-off-by: tygao <[email protected]> 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: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Co-authored-by: SuZhou-Joe <[email protected]>
opensearch-project · Sep 3, 2024 · bbcdcd3 · bbcdcd3
1 parent 3477c96
commit bbcdcd3
Show file tree

Hide file tree

Showing 8 changed files with 499 additions and 31 deletions.
diff --git a/changelogs/fragments/7910.yml b/changelogs/fragments/7910.yml
@@ -0,0 +1,2 @@
+refactor:
+- Update page header for edit object page ([#7910](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7910))
diff --git a/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx b/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx
@@ -103,10 +103,22 @@ export async function mountManagementSection(
     </Router>
   );
 
+  const pagePaddingSize = useUpdatedUX
+    ? // When useUpdatedUX is enabled, page should align with header vertically.
+      {
+        paddingSize: 'm' as const,
+      }
+    : {};
+
   ReactDOM.render(
     <I18nProvider>
       {params.wrapInPage ? (
-        <EuiPageContent hasShadow={false} hasBorder={false} color="transparent">
+        <EuiPageContent
+          hasShadow={false}
+          hasBorder={false}
+          color="transparent"
+          {...pagePaddingSize}
+        >
           {content}
         </EuiPageContent>
       ) : (

diff --git a/src/plugins/saved_objects_management/public/management_section/mount_section.tsx b/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
@@ -103,6 +103,8 @@ export const mountManagementSection = async ({
                 serviceRegistry={serviceRegistry}
                 setBreadcrumbs={setBreadcrumbs}
                 history={history}
+                useUpdatedUX={useUpdatedUX}
+                navigation={navigation}
               />
             </Suspense>
           </RedirectToHomeIfUnauthorized>
@@ -131,10 +133,22 @@ export const mountManagementSection = async ({
     </Router>
   );
 
+  const pageContentPaddingSize = useUpdatedUX
+    ? // align with new header
+      {
+        paddingSize: 'm' as const,
+      }
+    : {};
+
   ReactDOM.render(
     <I18nProvider>
       {mountParams.wrapInPage ? (
-        <EuiPageContent hasShadow={false} hasBorder={false} color="transparent">
+        <EuiPageContent
+          hasShadow={false}
+          hasBorder={false}
+          color="transparent"
+          {...pageContentPaddingSize}
+        >
           {content}
         </EuiPageContent>
       ) : (

diff --git a/...ement/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap b/...ement/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		refactor:
		- Update page header for edit object page ([#7910](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7910))