Grafana DS: Fix dropzone showing upload file even if there is a file (#62200)

* Grafana DS: Fix dropzone showing upload file even if there is a file

packages/grafana-ui/src/components/FileDropzone/FileDropzone.test.tsx

@@ -104,6 +104,12 @@ describe('The FileDropzone component', () => {
     expect(onDrop).toBeCalledWith([fileToUpload], [], expect.anything());
   });
 
+  it('should display the text generated by a custom primaryTextSupplier', async () => {
+    const customText = 'custom text from primaryTextSuplier';
+    render(<FileDropzone primaryTextSupplier={() => customText} />);
+    expect(await screen.findByText(customText)).toBeInTheDocument();
+  });
+
   it('should show children inside the dropzone', () => {
     const component = (
       <FileDropzone>

packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx

@@ -46,6 +46,7 @@ export interface FileDropzoneProps {
    */
   fileListRenderer?: (file: DropzoneFile, removeFile: (file: DropzoneFile) => void) => ReactNode;
   onFileRemove?: (file: DropzoneFile) => void;
+  primaryTextSupplier?: (files: DropzoneFile[], options?: BackwardsCompatibleDropzoneOptions) => string;
 }
 
 export interface DropzoneFile {
@@ -57,7 +58,15 @@ export interface DropzoneFile {
   retryUpload?: () => void;
 }
 
-export function FileDropzone({ options, children, readAs, onLoad, fileListRenderer, onFileRemove }: FileDropzoneProps) {
+export function FileDropzone({
+  options,
+  primaryTextSupplier = getPrimaryText,
+  children,
+  readAs,
+  onLoad,
+  fileListRenderer,
+  onFileRemove,
+}: FileDropzoneProps) {
   const [files, setFiles] = useState<DropzoneFile[]>([]);
   const [errorMessages, setErrorMessages] = useState<string[]>([]);
 
@@ -198,7 +207,7 @@ export function FileDropzone({ options, children, readAs, onLoad, fileListRender
     <div className={styles.container}>
       <div data-testid="dropzone" {...getRootProps({ className: styles.dropzone })}>
         <input {...getInputProps()} />
-        {children ?? <FileDropzoneDefaultChildren primaryText={getPrimaryText(files, options)} />}
+        {children ?? <FileDropzoneDefaultChildren primaryText={primaryTextSupplier(files, options)} />}
       </div>
       {errorMessages.length > 0 && getErrorMessages()}
       {options?.accept && (
@@ -252,11 +261,11 @@ export function FileDropzoneDefaultChildren({
     </div>
   );
 }
-function getPrimaryText(files: DropzoneFile[], options?: BackwardsCompatibleDropzoneOptions) {
+function getPrimaryText(files?: DropzoneFile[], options?: BackwardsCompatibleDropzoneOptions) {
   if (options?.multiple === undefined || options?.multiple) {
     return 'Upload file';
   }
-  return files.length ? 'Replace file' : 'Upload file';
+  return files && files.length ? 'Replace file' : 'Upload file';
 }
 
 function getAcceptedFileTypeText(accept: string | string[] | Accept) {

public/app/plugins/datasource/grafana/components/QueryEditor.tsx

@@ -68,6 +68,10 @@ export class UnthemedQueryEditor extends PureComponent<Props, State> {
     },
   ];
 
+  dropzoneTextSupplier = () => {
+    return this.props?.query?.file ? 'Replace file' : 'Upload file';
+  };
+
   constructor(props: Props) {
     super(props);
 
@@ -399,6 +403,7 @@ export class UnthemedQueryEditor extends PureComponent<Props, State> {
               fileListRenderer={this.fileListRenderer}
               options={{ onDropAccepted: this.onDropAccepted, maxSize: 200000, multiple: false }}
               onLoad={this.onFileDrop}
+              primaryTextSupplier={this.dropzoneTextSupplier}
             ></FileDropzone>
             {file && (
               <div className={styles.file}>