Merge pull request #56 from obsidian-confluence/feat/better-completio…

…n-modal

src/CompletedModal.ts

@@ -1,19 +1,22 @@
 import { Modal, App } from "obsidian";
+import CompletedView, { UploadResultsProps } from "./CompletedView";
+import ReactDOM from "react-dom";
+import React from "react";
 
 export class CompletedModal extends Modal {
-	uploadStatuses: { successes: number; failures: number };
+	uploadResults: UploadResultsProps;
 
-	constructor(
-		app: App,
-		uploadStatuses: { successes: number; failures: number }
-	) {
+	constructor(app: App, uploadResults: UploadResultsProps) {
 		super(app);
-		this.uploadStatuses = uploadStatuses;
+		this.uploadResults = uploadResults;
 	}
 
 	onOpen() {
 		const { contentEl } = this;
-		contentEl.setText(JSON.stringify(this.uploadStatuses));
+		ReactDOM.render(
+			React.createElement(CompletedView, this.uploadResults),
+			contentEl
+		);
 	}
 
 	onClose() {

src/CompletedView.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+export interface FailedFile {
+	fileName: string;
+	reason: string;
+}
+
+export interface UploadResults {
+	successfulUploads: number;
+	errorMessage: string | null;
+	failedFiles: FailedFile[];
+}
+
+export interface UploadResultsProps {
+	uploadResults: UploadResults;
+}
+
+const UploadResults: React.FC<UploadResultsProps> = ({ uploadResults }) => {
+	const { successfulUploads, errorMessage, failedFiles } = uploadResults;
+
+	return (
+		<div className="upload-results">
+			<div>
+				<h1>Confluence Publish</h1>
+			</div>
+			{errorMessage ? (
+				<div className="error-message">
+					<h3>Error</h3>
+					<p>{errorMessage}</p>
+				</div>
+			) : (
+				<>
+					<div className="successful-uploads">
+						<h3>Successful Uploads</h3>
+						<p>
+							{successfulUploads} file(s) uploaded successfully.
+						</p>
+					</div>
+
+					{failedFiles.length > 0 && (
+						<div className="failed-uploads">
+							<h3>Failed Uploads</h3>
+							<p>
+								{failedFiles.length} file(s) failed to upload.
+							</p>
+							<ul>
+								{failedFiles.map((file, index) => (
+									<li key={index}>
+										<strong>{file.fileName}</strong>:{" "}
+										{file.reason}
+									</li>
+								))}
+							</ul>
+						</div>
+					)}
+				</>
+			)}
+		</div>
+	);
+};
+
+export default UploadResults;

src/Publisher.ts

@@ -14,9 +14,17 @@ import {
 import { MermaidRenderer, ChartData } from "./mermaid_renderers/types";
 import * as path from "path";
 import { JSONDocNode } from "@atlaskit/editor-json-transformer";
+import { UploadResults } from "./CompletedView";
+import stringifyObject from "stringify-object";
 
 const mdToADFConverter = new MdToADF();
 
+interface FilePublishResult {
+	successfulUpload: boolean;
+	absoluteFilePath: string;
+	reason?: string;
+}
+
 export interface AdfFile {
 	folderName: string;
 	absoluteFilePath: string;
@@ -89,7 +97,7 @@ export class Publisher {
 		this.confluenceClient = confluenceClient;
 	}
 
-	async doPublish(): Promise<{ successes: number; failures: number }> {
+	async doPublish(): Promise<UploadResults> {
 		const parentPage = await this.confluenceClient.content.getContentById({
 			id: this.settings.confluenceParentId,
 			expand: ["body.atlas_doc_format", "space"],
@@ -117,16 +125,25 @@ export class Publisher {
 
 		const adrFiles = await Promise.all(adrFileTasks);
 
-		const stats = adrFiles.reduce(
-			(previousValue, currentValue) => {
-				const key = currentValue ? "successes" : "failures";
-				previousValue[key]++;
-				return previousValue;
-			},
-			{ successes: 0, failures: 0 }
-		);
+		const returnVal: UploadResults = {
+			successfulUploads: 0,
+			errorMessage: null,
+			failedFiles: [],
+		};
+
+		adrFiles.forEach((element) => {
+			if (element.successfulUpload) {
+				returnVal.successfulUploads = returnVal.successfulUploads + 1;
+				return;
+			}
+
+			returnVal.failedFiles.push({
+				fileName: element.absoluteFilePath,
+				reason: element.reason ?? "No Reason Provided",
+			});
+		});
 
-		return stats;
+		return returnVal;
 	}
 
 	async createFileStructureInConfluence(
@@ -274,24 +291,35 @@ export class Publisher {
 		}
 	}
 
-	async publishFile(node: ConfluenceNode): Promise<boolean> {
-		if (!node.file.pageId) {
-			throw new Error("Missing Page ID");
-		}
+	async publishFile(node: ConfluenceNode): Promise<FilePublishResult> {
+		try {
+			if (!node.file.pageId) {
+				throw new Error("Missing Page ID");
+			}
 
-		await this.updatePageContent(
-			node.file.pageId,
-			node.file.absoluteFilePath,
-			node.file.contents,
-			node.parentPageId,
-			node.version,
-			node.file.pageTitle,
-			node.existingAdf,
-			node.file.tags,
-			node.file
-		);
+			await this.updatePageContent(
+				node.file.pageId,
+				node.file.absoluteFilePath,
+				node.file.contents,
+				node.parentPageId,
+				node.version,
+				node.file.pageTitle,
+				node.existingAdf,
+				node.file.tags,
+				node.file
+			);
 
-		return true;
+			return {
+				successfulUpload: true,
+				absoluteFilePath: node.file.absoluteFilePath,
+			};
+		} catch (e: unknown) {
+			return {
+				successfulUpload: false,
+				absoluteFilePath: node.file.absoluteFilePath,
+				reason: stringifyObject(e),
+			};
+		}
 	}
 
 	async updatePageContent(
@@ -475,7 +503,7 @@ export class Publisher {
 		}
 
 		const afterAdf = traverse(adr, {
-			media: (node, parent) => {
+			media: (node, _parent) => {
 				if (node?.attrs?.type === "file") {
 					console.log({ node });
 					if (!imageMap[node?.attrs?.url]) {
@@ -491,7 +519,7 @@ export class Publisher {
 					}
 				}
 			},
-			codeBlock: (node, parent) => {
+			codeBlock: (node, _parent) => {
 				if (node?.attrs?.language === "mermaid") {
 					const mermaidContent = node?.content?.at(0)?.text;
 					if (!mermaidContent) {

src/main.ts

@@ -14,6 +14,7 @@ import { CompletedModal } from "./CompletedModal";
 import { CustomConfluenceClient } from "./MyBaseClient";
 import { ElectronMermaidRenderer } from "./mermaid_renderers/electron";
 import AdfView, { ADF_VIEW_TYPE } from "./AdfView";
+import stringifyObject from "stringify-object";
 
 export default class MyPlugin extends Plugin {
 	settings: MyPluginSettings;
@@ -120,10 +121,27 @@ export default class MyPlugin extends Plugin {
 				this.isSyncing = true;
 				try {
 					const stats = await this.publisher.doPublish();
-					new CompletedModal(this.app, stats).open();
-				} catch (exceptionVar) {
-					new Notice("Error publishing to Confluence");
-					console.error(exceptionVar);
+					new CompletedModal(this.app, {
+						uploadResults: stats,
+					}).open();
+				} catch (error) {
+					if (error instanceof Error) {
+						new CompletedModal(this.app, {
+							uploadResults: {
+								successfulUploads: 0,
+								errorMessage: error.message,
+								failedFiles: [],
+							},
+						}).open();
+					} else {
+						new CompletedModal(this.app, {
+							uploadResults: {
+								successfulUploads: 0,
+								errorMessage: stringifyObject(error),
+								failedFiles: [],
+							},
+						}).open();
+					}
 				} finally {
 					this.isSyncing = false;
 				}
@@ -140,7 +158,29 @@ export default class MyPlugin extends Plugin {
 						this.publisher
 							.doPublish()
 							.then((stats) => {
-								new CompletedModal(this.app, stats).open();
+								new CompletedModal(this.app, {
+									uploadResults: stats,
+								}).open();
+							})
+							.catch((error) => {
+								if (error instanceof Error) {
+									new CompletedModal(this.app, {
+										uploadResults: {
+											successfulUploads: 0,
+											errorMessage: error.message,
+											failedFiles: [],
+										},
+									}).open();
+								} else {
+									new CompletedModal(this.app, {
+										uploadResults: {
+											successfulUploads: 0,
+											errorMessage:
+												stringifyObject(error),
+											failedFiles: [],
+										},
+									}).open();
+								}
 							})
 							.finally(() => {
 								this.isSyncing = false;

tsconfig.json

@@ -3,6 +3,7 @@
     "baseUrl": ".",
     "inlineSourceMap": true,
     "inlineSources": true,
+    "jsx": "react",
     "module": "CommonJS",
     "target": "ES2021",
     "allowJs": true,