Merge branch 'dev' into fix_org_by_email

Author: dragonpoo

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

@@ -20,6 +20,7 @@ export type InviteInfo = {
 class InviteApi extends Api {
   static getInviteURL = "/invitation";
   static acceptInviteURL = (invitationId: string) => `/invitation/${invitationId}/invite`;
+  static sendInvitationURL = `${this.getInviteURL}/email/invite`;
 
   // generate invitation
   static getInvite(request: GetInviteRequest): AxiosPromise<GenericApiResponse<InviteInfo>> {
@@ -36,6 +37,11 @@ class InviteApi extends Api {
     // the same api as getInviteInfo, method is by post
     return Api.get(InviteApi.acceptInviteURL(request.invitationId));
   }
+
+  // send invitations
+  static sendInvitations(request: {emails: string[], orgId: string}): AxiosPromise<GenericApiResponse<any>> {
+    return Api.post(InviteApi.sendInvitationURL, request);
+  }
 }
 
 export default InviteApi;

client/packages/lowcoder/src/components/layout/Layout.tsx

@@ -111,8 +111,10 @@ export function Layout(props: LayoutProps) {
         placement="right"
         closable={true}
         onClose={toggleDrawer}
-        visible={drawerVisible}
-        bodyStyle={{ padding: "0px" }}
+        open={drawerVisible}
+        styles={{
+          body: { padding: "0px" }
+        }}
         destroyOnClose // Ensure drawer content is removed when closed
       >
         <DrawerContentWrapper>

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

@@ -369,6 +369,7 @@ export function ListView(props: Props) {
     newData.splice(toIndex, 0, movedItem);
 
     children.listData.dispatchChangeValueAction(newData);
+    children.onEvent.getView()('sortChange');
   };
 
   // log.debug("renders: ", renders);

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

@@ -29,7 +29,7 @@ import {
   withFunction,
   WrapContextNodeV2,
 } from "lowcoder-core";
-import { JSONArray, JSONValue } from "util/jsonTypes";
+import { JSONArray, JSONObject, JSONValue } from "util/jsonTypes";
 import { depthEqual, lastValueIfEqual, shallowEqual } from "util/objectUtils";
 import { CompTree, getAllCompItems, IContainer } from "../containerBase";
 import { SimpleContainerComp, toSimpleContainerData } from "../containerBase/simpleContainerComp";
@@ -40,6 +40,7 @@ import { listPropertyView } from "./listViewPropertyView";
 import { getData } from "./listViewUtils";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
+import { eventHandlerControl, sortChangeEvent } from "@lowcoder-ee/comps/controls/eventHandlerControl";
 
 const childrenMap = {
   noOfRows: withIsLoadingMethod(NumberOrJSONObjectArrayControl), // FIXME: migrate "noOfRows" to "data"
@@ -62,6 +63,7 @@ const childrenMap = {
   horizontal: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, '100px'),
   enableSorting: withDefault(BoolControl, false),
+  onEvent: eventHandlerControl([sortChangeEvent] as const),
 };
 
 const ListViewTmpComp = new UICompBuilder(childrenMap, () => <></>)
@@ -183,6 +185,15 @@ ListViewPropertyComp = withExposingConfigs(ListViewPropertyComp, [
       return data;
     },
   }),
+  depsConfig({
+    name: "sortedData",
+    desc: trans("listView.dataDesc"),
+    depKeys: ["listData"],
+    func: (input) => {
+      const { data } = getData(input.listData as JSONObject[]);
+      return data;
+    },
+  }),
   new CompDepsConfig(
     "pageNo",
     (comp) => ({index: comp.children.pagination.children.pageNo.exposingNode() }),

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

@@ -55,6 +55,7 @@ export function listPropertyView(compType: ListCompType) {
 
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
             {showDataLoadingIndicatorsPropertyView(children)}
             {children.enableSorting.propertyView({

client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx

@@ -489,7 +489,11 @@ export const resetEvent: EventConfigType = {
   value: "reset",
   description: trans("event.resetDesc"),
 };
-
+export const sortChangeEvent: EventConfigType = {
+  label: trans("event.sortChange"),
+  value: "sortChange",
+  description: trans("event.sortChangeDesc"),
+};
 
 // Meeting Events
 

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

@@ -463,6 +463,8 @@ export const en = {
     "resetDesc": "Triggers on Reset timer",
     "refresh": "Refresh",
     "refreshDesc": "Triggers on Refresh",
+    "sortChange": "Sort Change",
+    "sortChangeDesc": "Triggers on Sorting Changes",
   },
 
 
@@ -2484,6 +2486,12 @@ export const en = {
     "inviteUserLabel": "Invitation Link:",
     "inviteCopyLink": "Copy Link",
     "inviteText": "{userName} Invites You to Join the Workspace \"{organization}\", Click on the Link to Join: {inviteLink}",
+    "inviteByEmailHelp": "You can enter one or more email addresses to send invitation links",
+    "inviteByEmailLabel": "Enter emails:",
+    "inviteByEmailButton": "Send Invitations",
+    "inviteByEmailSuccess": "Invitations sent successfully!",
+    "inviteByEmailError": "Something went wrong while sending invitations. Please try again.",
+    "noValidEmails": "No valid emails found",
     "groupName": "Group Name",
     "createTime": "Create Time",
     "manageBtn": "Manage",
@@ -3079,6 +3087,7 @@ export const en = {
     "memberOfOrgs": "Workspaces Membership",
     "apiKeys": "API Keys",
     "createApiKey": "Create API Key",
+    "apiKeyInfo": "Make sure to copy your new API key now. You won't be able to see it again.",
     "apiKeyName": "Name",
     "apiKeyDescription": "Description",
     "apiKeyCopy": "Click the Api Key to get the value in your clipboard",

client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx

@@ -13,6 +13,7 @@ import { validateResponse } from "api/apiUtils";
 import _ from "lodash";
 import { styled } from "styled-components";
 import UserApi, { ApiKeyPayload } from "api/userApi";
+import { ApiKeyType } from "./UserApiKeysCard";
 
 const CustomModalStyled = styled(CustomModal)`
   button {
@@ -90,7 +91,7 @@ const FormStyled = styled(Form)`
 type CreateApiKeyModalProps = {
   modalVisible: boolean;
   closeModal: () => void;
-  onConfigCreate: () => void;
+  onConfigCreate: (apiKey?: ApiKeyType) => void;
 };
 
 function CreateApiKeyModal(props: CreateApiKeyModalProps) {
@@ -101,6 +102,7 @@ function CreateApiKeyModal(props: CreateApiKeyModalProps) {
   } = props;
   const [form] = Form.useForm();
   const [saveLoading, setSaveLoading] = useState(false);
+  const [apiKey, setApiKey] = useState<{id: string, token: string}>();
 
   const handleOk = () => {
     form.validateFields().then(values => {
@@ -115,12 +117,15 @@ function CreateApiKeyModal(props: CreateApiKeyModalProps) {
       .then((resp) => {
         if (validateResponse(resp)) {
           messageInstance.success(trans("idSource.saveSuccess"));
+          onConfigCreate(resp.data.data);
         }
       })
-      .catch((e) => messageInstance.error(e.message))
+      .catch((e) => {
+        messageInstance.error(e.message);
+        onConfigCreate();
+      })
       .finally(() => {
         setSaveLoading(false);
-        onConfigCreate();
       });
   }
 

client/packages/lowcoder/src/pages/ApplicationV2/components/UserApiKeysCard.tsx

@@ -14,6 +14,8 @@ import CreateApiKeyModal from "./CreateApiKeyModal";
 import { fetchApiKeysAction } from "redux/reduxActions/userActions";
 import UserApi from "@lowcoder-ee/api/userApi";
 import { validateResponse } from "@lowcoder-ee/api/apiUtils";
+import Alert from "antd/es/alert";
+import { CopyOutlined } from "@ant-design/icons";
 
 const TableStyled = styled(Table)`
   .ant-table-tbody > tr > td {
@@ -37,10 +39,16 @@ const CreateButton = styled(TacoButton)`
   box-shadow: none;
 `;
 
+export type ApiKeyType = {
+  id: string;
+  token: string;
+}
+
 export default function UserApiKeysCard() {
   const dispatch = useDispatch();
   const apiKeys = useSelector(getApiKeys);
   const [modalVisible, setModalVisible] = useState(false);
+  const [newApiKey, setNewApiKey] = useState<ApiKeyType>();
 
   const handleCopy = (value: string) => {
     navigator.clipboard.writeText(value).then(() => {
@@ -66,13 +74,11 @@ export default function UserApiKeysCard() {
             {trans("profile.createApiKey")}
           </CreateButton>
         </Flex>
+        {Boolean(newApiKey) && <Alert message={trans("profile.apiKeyInfo")} type="info" style={{marginBottom: '16px'}}/>}
         <TableStyled
           tableLayout={"auto"}
           scroll={{ x: "100%" }}
           pagination={false}
-          onRow={(record) => ({
-            
-          })}
           columns={[
             {
               title: trans("profile.apiKeyName"),
@@ -95,16 +101,19 @@ export default function UserApiKeysCard() {
               title: trans("profile.apiKey"),
               dataIndex: "token",
               ellipsis: true,
-              render: (value: string) => {
-                const startToken = value.substring(0, 6);
-                const endToken = value.substring(value.length - 6);
-                return (
-                  <Tooltip placement="topLeft" title={ trans("profile.apiKeyCopy")}>
-                    <div onClick={() => handleCopy(value)} style={{ cursor: 'pointer' }}>
-                      {`${startToken}********************${endToken}`}
-                    </div>
-                  </Tooltip>
-                )
+              render: (value: string, record: any) => {
+                if (newApiKey?.id === record.id) {
+                  return (
+                    <Tooltip placement="topLeft" title={ trans("profile.apiKeyCopy")}>
+                      <div onClick={() => handleCopy(newApiKey?.token!)} style={{ cursor: 'pointer' }}>
+                        {value}
+                        &nbsp;
+                        <CopyOutlined />
+                      </div>
+                    </Tooltip>
+                  )
+                }
+                return <div>{value}</div>
               }
             },
             { title: " ", dataIndex: "operation", width: "208px" },
@@ -145,8 +154,9 @@ export default function UserApiKeysCard() {
       <CreateApiKeyModal
         modalVisible={modalVisible}
         closeModal={() => setModalVisible(false)}
-        onConfigCreate={() => {
+        onConfigCreate={(apiKey?: ApiKeyType) => {
           setModalVisible(false);
+          setNewApiKey(apiKey);
           dispatch(fetchApiKeysAction());
         }}
       />

client/packages/lowcoder/src/pages/ApplicationV2/index.tsx

@@ -104,9 +104,15 @@ export default function ApplicationHome() {
     if (user.currentOrgId) {
       dispatch(fetchDeploymentIdAction());
     }
-    dispatch(fetchHomeData({}));
   }, [user.currentOrgId]);
 
+  useEffect(() => {
+    // tricky check, will be called for anonymous user to redirect to login page
+    if (user.isAnonymous) {
+      dispatch(fetchHomeData({}));
+    }
+  }, [user.isAnonymous])
+
   useEffect(() => {
     if(Boolean(deploymentId)) {
       dispatch(fetchSubscriptionsAction())

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

@@ -12,6 +12,9 @@ import { HelpText } from "components/HelpText";
 import copyToClipboard from "copy-to-clipboard";
 import { trans } from "i18n";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import Divider from "antd/es/divider";
+import Flex from "antd/es/flex";
+import Select from "antd/es/select";
 
 const InviteButton = styled(TacoButton)`
   width: 76px;
@@ -23,14 +26,36 @@ const StyledLoading = styled(WhiteLoading)`
   height: 170px;
 `;
 
-function InviteContent(props: { inviteInfo: InviteInfo }) {
-  const { inviteInfo } = props;
+function InviteContent(props: { inviteInfo: InviteInfo, onClose?: () => void }) {
+  const { inviteInfo, onClose } = props;
   const inviteLink = genInviteLink(inviteInfo?.inviteCode);
   const inviteText = trans("memberSettings.inviteText", {
     userName: inviteInfo.createUserName,
     organization: inviteInfo.invitedOrganizationName,
     inviteLink,
   });
+  const [emails, setEmails] = useState<string[]>([]);
+
+  const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+  const sendInvitations = async () => {
+    const filteredEmails = emails.filter(isValidEmail);
+    if (!filteredEmails.length) {
+      return messageInstance.error(trans("memberSettings.noValidEmails"));
+    }
+    try {
+      const resp = await InviteApi.sendInvitations({emails: filteredEmails, orgId: inviteInfo.invitedOrganizationId})
+      if (validateResponse(resp) && resp.data.success) {
+        messageInstance.success(trans('membersSettings.inviteByEmailSuccess'));
+        onClose?.();
+        return;
+      }
+      throw new Error(trans('membersSettings.inviteByEmailError'));
+    } catch(e: any) {
+      messageInstance.error(e.message);
+    }
+  }
+
   return (
     <>
       <HelpText style={{ marginBottom: 16 }}>{trans("memberSettings.inviteUserHelp")}</HelpText>
@@ -48,6 +73,34 @@ function InviteContent(props: { inviteInfo: InviteInfo }) {
           {trans("memberSettings.inviteCopyLink")}
         </InviteButton>
       </div>
+      <Divider style={{marginTop: '60px'}}/>
+      <HelpText style={{ marginBottom: 16 }}>{trans("memberSettings.inviteByEmailHelp")}</HelpText>
+      <CommonTextLabel>{trans("memberSettings.inviteByEmailLabel")}</CommonTextLabel>
+      <Select
+        mode="tags"
+        allowClear
+        open={false}
+        style={{ width: '100%', marginTop: '8px', marginBottom: '8px' }}
+        placeholder="Enter emails"
+        defaultValue={[]}
+        onChange={(value) => {
+          setEmails(value);
+        }}
+        options={[]}
+        showSearch={false}
+        suffixIcon={''}
+      />
+      <Flex justify="end">
+        <TacoButton
+          buttonType="primary"
+          onClick={() => {
+            sendInvitations();
+          }}
+          disabled={!Boolean(emails?.length)}
+        >
+          {trans("memberSettings.inviteByEmailButton")}
+        </TacoButton>
+      </Flex>
     </>
   );
 }
@@ -101,7 +154,7 @@ function InviteDialog(props: {
         showCancelButton={false}
         width="440px"
       >
-        {!inviteInfo ? <StyledLoading size={20} /> : <InviteContent inviteInfo={inviteInfo} />}
+        {!inviteInfo ? <StyledLoading size={20} /> : <InviteContent inviteInfo={inviteInfo} onClose={() => setInviteDialogVisible(false)} />}
       </CustomModal>
     </>
   );

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

@@ -45,7 +45,7 @@ function InviteLanding(props: InviteLandingProp) {
           orgId = inviteInfo.invitedOrganizationId;
           const inviteState = inviteInfo ? { ...inviteInfo, invitationId } : { invitationId };
           history.push({
-            pathname: AUTH_LOGIN_URL,
+            pathname: `/org/${orgId}/auth/login`,
             state: {
               inviteInfo: inviteState,
             },

client/packages/lowcoder/src/pages/userAuth/formLoginAdmin.tsx

@@ -31,6 +31,13 @@ export default function FormLogin(props: FormLoginProps) {
   const [password, setPassword] = useState("");
   const { fetchUserAfterAuthSuccess } = useContext(AuthContext);
 
+  const afterLoginSuccess = () => {
+    if (props.organizationId) {
+      localStorage.setItem("lowcoder_login_orgId", props.organizationId);
+    }
+    fetchUserAfterAuthSuccess?.();
+  }
+
   const { onSubmit, loading } = useAuthSubmit(
     () =>
       UserApi.formLogin({
@@ -42,7 +49,7 @@ export default function FormLogin(props: FormLoginProps) {
       }),
     false,
     null,
-    fetchUserAfterAuthSuccess,
+    afterLoginSuccess,
   );
 
   return (