Merge pull request #3653 from illacloud/Release/4.3.7

Release/4.3.7
illacloud · Jan 26, 2024 · 6ea2c94 · 6ea2c94
2 parents 5fe85cb + d3450a3
commit 6ea2c94
Show file tree

Hide file tree

Showing 24 changed files with 908 additions and 129 deletions.
diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "author": "ILLA Cloud <[email protected]>",
   "license": "Apache-2.0",
-  "version": "4.3.6",
+  "version": "4.3.7",
   "scripts": {
     "dev": "vite --strictPort --force",
     "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288  vite build --mode cloud",

diff --git a/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx b/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx
@@ -0,0 +1,79 @@
+import IconHotSpot from "@illa-public/icon-hot-spot"
+import { FC } from "react"
+import { createPortal } from "react-dom"
+import { useTranslation } from "react-i18next"
+import { AddIcon, CloseIcon, Modal, getColor } from "@illa-design/react"
+import {
+  closeIconStyle,
+  containerStyle,
+  createOptionsContainerStyle,
+  descStyle,
+  headerStyle,
+  iconStyle,
+  operateContainerStyle,
+  titleStyle,
+} from "./style"
+
+interface CreateModalProps {
+  closeGuideCreateAppModal: () => void
+  openCreateFromResourceModal: () => void
+  openCreateFromTemplateModal: () => void
+}
+
+const CreateModal: FC<CreateModalProps> = ({
+  closeGuideCreateAppModal,
+  openCreateFromResourceModal,
+  openCreateFromTemplateModal,
+}) => {
+  const { t } = useTranslation()
+  return createPortal(
+    <Modal
+      visible
+      footer={false}
+      minW="464px"
+      w="464px"
+      closable
+      onCancel={closeGuideCreateAppModal}
+      withoutPadding
+    >
+      <div css={containerStyle}>
+        <span css={closeIconStyle}>
+          <IconHotSpot onClick={closeGuideCreateAppModal}>
+            <CloseIcon size="12px" color={getColor("grayBlue", "02")} />
+          </IconHotSpot>
+        </span>
+        <div css={headerStyle}>
+          <span css={titleStyle}>
+            {t("editor.tutorial.panel.onboarding_app.congratulations_title")}
+          </span>
+          <span css={descStyle}>
+            {t("new_dashboard.create_new.onboarding_cloud")}
+          </span>
+        </div>
+        <div css={operateContainerStyle}>
+          <div
+            css={createOptionsContainerStyle(getColor("techPurple", "03"))}
+            onClick={openCreateFromTemplateModal}
+          >
+            <span css={iconStyle}>
+              <AddIcon size="16px" />
+            </span>
+            <span>{t("new_dashboard.create_new.create_from_template")}</span>
+          </div>
+          <div
+            css={createOptionsContainerStyle("#1AB0F1")}
+            onClick={openCreateFromResourceModal}
+          >
+            <span css={iconStyle}>
+              <AddIcon size="16px" />
+            </span>
+            <span>{t("new_dashboard.create_new.generate_crud_short")}</span>
+          </div>
+        </div>
+      </div>
+    </Modal>,
+    document.body,
+  )
+}
+
+export default CreateModal
diff --git a/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/style.ts b/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/style.ts
@@ -0,0 +1,79 @@
+import { css } from "@emotion/react"
+import { getColor } from "@illa-design/react"
+
+export const containerStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  position: relative;
+`
+
+export const headerStyle = css`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const closeIconStyle = css`
+  position: absolute;
+  right: 24px;
+  top: 24px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const titleStyle = css`
+  color: ${getColor("grayBlue", "02")};
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+`
+
+export const descStyle = css`
+  color: ${getColor("grayBlue", "03")};
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+`
+
+export const operateContainerStyle = css`
+  width: 100%;
+  display: flex;
+  gap: 16px;
+`
+
+export const createOptionsContainerStyle = (bgColor: string) => css`
+  display: flex;
+  color: ${getColor("white", "01")};
+  border-radius: 8px;
+  align-items: center;
+  background-color: ${bgColor};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  cursor: pointer;
+  height: 118px;
+  width: 200px;
+  padding: 24px;
+  flex-direction: column;
+  text-align: center;
+  gap: 8px;
+`
+export const iconStyle = css`
+  display: flex;
+  padding: 12px;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 50%;
+  background-color: ${getColor("white", "07")};
+  position: relative;
+`
diff --git a/apps/builder/src/components/Guide/GuideCreateApp/index.tsx b/apps/builder/src/components/Guide/GuideCreateApp/index.tsx
@@ -0,0 +1,171 @@
+import {
+  BuildActionInfo,
+  CreateFromResourceModal,
+  CreateFromTemplateModal,
+  REPORT_PARAMETER,
+  REPORT_TEMPLATE_STATUS,
+  RESOURCE_TYPE,
+  fetchBatchCreateAction,
+} from "@illa-public/create-app"
+import {
+  ILLA_MIXPANEL_BUILDER_PAGE_NAME,
+  ILLA_MIXPANEL_EVENT_TYPE,
+  MixpanelTrackProvider,
+} from "@illa-public/mixpanel-utils"
+import { ComponentTreeNode, Resource } from "@illa-public/public-types"
+import { getAuthToken } from "@illa-public/utils"
+import { AnimatePresence } from "framer-motion"
+import { FC, useCallback, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useDispatch, useSelector } from "react-redux"
+import { useParams } from "react-router-dom"
+import { useMessage } from "@illa-design/react"
+import { guideActions } from "@/redux/guide/guideSlice"
+import { getAllResources } from "@/redux/resource/resourceSelector"
+import { resourceActions } from "@/redux/resource/resourceSlice"
+import { fetchCreateApp, fetchForkApp } from "@/services/apps"
+import { resourceContextHelper, track } from "@/utils/mixpanelHelper"
+import { getCurrentTeamID } from "@/utils/team"
+import CreateModal from "./CreateModal"
+
+const GuideCreateApp: FC = () => {
+  const message = useMessage()
+  const teamID = useSelector(getCurrentTeamID)!
+  const { teamIdentifier } = useParams()
+  const resourceList = useSelector(getAllResources) || []
+  const dispatch = useDispatch()
+  const { t } = useTranslation()
+  const [showCreateFromResourceModal, setShowCreateFromResourceModal] =
+    useState(false)
+
+  const [showCreateFromTemplateModal, setShowCreateFromTemplateModal] =
+    useState(false)
+
+  const closeGuideCreateAppModal = () => {
+    dispatch(guideActions.updateGuideStatusReducer(false))
+  }
+
+  const forkApp = async (appID: string) => {
+    track?.(
+      ILLA_MIXPANEL_EVENT_TYPE.CLICK,
+      ILLA_MIXPANEL_BUILDER_PAGE_NAME.TUTORIAL,
+      {
+        element: "create_app_modal_use_template",
+        parameter1: REPORT_PARAMETER.BLANK_TUTORIAL_APP,
+      },
+    )
+    try {
+      const resp = await fetchForkApp(appID)
+      window.open(
+        `${import.meta.env.ILLA_BUILDER_URL}/${teamIdentifier}/app/${
+          resp.data.appId
+        }?token=${getAuthToken()}`,
+        "_blank",
+      )
+    } catch (e) {
+      message.error({ content: t("create_fail") })
+    } finally {
+      closeGuideCreateAppModal()
+    }
+  }
+
+  const handleUpdateResource = useCallback(
+    (resource: Resource) => {
+      dispatch(resourceActions.addResourceItemReducer(resource))
+    },
+    [dispatch],
+  )
+
+  const createFromResource = async (
+    appInfo: ComponentTreeNode,
+    actionsInfo: BuildActionInfo[],
+  ) => {
+    try {
+      const resp = await fetchCreateApp({
+        appName: "Untitled app",
+        initScheme: appInfo,
+      })
+      await fetchBatchCreateAction(teamID, resp.data.appId, actionsInfo)
+      window.open(
+        `${import.meta.env.ILLA_BUILDER_URL}/${teamIdentifier}/app/${
+          resp.data.appId
+        }?token=${getAuthToken()}`,
+        "_blank",
+      )
+    } catch (e) {
+      message.error({ content: t("create_fail") })
+    } finally {
+      closeGuideCreateAppModal()
+    }
+  }
+
+  return (
+    <AnimatePresence>
+      <CreateModal
+        closeGuideCreateAppModal={closeGuideCreateAppModal}
+        openCreateFromResourceModal={() => {
+          track?.(
+            ILLA_MIXPANEL_EVENT_TYPE.CLICK,
+            ILLA_MIXPANEL_BUILDER_PAGE_NAME.TUTORIAL,
+            {
+              element: "create_app_modal_db",
+              parameter1: REPORT_PARAMETER.BLANK_TUTORIAL_APP,
+            },
+          )
+          setShowCreateFromResourceModal(true)
+        }}
+        openCreateFromTemplateModal={() => {
+          track?.(
+            ILLA_MIXPANEL_EVENT_TYPE.SHOW,
+            ILLA_MIXPANEL_BUILDER_PAGE_NAME.TUTORIAL,
+            {
+              element: "create_app_modal",
+              parameter1: REPORT_PARAMETER.CREATE_APP_MODAL,
+            },
+          )
+          setShowCreateFromTemplateModal(true)
+        }}
+      />
+      {showCreateFromResourceModal && (
+        <MixpanelTrackProvider
+          basicTrack={resourceContextHelper(
+            REPORT_PARAMETER.TUTORIAL_APP_CREATE,
+          )}
+          pageName={ILLA_MIXPANEL_BUILDER_PAGE_NAME.TUTORIAL}
+        >
+          <CreateFromResourceModal
+            updateResourceList={handleUpdateResource}
+            resourceList={resourceList.filter((item) =>
+              Object.values(RESOURCE_TYPE).includes(
+                item?.resourceType as RESOURCE_TYPE,
+              ),
+            )}
+            createCallBack={createFromResource}
+            closeModal={() => setShowCreateFromResourceModal(false)}
+          />
+        </MixpanelTrackProvider>
+      )}
+      {showCreateFromTemplateModal && (
+        <CreateFromTemplateModal
+          hiddenCreateBlank
+          handleForkApp={async (appID: string) => {
+            track?.(
+              ILLA_MIXPANEL_EVENT_TYPE.CLICK,
+              ILLA_MIXPANEL_BUILDER_PAGE_NAME.TUTORIAL,
+              {
+                element: "create_app_modal_use_template",
+                parameter1: REPORT_PARAMETER.CREATE_APP_MODAL,
+                parameter2: REPORT_TEMPLATE_STATUS.IS_MODAL_TEMPLATE,
+                parameter5: appID,
+              },
+            )
+            await forkApp(appID)
+          }}
+          closeModal={() => setShowCreateFromTemplateModal(false)}
+        />
+      )}
+    </AnimatePresence>
+  )
+}
+
+export default GuideCreateApp
diff --git a/apps/builder/src/components/Guide/GuidePopover/index.tsx b/apps/builder/src/components/Guide/GuidePopover/index.tsx
@@ -79,8 +79,8 @@ export const GuidePopover: FC<GuidePopoverProps> = (props) => {
           {isLastStep
             ? t("editor.tutorial.panel.onboarding_app.congratulations_button")
             : hideExit
-            ? t("editor.tutorial.panel.onboarding_app.test_it_button")
-            : t("editor.tutorial.panel.onboarding_app.do_it")}
+              ? t("editor.tutorial.panel.onboarding_app.test_it_button")
+              : t("editor.tutorial.panel.onboarding_app.do_it")}
         </span>
       </div>
     </div>

diff --git a/apps/builder/src/components/Guide/index.tsx b/apps/builder/src/components/Guide/index.tsx
@@ -1,4 +1,5 @@
 import { Global } from "@emotion/react"
+import { isCloudVersion } from "@illa-public/utils"
 import { FC, RefObject, useEffect, useRef, useState } from "react"
 import { createPortal } from "react-dom"
 import { useSelector } from "react-redux"
@@ -13,6 +14,7 @@ import {
 } from "@/components/Guide/style"
 import { GUIDE_STEP } from "@/config/guide/config"
 import { getCurrentStep } from "@/redux/guide/guideSelector"
+import GuideCreateApp from "./GuideCreateApp"
 
 export interface GuideProps {
   canvasRef: RefObject<HTMLDivElement>
@@ -72,9 +74,13 @@ export const Guide: FC<GuideProps> = (props) => {
         createPortal(<GuidePoint css={shiftStyle} />, currentElement)}
       {/* success tip */}
       {currentStep === 12 && <GuideSuccess />}
-      {currentStep === 12 && currentElement && (
-        <GuideDraggablePopover currentStep={currentStep} position="right" />
-      )}
+      {currentStep === 12 && currentElement ? (
+        isCloudVersion ? (
+          <GuideCreateApp />
+        ) : (
+          <GuideDraggablePopover currentStep={currentStep} position="right" />
+        )
+      ) : null}
     </>
   )
 }

diff --git a/...lder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByDatabase/index.tsx b/...lder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByDatabase/index.tsx
@@ -99,7 +99,7 @@ const BuildByDatabase: FC = () => {
         </div>
       </div>
       <MixpanelTrackProvider
-        basicTrack={resourceContextHelper("blank_app_create")}
+        basicTrack={resourceContextHelper(REPORT_PARAMETER.BLANK_APP_CREATE)}
         pageName={ILLA_MIXPANEL_BUILDER_PAGE_NAME.EDITOR}
       >
         <AnimatePresence>