Merge branch 'pwa-icon-support' of https://github.com/ElierHG/lowcoder into pwa-icon-support

Author: Elier Herrera

client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx

@@ -61,6 +61,8 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   const [chartSize, setChartSize] = useState<ChartSize>();
   const firstResize = useRef(true);
   const theme = useContext(ThemeContext);
+  const [chartKey, setChartKey] = useState(0);
+  const prevRaceMode = useRef<boolean>();
   const defaultChartTheme = {
     color: chartColorPalette,
     backgroundColor: "#fff",
@@ -73,6 +75,16 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  // Detect race mode changes and force chart recreation
+  const currentRaceMode = comp.children.chartConfig?.children?.comp?.children?.race?.getView();
+  useEffect(() => {
+    if (prevRaceMode.current !== undefined && prevRaceMode.current !== currentRaceMode) {
+      // Force chart recreation when race mode changes
+      setChartKey(prev => prev + 1);
+    }
+    prevRaceMode.current = currentRaceMode;
+  }, [currentRaceMode]);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
@@ -176,10 +188,11 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   return (
     <div ref={containerRef} style={{height: '100%'}}>
       <ReactECharts
+        key={chartKey}
         ref={(e) => (echartsCompRef.current = e)}
         style={{ height: "100%" }}
-        notMerge
-        lazyUpdate
+        notMerge={!currentRaceMode}
+        lazyUpdate={!currentRaceMode}
         opts={{ locale: getEchartsLocale() }}
         option={option}
         mode={mode}

client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts

@@ -201,6 +201,15 @@ export function getEchartsConfig(
       animationEasing: 'linear',
       animationEasingUpdate: 'linear',
     }
+  } else {
+    // Ensure proper animation settings when race is disabled
+    config = {
+      ...config,
+      animationDuration: 1000,
+      animationDurationUpdate: 1000,
+      animationEasing: 'cubicOut',
+      animationEasingUpdate: 'cubicOut',
+    }
   }
   if (props.data.length <= 0) {
     // no data
@@ -333,6 +342,21 @@ export function getEchartsConfig(
           animationDurationUpdate: 300
         },
       }
+    } else {
+      // Reset axis animations when race is disabled
+      config = {
+        ...config,
+        xAxis: {
+          ...config.xAxis,
+          animationDuration: undefined,
+          animationDurationUpdate: undefined
+        },
+        yAxis: {
+          ...config.yAxis,
+          animationDuration: undefined,
+          animationDurationUpdate: undefined
+        },
+      }
     }
   }
   // console.log("Echarts transformedData and config", transformedData, config);

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx

@@ -53,7 +53,7 @@ export const BarChartConfig = (function () {
         type: "bar",
         subtype: props.type,
         realtimeSort: props.race,
-        seriesLayoutBy: props.race?'column':undefined,
+        seriesLayoutBy: props.race?'column':'row',
         label: {
           show: props.showLabel,
           position: "top",

client/packages/lowcoder-core/lib/index.js

@@ -1692,11 +1692,12 @@ class CodeNode extends AbstractNode {
                 // if query is dependent on itself, mark as ready
                 if (pathsArr?.[0] === options?.queryName)
                     return;
+                // TODO: check if this is needed after removing lazy load
                 // wait for lazy loaded comps to load before executing query on page load
-                if (value && !Object.keys(value).length && paths.size) {
-                    isFetching = true;
-                    ready = false;
-                }
+                // if (value && !Object.keys(value).length && paths.size) {
+                //   isFetching = true;
+                //   ready = false;
+                // }
                 if (_.has(value, IS_FETCHING_FIELD)) {
                     isFetching = isFetching || value.isFetching === true;
                 }

client/packages/lowcoder-core/src/eval/codeNode.tsx

@@ -176,11 +176,12 @@ export class CodeNode extends AbstractNode<ValueAndMsg<unknown>> {
         // if query is dependent on itself, mark as ready
         if (pathsArr?.[0] === options?.queryName) return;
 
+        // TODO: check if this is needed after removing lazy load
         // wait for lazy loaded comps to load before executing query on page load
-        if (value && !Object.keys(value).length && paths.size) {
-          isFetching = true;
-          ready = false;
-        }
+        // if (value && !Object.keys(value).length && paths.size) {
+        //   isFetching = true;
+        //   ready = false;
+        // }
         if (_.has(value, IS_FETCHING_FIELD)) {
           isFetching = isFetching || value.isFetching === true;
         }

client/packages/lowcoder/src/components/DraggableTree/DroppableMenuItem.tsx

@@ -67,6 +67,9 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
   const canDropBefore = checkDroppableFlag(item.canDropBefore, activeNode?.data);
   const canDropAfter = checkDroppableFlag(item.canDropAfter, activeNode?.data);
 
+  const lastChildNode = items[items.length - 1];
+  const canDropAfterLastChild = checkDroppableFlag(lastChildNode?.canDropAfter, activeNode?.data);
+
   const dropData: IDropData = {
     targetListSize: items.length,
     targetPath: dropInAsSub ? [...path, 0] : [...path.slice(0, -1), path[path.length - 1] + 1],
@@ -136,6 +139,15 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
               />
             </Fragment>
           ))}
+          {activeNode && canDropAfterLastChild && (
+            <div style={{ position: "relative" }}>
+              <DroppablePlaceholder
+                targetListSize={-1}
+                path={[...path, items.length]}
+                disabled={isDragging || disabled}
+              />
+            </div>
+          )}
         </div>
       )}
     </>

client/packages/lowcoder/src/components/PermissionDialog/DatasourcePermissionDialog.tsx

@@ -13,6 +13,7 @@ import { DatasourceRole } from "../../api/datasourcePermissionApi";
 import { getDataSourcePermissionInfo } from "../../redux/selectors/datasourceSelectors";
 import { StyledLoading } from "./commonComponents";
 import { PermissionRole } from "./Permission";
+import { getUser } from "../../redux/selectors/usersSelectors";
 
 export const DatasourcePermissionDialog = (props: {
   datasourceId: string;
@@ -22,6 +23,7 @@ export const DatasourcePermissionDialog = (props: {
   const { datasourceId } = props;
   const dispatch = useDispatch();
   const permissionInfo = useSelector(getDataSourcePermissionInfo)[datasourceId];
+  const user = useSelector(getUser);
 
   useEffect(() => {
     dispatch(fetchDatasourcePermissions({ datasourceId: datasourceId }));
@@ -75,6 +77,8 @@ export const DatasourcePermissionDialog = (props: {
         { label: trans("share.datasourceOwner"), value: PermissionRole.Owner },
       ]}
       permissionItems={permissions}
+      contextType="organization"
+      organizationId={user.currentOrgId}
       viewBodyRender={(list) => {
         if (!permissionInfo) {
           return <StyledLoading size={18} />;

client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx

@@ -27,7 +27,7 @@ import { EmptyContent } from "pages/common/styledComponent";
 import { trans } from "i18n";
 import { PermissionItem } from "./PermissionList";
 import { currentApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
-import { fetchAvailableGroupsMembers } from "@lowcoder-ee/util/pagination/axios";
+import { fetchAvailableGroupsMembers, fetchAvailableOrgGroupsMembers } from "@lowcoder-ee/util/pagination/axios";
 
 const AddAppUserContent = styled.div`
   display: flex;
@@ -186,6 +186,13 @@ const AddRoleSelect = styled(StyledRoleSelect)<{ $isVisible: boolean }>`
   display: ${(props) => (props.$isVisible ? "unset" : "none")};
 `;
 
+type PermissionContextType = "application" | "organization";
+
+type PermissionContextProps = {
+  contextType: PermissionContextType;
+  organizationId?: string;
+};
+
 type AddAppOptionView = {
   type: ApplicationPermissionType;
   id: string;
@@ -294,8 +301,10 @@ const PermissionSelector = (props: {
   user: User;
   filterItems: PermissionItem[];
   supportRoles: { label: string; value: PermissionRole }[];
+  contextType: PermissionContextType;
+  organizationId?: string;
 }) => {
-  const { selectedItems, setSelectRole, setSelectedItems, user } = props;
+  const { selectedItems, setSelectRole, setSelectedItems, user, contextType, organizationId } = props;
   const [roleSelectVisible, setRoleSelectVisible] = useState(false);
   const selectRef = useRef<HTMLDivElement>(null);
   const [optionViews, setOptionViews] = useState<AddAppOptionView[]>()
@@ -305,42 +314,41 @@ const PermissionSelector = (props: {
 
   const debouncedUserSearch = useCallback(
     debounce((searchTerm: string) => {
-      if (!application) return;
-      
       setIsLoading(true);
-      fetchAvailableGroupsMembers(application.applicationId, searchTerm).then(res => {
-        if(res.success) {
-          setOptionViews(getPermissionOptionView(res.data, props.filterItems))
-        }
-        setIsLoading(false);
-      }).catch(() => {
+      
+      if (contextType === "application" && application) {
+        fetchAvailableGroupsMembers(application.applicationId, searchTerm).then(res => {
+          if(res.success) {
+            setOptionViews(getPermissionOptionView(res.data, props.filterItems))
+          }
+          setIsLoading(false);
+        }).catch(() => {
+          setIsLoading(false);
+        });
+      } else if (contextType === "organization" && organizationId) {
+        fetchAvailableOrgGroupsMembers(organizationId, searchTerm).then(res => {
+          if(res.success) {
+            setOptionViews(getPermissionOptionView(res.data || [], props.filterItems))
+          }
+          setIsLoading(false);
+        }).catch(() => {
+          setIsLoading(false);
+        });
+      } else {
         setIsLoading(false);
-      });
+      }
     }, 500),
-    [application, props.filterItems]
+    [application, props.filterItems, contextType, organizationId]
   );
 
   useEffect(() => {
     debouncedUserSearch(searchValue);
-
     return () => {
       debouncedUserSearch.cancel();
     };
   }, [searchValue, debouncedUserSearch]);
 
-  useEffect(() => {
-    if (!application) return;
-    
-    setIsLoading(true);
-    fetchAvailableGroupsMembers(application.applicationId, "").then(res => {
-      if(res.success) {
-        setOptionViews(getPermissionOptionView(res.data, props.filterItems))
-      }
-      setIsLoading(false);
-    }).catch(() => {
-      setIsLoading(false);
-    });
-  }, [application, props.filterItems]);
+
 
   useEffect(() => {
     setRoleSelectVisible(selectedItems.length > 0);
@@ -425,8 +433,8 @@ export const Permission = (props: {
   supportRoles: { label: string; value: PermissionRole }[];
   onCancel: () => void;
   addPermission: (userIds: string[], groupIds: string[], role: string) => void;
-}) => {
-  const { onCancel } = props;
+} & PermissionContextProps) => {
+  const { onCancel, contextType = "application", organizationId } = props;
   const user = useSelector(getUser);
   const [selectRole, setSelectRole] = useState<ApplicationRoleType>("viewer");
   const [selectedItems, setSelectedItems] = useState<PermissionAddEntity[]>([]);
@@ -443,6 +451,8 @@ export const Permission = (props: {
         user={user}
         filterItems={props.filterItems}
         supportRoles={props.supportRoles}
+        contextType={contextType}
+        organizationId={organizationId}
       />
       <BottomButton>
         <TacoButton style={{ marginRight: "8px" }} onClick={onCancel}>

client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx

@@ -57,8 +57,10 @@ export const PermissionDialog = (props: {
   ) => void;
   updatePermission: (permissionId: string, role: string) => void;
   deletePermission: (permissionId: string) => void;
+  contextType?: "application" | "organization";
+  organizationId?: string;
 }) => {
-  const { supportRoles, permissionItems, visible, onVisibleChange, addPermission, viewBodyRender } =
+  const { supportRoles, permissionItems, visible, onVisibleChange, addPermission, viewBodyRender, contextType, organizationId } =
     props;
   const [activeStepKey, setActiveStepKey] = useState("view");
 
@@ -117,6 +119,8 @@ export const PermissionDialog = (props: {
               addPermission={(userIds, groupIds, role) =>
                 addPermission(userIds, groupIds, role, props.back)
               }
+              contextType={contextType || "application"}
+              organizationId={organizationId}
             />
           ),
           footerRender: (props) => null,

client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

@@ -1,4 +1,4 @@
-import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { IconControl } from "comps/controls/iconControl";
@@ -137,7 +137,8 @@ const childrenMap = {
   disabledStyle: DisabledButtonStyleControl,
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   viewRef: RefControl<HTMLElement>,
-  tooltip: StringControl
+  tooltip: StringControl,
+  tabIndex: NumberControl
 };
 
 type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
@@ -162,8 +163,12 @@ const ButtonPropertyView = React.memo((props: {
               disabledPropertyView(props.children),
               hiddenPropertyView(props.children),
               loadingPropertyView(props.children),
+              props.children.tabIndex.propertyView({ label: trans("prop.tabIndex") }),
             ]
-            : props.children.form.getPropertyView()}
+            : [
+              props.children.form.getPropertyView(),
+              props.children.tabIndex.propertyView({ label: trans("prop.tabIndex") }),
+            ]}
           </Section>
         </>
       )}
@@ -222,6 +227,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
                 (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
               }
               onClick={handleClick}
+              tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
             >
               {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
               {