From 2eb4ca382709c5a8b2a47c196fb8f65cefe3709d Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 6 Mar 2023 14:25:48 +0300
Subject: [PATCH] FileUpload: Fix showFileName option (#64202)

* FileUpload: Fix showFileName option

* Fix tests
---
 .../grafana-ui/src/components/FileUpload/FileUpload.test.tsx  | 4 ++--
 packages/grafana-ui/src/components/FileUpload/FileUpload.tsx  | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.test.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.test.tsx
index 156c1acca75..833734fad02 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.test.tsx
+++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.test.tsx
@@ -30,7 +30,7 @@ describe('FileUpload', () => {
     const testFileName = 'grafana.png';
     const file = new File(['(⌐□_□)'], testFileName, { type: 'image/png' });
     const onFileUpload = jest.fn();
-    const { getByTestId } = render(<FileUpload onFileUpload={onFileUpload} />);
+    const { getByTestId } = render(<FileUpload onFileUpload={onFileUpload} showFileName={true} />);
     let uploader = getByTestId(selectors.components.FileUpload.inputField);
     await waitFor(() =>
       fireEvent.change(uploader, {
@@ -45,7 +45,7 @@ describe('FileUpload', () => {
     const testFileName = 'longFileName.something.png';
     const file = new File(['(⌐□_□)'], testFileName, { type: 'image/png' });
     const onFileUpload = jest.fn();
-    const { getByTestId } = render(<FileUpload onFileUpload={onFileUpload} />);
+    const { getByTestId } = render(<FileUpload onFileUpload={onFileUpload} showFileName={true} />);
     let uploader = getByTestId(selectors.components.FileUpload.inputField);
     await waitFor(() =>
       fireEvent.change(uploader, {
diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
index 12f05c59e11..514a8a233fb 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
+++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
@@ -31,6 +31,7 @@ export const FileUpload = ({
   children = 'Upload file',
   accept = '*',
   size = 'md',
+  showFileName,
 }: React.PropsWithChildren<Props>) => {
   const style = useStyles2(getStyles(size));
   const [fileName, setFileName] = useState('');
@@ -63,7 +64,7 @@ export const FileUpload = ({
         {children}
       </label>
 
-      {fileName && (
+      {showFileName && fileName && (
         <span
           aria-label="File name"
           className={style.fileName}