diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.test.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.test.tsx index e60f6818e2c..0389d7ffd2a 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.test.tsx +++ b/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( customText} />); + expect(await screen.findByText(customText)).toBeInTheDocument(); + }); + it('should show children inside the dropzone', () => { const component = ( diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx index 81961749565..79ad4c2f92b 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx +++ b/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([]); const [errorMessages, setErrorMessages] = useState([]); @@ -198,7 +207,7 @@ export function FileDropzone({ options, children, readAs, onLoad, fileListRender
- {children ?? } + {children ?? }
{errorMessages.length > 0 && getErrorMessages()} {options?.accept && ( @@ -252,11 +261,11 @@ export function FileDropzoneDefaultChildren({
); } -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) { diff --git a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx index 3956c836a19..23c16c1a213 100644 --- a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx +++ b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx @@ -68,6 +68,10 @@ export class UnthemedQueryEditor extends PureComponent { }, ]; + dropzoneTextSupplier = () => { + return this.props?.query?.file ? 'Replace file' : 'Upload file'; + }; + constructor(props: Props) { super(props); @@ -399,6 +403,7 @@ export class UnthemedQueryEditor extends PureComponent { fileListRenderer={this.fileListRenderer} options={{ onDropAccepted: this.onDropAccepted, maxSize: 200000, multiple: false }} onLoad={this.onFileDrop} + primaryTextSupplier={this.dropzoneTextSupplier} >
{file && (