Merge branch 'dev' into feature-iconscout-intergration

Author: FalkWolsky

.github/workflows/sonarcloud.yml

@@ -30,3 +30,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_SCANNER_OPTS: "-Dsonar.javascript.node.maxspace=8192 -Xmx8192m"

client/packages/lowcoder/src/api/apiUtils.ts

@@ -122,7 +122,14 @@ export const apiFailureResponseInterceptor = (error: any) => {
       if (!notAuthRequiredPath(error.config?.url)) {
         if (error.response.status === API_STATUS_CODES.REQUEST_NOT_AUTHORISED) {
           // get x-org-id from failed request
-          const organizationId = error.response.headers['x-org-id'] || undefined;
+          let organizationId;
+          if (error.response.headers['x-org-id']) {
+            organizationId = error.response.headers['x-org-id'];
+          }
+          if (localStorage.getItem('lowcoder_login_orgId')) {
+            organizationId = localStorage.getItem('lowcoder_login_orgId');
+            localStorage.removeItem('lowcoder_login_orgId');
+          }
           // Redirect to login and set a redirect url.
           StoreRegistry.getStore().dispatch(
             logoutAction({

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -1,9 +1,9 @@
 import { default as Pagination } from "antd/es/pagination";
 import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
-import _ from "lodash";
+import _, { findIndex } from "lodash";
 import { ConstructorToView, deferAction } from "lowcoder-core";
-import { HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design";
+import { DragIcon, HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design";
 import { RefObject, useContext, createContext, useMemo, useRef, useEffect } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import styled from "styled-components";
@@ -22,6 +22,10 @@ import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
+import { DndContext } from "@dnd-kit/core";
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { JSONObject } from "@lowcoder-ee/index.sdk";
 
 const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>`
   height: 100%;
@@ -63,6 +67,22 @@ const ListOrientationWrapper = styled.div<{
   flex-direction: ${(props) => (props.$isHorizontal ? "row" : "column")};
 `;
 
+const StyledDragIcon = styled(DragIcon)`
+  height: 16px;
+  width: 16px;
+  color: #8b8fa3;
+
+  &:hover {
+    cursor: grab;
+    outline: none;
+  }
+
+  &:focus {
+    cursor: grab;
+    outline: none;
+  }
+`;
+
 type MinHorizontalWidthContextType = {
   horizontalWidth: string,
   minHorizontalWidth?: string,
@@ -73,19 +93,48 @@ const MinHorizontalWidthContext = createContext<MinHorizontalWidthContextType>({
   minHorizontalWidth: '100px',
 });
 
-const ContainerInListView = (props: ContainerBaseProps ) => {
+const ContainerInListView = (props: ContainerBaseProps & {itemIdx: number, enableSorting?: boolean} ) => {
   const {
     horizontalWidth,
     minHorizontalWidth
   } = useContext(MinHorizontalWidthContext);
 
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: String(props.itemIdx),
+  });
+
+  if (!props.enableSorting) {
+    return (
+      <div
+        style={{
+          width: horizontalWidth,
+          minWidth: minHorizontalWidth || '0px',
+        }}
+      >
+        <InnerGrid
+          {...props}
+          emptyRows={15}
+          containerPadding={[4, 4]}
+          hintPlaceholder={HintPlaceHolder}
+        />
+      </div>
+    )
+  }
+
   return (
     <div
+      ref={setNodeRef}
       style={{
         width: horizontalWidth,
         minWidth: minHorizontalWidth || '0px',
+        transform: CSS.Transform.toString(transform),
+        transition,
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center',
       }}
     >
+      {<StyledDragIcon {...attributes} {...listeners} />}
       <InnerGrid
         {...props}
         emptyRows={15}
@@ -107,6 +156,7 @@ type ListItemProps = {
   unMountFn?: () => void;
   minHorizontalWidth?: string;
   horizontalWidth: string;
+  enableSorting?: boolean;
 };
 
 function ListItem({
@@ -122,6 +172,7 @@ function ListItem({
     scrollContainerRef,
     minHeight,
     horizontalGridCells,
+    enableSorting,
   } = props;
 
   // disable the unmount function to save user's state with pagination
@@ -133,35 +184,37 @@ function ListItem({
   // }, []);
 
   return (
-      <MinHorizontalWidthContext.Provider
-        value={{
-          horizontalWidth,
-          minHorizontalWidth
+    <MinHorizontalWidthContext.Provider
+      value={{
+        horizontalWidth,
+        minHorizontalWidth
+      }}
+    >
+      <ContainerInListView
+        itemIdx={itemIdx}
+        layout={containerProps.layout}
+        items={gridItemCompToGridItems(containerProps.items)}
+        horizontalGridCells={horizontalGridCells}
+        positionParams={containerProps.positionParams}
+        // all layout changes should only reflect on the commonContainer
+        dispatch={itemIdx === offset ? containerProps.dispatch : _.noop}
+        style={{
+          height: "100%",
+          // in case of horizontal mode, minHorizontalWidth is 0px
+          width: minHorizontalWidth || '100%',
+          backgroundColor: "transparent",
+          // flex: "auto",
         }}
-      >
-        <ContainerInListView
-          layout={containerProps.layout}
-          items={gridItemCompToGridItems(containerProps.items)}
-          horizontalGridCells={horizontalGridCells}
-          positionParams={containerProps.positionParams}
-          // all layout changes should only reflect on the commonContainer
-          dispatch={itemIdx === offset ? containerProps.dispatch : _.noop}
-          style={{
-            height: "100%",
-            // in case of horizontal mode, minHorizontalWidth is 0px
-            width: minHorizontalWidth || '100%',
-            backgroundColor: "transparent",
-            // flex: "auto",
-          }}
-          autoHeight={autoHeight}
-          isDroppable={itemIdx === offset}
-          isDraggable={itemIdx === offset}
-          isResizable={itemIdx === offset}
-          isSelectable={itemIdx === offset}
-          scrollContainerRef={scrollContainerRef}
-          overflow={"hidden"}
-          minHeight={minHeight}
-          enableGridLines={true}
+        autoHeight={autoHeight}
+        isDroppable={itemIdx === offset}
+        isDraggable={itemIdx === offset}
+        isResizable={itemIdx === offset}
+        isSelectable={itemIdx === offset}
+        scrollContainerRef={scrollContainerRef}
+        overflow={"hidden"}
+        minHeight={minHeight}
+        enableGridLines={true}
+        enableSorting={enableSorting}
       />
     </MinHorizontalWidthContext.Provider>
   );
@@ -190,6 +243,7 @@ export function ListView(props: Props) {
     () => getData(children.noOfRows.getView()),
     [children.noOfRows]
   );
+  const listData = useMemo(() => children.listData.getView(), [children.listData]);
   const horizontalGridCells = useMemo(() => children.horizontalGridCells.getView(), [children.horizontalGridCells]);
   const autoHeight = useMemo(() => children.autoHeight.getView(), [children.autoHeight]);
   const showHorizontalScrollbar = useMemo(() => children.showHorizontalScrollbar.getView(), [children.showHorizontalScrollbar]);
@@ -213,6 +267,13 @@ export function ListView(props: Props) {
       total,
     };
   }, [children.pagination, totalCount]);
+
+  const enableSorting = useMemo(() => children.enableSorting.getView(), [children.enableSorting]);
+
+  useEffect(() => {
+    children.listData.dispatchChangeValueAction(data);
+  }, [JSON.stringify(data)]);
+
   const style = children.style.getView();
   const animationStyle = children.animationStyle.getView();
 
@@ -229,6 +290,7 @@ export function ListView(props: Props) {
   // log.log("List. listHeight: ", listHeight, " minHeight: ", minHeight);
   const renders = _.range(0, noOfRows).map((rowIdx) => {
     // log.log("renders. i: ", i, "containerProps: ", containerProps, " text: ", Object.values(containerProps.items as Record<string, any>)[0].children.comp.children.text);
+    const items = _.range(0, noOfColumns);
     const render = (
       <div
         key={rowIdx}
@@ -238,7 +300,7 @@ export function ListView(props: Props) {
         }}
       >
         <FlexWrapper>
-          {_.range(0, noOfColumns).map((colIdx) => {
+          {items.map((colIdx) => {
             const itemIdx = rowIdx * noOfColumns + colIdx + pageInfo.offset;
             if (
               itemIdx >= pageInfo.total ||
@@ -250,7 +312,7 @@ export function ListView(props: Props) {
             const containerProps = containerFn(
               {
                 [itemIndexName]: itemIdx,
-                [itemDataName]: getCurrentItemParams(data, itemIdx)
+                [itemDataName]: getCurrentItemParams(listData as JSONObject[], itemIdx)
               },
               String(itemIdx)
             ).getView();
@@ -259,6 +321,7 @@ export function ListView(props: Props) {
                 deferAction(ContextContainerComp.batchDeleteAction([String(itemIdx)]))
               );
             };
+
             return (
               <ListItem
                 key={itemIdx}
@@ -272,12 +335,14 @@ export function ListView(props: Props) {
                 unMountFn={unMountFn}
                 horizontalWidth={`${100 / noOfColumns}%`}
                 minHorizontalWidth={horizontal ? minHorizontalWidth : undefined}
+                enableSorting={enableSorting}
               />
             );
           })}
         </FlexWrapper>
       </div>
     );
+
     return render;
   });
 
@@ -289,6 +354,23 @@ export function ListView(props: Props) {
 
   useMergeCompStyles(childrenProps, comp.dispatch);
 
+  const handleDragEnd = (e: { active: { id: string }; over: { id: string } | null }) => {
+    if (!e.over) {
+      return;
+    }
+    const fromIndex = Number(e.active.id);
+    const toIndex = Number(e.over.id);
+    if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) {
+      return;
+    }
+    
+    const newData = [...listData];
+    const [movedItem] = newData.splice(fromIndex, 1);
+    newData.splice(toIndex, 0, movedItem);
+
+    children.listData.dispatchChangeValueAction(newData);
+  };
+
   // log.debug("renders: ", renders);
   return (
     <BackgroundColorContext.Provider value={style.background}>
@@ -306,7 +388,20 @@ export function ListView(props: Props) {
                   $isGrid={noOfColumns > 1}
                   $autoHeight={autoHeight}
                 >
-                  {renders}
+                  {!enableSorting
+                    ? renders
+                    : (
+                      <DndContext onDragEnd={handleDragEnd}>
+                        <SortableContext
+                          items={
+                            _.range(0, totalCount).map((colIdx) => String(colIdx))
+                          }
+                        >
+                          {renders}
+                        </SortableContext>
+                      </DndContext>
+                    )
+                  }
                 </ListOrientationWrapper>
               )}
             >

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

@@ -29,7 +29,7 @@ import {
   withFunction,
   WrapContextNodeV2,
 } from "lowcoder-core";
-import { JSONValue } from "util/jsonTypes";
+import { JSONArray, JSONValue } from "util/jsonTypes";
 import { depthEqual, lastValueIfEqual, shallowEqual } from "util/objectUtils";
 import { CompTree, getAllCompItems, IContainer } from "../containerBase";
 import { SimpleContainerComp, toSimpleContainerData } from "../containerBase/simpleContainerComp";
@@ -43,6 +43,7 @@ import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
 
 const childrenMap = {
   noOfRows: withIsLoadingMethod(NumberOrJSONObjectArrayControl), // FIXME: migrate "noOfRows" to "data"
+  listData: stateComp<JSONArray>([]),
   noOfColumns: withDefault(NumberControl, 1),
   itemIndexName: withDefault(StringControl, "i"),
   itemDataName: withDefault(StringControl, "currentItem"),
@@ -60,6 +61,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   horizontal: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, '100px'),
+  enableSorting: withDefault(BoolControl, false),
 };
 
 const ListViewTmpComp = new UICompBuilder(childrenMap, () => <></>)
@@ -116,7 +118,7 @@ export class ListViewImplComp extends ListViewTmpComp implements IContainer {
     const { itemCount } = getData(this.children.noOfRows.getView());
     const itemIndexName = this.children.itemIndexName.getView();
     const itemDataName = this.children.itemDataName.getView();
-    const dataExposingNode = this.children.noOfRows.exposingNode();
+    const dataExposingNode = this.children.listData.exposingNode();
     const containerComp = this.children.container;
     // for each container expose each comps with params
     const exposingRecord = _(_.range(0, itemCount))

client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

@@ -57,6 +57,9 @@ export function listPropertyView(compType: ListCompType) {
           <Section name={sectionNames.interaction}>
             {hiddenPropertyView(children)}
             {showDataLoadingIndicatorsPropertyView(children)}
+            {children.enableSorting.propertyView({
+              label: trans('listView.enableSorting'),
+            })}
           </Section>
         )}
 

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2598,7 +2598,8 @@ export const en = {
     "itemDataNameDesc": "The Variable Name Referring to the Item's Data Object, Default as {default}",
     "itemsDesc": "Exposing Data of Components in List",
     "dataDesc": "The JSON Data Used in the Current List",
-    "dataTooltip": "If You just Set a Number, This Field Will Be Regarded as Row Count, and the Data Will Be Regarded as Empty."
+    "dataTooltip": "If You just Set a Number, This Field Will Be Regarded as Row Count, and the Data Will Be Regarded as Empty.",
+    "enableSorting": "Allow Sorting"
   },
   "navigation": {
     "addText": "Add Submenu Item",
@@ -3205,6 +3206,7 @@ export const en = {
     "enterPassword": "Enter your password",
     "selectAuthProvider": "Select Authentication Provider",
     "selectWorkspace": "Select your workspace",
+    "userNotFound": "User not found. Please make sure you entered the correct email."
   },
   "preLoad": {
     "jsLibraryHelpText": "Add JavaScript Libraries to Your Current Application via URL Addresses. lodash, day.js, uuid, numbro are Built into the System for Immediate Use. JavaScript Libraries are Loaded Before the Application is Initialized, Which Can Have an Impact on Application Performance.",

client/packages/lowcoder/src/pages/common/profileDropdown.tsx

@@ -150,7 +150,13 @@ export default function ProfileDropdown(props: DropDownProps) {
       dispatch(profileSettingModalVisible(true));
     } else if (e.key === "logout") {
       // logout
-      dispatch(logoutAction({}));
+      const organizationId = localStorage.getItem('lowcoder_login_orgId');
+      if (organizationId) {
+        localStorage.removeItem('lowcoder_login_orgId');
+      }
+      dispatch(logoutAction({
+        organizationId: organizationId || undefined,
+      }));
     } else if (e.keyPath.includes("switchOrg")) {
       if (e.key === "newOrganization") {
         // create new organization