Merge branch 'dev' into ee-setup

Author: FalkWolsky

client/packages/lowcoder/src/app.tsx

@@ -35,7 +35,7 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { Helmet } from "react-helmet";
 import { connect, Provider } from "react-redux";
-import { Redirect, Router, Switch } from "react-router-dom";
+import { Redirect, Route, Router, Switch } from "react-router-dom";
 import type { AppState } from "redux/reducers";
 import { fetchConfigAction } from "redux/reduxActions/configActions";
 import { fetchUserAction } from "redux/reduxActions/userActions";
@@ -315,15 +315,10 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                 component={LazyPublicAppEditor}
               />
 
-              <SimpleSubscriptionContextProvider>
-                <LazyRoute
-                  fallback="layout"
-                  path={APP_EDITOR_URL}
-                  component={LazyAppEditor}
-                />
-                <LazyRoute
-                  fallback="layout"
-                  path={[
+              <Route
+                path={
+                  [
+                    APP_EDITOR_URL,
                     USER_PROFILE_URL,
                     NEWS_URL,
                     ORG_HOME_URL,
@@ -339,11 +334,41 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                     SETTING_URL,
                     MARKETPLACE_URL,
                     ADMIN_APP_URL
-                  ]}
-                  // component={ApplicationListPage}
-                  component={LazyApplicationHome}
-                />
-              </SimpleSubscriptionContextProvider>
+                  ]
+                }
+              >
+                <SimpleSubscriptionContextProvider>
+                  <Switch>
+                    <LazyRoute
+                      fallback="layout"
+                      path={APP_EDITOR_URL}
+                      component={LazyAppEditor}
+                    />
+                    <LazyRoute
+                      fallback="layout"
+                      path={[
+                        USER_PROFILE_URL,
+                        NEWS_URL,
+                        ORG_HOME_URL,
+                        ALL_APPLICATIONS_URL,
+                        DATASOURCE_CREATE_URL,
+                        DATASOURCE_EDIT_URL,
+                        DATASOURCE_URL,
+                        SUPPORT_URL,
+                        QUERY_LIBRARY_URL,
+                        FOLDERS_URL,
+                        FOLDER_URL,
+                        TRASH_URL,
+                        SETTING_URL,
+                        MARKETPLACE_URL,
+                        ADMIN_APP_URL
+                      ]}
+                      // component={ApplicationListPage}
+                      component={LazyApplicationHome}
+                    />
+                  </Switch>
+                </SimpleSubscriptionContextProvider>
+              </Route>
               <LazyRoute exact path={ADMIN_AUTH_URL} component={LazyUserAuthComp} />
               <LazyRoute path={USER_AUTH_URL} component={LazyUserAuthComp} />
               <LazyRoute

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

@@ -117,8 +117,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/i18n/locales/en.ts

@@ -3181,6 +3181,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/userAuth/formLoginSteps.tsx

@@ -204,7 +204,7 @@ export default function FormLoginSteps(props: FormLoginProps) {
           }
           if (resp.data.length === 1) {
             // in Enterprise mode, we will get org data in different format
-            const selectedOrgId = isEnterpriseMode ? resp.data[0].id : resp.data[0].orgId;
+            const selectedOrgId = resp.data[0]?.id || resp.data[0]?.orgId;
             setOrganizationId(selectedOrgId);
             dispatch(fetchConfigAction(selectedOrgId));
             setCurrentStep(CurrentStepEnum.AUTH_PROVIDERS);
@@ -239,7 +239,7 @@ export default function FormLoginSteps(props: FormLoginProps) {
           invitedOrganizationId={organizationId}
           authGoal="login"
         />
-        {signupEnabled && (
+        {(isFormLoginEnabled && signupEnabled) && (
           <>
             <Divider/>
             <AuthBottomView>