Merge pull request #534 from lowcoder-org/dev

FalkWolsky · web-flow · commit bd3cf48aeac2 · 2023-11-29T17:03:45.000+01:00
Take the latest changes from Raheel
diff --git a/client/packages/lowcoder/src/appView/AppViewInstance.tsx b/client/packages/lowcoder/src/appView/AppViewInstance.tsx
@@ -11,6 +11,7 @@ import { AppView } from "./AppView";
 import { API_STATUS_CODES } from "constants/apiConstants";
 import { AUTH_LOGIN_URL } from "constants/routesURL";
 import { AuthSearchParams } from "constants/authConstants";
+import { saveAuthSearchParams } from "@lowcoder-ee/pages/userAuth/authUtils";
 
 export type OutputChangeHandler<O> = (output: O) => void;
 export type EventTriggerHandler = (eventName: string) => void;
@@ -71,9 +72,11 @@ export class AppViewInstance<I = any, O = any> {
         .then((i) => i.data)
         .catch((e) => {
           if (e.response?.status === API_STATUS_CODES.REQUEST_NOT_AUTHORISED) {
-            window.location.href = `${webUrl}${AUTH_LOGIN_URL}?${
-              AuthSearchParams.redirectUrl
-            }=${encodeURIComponent(window.location.href)}`;
+            saveAuthSearchParams({
+              [AuthSearchParams.redirectUrl]: encodeURIComponent(window.location.href),
+              [AuthSearchParams.loginType]: null,
+            })
+            window.location.href = `${webUrl}${AUTH_LOGIN_URL}`;
           }
         });
 
diff --git a/client/packages/lowcoder/src/comps/hooks/hookComp.tsx b/client/packages/lowcoder/src/comps/hooks/hookComp.tsx
@@ -33,6 +33,7 @@ import { ThemeComp } from "./themeComp";
 import UrlParamsHookComp from "./UrlParamsHookComp";
 import { UtilsComp } from "./utilsComp";
 import { VideoMeetingControllerComp } from "../comps/meetingComp/videoMeetingControllerComp";
+import { ScreenInfoHookComp } from "./screenInfoComp";
 
 window._ = _;
 window.dayjs = dayjs;
@@ -97,6 +98,7 @@ const HookMap: HookCompMapRawType = {
   modal: ModalComp,
   meeting: VideoMeetingControllerComp,
   currentUser: CurrentUserHookComp,
+  screenInfo: ScreenInfoHookComp,
   urlParams: UrlParamsHookComp,
   drawer: DrawerComp,
   theme: ThemeComp,
diff --git a/client/packages/lowcoder/src/comps/hooks/hookCompTypes.tsx b/client/packages/lowcoder/src/comps/hooks/hookCompTypes.tsx
@@ -14,6 +14,7 @@ const AllHookComp = [
   "message",
   "localStorage",
   "currentUser",
+  "screenInfo",
   "urlParams",
   "theme",
 ] as const;
diff --git a/client/packages/lowcoder/src/comps/hooks/hookListComp.tsx b/client/packages/lowcoder/src/comps/hooks/hookListComp.tsx
@@ -21,6 +21,7 @@ const defaultHookListValue = [
   { compType: "message", name: "message" },
   { compType: "localStorage", name: "localStorage" },
   { compType: "currentUser", name: "currentUser" },
+  { compType: "screenInfo", name: "screenInfo" },
   { compType: "theme", name: "theme" },
 ] as const;
 
diff --git a/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx b/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx
@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useState } from "react";
+import { hookToStateComp } from "../generators/hookToComp";
+
+enum ScreenTypes {
+  Mobile = 'mobile',
+  Tablet = 'tablet',
+  Desktop = 'desktop',
+}
+
+type ScreenType = typeof ScreenTypes[keyof typeof ScreenTypes]
+
+type ScreenInfo = {
+  width?: number;
+  height?: number;
+  deviceType?: ScreenType;
+  isDesktop?: boolean;
+  isTablet?: boolean;
+  isMobile?: boolean;
+}
+
+function useScreenInfo() {
+  const getDeviceType = () => {
+    if (window.screen.width < 768) return ScreenTypes.Mobile;
+    if (window.screen.width < 889) return ScreenTypes.Tablet;
+    return ScreenTypes.Desktop;
+  }
+  const getFlagsByDeviceType = (deviceType: ScreenType) => {
+    const flags = {
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false,
+    };
+    if(deviceType === ScreenTypes.Mobile) {
+      return { ...flags, isMobile: true };
+    }
+    if(deviceType === ScreenTypes.Tablet) {
+      return { ...flags, Tablet: true };
+    }
+    return { ...flags, isDesktop: true };
+  }
+
+  const getScreenInfo = useCallback(() => {
+    const { width, height } = window.screen;
+    const deviceType = getDeviceType();
+    const flags = getFlagsByDeviceType(deviceType);
+    
+    return { width, height, deviceType, ...flags };
+  }, [])
+
+  const [screenInfo, setScreenInfo] = useState<ScreenInfo>({});
+  
+  const updateScreenInfo = useCallback(() => {
+    setScreenInfo(getScreenInfo());
+  }, [getScreenInfo])
+
+  useEffect(() => {
+    window.addEventListener('resize', updateScreenInfo);
+    updateScreenInfo();
+    return () => window.removeEventListener('resize', updateScreenInfo);
+  }, [ updateScreenInfo ])
+
+  return screenInfo;
+}
+
+export const ScreenInfoHookComp = hookToStateComp(useScreenInfo);
diff --git a/client/packages/lowcoder/src/constants/authConstants.ts b/client/packages/lowcoder/src/constants/authConstants.ts
@@ -22,9 +22,14 @@ import {
 export type AuthInviteInfo = InviteInfo & { invitationId: string };
 export type AuthLocationState = { inviteInfo?: AuthInviteInfo; thirdPartyAuthError?: boolean };
 
-export const AuthSearchParams = {
-  loginType: "loginType",
-  redirectUrl: "redirectUrl",
+export enum AuthSearchParams {
+  loginType = "loginType",
+  redirectUrl = "redirectUrl",
+};
+
+export type AuthSearchParamsType = {
+  loginType: string | null,
+  redirectUrl: string | null,
 };
 
 export type OauthRequestParam = {
diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts
@@ -39,7 +39,6 @@ export const QR_CODE_OAUTH_URL = `${USER_AUTH_URL}/oauth/qrcode`;
 export const OAUTH_REDIRECT = `${USER_AUTH_URL}/oauth/redirect`;
 export const CAS_AUTH_REDIRECT = `${USER_AUTH_URL}/cas/redirect`;
 export const LDAP_AUTH_LOGIN_URL = `${USER_AUTH_URL}/ldap/login`;
-export const USER_INFO_COMPLETION = `${USER_AUTH_URL}/completion`;
 export const INVITE_LANDING_URL = "/invite/:invitationId";
 export const ORG_AUTH_LOGIN_URL = `/org/:orgId/auth/login`;
 export const ORG_AUTH_REGISTER_URL = `/org/:orgId/auth/register`;
diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
@@ -8,23 +8,23 @@ import { draggingUtils } from "layout";
 import { isEmpty } from "lodash";
 import { language } from "i18n";
 import {
-  ComListTitle,
   CompIconDiv,
   EmptyCompContent,
   RightPanelContentWrapper,
 } from "pages/editor/right/styledComponent";
 import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import styled from "styled-components";
-import { labelCss } from "lowcoder-design";
+import {
+  BaseSection,
+  PropertySectionContext,
+  PropertySectionContextType,
+  PropertySectionState,
+  labelCss,
+} from "lowcoder-design";
 import { TransparentImg } from "../../../util/commonUtils";
 import { RightContext } from "./rightContext";
 
-const GrayLabel = (props: { label: string }) => {
-  const { label } = props;
-  return <ComListTitle>{label}</ComListTitle>;
-};
-
 const CompDiv = styled.div`
   display: flex;
   flex-direction: column;
@@ -80,16 +80,25 @@ const InsertContain = styled.div`
   gap: 8px;
 `;
 
-const CategoryLabel = styled(GrayLabel)`
-  margin: 0;
-`;
-
 const SectionWrapper = styled.div`
-  margin-bottom: 16px;
+  .section-header {
+    margin-left: 0;
+  }
+  &:not(:last-child){
+    border-bottom: 1px solid #e1e3eb;
+  }
 `;
 
+const stateCompName = 'UICompSections';
+const initialState: PropertySectionState = { [stateCompName]: {}};
+Object.keys(uiCompCategoryNames).forEach((cat) => {
+  const key = uiCompCategoryNames[cat as UICompCategory];
+  initialState[stateCompName][key] = key === uiCompCategoryNames.common
+})
+
 export const UICompPanel = () => {
   const { onDrag, searchValue } = useContext(RightContext);
+  const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
 
   const categories = useMemo(() => {
     const cats: Record<string, [string, UICompManifest][]> = Object.fromEntries(
@@ -103,6 +112,22 @@ export const UICompPanel = () => {
     return cats;
   }, []);
 
+  const propertySectionContextValue = useMemo<PropertySectionContextType>(() => {
+    return {
+      compName: stateCompName,
+      state: propertySectionState,
+      toggle: (compName: string, sectionName: string) => {
+        setPropertySectionState((oldState) => {
+          const nextSectionState: PropertySectionState = { ...oldState };
+          const compState = nextSectionState[compName] || {};
+          compState[sectionName] = compState[sectionName] === false;
+          nextSectionState[compName] = compState;
+          return nextSectionState;
+        });
+      },
+    };
+  }, [propertySectionState]);
+
   const compList = useMemo(
     () =>
       Object.entries(categories)
@@ -122,36 +147,52 @@ export const UICompPanel = () => {
 
           return (
             <SectionWrapper key={index}>
-              <CategoryLabel label={uiCompCategoryNames[key as UICompCategory]} />
-              <InsertContain>
-                {infos.map((info) => (
-                  <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""}>
-                    <HovDiv
-                      draggable
-                      onDragStart={(e) => {
-                        e.dataTransfer.setData("compType", info[0]);
-                        e.dataTransfer.setDragImage(TransparentImg, 0, 0);
-                        draggingUtils.setData("compType", info[0]);
-                        onDrag(info[0]);
-                      }}
-                    >
-                      <IconContain Icon={info[1].icon}></IconContain>
-                    </HovDiv>
-                    <CompNameLabel>{info[1].name}</CompNameLabel>
-                    {language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
-                  </CompDiv>
-                ))}
-              </InsertContain>
+              <BaseSection
+                noMargin
+                width={288}
+                name={uiCompCategoryNames[key as UICompCategory]}
+              >
+                <InsertContain>
+                  {infos.map((info) => (
+                    <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""}>
+                      <HovDiv
+                        draggable
+                        onDragStart={(e) => {
+                          e.dataTransfer.setData("compType", info[0]);
+                          e.dataTransfer.setDragImage(TransparentImg, 0, 0);
+                          draggingUtils.setData("compType", info[0]);
+                          onDrag(info[0]);
+                        }}
+                      >
+                        <IconContain Icon={info[1].icon}></IconContain>
+                      </HovDiv>
+                      <CompNameLabel>{info[1].name}</CompNameLabel>
+                      {language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
+                    </CompDiv>
+                  ))}
+                </InsertContain>
+              </BaseSection>
             </SectionWrapper>
           );
         })
         .filter((t) => t != null),
     [categories, searchValue, onDrag]
   );
 
+  if(!compList.length) return (
+    <RightPanelContentWrapper>
+      <EmptyCompContent />
+    </RightPanelContentWrapper>
+  )
+
   return (
     <RightPanelContentWrapper>
-      {compList.length > 0 ? compList : <EmptyCompContent />}
+      {/* {compList.length > 0 ? compList : <EmptyCompContent />} */}
+      <PropertySectionContext.Provider
+        value={propertySectionContextValue}
+      >
+        {compList}
+      </PropertySectionContext.Provider>
     </RightPanelContentWrapper>
   );
 };
diff --git a/client/packages/lowcoder/src/pages/userAuth/authUtils.ts b/client/packages/lowcoder/src/pages/userAuth/authUtils.ts
@@ -3,7 +3,6 @@ import {
   BASE_URL,
   CAS_AUTH_REDIRECT,
   OAUTH_REDIRECT,
-  USER_INFO_COMPLETION,
 } from "constants/routesURL";
 import { AxiosPromise, AxiosResponse } from "axios";
 import { ApiResponse } from "api/apiResponses";
@@ -16,6 +15,7 @@ import { createContext, useState } from "react";
 import { SystemConfig } from "constants/configConstants";
 import {
   AuthInviteInfo,
+  AuthSearchParamsType,
   AuthSessionStoreParams,
   ThirdPartyAuthGoal,
   ThirdPartyAuthType,
@@ -79,12 +79,7 @@ export function authRespValidate(
 ) {
   let replaceUrl = redirectUrl || BASE_URL;
   const baseUrl = `${window.location.protocol}//${window.location.host}`;
-  if (infoCompleteCheck) {
-    // need complete info
-    replaceUrl = redirectUrl
-      ? `${USER_INFO_COMPLETION}?redirectUrl=${redirectUrl}`
-      : USER_INFO_COMPLETION;
-  }
+
   if (doValidResponse(resp)) {
     onAuthSuccess?.();
     history.replace(replaceUrl.replace(baseUrl, ''));
@@ -185,3 +180,21 @@ export const getRedirectUrl = (authType: ThirdPartyAuthType) => {
     `${window.location.origin}${authType === "CAS" ? CAS_AUTH_REDIRECT : OAUTH_REDIRECT}`
   );
 };
+
+const AuthSearchParamStorageKey = "_temp_auth_search_params_";
+
+export const saveAuthSearchParams = (
+  authSearchParams: AuthSearchParamsType
+) => {
+  sessionStorage.setItem(AuthSearchParamStorageKey, JSON.stringify(authSearchParams));
+}
+
+export const loadAuthSearchParams = ():AuthSearchParamsType | null => {
+  const authParams = sessionStorage.getItem(AuthSearchParamStorageKey);
+  if (!authParams) return null;
+  return JSON.parse(authParams);
+}
+
+export const clearAuthSearchParams = () => {
+  sessionStorage.removeItem(AuthSearchParamStorageKey);
+}
diff --git a/client/packages/lowcoder/src/pages/userAuth/index.tsx b/client/packages/lowcoder/src/pages/userAuth/index.tsx
@@ -3,7 +3,7 @@ import { Redirect, Route, Switch, useLocation, useParams } from "react-router-do
 import React, { useEffect, useMemo } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
-import { AuthContext } from "pages/userAuth/authUtils";
+import { AuthContext, clearAuthSearchParams } from "pages/userAuth/authUtils";
 import { AuthRoutes } from "@lowcoder-ee/constants/authConstants";
 import { AuthLocationState } from "constants/authConstants";
 import { ProductLoading } from "components/ProductLoading";
@@ -37,6 +37,7 @@ export default function UserAuth() {
 
   const fetchUserAfterAuthSuccess = () => {
     dispatch(fetchUserAction());
+    clearAuthSearchParams();
   }
 
   return (
diff --git a/client/packages/lowcoder/src/pages/userAuth/thirdParty/authenticator/abstractAuthenticator.ts b/client/packages/lowcoder/src/pages/userAuth/thirdParty/authenticator/abstractAuthenticator.ts
@@ -39,7 +39,7 @@ export abstract class AbstractAuthenticator {
         authRespValidate(
           resp,
           this.needInfoCheck(this.authParams.sourceType),
-          this.authParams.afterLoginRedirect,
+          getSafeAuthRedirectURL(this.authParams.afterLoginRedirect),
           onAuthSuccess,
         );
       })
diff --git a/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx b/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
diff --git a/client/packages/lowcoder/src/redux/sagas/userSagas.ts b/client/packages/lowcoder/src/redux/sagas/userSagas.ts
diff --git a/client/packages/lowcoder/src/util/hooks.ts b/client/packages/lowcoder/src/util/hooks.ts
