first commit

common/resources/client/admin/logging/outgoing-email/outgoing-email-log-entry-dialog.tsx

@@ -0,0 +1,62 @@
+import {Dialog} from '@common/ui/overlays/dialog/dialog';
+import {DialogHeader} from '@common/ui/overlays/dialog/dialog-header';
+import {Trans} from '@common/i18n/trans';
+import {DialogBody} from '@common/ui/overlays/dialog/dialog-body';
+import {Button} from '@common/ui/buttons/button';
+import {useOutgoingEmailLogItemWithMime} from '@common/admin/logging/outgoing-email/use-outgoing-email-log-item-with-mime';
+import {ProgressCircle} from '@common/ui/progress/progress-circle';
+import {downloadFileFromUrl} from '@common/uploads/utils/download-file-from-url';
+import {useSettings} from '@common/core/settings/use-settings';
+
+interface Props {
+  logItemId: number;
+}
+export function OutgoingEmailLogEntryDialog({logItemId}: Props) {
+  const {data} = useOutgoingEmailLogItemWithMime(logItemId);
+  const {base_url} = useSettings();
+  return (
+    <Dialog size="fullscreen">
+      <DialogHeader
+        showDivider
+        padding="px-24 py-10"
+        actions={
+          <Button
+            variant="outline"
+            size="xs"
+            disabled={!data}
+            type="button"
+            onClick={
+              data
+                ? () =>
+                    downloadFileFromUrl(
+                      `${base_url}/api/v1/logs/outgoing-email/${logItemId}/download`,
+                    )
+                : undefined
+            }
+          >
+            <Trans message="Download" />
+          </Button>
+        }
+      >
+        <Trans message="Email preview" />
+      </DialogHeader>
+      <DialogBody>
+        {data ? (
+          <iframe
+            srcDoc={data.logItem.parsed_message!.body.html}
+            className="h-max w-full border-none"
+            onLoad={e => {
+              const iframe = e.target as HTMLIFrameElement;
+              iframe.style.height =
+                iframe.contentWindow!.document.body.scrollHeight + 'px';
+            }}
+          />
+        ) : (
+          <div className="flex min-h-200 items-center justify-center">
+            <ProgressCircle isIndeterminate />
+          </div>
+        )}
+      </DialogBody>
+    </Dialog>
+  );
+}