Show the error alert on the not found page in case there are sync errors

This allows access to the build logs in the initial build view

Signed-off-by: Dominik Henneke <dominik.henneke@sda-se.com>

plugins/techdocs/src/reader/components/Reader.tsx

@@ -54,7 +54,8 @@ export const Reader = ({ entityId, onReady }: Props) => {
     state,
     contentReload,
     content: rawPage,
-    errorMessage,
+    contentErrorMessage,
+    syncErrorMessage,
     buildLog,
   } = useReaderState(kind, namespace, name, path);
 
@@ -358,11 +359,24 @@ export const Reader = ({ entityId, onReady }: Props) => {
           severity="error"
           action={<TechDocsBuildLogs buildLog={buildLog} />}
         >
-          Building a newer version of this documentation failed. {errorMessage}
+          Building a newer version of this documentation failed.{' '}
+          {syncErrorMessage}
         </Alert>
       )}
       {state === 'CONTENT_NOT_FOUND' && (
-        <TechDocsNotFound errorMessage={errorMessage} />
+        <>
+          {syncErrorMessage && (
+            <Alert
+              variant="outlined"
+              severity="error"
+              action={<TechDocsBuildLogs buildLog={buildLog} />}
+            >
+              Building a newer version of this documentation failed.{' '}
+              {syncErrorMessage}
+            </Alert>
+          )}
+          <TechDocsNotFound errorMessage={contentErrorMessage} />
+        </>
       )}
       <div data-testid="techdocs-content-shadowroot" ref={shadowDomRef} />
     </>

plugins/techdocs/src/reader/components/useReaderState.test.tsx

@@ -257,7 +257,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CHECKING',
           content: undefined,
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -267,7 +268,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CONTENT_FRESH',
           content: 'my content',
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -312,7 +314,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CHECKING',
           content: undefined,
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -322,7 +325,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'INITIAL_BUILD',
           content: undefined,
-          errorMessage: ' Load error: NotFoundError: Page Not Found',
+          contentErrorMessage: 'NotFoundError: Page Not Found',
+          syncErrorMessage: undefined,
           buildLog: ['Line 1', 'Line 2'],
           contentReload: expect.any(Function),
         });
@@ -332,7 +336,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CHECKING',
           content: undefined,
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -342,7 +347,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CONTENT_FRESH',
           content: 'my content',
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -389,7 +395,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CHECKING',
           content: undefined,
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -399,7 +406,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CONTENT_FRESH',
           content: 'my content',
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: ['Line 1', 'Line 2'],
           contentReload: expect.any(Function),
         });
@@ -409,7 +417,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CONTENT_STALE_REFRESHING',
           content: 'my content',
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: ['Line 1', 'Line 2'],
           contentReload: expect.any(Function),
         });
@@ -419,7 +428,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CONTENT_STALE_READY',
           content: 'my content',
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: ['Line 1', 'Line 2'],
           contentReload: expect.any(Function),
         });
@@ -432,7 +442,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CHECKING',
           content: undefined,
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -442,7 +453,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CONTENT_FRESH',
           content: 'my new content',
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -478,7 +490,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CHECKING',
           content: undefined,
-          errorMessage: '',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });
@@ -488,7 +501,8 @@ describe('useReaderState', () => {
         expect(result.current).toEqual({
           state: 'CONTENT_NOT_FOUND',
           content: undefined,
-          errorMessage: ' Load error: NotFoundError: Some error description',
+          contentErrorMessage: 'NotFoundError: Some error description',
+          syncErrorMessage: undefined,
           buildLog: [],
           contentReload: expect.any(Function),
         });

plugins/techdocs/src/reader/components/useReaderState.ts

@@ -225,7 +225,8 @@ export function useReaderState(
   state: ContentStateTypes;
   contentReload: () => void;
   content?: string;
-  errorMessage?: string;
+  contentErrorMessage?: string;
+  syncErrorMessage?: string;
   buildLog: string[];
 } {
   const [state, dispatch] = useReducer(reducer, {
@@ -331,21 +332,12 @@ export function useReaderState(
     [state.activeSyncState, state.content, state.contentLoading],
   );
 
-  const errorMessage = useMemo(() => {
-    let errMessage = '';
-    if (state.contentError) {
-      errMessage += ` Load error: ${state.contentError}`;
-    }
-    if (state.syncError) errMessage += ` Build error: ${state.syncError}`;
-
-    return errMessage;
-  }, [state.syncError, state.contentError]);
-
   return {
     state: displayState,
     contentReload,
     content: state.content,
-    errorMessage,
+    contentErrorMessage: state.contentError?.toString(),
+    syncErrorMessage: state.syncError?.toString(),
     buildLog: state.buildLog,
   };
 }