From 1838fee678fe6230bae7b1976949da4352eb9cba Mon Sep 17 00:00:00 2001
From: ZuperZee <ole.kristian.kaaseth@gmail.com>
Date: Wed, 5 Nov 2025 11:56:29 +0100
Subject: [PATCH] fix: don't shrink edit panel on file upload

The first attempt was: https://github.com/gapitio/gapit-htmlgraphics-panel/pull/210
but it had an annoying issue with the edit panel being shrunk after
clicking the file upload button.

Now just use the normal input element... :(
---
 src/components/FileUpload.tsx                | 38 ++++++++++++++++++++
 src/components/PanelOptions/ImportExport.tsx |  5 +--
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 src/components/FileUpload.tsx

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
new file mode 100644
index 0000000..129e9c8
--- /dev/null
+++ b/src/components/FileUpload.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import type { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
+interface Props {
+  onFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  accept?: string;
+}
+
+export const FileUpload = ({ onFileUpload, accept }: Props) => {
+  const styles = useStyles2(getStyles());
+
+  return (
+    <>
+      <input
+        type="file"
+        style={{
+          // Use css styles instead of emotion classes to override the styles set by Grafana (for some reason they have higher priority)
+          height: 'auto', // override: https://github.com/grafana/grafana/blob/563109b696e9c1cbaf345f2ab7a11f7f78422982/packages/grafana-ui/src/themes/GlobalStyles/forms.ts#L39
+          lineHeight: '1', // override: https://github.com/grafana/grafana/blob/563109b696e9c1cbaf345f2ab7a11f7f78422982/packages/grafana-ui/src/themes/GlobalStyles/forms.ts#L42
+          width: '100%', // override: https://github.com/grafana/grafana/blob/563109b696e9c1cbaf345f2ab7a11f7f78422982/packages/grafana-ui/src/themes/GlobalStyles/forms.ts#L66
+        }}
+        onChange={onFileUpload}
+        accept={accept}
+        className={styles.input}
+      />
+    </>
+  );
+};
+
+const getStyles = () => (theme: GrafanaTheme2) => {
+  return {
+    input: css({
+      padding: theme.spacing(2),
+    }),
+  };
+};
diff --git a/src/components/PanelOptions/ImportExport.tsx b/src/components/PanelOptions/ImportExport.tsx
index 9f4c3e4..3d1a5ca 100644
--- a/src/components/PanelOptions/ImportExport.tsx
+++ b/src/components/PanelOptions/ImportExport.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { StandardEditorProps } from '@grafana/data';
 import { CodeEditorOptionSettings } from 'types';
 import { CodeEditor } from 'components/CodeEditor';
-import { Button, FileUpload } from '@grafana/ui';
+import { Button } from '@grafana/ui';
 import { exportFile, contentType } from 'utils/exportFile';
 import { readFile } from 'utils/readFile';
+import { FileUpload } from 'components/FileUpload';
 
 interface Props extends StandardEditorProps<string, CodeEditorOptionSettings> {}
 
@@ -48,7 +49,7 @@ export const ImportExportOption: React.FC<Props> = ({ value, item, onChange, con
 
   return (
     <div>
-      <FileUpload onFileUpload={(e) => importPanelOptions(e.currentTarget.files)} showFileName accept=".json" />
+      <FileUpload onFileUpload={(e) => importPanelOptions(e.currentTarget.files)} accept=".json" />
       <Spacer />
       <CodeEditor settings={item.settings} value={getOptionsString()} context={context} onChange={updatePanelOptions} />
       <Spacer />