diff --git a/src/components/Common/Export.tsx b/src/components/Common/Export.tsx index a16ecd840e5..da786a2460c 100644 --- a/src/components/Common/Export.tsx +++ b/src/components/Common/Export.tsx @@ -44,7 +44,47 @@ interface ExportButtonProps { parse?: (data: string) => string; filenamePrefix: string; } +function ExportMenuItem({ + item, + exportFile, +}: { + item: ExportItem; + exportFile: ( + action: Parameters["exportFile"]>[0], + filePrefix?: string, + type?: "csv" | "json", + parse?: (data: string) => string, + ) => void; +}) { + const isAuthorized = item.options?.authorizeFor + ? useIsAuthorized(item.options.authorizeFor) + : true; + return ( + { + let action = item.action; + if (item.route) { + action = async () => { + const { data } = await request(item.route!); + return data ?? null; + }; + } + if (action) { + exportFile(action, item.filePrefix, item.type, item.parse); + } + }} + disabled={item.options?.disabled || !isAuthorized} + id={item.options?.id} + className={item.options?.className} + > +
+ {item.options?.icon} + {item.label} +
+
+ ); +} export const ExportMenu = ({ label = "Export", disabled, @@ -52,12 +92,6 @@ export const ExportMenu = ({ }: ExportMenuProps) => { const { isExporting, exportFile } = useExport(); - const authorizationResults = exportItems.map((item) => - item.options?.authorizeFor - ? useIsAuthorized(item.options.authorizeFor) - : true, - ); - if (exportItems.length === 1) { const item = exportItems[0]; @@ -101,30 +135,12 @@ export const ExportMenu = ({ - {exportItems.map((item, index) => ( - ( + { - let action = item.action; - if (item.route) { - action = async () => { - const { data } = await request(item.route!); - return data ?? null; - }; - } - if (action) { - exportFile(action, item.filePrefix, item.type, item.parse); - } - }} - disabled={item.options?.disabled || !authorizationResults[index]} - id={item.options?.id} - className={item.options?.className} - > -
- {item.options?.icon} - {item.label} -
-
+ item={item} + exportFile={exportFile} + /> ))}