Page: More easily support full height pages (#56524)

* Page: More easily support full height pages

* tweaks to JSONSettingsPage

public/app/core/components/PageNew/Page.tsx

@@ -82,12 +82,12 @@ export const Page: PageType = ({
               />
             </>
           )}
-          <div className={styles.pageContent}>
+          <div className={styles.pageContainer}>
             <CustomScrollbar autoHeightMin={'100%'} scrollTop={scrollTop} scrollRefCallback={scrollRef}>
               <div className={styles.pageInner}>
                 {pageHeaderNav && <PageHeader navItem={pageHeaderNav} subTitle={subTitle} />}
                 {pageNav && pageNav.children && <PageTabs navItem={pageNav} />}
-                {children}
+                <div className={styles.pageContent}>{children}</div>
               </div>
               <Footer />
             </CustomScrollbar>
@@ -157,6 +157,10 @@ const getStyles = (theme: GrafanaTheme2) => {
         flexDirection: 'row',
       },
     }),
+    pageContainer: css({
+      label: 'page-container',
+      flexGrow: 1,
+    }),
     pageContent: css({
       label: 'page-content',
       flexGrow: 1,
@@ -167,6 +171,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       boxShadow: shadow,
       background: theme.colors.background.primary,
       margin: theme.spacing(2, 2, 2, 1),
+      display: 'flex',
+      flexDirection: 'column',
       flexGrow: 1,
     }),
     canvasContent: css({

public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx

@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
 import React, { useState } from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, CodeEditor, Stack, useStyles2 } from '@grafana/ui';
+import { Button, CodeEditor, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/PageNew/Page';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 
@@ -13,16 +12,10 @@ import { SettingsPageProps } from './types';
 
 export function JsonEditorSettings({ dashboard, sectionNav }: SettingsPageProps) {
   const [dashboardJson, setDashboardJson] = useState<string>(JSON.stringify(dashboard.getSaveModelClone(), null, 2));
-  const onBlur = (value: string) => {
-    setDashboardJson(value);
-  };
 
-  const onClick = () => {
-    getDashboardSrv()
-      .saveJSONDashboard(dashboardJson)
-      .then(() => {
+  const onClick = async () => {
+    await getDashboardSrv().saveJSONDashboard(dashboardJson);
     dashboardWatcher.reloadPage();
-      });
   };
 
   const styles = useStyles2(getStyles);
@@ -31,36 +24,35 @@ export function JsonEditorSettings({ dashboard, sectionNav }: SettingsPageProps)
 
   return (
     <Page navModel={sectionNav} subTitle={subTitle}>
-      <div className="dashboard-settings__subheader"></div>
-
-      <Stack direction="column" gap={4} flexGrow={1}>
-        <div className={styles.editWrapper}>
-          <AutoSizer>
-            {({ width, height }) => (
+      <div className={styles.wrapper}>
         <CodeEditor
           value={dashboardJson}
           language="json"
-                width={width}
-                height={height}
           showMiniMap={true}
           showLineNumbers={true}
-                onBlur={onBlur}
+          onBlur={setDashboardJson}
+          containerStyles={styles.codeEditor}
         />
-            )}
-          </AutoSizer>
-        </div>
-        <div>
         {dashboard.meta.canSave && (
+          <div>
             <Button type="submit" onClick={onClick}>
               Save changes
             </Button>
+          </div>
         )}
       </div>
-      </Stack>
     </Page>
   );
 }
 
-const getStyles = (_: GrafanaTheme2) => ({
-  editWrapper: css({ flexGrow: 1 }),
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css({
+    display: 'flex',
+    height: '100%',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+  }),
+  codeEditor: css({
+    flexGrow: 1,
+  }),
 });