Merge pull request #1024 from lowcoder-org/dev

Dev > Main - Bugfixes - preparation for v2.4.3

Author: FalkWolsky

client/packages/lowcoder-design/src/icons/index.ts

@@ -350,6 +350,7 @@ export { ReactComponent as GeoMapLayersCompIconSmall } from "./v2/geomap-layers-
 export { ReactComponent as HillchartCompIconSmall } from "./v2/hillchart-s.svg"; // new
 export { ReactComponent as PivotTableCompIconSmall } from "./v2/pivot-table-s.svg"; // new
 export { ReactComponent as TurnstileCaptchaCompIconSmall } from "./v2/turnstile-captcha-s.svg"; // new
+export { ReactComponent as GanttCompIconSmall } from "./v2/gantt-chart-s.svg"; // new
 
 
 // medium
@@ -435,6 +436,7 @@ export { ReactComponent as VideoCameraStreamCompIcon } from "./v2/camera-stream-
 export { ReactComponent as VideoScreenshareCompIcon } from "./v2/screen-share-stream-m.svg";
 export { ReactComponent as StepCompIcon } from "./v2/steps-m.svg";
 export { ReactComponent as SignatureCompIcon } from "./v2/signature-m.svg";
+export { ReactComponent as GanttCompIcon } from "./v2/gantt-chart-m.svg";
 
 export { ReactComponent as CandlestickChartCompIcon } from "./v2/candlestick-chart-m.svg";
 export { ReactComponent as FunnelChartCompIcon } from "./v2/funnel-chart-m.svg";

client/packages/lowcoder-design/src/icons/v2/gantt-chart-l.svg

@@ -108,7 +108,8 @@ import {
   HillchartCompIcon,
   TurnstileCaptchaCompIcon,
   PivotTableCompIcon,
-  GraphChartCompIcon
+  GraphChartCompIcon,
+  GanttCompIcon,
 
 } from "lowcoder-design";
 
@@ -1225,6 +1226,25 @@ export var uiCompMap: Registry = {
 
   // Project Management
 
+  ganttChart: {
+    name: trans("uiComp.ganttChartCompName"),
+    enName: "ganttChart",
+    description: trans("uiComp.ganttChartCompDesc"),
+    categories: ["projectmanagement"],
+    icon: GanttCompIcon,
+    keywords: trans("uiComp.ganttChartCompKeywords"),
+    comp: remoteComp({
+      compName: "ganttchart",
+      packageName: "lowcoder-comp-gantt-chart",
+      source: "npm",
+      isRemote: true,
+    }),
+    layoutInfo: {
+      w: 20,
+      h: 60,
+    },
+  },
+
   hillchart: {
     name: trans("uiComp.hillchartCompName"),
     enName: "Hillchart",

client/packages/lowcoder-design/src/icons/v2/gantt-chart-m.svg

@@ -161,6 +161,7 @@ export type UICompType =
   | "themeriverChart" 
   | "basicChart"
   | "columnLayout"
+  | "ganttChart"
   ;
 
 

client/packages/lowcoder-design/src/icons/v2/gantt-chart-s.svg

@@ -1222,6 +1222,10 @@ export const en = {
     "shapeCompDesc": "A collection of geometric shapes for use with diagrams, illustrations, and visualizations.",
     "shapeCompKeywords": "shapes, geometric, diagrams, illustrations",
 
+    "ganttChartCompName" : "Gantt Chart",
+    "ganttChartCompDesc" : "A chart that illustrates a project schedule, showing the start and finish dates of elements and dependencies.",
+    "ganttChartCompKeywords" : "gantt chart, project management, schedule",
+
     // by mousheng
 
     "colorPickerCompName": "Color Picker",

client/packages/lowcoder/src/comps/index.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/comps/uiCompRegistry.ts

@@ -82,6 +82,7 @@ import {
   ColorPickerCompIconSmall,
   TransferCompIconSmall,
   ShapesCompIconSmall,
+  GanttCompIconSmall,
 
   CandlestickChartCompIconSmall,
   FunnelChartCompIconSmall,
@@ -182,8 +183,9 @@ export const CompStateIcon: {
   treeSelect: <TreeSelectCompIconSmall />,
   video: <VideoCompIconSmall />,
   videocomponent: <VideoCameraStreamCompIconSmall />,
-  
+
   hillchart: <HillchartCompIconSmall/>,  
+  ganttChart: <GanttCompIconSmall/>,
   openLayersGeoMap: <GeoMapLayersCompIconSmall/>,  
   chartsGeoMap: <GeoMapChartsCompIconSmall/>,  
   bpmnEditor: <BPMNEditorCompIconSmall/>, 

client/packages/lowcoder/src/i18n/locales/en.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,