fix infinite loop issue on accessing app view page without permission

Author: raheeliftikhar5

client/packages/lowcoder/src/pages/editor/AppEditor.tsx

@@ -1,5 +1,5 @@
 import { AppPathParams, AppTypeEnum } from "constants/applicationConstants";
-import { Suspense, lazy, useEffect, useRef, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router";
 import { AppSummaryInfo, fetchApplicationInfo } from "redux/reduxActions/applicationActions";
@@ -30,6 +30,7 @@ import EditorSkeletonView from "./editorSkeletonView";
 import {ErrorBoundary, FallbackProps} from 'react-error-boundary';
 import { ALL_APPLICATIONS_URL } from "@lowcoder-ee/constants/routesURL";
 import history from "util/history";
+import Flex from "antd/es/flex";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -56,6 +57,7 @@ export default function AppEditor() {
   const orgId = currentUser.currentOrgId;
   const firstRendered = useRef(false);
   const [isDataSourcePluginRegistered, setIsDataSourcePluginRegistered] = useState(false);
+  const [appError, setAppError] = useState('');
 
   setGlobalSettings({ applicationId, isViewMode: paramViewMode === "view" });
 
@@ -132,15 +134,37 @@ export default function AppEditor() {
           setAppInfo(info);
           fetchJSDataSourceByApp();
         },
+        onError: (errorMessage) => {
+          setAppError(errorMessage);
+        }
       })
     );
   }, [viewMode, applicationId, dispatch]);
-const fallbackUI = (
-  <div style={{display:'flex', height:'100%', width:'100%', alignItems:'center',justifyContent:'center', gap:'8px',marginTop:'10px'}}>
-    <p style={{margin:0}}>Something went wrong while displaying this webpage</p>
-    <button onClick={() => history.push(ALL_APPLICATIONS_URL)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Go to Apps</button>
-  </div>
-);
+
+  const fallbackUI = useMemo(() => (
+    <Flex align="center" justify="center" vertical style={{
+      height: '300px',
+      width: '400px',
+      margin: '0 auto',
+    }}>
+      <h4 style={{margin: 0}}>Something went wrong while displaying this webpage</h4>
+      <button onClick={() => history.push(ALL_APPLICATIONS_URL)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Go to Apps</button>
+    </Flex>
+  ), []);
+
+  if (Boolean(appError)) {
+    return (
+      <Flex align="center" justify="center" vertical style={{
+        height: '300px',
+        width: '400px',
+        margin: '0 auto',
+      }}>
+        <h4>{appError}</h4>
+        <button onClick={() => history.push(ALL_APPLICATIONS_URL)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Back to Home</button>
+      </Flex>
+    )
+  }
+
   return (
     <ErrorBoundary fallback={fallbackUI}>
       {showAppSnapshot ? (

client/packages/lowcoder/src/redux/reduxActions/applicationActions.ts

@@ -132,6 +132,7 @@ export type FetchAppInfoPayload = {
   applicationId: string;
   type: ApplicationDSLType;
   onSuccess?: (info: AppSummaryInfo) => void;
+  onError?: (error: string) => void;
 };
 export const fetchApplicationInfo = (payload: FetchAppInfoPayload) => ({
   type: ReduxActionTypes.FETCH_APPLICATION_DETAIL,

client/packages/lowcoder/src/redux/sagas/applicationSagas.ts

@@ -242,7 +242,8 @@ export function* fetchApplicationDetailSaga(action: ReduxAction<FetchAppInfoPayl
       return;
     } else if (!isValidResponse) {
       if (response.data.code === SERVER_ERROR_CODES.NO_PERMISSION_TO_REQUEST_APP) {
-        history.push(BASE_URL);
+        // history.push(BASE_URL);
+        action.payload.onError?.(response.data.message);
       }
       throw Error(response.data.message);
     }