From cedd66cefc83d557cfa90d994241f92cf115defc Mon Sep 17 00:00:00 2001
From: Juan Cabanas <juan.cabanas@grafana.com>
Date: Mon, 23 Sep 2024 16:31:23 +0200
Subject: [PATCH] ShareDrawer: Export as JSON code editor fix (#93593)

---
 .../dashboards-suite/dashboard-export-json.spec.ts    |  2 +-
 .../sharing/ExportButton/ExportAsJson.tsx             | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/e2e/scenes/dashboards-suite/dashboard-export-json.spec.ts b/e2e/scenes/dashboards-suite/dashboard-export-json.spec.ts
index 6221fbd8109..6795c5680a7 100644
--- a/e2e/scenes/dashboards-suite/dashboard-export-json.spec.ts
+++ b/e2e/scenes/dashboards-suite/dashboard-export-json.spec.ts
@@ -36,7 +36,7 @@ describe('Export as JSON', () => {
     // Export as JSON
     e2e.pages.ExportDashboardDrawer.ExportAsJson.container().should('be.visible');
     e2e.pages.ExportDashboardDrawer.ExportAsJson.exportExternallyToggle().should('not.be.checked');
-    e2e.pages.ExportDashboardDrawer.ExportAsJson.codeEditor().should('exist');
+    e2e.components.CodeEditor.container().should('exist');
 
     e2e.pages.ExportDashboardDrawer.ExportAsJson.saveToFileButton().should('exist');
     e2e.pages.ExportDashboardDrawer.ExportAsJson.copyToClipboardButton().should('exist');
diff --git a/public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx b/public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx
index 36c7349865b..a4819435141 100644
--- a/public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx
+++ b/public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx
@@ -42,7 +42,7 @@ function ExportAsJsonRenderer({ model }: SceneComponentProps<ExportAsJson>) {
   const switchLabel = t('export.json.export-externally-label', 'Export the dashboard to use in another instance');
 
   return (
-    <div data-testid={selector.container}>
+    <div data-testid={selector.container} className={styles.container}>
       <p>
         <Trans i18nKey="export.json.info-text">
           Copy or download a JSON file containing the JSON of your dashboard
@@ -78,7 +78,7 @@ function ExportAsJsonRenderer({ model }: SceneComponentProps<ExportAsJson>) {
           }}
         </AutoSizer>
       </div>
-      <div className={styles.container}>
+      <div className={styles.buttonsContainer}>
         <Stack gap={1} flex={1} direction={{ xs: 'column', sm: 'row' }}>
           <Button
             data-testid={selector.saveToFileButton}
@@ -113,11 +113,14 @@ function ExportAsJsonRenderer({ model }: SceneComponentProps<ExportAsJson>) {
 
 function getStyles(theme: GrafanaTheme2) {
   return {
+    container: css({
+      height: '100%',
+    }),
     codeEditorBox: css({
-      margin: `${theme.spacing(2)} 0`,
+      margin: `${theme.spacing(2, 0)}`,
       height: '75%',
     }),
-    container: css({
+    buttonsContainer: css({
       paddingBottom: theme.spacing(2),
     }),
   };