Function DataExportButton

frontend/src/react/components/DataExportButton.tsx:182–526

({
  size = "sm",
  disabled = false,
  supportFormats,
  supportPassword = false,
  viewMode,
  tooltip,
  text,
  validate,
  maximumExportCount = Number.MAX_VALUE,
  formContent,
  onExport,
  className,
}: DataExportButtonProps)

 *   selecting a format opens a small Dialog to capture an optional password.
 */
export function DataExportButton({
  size = "sm",
  disabled = false,
  supportFormats,
  supportPassword = false,
  viewMode,
  tooltip,
  text,
  validate,
  maximumExportCount = Number.MAX_VALUE,
  formContent,
  onExport,
  className,
}: DataExportButtonProps) {
  const { t } = useTranslation();

  const [isRequesting, setIsRequesting] = useState(false);
  const [showDrawer, setShowDrawer] = useState(false);
  const [showPasswordDialog, setShowPasswordDialog] = useState(false);

  const presetMax = useMemo(
    () => computeMaximumPreset(maximumExportCount),
    [maximumExportCount]
  );
  const defaultLimit = useMemo(() => Math.min(presetMax, 1000), [presetMax]);

  const [limit, setLimit] = useState<number>(defaultLimit);
  const [format, setFormat] = useState<ExportFormat>(supportFormats[0]);
  const [password, setPassword] = useState("");

  const resetForm = useCallback(() => {
    setLimit(defaultLimit);
    setFormat(supportFormats[0]);
    setPassword("");
  }, [defaultLimit, supportFormats]);

  // Reset form whenever the drawer transitions to OPEN. Depending on
  // `resetForm` here would re-fire the reset on every parent re-render
  // because `supportFormats` typically arrives as a fresh inline array
  // (e.g. `supportFormats={[CSV, JSON, SQL, XLSX]}` from
  // `SingleResultView`), which churns `resetForm`'s identity and would
  // clobber the user's just-changed `limit` / `format` / `password`.
  // Drive the reset off `showDrawer` alone via a ref to the latest
  // `resetForm`.
  const resetFormRef = useRef(resetForm);
  resetFormRef.current = resetForm;
  useEffect(() => {
    if (showDrawer) {
      resetFormRef.current();
    }
  }, [showDrawer]);

  // Clear password each time the password dialog opens.
  useEffect(() => {
    if (showPasswordDialog) {
      setPassword("");
    }
  }, [showPasswordDialog]);