chore: allow passing on message on document status

gjulivan · yordan-st · commit 652f34ee6bc1 · 2025-09-26T10:45:08.000+02:00
diff --git a/packages/pluggableWidgets/document-viewer-web/components/DocxViewer.tsx b/packages/pluggableWidgets/document-viewer-web/components/DocxViewer.tsx
@@ -1,4 +1,4 @@
-import { parseAsync, renderDocument, WordDocument, Options } from "docx-preview";
+import { Options, parseAsync, renderDocument, WordDocument } from "docx-preview";
 import { createElement, useCallback, useEffect, useRef } from "react";
 import { BaseControlViewer } from "./BaseViewer";
 import { DocRendererElement, DocumentRendererProps, DocumentStatus } from "./documentRenderer";
@@ -24,16 +24,25 @@ const DocxViewer: DocRendererElement = (props: DocumentRendererProps) => {
                             const styleContainer = document.createElement("div");
                             renderDocument(wordDocument, localRef.current, styleContainer, DOC_CONFIG).catch(
                                 (_error: any) => {
-                                    setDocumentStatus(DocumentStatus.error);
+                                    setDocumentStatus({
+                                        status: DocumentStatus.error,
+                                        message: "Failed to load DOCX document"
+                                    });
                                 }
                             );
                         }
                     })
                     .catch((_error: any) => {
-                        setDocumentStatus(DocumentStatus.error);
+                        setDocumentStatus({
+                            status: DocumentStatus.error,
+                            message: "Failed to load DOCX document"
+                        });
                     });
             } catch (_error: any) {
-                setDocumentStatus(DocumentStatus.error);
+                setDocumentStatus({
+                    status: DocumentStatus.error,
+                    message: "Failed to load DOCX document"
+                });
             }
         },
         [setDocumentStatus]
diff --git a/packages/pluggableWidgets/document-viewer-web/components/ErrorViewer.tsx b/packages/pluggableWidgets/document-viewer-web/components/ErrorViewer.tsx
@@ -4,7 +4,7 @@ import BaseViewer from "./BaseViewer";
 import { downloadFile } from "../utils/helpers";
 
 const ErrorViewer: DocRendererElement = (props: DocumentRendererProps) => {
-    const { file } = props;
+    const { file, documentStatus } = props;
     const onDownloadClick = useCallback(() => {
         downloadFile(file.value?.uri);
     }, [file]);
@@ -22,7 +22,7 @@ const ErrorViewer: DocRendererElement = (props: DocumentRendererProps) => {
             }
         >
             {file.status === "available" ? (
-                <div>{"Unsupported document type"}</div>
+                <div>{documentStatus.message}</div>
             ) : (
                 <div className="widget-document-viewer-loading"></div>
             )}
diff --git a/packages/pluggableWidgets/document-viewer-web/components/ExcelViewer.tsx b/packages/pluggableWidgets/document-viewer-web/components/ExcelViewer.tsx
@@ -15,7 +15,7 @@ const ExcelViewer: DocRendererElement = (props: DocumentRendererProps) => {
                 const html = utils.sheet_to_html(sheet);
                 setXlsxHtml(html);
             } catch (_error) {
-                setDocumentStatus(DocumentStatus.error);
+                setDocumentStatus({ status: DocumentStatus.error, message: "Failed to load XLSX document" });
             }
         },
         [setDocumentStatus]
diff --git a/packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx b/packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx
@@ -6,7 +6,7 @@ import { downloadFile } from "../utils/helpers";
 import { useZoomScale } from "../utils/useZoomScale";
 import BaseViewer from "./BaseViewer";
 import { DocRendererElement, DocumentRendererProps, DocumentStatus } from "./documentRenderer";
-
+import { If } from "@mendix/widget-plugin-component-kit/If";
 const options = {
     cMapUrl: "/widgets/com/mendix/shared/pdfjs/cmaps/",
     standardFontDataUrl: "/widgets/com/mendix/shared/pdfjs/standard_fonts"
@@ -21,10 +21,16 @@ const PDFViewer: DocRendererElement = (props: DocumentRendererProps) => {
             } else {
                 return `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
             }
+        } else if (pdfjsWorkerUrl?.status === "unavailable") {
+            setDocumentStatus({
+                status: DocumentStatus.error,
+                message: "Failed to load PDF document : pdfjsWorker unavailable"
+            });
+            return ""; // no worker;
         } else {
             return ""; // no worker;
         }
-    }, [pdfjsWorkerUrl]);
+    }, [pdfjsWorkerUrl, setDocumentStatus]);
 
     const [numberOfPages, setNumberOfPages] = useState<number>(1);
     const { zoomLevel, zoomIn, zoomOut, reset } = useZoomScale();
@@ -105,20 +111,21 @@ const PDFViewer: DocRendererElement = (props: DocumentRendererProps) => {
                 </Fragment>
             }
         >
-            {!!pdfUrl && pdfjsWorkerUrl?.status === "available" ? (
+            <If condition={!!pdfUrl && pdfjsWorkerUrl?.status === "available"}>
                 <Document
                     file={pdfUrl}
                     options={options}
                     onLoadSuccess={onDocumentLoadSuccess}
-                    onLoadError={() => setDocumentStatus(DocumentStatus.error)}
+                    onLoadError={() =>
+                        setDocumentStatus({
+                            status: DocumentStatus.error,
+                            message: "Failed to load PDF document"
+                        })
+                    }
                 >
                     <Page pageNumber={currentPage} scale={zoomLevel} />
                 </Document>
-            ) : pdfjsWorkerUrl?.status === "unavailable" ? (
-                <div>{"PDF worker unavailable"}</div>
-            ) : (
-                <div className="widget-document-viewer-loading"></div>
-            )}
+            </If>
         </BaseViewer>
     );
 };
diff --git a/packages/pluggableWidgets/document-viewer-web/components/TextViewer.tsx b/packages/pluggableWidgets/document-viewer-web/components/TextViewer.tsx
@@ -16,7 +16,7 @@ const TextViewer: DocRendererElement = (props: DocumentRendererProps) => {
                     setText(response);
                 })
                 .catch(() => {
-                    setDocumentStatus(DocumentStatus.error);
+                    setDocumentStatus({ status: DocumentStatus.error, message: "Failed to load text document" });
                 });
         }
 
diff --git a/packages/pluggableWidgets/document-viewer-web/components/documentRenderer.ts b/packages/pluggableWidgets/document-viewer-web/components/documentRenderer.ts
@@ -7,8 +7,14 @@ export declare const enum DocumentStatus {
     loading = "loading"
 }
 
+export interface DocumentStatusEvent {
+    status: DocumentStatus;
+    message?: string;
+}
+
 export interface DocumentRendererProps extends DocumentViewerContainerProps {
-    setDocumentStatus: (status: DocumentStatus) => void;
+    setDocumentStatus: (status: DocumentStatusEvent) => void;
+    documentStatus: DocumentStatusEvent;
 }
 
 export interface DocRendererElement extends FC<DocumentRendererProps> {
diff --git a/packages/pluggableWidgets/document-viewer-web/utils/useRendererSelector.ts b/packages/pluggableWidgets/document-viewer-web/utils/useRendererSelector.ts
@@ -1,7 +1,12 @@
 import { useEffect, useState } from "react";
 
 import { DocumentRenderers } from "../components";
-import { DocRendererElement, DocumentRendererProps, DocumentStatus } from "../components/documentRenderer";
+import {
+    DocRendererElement,
+    DocumentRendererProps,
+    DocumentStatus,
+    DocumentStatusEvent
+} from "../components/documentRenderer";
 import ErrorViewer from "../components/ErrorViewer";
 import { DocumentViewerContainerProps } from "../typings/DocumentViewerProps";
 interface DocumentRenderer {
@@ -11,7 +16,9 @@ interface DocumentRenderer {
 
 export function useRendererSelector(props: DocumentViewerContainerProps): DocumentRenderer {
     const { file } = props;
-    const [documentStatus, setDocumentStatus] = useState<DocumentStatus>(DocumentStatus.loading);
+    const [documentStatus, setDocumentStatus] = useState<DocumentStatusEvent>({
+        status: DocumentStatus.loading
+    });
     const [component, setComponent] = useState<DocRendererElement>(() => ErrorViewer);
     useEffect(() => {
         const controller = new AbortController();
@@ -44,7 +51,10 @@ export function useRendererSelector(props: DocumentViewerContainerProps): Docume
                     if (selectedRenderer.length > 0) {
                         setComponent(() => selectedRenderer[0]);
                     } else {
-                        setDocumentStatus(DocumentStatus.error);
+                        setDocumentStatus({
+                            status: DocumentStatus.error,
+                            message: "Unsupported document type"
+                        });
                     }
                 }
             });
@@ -56,10 +66,10 @@ export function useRendererSelector(props: DocumentViewerContainerProps): Docume
     }, [file, file?.status, file?.value?.uri]);
 
     useEffect(() => {
-        if (documentStatus === DocumentStatus.error) {
+        if (documentStatus.status === DocumentStatus.error) {
             setComponent(() => ErrorViewer);
         }
     }, [documentStatus]);
 
-    return { CurrentRenderer: component, props: { ...props, setDocumentStatus } };
+    return { CurrentRenderer: component, props: { ...props, setDocumentStatus, documentStatus } };
 }

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const ExcelViewer: DocRendererElement = (props: DocumentRendererProps) => {`
`15`	`15`	`const html = utils.sheet_to_html(sheet);`
`16`	`16`	`setXlsxHtml(html);`
`17`	`17`	`} catch (_error) {`
`18`		`- setDocumentStatus(DocumentStatus.error);`
	`18`	`+ setDocumentStatus({ status: DocumentStatus.error, message: "Failed to load XLSX document" });`
`19`	`19`	`}`
`20`	`20`	`},`
`21`	`21`	`[setDocumentStatus]`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ const TextViewer: DocRendererElement = (props: DocumentRendererProps) => {`
`16`	`16`	`setText(response);`
`17`	`17`	`})`
`18`	`18`	`.catch(() => {`
`19`		`- setDocumentStatus(DocumentStatus.error);`
	`19`	`+ setDocumentStatus({ status: DocumentStatus.error, message: "Failed to load text document" });`
`20`	`20`	`});`
`21`	`21`	`}`
`22`	`22`
Original file line number	Diff line number	Diff line change
`@@ -7,8 +7,14 @@ export declare const enum DocumentStatus {`
`7`	`7`	`loading = "loading"`
`8`	`8`	`}`
`9`	`9`
	`10`	`+export interface DocumentStatusEvent {`
	`11`	`+ status: DocumentStatus;`
	`12`	`+ message?: string;`
	`13`	`+}`
	`14`	`+`
`10`	`15`	`export interface DocumentRendererProps extends DocumentViewerContainerProps {`
`11`		`- setDocumentStatus: (status: DocumentStatus) => void;`
	`16`	`+ setDocumentStatus: (status: DocumentStatusEvent) => void;`
	`17`	`+ documentStatus: DocumentStatusEvent;`
`12`	`18`	`}`
`13`	`19`
`14`	`20`	`export interface DocRendererElement extends FC<DocumentRendererProps> {`