JSON: make the dashboard JSON editor as big as possible (#33453)

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

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

@@ -27,6 +27,7 @@ export interface SettingsPage {
   title: string;
   icon: IconName;
   render: () => React.ReactNode;
+  fullWidth?: boolean;
 }
 
 export class DashboardSettings extends PureComponent<Props> {
@@ -98,6 +99,7 @@ export class DashboardSettings extends PureComponent<Props> {
       title: 'JSON Model',
       id: 'dashboard_json',
       icon: 'arrow',
+      fullWidth: true,
       render: () => <JsonEditorSettings dashboard={dashboard} />,
     });
 
@@ -170,7 +172,9 @@ export class DashboardSettings extends PureComponent<Props> {
                   )}
                 </div>
               </aside>
-              <div className="dashboard-settings__content">{currentPage.render()}</div>
+              <div className={currentPage.fullWidth ? styles.settingsContentFullWidth : styles.settingsContent}>
+                {currentPage.render()}
+              </div>
             </div>
           </div>
         </CustomScrollbar>
@@ -190,4 +194,19 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
     min-height: 100%;
     width: 100%;
   `,
+  settingsContent: css`
+    flex-grow: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 32px;
+    max-width: 1100px;
+  `,
+  settingsContentFullWidth: css`
+    flex-grow: 1;
+    height: 100%;
+    padding: 32px;
+    min-width: 600px;
+    width: 100%;
+    height: 100%;
+  `,
 }));

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

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
+import { css } from '@emotion/css';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { Button, CodeEditor } from '@grafana/ui';
+import { Button, CodeEditor, HorizontalGroup, useStyles2 } from '@grafana/ui';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { getDashboardSrv } from '../../services/DashboardSrv';
 import { DashboardModel } from '../../state/DashboardModel';
+import { GrafanaThemeV2 } from '@grafana/data';
 
 interface Props {
   dashboard: DashboardModel;
@@ -21,6 +23,7 @@ export const JsonEditorSettings: React.FC<Props> = ({ dashboard }) => {
         dashboardWatcher.reloadPage();
       });
   };
+  const styles = useStyles2(getStyles);
 
   return (
     <>
@@ -30,25 +33,33 @@ export const JsonEditorSettings: React.FC<Props> = ({ dashboard }) => {
         settings, layout, queries, and so on.
       </div>
 
-      <div>
-        <AutoSizer disableHeight>
-          {({ width }) => (
+      <div className={styles.editWrapper}>
+        <AutoSizer>
+          {({ width, height }) => (
             <CodeEditor
               value={dashboardJson}
               language="json"
               width={width}
-              height="500px"
-              showMiniMap={false}
+              height={height}
+              showMiniMap={true}
+              showLineNumbers={true}
               onBlur={onBlur}
             />
           )}
         </AutoSizer>
       </div>
       {dashboard.meta.canSave && (
-        <Button className="m-t-3" onClick={onClick}>
-          Save changes
-        </Button>
+        <HorizontalGroup>
+          <Button onClick={onClick}>Save changes</Button>
+        </HorizontalGroup>
       )}
     </>
   );
 };
+
+const getStyles = (theme: GrafanaThemeV2) => ({
+  editWrapper: css`
+    height: calc(100vh - 250px);
+    margin-bottom: 10px;
+  `,
+});

public/sass/components/_dashboard_settings.scss

@@ -20,14 +20,6 @@
   background: $panel-bg;
 }
 
-.dashboard-settings__content {
-  flex-grow: 1;
-  min-width: 0;
-  height: 100%;
-  padding: 32px;
-  max-width: 1100px;
-}
-
 .dashboard-settings__aside {
   padding: 32px 0 0 32px;
   background: $dashboard-bg;