From 0f7a43aeba3784556e5750a8e56bf0e989494dcd Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 18:29:50 +0800 Subject: [PATCH 01/11] chore: update submodule to beta --- packages/illa-public-component | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/illa-public-component b/packages/illa-public-component index 66e5fef9a0..f5db930247 160000 --- a/packages/illa-public-component +++ b/packages/illa-public-component @@ -1 +1 @@ -Subproject commit 66e5fef9a035ef35676d3009e7ecb6aa8da72ef9 +Subproject commit f5db93024761518a09e95f5b6c198ebcb9af2b65 From c9e9fe0b7ea5e14d51719026587bfed5de973f8a Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 13:52:56 +0800 Subject: [PATCH 02/11] feat: onborading add create app --- .../GuideCreateApp/CreateModal/index.tsx | 79 ++++++++ .../Guide/GuideCreateApp/CreateModal/style.ts | 79 ++++++++ .../components/Guide/GuideCreateApp/index.tsx | 174 ++++++++++++++++++ .../Guide/GuideDraggablePopover/index.tsx | 4 +- .../components/Guide/GuidePopover/index.tsx | 18 +- apps/builder/src/components/Guide/index.tsx | 9 +- .../BuildAppOnEmpty/BuildByDatabase/index.tsx | 2 +- .../BuildAppOnEmpty/BuildByTemplate/index.tsx | 8 + apps/builder/src/page/Template/GuideApp.tsx | 17 +- apps/builder/src/services/apps.ts | 8 + 10 files changed, 388 insertions(+), 10 deletions(-) create mode 100644 apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx create mode 100644 apps/builder/src/components/Guide/GuideCreateApp/CreateModal/style.ts create mode 100644 apps/builder/src/components/Guide/GuideCreateApp/index.tsx diff --git a/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx b/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx new file mode 100644 index 0000000000..9f8a01ad64 --- /dev/null +++ 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 = ({ + closeGuideCreateAppModal, + openCreateFromResourceModal, + openCreateFromTemplateModal, +}) => { + const { t } = useTranslation() + return createPortal( + +
+ + + + + +
+ {t("🎉 Congratulations")} + + {t( + "You have successfully completed the construction of the Onboarding app. Go ahead and create your own app.", + )} + +
+
+
+ + + + {t("Create from template")} +
+
+ + + + {t("Create from database")} +
+
+
+ , + 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 new file mode 100644 index 0000000000..55460a7afa --- /dev/null +++ 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 new file mode 100644 index 0000000000..92f31c640c --- /dev/null +++ b/apps/builder/src/components/Guide/GuideCreateApp/index.tsx @@ -0,0 +1,174 @@ +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 { 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" + +interface GuideCreateAppProps { + closeGuideCreateAppModal: () => void +} + +const GuideCreateApp: FC = ({ + closeGuideCreateAppModal, +}) => { + 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 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() + } + } + + console.log("1234") + + return ( + + { + 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 && ( + + + Object.values(RESOURCE_TYPE).includes( + item?.resourceType as RESOURCE_TYPE, + ), + )} + createCallBack={createFromResource} + closeModal={() => setShowCreateFromResourceModal(false)} + /> + + )} + {showCreateFromTemplateModal && ( + { + 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)} + /> + )} + + ) +} + +export default GuideCreateApp diff --git a/apps/builder/src/components/Guide/GuideDraggablePopover/index.tsx b/apps/builder/src/components/Guide/GuideDraggablePopover/index.tsx index 784bd547ae..3c6d88b508 100644 --- a/apps/builder/src/components/Guide/GuideDraggablePopover/index.tsx +++ b/apps/builder/src/components/Guide/GuideDraggablePopover/index.tsx @@ -10,10 +10,11 @@ export type CurrentMaskPosition = "top" | "bottom" | "right" export interface GuideCurrentMaskProps { currentStep: number position?: CurrentMaskPosition + openCreateAppModal?: () => void } export const GuideDraggablePopover: FC = (props) => { - const { currentStep, position = "bottom" } = props + const { currentStep, position = "bottom", openCreateAppModal } = props const { selector, titleKey, descKey, hideExit, doItForMe } = GUIDE_STEP[currentStep] const isLastStep = useMemo( @@ -40,6 +41,7 @@ export const GuideDraggablePopover: FC = (props) => { hideExit={hideExit} isLastStep={isLastStep} onClickDoIt={doItForMe} + openCreateAppModal={openCreateAppModal} /> , document.body, diff --git a/apps/builder/src/components/Guide/GuidePopover/index.tsx b/apps/builder/src/components/Guide/GuidePopover/index.tsx index 6aa0be6744..8ea892c7d4 100644 --- a/apps/builder/src/components/Guide/GuidePopover/index.tsx +++ b/apps/builder/src/components/Guide/GuidePopover/index.tsx @@ -21,11 +21,19 @@ export interface GuidePopoverProps extends HTMLAttributes { hideExit?: boolean isLastStep?: boolean onClickDoIt?: () => void + openCreateAppModal?: () => void } export const GuidePopover: FC = (props) => { - const { title, description, hideExit, isLastStep, onClickDoIt, ...rest } = - props + const { + title, + description, + hideExit, + isLastStep, + onClickDoIt, + openCreateAppModal, + ...rest + } = props const dispatch = useDispatch() const { t } = useTranslation() @@ -73,14 +81,16 @@ export const GuidePopover: FC = (props) => { { + // isLastStep && openCreateAppModal?.() + openCreateAppModal?.() onClickDoIt?.() }} > {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")} diff --git a/apps/builder/src/components/Guide/index.tsx b/apps/builder/src/components/Guide/index.tsx index 131fde15db..f4ff66ec08 100644 --- a/apps/builder/src/components/Guide/index.tsx +++ b/apps/builder/src/components/Guide/index.tsx @@ -16,10 +16,11 @@ import { getCurrentStep } from "@/redux/guide/guideSelector" export interface GuideProps { canvasRef: RefObject + openCreateAppModal?: () => void } export const Guide: FC = (props) => { - const { canvasRef } = props + const { canvasRef, openCreateAppModal } = props const currentStep = useSelector(getCurrentStep) const [firstStepElement, setFirstStepElement] = useState() @@ -73,7 +74,11 @@ export const Guide: FC = (props) => { {/* success tip */} {currentStep === 12 && } {currentStep === 12 && currentElement && ( - + )} ) diff --git a/apps/builder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByDatabase/index.tsx b/apps/builder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByDatabase/index.tsx index 69e096a9a7..e818637bc5 100644 --- a/apps/builder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByDatabase/index.tsx +++ b/apps/builder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByDatabase/index.tsx @@ -99,7 +99,7 @@ const BuildByDatabase: FC = () => { diff --git a/apps/builder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByTemplate/index.tsx b/apps/builder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByTemplate/index.tsx index 49def0daa7..22f10eb0b5 100644 --- a/apps/builder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByTemplate/index.tsx +++ b/apps/builder/src/page/App/Module/CanvasPanel/Components/BuildAppOnEmpty/BuildByTemplate/index.tsx @@ -96,6 +96,14 @@ const BuildByTemplate: FC = ({ }, "both", ) + track?.( + ILLA_MIXPANEL_EVENT_TYPE.SHOW, + { + element: "create_app_modal", + parameter1: REPORT_PARAMETER.MORE_TEMPLATE, + }, + "both", + ) setShowCreateFromTemplateModal(true) } diff --git a/apps/builder/src/page/Template/GuideApp.tsx b/apps/builder/src/page/Template/GuideApp.tsx index 589dcd3fc8..8c9935abc3 100644 --- a/apps/builder/src/page/Template/GuideApp.tsx +++ b/apps/builder/src/page/Template/GuideApp.tsx @@ -4,11 +4,13 @@ import { ATTRIBUTE_GROUP, canManage, } from "@illa-public/user-role-utils" +import { isCloudVersion } from "@illa-public/utils" import { Unsubscribe } from "@reduxjs/toolkit" -import { FC, useEffect, useRef } from "react" +import { FC, useEffect, useRef, useState } from "react" import { useSelector } from "react-redux" import { TriggerProvider } from "@illa-design/react" import { Guide } from "@/components/Guide" +import GuideCreateApp from "@/components/Guide/GuideCreateApp" import { useInitGuideApp } from "@/hooks/useInitGuideApp" import { ActionEditor } from "@/page/App/Module/ActionEditor" import { CanvasPanel } from "@/page/App/Module/CanvasPanel" @@ -80,6 +82,7 @@ const GuideApp: FC = () => { const { loadingState } = useInitGuideApp() const isOpen = useSelector(getGuideStatus) const [, resizeDropRef] = useResize() + const [showGuideCreateApp, setShowGuideCreateApp] = useState(false) return (
@@ -87,7 +90,17 @@ const GuideApp: FC = () => { {!loadingState && ( - {isOpen && } + {isOpen && ( + setShowGuideCreateApp(true)} + /> + )} + {isCloudVersion && showGuideCreateApp && ( + setShowGuideCreateApp(false)} + /> + )} diff --git a/apps/builder/src/services/apps.ts b/apps/builder/src/services/apps.ts index 66814b1d8d..cb740a728e 100644 --- a/apps/builder/src/services/apps.ts +++ b/apps/builder/src/services/apps.ts @@ -227,3 +227,11 @@ export const fetchCopyApp = (appID: string, name: string) => { }, ) } + +export const fetchForkApp = (appID: string) => { + const teamID = getCurrentTeamID() + return builderRequest<{ appId: string }>({ + url: `/apps/${appID}/forkTo/teams/${teamID}`, + method: "POST", + }) +} From 7942715628b45e6a10f764f7fa4b3164a8397e46 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 15:03:53 +0800 Subject: [PATCH 03/11] feat: self host add to cloud modal --- .../ToCloudModal/assets/pricing-tip.svg | 3 + .../ToCloudModal/assets/upgrad-modal-bg.svg | 13 ++ .../components/ToCloudModal/constants.ts | 36 +++++ .../components/ToCloudModal/index.tsx | 102 ++++++++++++ .../components/ToCloudModal/style.ts | 152 ++++++++++++++++++ .../workspace/components/UpgradeTip/index.tsx | 30 ++++ .../workspace/components/UpgradeTip/style.ts | 32 ++++ .../components/UpgradeTip/upgradeIcon.svg | 9 ++ apps/cloud/src/page/workspace/index.tsx | 19 ++- .../src/page/workspace/layout/interface.ts | 1 + .../page/workspace/layout/mobile/index.tsx | 3 + .../src/page/workspace/layout/pc/index.tsx | 3 + 12 files changed, 401 insertions(+), 2 deletions(-) create mode 100644 apps/cloud/src/page/workspace/components/ToCloudModal/assets/pricing-tip.svg create mode 100644 apps/cloud/src/page/workspace/components/ToCloudModal/assets/upgrad-modal-bg.svg create mode 100644 apps/cloud/src/page/workspace/components/ToCloudModal/constants.ts create mode 100644 apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx create mode 100644 apps/cloud/src/page/workspace/components/ToCloudModal/style.ts create mode 100644 apps/cloud/src/page/workspace/components/UpgradeTip/index.tsx create mode 100644 apps/cloud/src/page/workspace/components/UpgradeTip/style.ts create mode 100644 apps/cloud/src/page/workspace/components/UpgradeTip/upgradeIcon.svg diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/assets/pricing-tip.svg b/apps/cloud/src/page/workspace/components/ToCloudModal/assets/pricing-tip.svg new file mode 100644 index 0000000000..ec635fd4d0 --- /dev/null +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/assets/pricing-tip.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/assets/upgrad-modal-bg.svg b/apps/cloud/src/page/workspace/components/ToCloudModal/assets/upgrad-modal-bg.svg new file mode 100644 index 0000000000..f51b5c9427 --- /dev/null +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/assets/upgrad-modal-bg.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/constants.ts b/apps/cloud/src/page/workspace/components/ToCloudModal/constants.ts new file mode 100644 index 0000000000..8282365b56 --- /dev/null +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/constants.ts @@ -0,0 +1,36 @@ +export const FEATURE_CONFIG = [ + { + label: "billing.modal.upgrade_now_admin.add_unlimited_viewer", + }, + { + label: "billing.modal.upgrade_now_admin.publish_public_appli", + }, + { + label: "billing.apps.sql", + tip: "billing.tips.sql", + }, + { + label: "billing.modal.upgrade_now_admin.audit_logs", + }, +] + +// this keys not equal to success modal keys +export const UPGRADE_MODAL_CONFIG_KEY = { + "add-license": { + title: "billing.modal.upgrade_now_admin.insufficient_license_title", + description: + "billing.modal.upgrade_now_admin.insufficient_license_description", + buttonText: "billing.modal.upgrade_now_admin.insufficient_license_button", + }, + upgrade: { + title: "billing.modal.upgrade_now_admin.upgrade_to_plus", + description: "billing.modal.upgrade_now_admin.this_feature_is_avai", + buttonText: "billing.modal.upgrade_now_admin.upgrade", + }, + agent: { + title: "billing.modal.upgrade_now_admin.upgrade_to_plus", + description: "billing.modal.ai-agent.string2", + buttonText: "billing.modal.upgrade_now_admin.upgrade", + }, +} +export const UPGRADE_MODAL_CONFIG_KEYS = Object.keys(UPGRADE_MODAL_CONFIG_KEY) diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx b/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx new file mode 100644 index 0000000000..2d268f1002 --- /dev/null +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx @@ -0,0 +1,102 @@ +import { UpgradeIcon } from "@illa-public/icon" +import { FC, useMemo } from "react" +import { useTranslation } from "react-i18next" +import { + Button, + CloseIcon, + DoubtIcon, + Modal, + Trigger, +} from "@illa-design/react" +import TipIcon from "./assets/pricing-tip.svg?react" +import ModalDecorate from "./assets/upgrad-modal-bg.svg?react" +import { FEATURE_CONFIG } from "./constants" +import { + applyCardListStyle, + decorateStyle, + descriptionStyle, + doubtStyle, + footerStyle, + headerStyle, + iconStyle, + modalCloseIconStyle, + modalMaskStyle, + modalStyle, + priceContentStyle, + priceStyle, + titleStyle, + upgradeButtonStyle, +} from "./style" + +interface ToCloudModalProps { + onClose: () => void +} + +export const ToCloudModal: FC = ({ onClose }) => { + const { t } = useTranslation() + + const { title, description, buttonText } = useMemo(() => { + return { title: "", description: "", buttonText: "" } + }, []) + + return ( + +
+ +
+ +
+
{t(title)}
+
+ {t(description)} +
+
+
+ {FEATURE_CONFIG.map(({ label, tip }, i) => { + return ( +
+ {label && } + {t(label)} + {tip && ( + + + + + + )} +
+ ) + })} +
+
+
$16.7
+
+ {t("billing.modal.upgrade_now_admin.pricing")} +
+
+ +
+
+ + ) +} diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/style.ts b/apps/cloud/src/page/workspace/components/ToCloudModal/style.ts new file mode 100644 index 0000000000..ee853daf6e --- /dev/null +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/style.ts @@ -0,0 +1,152 @@ +import { css } from "@emotion/react" +import { applyMobileStyle } from "@illa-public/utils" +import { getColor } from "@illa-design/react" + +export const modalMaskStyle = css` + background-color: ${getColor("white", "05")}; + backdrop-filter: blur(5px); +` + +export const modalStyle = css` + border: unset; + width: 486px; + min-width: 486px; + background: ${getColor("white", "01")}; + border: 1px solid ${getColor("grayBlue", "08")}; + box-shadow: 0 4px 16px rgb(0 0 0 / 8%); + border-radius: 8px; + overflow: hidden; + + ${applyMobileStyle(css` + width: 358px; + min-width: 358px; + border-radius: 8px; + `)} +` + +export const modalCloseIconStyle = css` + position: absolute; + width: 24px; + height: 24px; + line-height: 10px; + text-align: center; + top: 18px; + right: 17px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: ${getColor("grayBlue", "02")}; +` + +export const decorateStyle = css` + width: 100%; + + ${applyMobileStyle(css` + height: 202px; + `)}; +` + +export const headerStyle = css` + padding: 16px; +` + +export const titleStyle = css` + font-weight: 600; + font-size: 18px; + line-height: 22px; + margin-bottom: 8px; + + ${applyMobileStyle(css` + font-size: 18px; + line-height: 22px; + margin-bottom: 8px; + `)}; +` + +export const descriptionStyle = css` + font-weight: 400; + font-size: 14px; + line-height: 17px; + color: ${getColor("grayBlue", "03")}; + + ${applyMobileStyle(css` + font-size: 14px; + line-height: 17px; + `)}; +` + +export const footerStyle = css` + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 16px; +` + +export const upgradeButtonStyle = css` + align-self: center; +` + +export const priceContentStyle = css` + font-size: 12px; + line-height: 20px; + color: ${getColor("grayBlue", "03")}; + + ${applyMobileStyle(css` + font-size: 12px; + line-height: 20px; + `)}; +` + +export const priceStyle = css` + font-weight: 500; + font-size: 14px; + line-height: 22px; + color: ${getColor("grayBlue", "02")}; +` + +export const applyCardListStyle = css` + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + font-weight: 400; + font-size: 14px; + line-height: 24px; + text-align: start; + padding: 4px 24px; + + ${applyMobileStyle(css` + gap: 8px; + font-size: 14px; + line-height: 24px; + `)}; +` + +export const doubtStyle = css` + cursor: pointer; + width: 16px; + height: 16px; + display: flex; + align-items: center; + + &:hover .tips { + display: block; + } + + ${applyMobileStyle(css` + width: 16px; + height: 16px; + `)}; +` + +export const iconStyle = css` + height: 16px; + width: 16px; + flex-shrink: 0; + + ${applyMobileStyle(css` + width: 16px; + height: 16px; + `)}; +` diff --git a/apps/cloud/src/page/workspace/components/UpgradeTip/index.tsx b/apps/cloud/src/page/workspace/components/UpgradeTip/index.tsx new file mode 100644 index 0000000000..ed707ba6b6 --- /dev/null +++ b/apps/cloud/src/page/workspace/components/UpgradeTip/index.tsx @@ -0,0 +1,30 @@ +import { UpgradeIcon } from "@illa-public/icon" +import { FC } from "react" +import { useTranslation } from "react-i18next" +import { Button } from "@illa-design/react" +import { + customUpgradeIconStyle, + linkStyle, + tipsTextStyle, + upgradeTipContainerStyle, +} from "./style" +import CustomUpgradeIcon from "./upgradeIcon.svg?react" + +interface UpgradeTipProps { + openToCloudModal: () => void +} + +export const UpgradeTip: FC = ({ openToCloudModal }) => { + const { t } = useTranslation() + return ( +
+

{t("billing.homepage.get_access_to_advanc")}

+ +
+ +
+
+ ) +} diff --git a/apps/cloud/src/page/workspace/components/UpgradeTip/style.ts b/apps/cloud/src/page/workspace/components/UpgradeTip/style.ts new file mode 100644 index 0000000000..022e5c6b29 --- /dev/null +++ b/apps/cloud/src/page/workspace/components/UpgradeTip/style.ts @@ -0,0 +1,32 @@ +import { css } from "@emotion/react" + +export const upgradeTipContainerStyle = css` + width: 100%; + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + border-radius: 8px; + background-color: #f4efff; + position: relative; +` + +export const tipsTextStyle = css` + margin: 0; + font-size: 14px; + color: #403673; + font-weight: 500; + line-height: 20px; + width: 144px; +` + +export const customUpgradeIconStyle = css` + position: absolute; + top: 8px; + right: 8px; +` + +export const linkStyle = css` + line-height: 1; + font-size: 14px; +` diff --git a/apps/cloud/src/page/workspace/components/UpgradeTip/upgradeIcon.svg b/apps/cloud/src/page/workspace/components/UpgradeTip/upgradeIcon.svg new file mode 100644 index 0000000000..e9239426ad --- /dev/null +++ b/apps/cloud/src/page/workspace/components/UpgradeTip/upgradeIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/cloud/src/page/workspace/index.tsx b/apps/cloud/src/page/workspace/index.tsx index 243ae48895..643633ff5b 100644 --- a/apps/cloud/src/page/workspace/index.tsx +++ b/apps/cloud/src/page/workspace/index.tsx @@ -1,29 +1,44 @@ import { LayoutAutoChange } from "@illa-public/layout-auto-change" import { FC, useState } from "react" import ChangeLogModal from "./components/ChangeLogModal" +import { ToCloudModal } from "./components/ToCloudModal" import { MobileDashBoardLayout } from "./layout/mobile" import { PCDashBoardLayout } from "./layout/pc/" const Workspace: FC = () => { const [changeLogVisible, setChangeLogVisible] = useState(false) + const [toCloudModalVisible, setToCloudModalVisible] = useState(false) const onOpenChangeLogModal = () => { setChangeLogVisible(true) } + const openToCloudModal = () => { + setToCloudModalVisible(true) + } + return ( <> + } mobilePage={ - + } /> {changeLogVisible && ( setChangeLogVisible(false)} /> )} + {toCloudModalVisible && ( + setToCloudModalVisible(false)} /> + )} ) } diff --git a/apps/cloud/src/page/workspace/layout/interface.ts b/apps/cloud/src/page/workspace/layout/interface.ts index 42d8ce3b1d..2e04402b57 100644 --- a/apps/cloud/src/page/workspace/layout/interface.ts +++ b/apps/cloud/src/page/workspace/layout/interface.ts @@ -1,3 +1,4 @@ export interface WorkspaceLayoutProps { onOpenChangeLogModal: () => void + openToCloudModal: () => void } diff --git a/apps/cloud/src/page/workspace/layout/mobile/index.tsx b/apps/cloud/src/page/workspace/layout/mobile/index.tsx index a66718cad5..4623980094 100644 --- a/apps/cloud/src/page/workspace/layout/mobile/index.tsx +++ b/apps/cloud/src/page/workspace/layout/mobile/index.tsx @@ -7,10 +7,12 @@ import { FC, useState } from "react" import { useSelector } from "react-redux" import { Outlet } from "react-router-dom" import { DashBoardDynamicMenu } from "@/page/workspace/components/DynamicMenu" +import { UpgradeTip } from "@/page/workspace/components/UpgradeTip" import { WorkspaceLayoutProps } from "../interface" export const MobileDashBoardLayout: FC = ({ onOpenChangeLogModal, + openToCloudModal, }) => { const isLogin = useSelector(getCurrentUserID) const [drawerVisible, setDrawerVisible] = useState(false) @@ -26,6 +28,7 @@ export const MobileDashBoardLayout: FC = ({ } bottomComponent={ } diff --git a/apps/cloud/src/page/workspace/layout/pc/index.tsx b/apps/cloud/src/page/workspace/layout/pc/index.tsx index 43b126ef54..03c324b732 100644 --- a/apps/cloud/src/page/workspace/layout/pc/index.tsx +++ b/apps/cloud/src/page/workspace/layout/pc/index.tsx @@ -21,11 +21,13 @@ import { Outlet, useParams } from "react-router-dom" import { useModal } from "@illa-design/react" import { FullSectionLoading } from "@/components/FullSectionLoading" import { DashBoardDynamicMenu } from "@/page/workspace/components/DynamicMenu" +import { UpgradeTip } from "@/page/workspace/components/UpgradeTip" import { updateTutorialViewed } from "@/services/user" import { WorkspaceLayoutProps } from "../interface" export const PCDashBoardLayout: FC = ({ onOpenChangeLogModal, + openToCloudModal, }) => { const currentTeamInfo = useSelector(getCurrentTeamInfo) const isLogin = useSelector(getCurrentUserID) @@ -91,6 +93,7 @@ export const PCDashBoardLayout: FC = ({
} + tipsComponent={} bottomComponent={ } From b2ebc3fd627a810f3f55ea807b7430fad69694e2 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 15:04:49 +0800 Subject: [PATCH 04/11] style: update event handle wrapper style --- .../EventHandlerSetter/List/style.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/EventHandlerSetter/List/style.ts b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/EventHandlerSetter/List/style.ts index 983bb830ee..1e0d8ab197 100644 --- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/EventHandlerSetter/List/style.ts +++ b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/EventHandlerSetter/List/style.ts @@ -57,6 +57,7 @@ export const groupWrapperStyle = css` export const moreIconWrapperStyle = css` width: 32px; + flex: none; height: 32px; border: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; border-radius: 0 8px 8px 0; @@ -79,20 +80,27 @@ export const eventAndMethodWrapperStyle = css` padding: 6px 16px; cursor: pointer; font-size: 12px; + gap: 8px; + overflow: hidden; ` export const eventNameStyle = css` color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; min-width: 64px; - margin-right: 8px; - display: flex; - align-items: center; + display: block; + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; ` export const methodNameStyle = css` color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; - display: flex; - align-items: center; + display: block; + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; ` export const emptyBodyStyle = css` From 7b90b07e98b882cafbf89b88bc92d1b9755fafc8 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 16:15:21 +0800 Subject: [PATCH 05/11] feat: update onboarding create app step --- .../GuideCreateApp/CreateModal/index.tsx | 22 ++++++++++++++----- .../components/Guide/GuideCreateApp/index.tsx | 15 +++++-------- .../Guide/GuideDraggablePopover/index.tsx | 4 +--- .../components/Guide/GuidePopover/index.tsx | 14 ++---------- apps/builder/src/components/Guide/index.tsx | 19 ++++++++-------- apps/builder/src/page/Template/GuideApp.tsx | 17 ++------------ 6 files changed, 37 insertions(+), 54 deletions(-) diff --git a/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx b/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx index 9f8a01ad64..19f98f62d3 100644 --- a/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx +++ b/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx @@ -1,8 +1,10 @@ import IconHotSpot from "@illa-public/icon-hot-spot" +import { TextLink } from "@illa-public/text-link" import { FC } from "react" import { createPortal } from "react-dom" -import { useTranslation } from "react-i18next" +import { Trans, useTranslation } from "react-i18next" import { AddIcon, CloseIcon, Modal, getColor } from "@illa-design/react" +import { openDiscord } from "@/utils/navigate" import { closeIconStyle, containerStyle, @@ -43,11 +45,19 @@ const CreateModal: FC = ({
- {t("🎉 Congratulations")} + + {t("editor.tutorial.panel.onboarding_app.congratulations_title")} + - {t( - "You have successfully completed the construction of the Onboarding app. Go ahead and create your own app.", - )} + , + ]} + />
@@ -67,7 +77,7 @@ const CreateModal: FC = ({ - {t("Create from database")} + {t("new_dashboard.create_new.generate_crud_short")}
diff --git a/apps/builder/src/components/Guide/GuideCreateApp/index.tsx b/apps/builder/src/components/Guide/GuideCreateApp/index.tsx index 92f31c640c..c35734cfc7 100644 --- a/apps/builder/src/components/Guide/GuideCreateApp/index.tsx +++ b/apps/builder/src/components/Guide/GuideCreateApp/index.tsx @@ -20,6 +20,7 @@ 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" @@ -27,13 +28,7 @@ import { resourceContextHelper, track } from "@/utils/mixpanelHelper" import { getCurrentTeamID } from "@/utils/team" import CreateModal from "./CreateModal" -interface GuideCreateAppProps { - closeGuideCreateAppModal: () => void -} - -const GuideCreateApp: FC = ({ - closeGuideCreateAppModal, -}) => { +const GuideCreateApp: FC = () => { const message = useMessage() const teamID = useSelector(getCurrentTeamID)! const { teamIdentifier } = useParams() @@ -46,6 +41,10 @@ const GuideCreateApp: FC = ({ const [showCreateFromTemplateModal, setShowCreateFromTemplateModal] = useState(false) + const closeGuideCreateAppModal = () => { + dispatch(guideActions.updateGuideStatusReducer(false)) + } + const forkApp = async (appID: string) => { track?.( ILLA_MIXPANEL_EVENT_TYPE.CLICK, @@ -100,8 +99,6 @@ const GuideCreateApp: FC = ({ } } - console.log("1234") - return ( void } export const GuideDraggablePopover: FC = (props) => { - const { currentStep, position = "bottom", openCreateAppModal } = props + const { currentStep, position = "bottom" } = props const { selector, titleKey, descKey, hideExit, doItForMe } = GUIDE_STEP[currentStep] const isLastStep = useMemo( @@ -41,7 +40,6 @@ export const GuideDraggablePopover: FC = (props) => { hideExit={hideExit} isLastStep={isLastStep} onClickDoIt={doItForMe} - openCreateAppModal={openCreateAppModal} /> , document.body, diff --git a/apps/builder/src/components/Guide/GuidePopover/index.tsx b/apps/builder/src/components/Guide/GuidePopover/index.tsx index 8ea892c7d4..a9b607991c 100644 --- a/apps/builder/src/components/Guide/GuidePopover/index.tsx +++ b/apps/builder/src/components/Guide/GuidePopover/index.tsx @@ -21,19 +21,11 @@ export interface GuidePopoverProps extends HTMLAttributes { hideExit?: boolean isLastStep?: boolean onClickDoIt?: () => void - openCreateAppModal?: () => void } export const GuidePopover: FC = (props) => { - const { - title, - description, - hideExit, - isLastStep, - onClickDoIt, - openCreateAppModal, - ...rest - } = props + const { title, description, hideExit, isLastStep, onClickDoIt, ...rest } = + props const dispatch = useDispatch() const { t } = useTranslation() @@ -81,8 +73,6 @@ export const GuidePopover: FC = (props) => { { - // isLastStep && openCreateAppModal?.() - openCreateAppModal?.() onClickDoIt?.() }} > diff --git a/apps/builder/src/components/Guide/index.tsx b/apps/builder/src/components/Guide/index.tsx index f4ff66ec08..270e7fa5f5 100644 --- 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,14 +14,14 @@ 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 - openCreateAppModal?: () => void } export const Guide: FC = (props) => { - const { canvasRef, openCreateAppModal } = props + const { canvasRef } = props const currentStep = useSelector(getCurrentStep) const [firstStepElement, setFirstStepElement] = useState() @@ -73,13 +74,13 @@ export const Guide: FC = (props) => { createPortal(, currentElement)} {/* success tip */} {currentStep === 12 && } - {currentStep === 12 && currentElement && ( - - )} + {currentStep === 12 && currentElement ? ( + isCloudVersion ? ( + + ) : ( + + ) + ) : null} ) } diff --git a/apps/builder/src/page/Template/GuideApp.tsx b/apps/builder/src/page/Template/GuideApp.tsx index 8c9935abc3..589dcd3fc8 100644 --- a/apps/builder/src/page/Template/GuideApp.tsx +++ b/apps/builder/src/page/Template/GuideApp.tsx @@ -4,13 +4,11 @@ import { ATTRIBUTE_GROUP, canManage, } from "@illa-public/user-role-utils" -import { isCloudVersion } from "@illa-public/utils" import { Unsubscribe } from "@reduxjs/toolkit" -import { FC, useEffect, useRef, useState } from "react" +import { FC, useEffect, useRef } from "react" import { useSelector } from "react-redux" import { TriggerProvider } from "@illa-design/react" import { Guide } from "@/components/Guide" -import GuideCreateApp from "@/components/Guide/GuideCreateApp" import { useInitGuideApp } from "@/hooks/useInitGuideApp" import { ActionEditor } from "@/page/App/Module/ActionEditor" import { CanvasPanel } from "@/page/App/Module/CanvasPanel" @@ -82,7 +80,6 @@ const GuideApp: FC = () => { const { loadingState } = useInitGuideApp() const isOpen = useSelector(getGuideStatus) const [, resizeDropRef] = useResize() - const [showGuideCreateApp, setShowGuideCreateApp] = useState(false) return (
@@ -90,17 +87,7 @@ const GuideApp: FC = () => { {!loadingState && ( - {isOpen && ( - setShowGuideCreateApp(true)} - /> - )} - {isCloudVersion && showGuideCreateApp && ( - setShowGuideCreateApp(false)} - /> - )} + {isOpen && } From 4f8afda8f15f4bee1072146b41b1929ef7a35748 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 16:45:54 +0800 Subject: [PATCH 06/11] fix: upload onchange --- .../src/widgetLibrary/UploadWidget/upload.tsx | 235 +++++++++--------- 1 file changed, 121 insertions(+), 114 deletions(-) diff --git a/apps/builder/src/widgetLibrary/UploadWidget/upload.tsx b/apps/builder/src/widgetLibrary/UploadWidget/upload.tsx index 799778a297..268f2ff642 100644 --- a/apps/builder/src/widgetLibrary/UploadWidget/upload.tsx +++ b/apps/builder/src/widgetLibrary/UploadWidget/upload.tsx @@ -43,7 +43,6 @@ export const WrappedUpload: FC = (props) => { const { selectionType, type, - displayName, showFileList, disabled, fileType = [], @@ -52,83 +51,14 @@ export const WrappedUpload: FC = (props) => { dropText, colorScheme, variant, - parseValue, fileList, onRemove, onChange, - getValidateMessage, - handleUpdateMultiExecutionResult, customRequest, } = props const isDrag = type === "dropzone" const inputAcceptType = fileType.join(",") - const prevFileList = useRef(fileList ?? []) - const prevParseValue = useRef(parseValue ?? false) - - useEffect(() => { - if ( - !fileList || - (prevFileList.current === fileList && - prevParseValue.current === parseValue) - ) { - return - } - prevFileList.current = fileList - prevParseValue.current = parseValue ?? false - new Promise(async (resolve) => { - const values = await Promise.allSettled( - fileList.map(async (file) => await toBase64(file)), - ) - let parsedValues - if (parseValue) { - parsedValues = await Promise.allSettled( - fileList.map(async (file) => { - const res = await getFileString(file) - return res - }), - ) - } - resolve({ - values, - parsedValues, - fileList, - }) - }).then((value) => { - const { - values, - parsedValues, - fileList = [], - } = value as { - values: any[] - parsedValues: any[] - fileList: UploadItem[] - } - const validateMessage = getValidateMessage(fileList) - const base64value = getFilteredValue(values, "base64") - const files = getFiles(fileList, base64value ?? []) - const parsed = getFilteredValue(parsedValues) - const currentList = getCurrentList(fileList) - handleUpdateMultiExecutionResult([ - { - displayName, - value: { - files, - value: base64value, - parsedValue: parsed, - validateMessage, - currentList, - }, - }, - ]) - }) - }, [ - displayName, - parseValue, - fileList, - getValidateMessage, - handleUpdateMultiExecutionResult, - ]) return ( = (props) => { const { + displayName, appendFiles, customRule, tooltipText, @@ -166,6 +97,7 @@ export const UploadWidget: FC = (props) => { currentList, value, files, + parseValue, minSize, validateMessage, triggerEventHandler, @@ -174,6 +106,7 @@ export const UploadWidget: FC = (props) => { handleUpdateDsl, updateComponentRuntimeProps, deleteComponentRuntimeProps, + handleUpdateMultiExecutionResult, } = props const fileListRef = useRef([]) @@ -181,6 +114,9 @@ export const UploadWidget: FC = (props) => { const fileCountRef = useRef(0) const previousValueRef = useRef([]) + const prevFileList = useRef(currentFileList ?? []) + const prevParseValue = useRef(parseValue ?? false) + useEffect(() => { const canInitialDragValue = currentList && @@ -212,6 +148,118 @@ export const UploadWidget: FC = (props) => { return currentFilesKeys.indexOf(file.uid || file.name) }, []) + const getValidateMessage = useCallback( + (value?: UploadItem[]) => { + if (!hideValidationMessage) { + const message = handleValidateCheck({ + value, + minFiles, + maxFiles, + minSize, + maxSize, + sizeType, + required, + customRule, + }) + const showMessage = message && message.length > 0 + return showMessage ? message : "" + } + return "" + }, + [ + customRule, + hideValidationMessage, + minFiles, + maxFiles, + minSize, + sizeType, + maxSize, + required, + ], + ) + + const handleValidate = useCallback( + (value?: UploadItem[]) => { + const message = getValidateMessage(value) + handleUpdateDsl({ + validateMessage: message, + }) + return message + }, + [getValidateMessage, handleUpdateDsl], + ) + + const handleFilesChange = useCallback( + (fileList?: UploadItem[]) => { + if ( + !fileList || + (prevFileList.current === fileList && + prevParseValue.current === parseValue) + ) { + return + } + prevFileList.current = fileList + prevParseValue.current = parseValue ?? false + new Promise(async (resolve) => { + const values = await Promise.allSettled( + fileList.map(async (file) => await toBase64(file)), + ) + let parsedValues + if (parseValue) { + parsedValues = await Promise.allSettled( + fileList.map(async (file) => { + const res = await getFileString(file) + return res + }), + ) + } + resolve({ + values, + parsedValues, + fileList, + }) + }) + .then((value) => { + const { + values, + parsedValues, + fileList = [], + } = value as { + values: any[] + parsedValues: any[] + fileList: UploadItem[] + } + const validateMessage = getValidateMessage(fileList) + const base64value = getFilteredValue(values, "base64") + const files = getFiles(fileList, base64value ?? []) + const parsed = getFilteredValue(parsedValues) + const currentList = getCurrentList(fileList) + handleUpdateMultiExecutionResult([ + { + displayName, + value: { + files, + value: base64value, + parsedValue: parsed, + validateMessage, + currentList, + }, + }, + ]) + }) + .then(() => { + triggerEventHandler("change") + }) + }, + [ + displayName, + getValidateMessage, + handleUpdateMultiExecutionResult, + parseValue, + triggerEventHandler, + ], + ) + const handleOnRemove = (file: UploadItem) => { const currentFiles = previousValueRef.current.length > 0 @@ -224,7 +272,7 @@ export const UploadWidget: FC = (props) => { if (previousValueRef.current.length > 0) { previousValueRef.current = currentFiles } - triggerEventHandler("change") + handleFilesChange(currentFiles) return true } @@ -261,53 +309,12 @@ export const UploadWidget: FC = (props) => { fileListRef.current = newList previousValueRef.current = [] fileCountRef.current = 0 - triggerEventHandler("change") + handleFilesChange(newList) } } return }, - [appendFiles, getFileIndex, triggerEventHandler], - ) - - const getValidateMessage = useCallback( - (value?: UploadItem[]) => { - if (!hideValidationMessage) { - const message = handleValidateCheck({ - value, - minFiles, - maxFiles, - minSize, - maxSize, - sizeType, - required, - customRule, - }) - const showMessage = message && message.length > 0 - return showMessage ? message : "" - } - return "" - }, - [ - customRule, - hideValidationMessage, - minFiles, - maxFiles, - minSize, - sizeType, - maxSize, - required, - ], - ) - - const handleValidate = useCallback( - (value?: UploadItem[]) => { - const message = getValidateMessage(value) - handleUpdateDsl({ - validateMessage: message, - }) - return message - }, - [getValidateMessage, handleUpdateDsl], + [appendFiles, getFileIndex, handleFilesChange], ) useEffect(() => { From 8cb0710fb7405b32d356b2ad8e06ab537ce12e25 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 17:50:58 +0800 Subject: [PATCH 07/11] chore: update translation key --- .../GuideCreateApp/CreateModal/index.tsx | 16 +---- apps/cloud/package.json | 1 + .../components/ToCloudModal/constants.ts | 36 ---------- .../components/ToCloudModal/index.tsx | 67 ++++++++++++++----- .../components/ToCloudModal/style.ts | 9 +++ pnpm-lock.yaml | 3 + 6 files changed, 68 insertions(+), 64 deletions(-) delete mode 100644 apps/cloud/src/page/workspace/components/ToCloudModal/constants.ts diff --git a/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx b/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx index 19f98f62d3..d43a56750d 100644 --- a/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx +++ b/apps/builder/src/components/Guide/GuideCreateApp/CreateModal/index.tsx @@ -1,10 +1,8 @@ import IconHotSpot from "@illa-public/icon-hot-spot" -import { TextLink } from "@illa-public/text-link" import { FC } from "react" import { createPortal } from "react-dom" -import { Trans, useTranslation } from "react-i18next" +import { useTranslation } from "react-i18next" import { AddIcon, CloseIcon, Modal, getColor } from "@illa-design/react" -import { openDiscord } from "@/utils/navigate" import { closeIconStyle, containerStyle, @@ -49,15 +47,7 @@ const CreateModal: FC = ({ {t("editor.tutorial.panel.onboarding_app.congratulations_title")} - , - ]} - /> + {t("new_dashboard.create_new.onboarding_cloud")}
@@ -68,7 +58,7 @@ const CreateModal: FC = ({ - {t("Create from template")} + {t("new_dashboard.create_new.create_from_template")}
= ({ onClose }) => { const { t } = useTranslation() - const { title, description, buttonText } = useMemo(() => { - return { title: "", description: "", buttonText: "" } - }, []) + const FEATURE_CONFIG = [ + { + label: "new_dashboard.selfhost.export.feature1", + tip: "new_dashboard.selfhost.export.feature_tips1", + }, + { + label: "new_dashboard.selfhost.export.feature2", + tip: "new_dashboard.selfhost.export.feature_tips2", + }, + { + label: "new_dashboard.selfhost.export.feature3", + tip: "new_dashboard.selfhost.export.feature_tips3", + }, + { + label: "new_dashboard.selfhost.export.feature4", + tip: "new_dashboard.selfhost.export.feature_tips4", + }, + { + label: "new_dashboard.selfhost.export.feature5", + tip: "new_dashboard.selfhost.export.feature_tips5", + }, + { + label: "new_dashboard.selfhost.export.feature6", + tip: "new_dashboard.selfhost.export.feature_tips6", + }, + ] return ( = ({ onClose }) => {
-
{t(title)}
+
{t("new_dashboard.selfhost.export.title")}
- {t(description)} + + ]} + /> +
@@ -87,14 +118,20 @@ export const ToCloudModal: FC = ({ onClose }) => { {t("billing.modal.upgrade_now_admin.pricing")}
- + + diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/style.ts b/apps/cloud/src/page/workspace/components/ToCloudModal/style.ts index ee853daf6e..e468395b32 100644 --- a/apps/cloud/src/page/workspace/components/ToCloudModal/style.ts +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/style.ts @@ -76,6 +76,10 @@ export const descriptionStyle = css` `)}; ` +export const boldStyle = css` + color: ${getColor("grayBlue", "02")}; +` + export const footerStyle = css` display: flex; flex-direction: row; @@ -150,3 +154,8 @@ export const iconStyle = css` height: 16px; `)}; ` + +export const linkStyle = css` + display: flex; + padding: 0; +` diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8ea02372c1..8500457552 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -616,6 +616,9 @@ importers: '@illa-public/styleis-plugin': specifier: workspace:* version: link:../../packages/illa-public-component/styleis-plugin + '@illa-public/text-link': + specifier: workspace:* + version: link:../../packages/illa-public-component/TextLink '@illa-public/user-data': specifier: workspace:* version: link:../../packages/illa-public-component/UserData From 88a694b9aaf11ebf28df414d71f6dbe056576913 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 17:57:08 +0800 Subject: [PATCH 08/11] chore: remove unnessery code --- apps/cloud/package.json | 1 - pnpm-lock.yaml | 3 --- 2 files changed, 4 deletions(-) diff --git a/apps/cloud/package.json b/apps/cloud/package.json index 8c66eeee65..debd2dca3a 100644 --- a/apps/cloud/package.json +++ b/apps/cloud/package.json @@ -35,7 +35,6 @@ "@illa-public/user-data": "workspace:*", "@illa-public/user-role-utils": "workspace:*", "@illa-public/utils": "workspace:*", - "@illa-public/text-link": "workspace:*", "@reduxjs/toolkit": "^2.0.1", "axios": "^1.6.2", "dayjs": "^1.11.10", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8500457552..8ea02372c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -616,9 +616,6 @@ importers: '@illa-public/styleis-plugin': specifier: workspace:* version: link:../../packages/illa-public-component/styleis-plugin - '@illa-public/text-link': - specifier: workspace:* - version: link:../../packages/illa-public-component/TextLink '@illa-public/user-data': specifier: workspace:* version: link:../../packages/illa-public-component/UserData From 350c2d40e9f902c144e61a49cd96f55b08278f3d Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 18:39:17 +0800 Subject: [PATCH 09/11] chore: update selfhost to cloud key use --- .../components/ToCloudModal/index.tsx | 46 ++++++++----------- 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx b/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx index fd37d9d33a..d4736caed4 100644 --- a/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx @@ -39,28 +39,28 @@ export const ToCloudModal: FC = ({ onClose }) => { const FEATURE_CONFIG = [ { - label: "new_dashboard.selfhost.export.feature1", - tip: "new_dashboard.selfhost.export.feature_tips1", + label: t("new_dashboard.selfhost.export.feature1"), + tip: t("new_dashboard.selfhost.export.feature_tips1"), }, { - label: "new_dashboard.selfhost.export.feature2", - tip: "new_dashboard.selfhost.export.feature_tips2", + label: t("new_dashboard.selfhost.export.feature2"), + tip: t("new_dashboard.selfhost.export.feature_tips2"), }, { - label: "new_dashboard.selfhost.export.feature3", - tip: "new_dashboard.selfhost.export.feature_tips3", + label: t("new_dashboard.selfhost.export.feature3"), + tip: t("new_dashboard.selfhost.export.feature_tips3"), }, { - label: "new_dashboard.selfhost.export.feature4", - tip: "new_dashboard.selfhost.export.feature_tips4", + label: t("new_dashboard.selfhost.export.feature4"), + tip: t("new_dashboard.selfhost.export.feature_tips4"), }, { - label: "new_dashboard.selfhost.export.feature5", - tip: "new_dashboard.selfhost.export.feature_tips5", + label: t("new_dashboard.selfhost.export.feature5"), + tip: t("new_dashboard.selfhost.export.feature_tips5"), }, { - label: "new_dashboard.selfhost.export.feature6", - tip: "new_dashboard.selfhost.export.feature_tips6", + label: t("new_dashboard.selfhost.export.feature6"), + tip: t("new_dashboard.selfhost.export.feature_tips6"), }, ] @@ -92,22 +92,16 @@ export const ToCloudModal: FC = ({ onClose }) => {
- {FEATURE_CONFIG.map(({ label, tip }, i) => { + {FEATURE_CONFIG.map(({ label, tip }) => { return ( -
+
{label && } - {t(label)} - {tip && ( - - - - - - )} + {label} + + + + +
) })} From fa768ec3ed40fb28094055f4757761451d3f8f05 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 18:59:12 +0800 Subject: [PATCH 10/11] style: update self host discord icon --- .../ToCloudModal/assets/discord-icon.svg | 3 + .../components/ToCloudModal/index.tsx | 79 ++++++++++--------- 2 files changed, 46 insertions(+), 36 deletions(-) create mode 100644 apps/cloud/src/page/workspace/components/ToCloudModal/assets/discord-icon.svg diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/assets/discord-icon.svg b/apps/cloud/src/page/workspace/components/ToCloudModal/assets/discord-icon.svg new file mode 100644 index 0000000000..2744a6249d --- /dev/null +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/assets/discord-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx b/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx index d4736caed4..fc47438b94 100644 --- a/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx +++ b/apps/cloud/src/page/workspace/components/ToCloudModal/index.tsx @@ -1,4 +1,3 @@ -import { UpgradeIcon } from "@illa-public/icon" import { FC } from "react" import { Trans, useTranslation } from "react-i18next" import { @@ -8,7 +7,9 @@ import { Link, Modal, Trigger, + TriggerProvider, } from "@illa-design/react" +import DiscordIcon from "./assets/discord-icon.svg?react" import TipIcon from "./assets/pricing-tip.svg?react" import ModalDecorate from "./assets/upgrad-modal-bg.svg?react" import { @@ -66,7 +67,6 @@ export const ToCloudModal: FC = ({ onClose }) => { return ( = ({ onClose }) => {
-
- {FEATURE_CONFIG.map(({ label, tip }) => { - return ( -
- {label && } - {label} - - - - - + +
+ {FEATURE_CONFIG.map(({ label, tip }) => { + return ( +
+ {label && } + {label} + + + + + +
+ ) + })} +
+
+
$16.7
+
+ {t("billing.modal.upgrade_now_admin.pricing")} +
- ) - })} -
-
-
$16.7
-
- {t("billing.modal.upgrade_now_admin.pricing")} -
-
- - - + + +
-
+ ) } From c6c1a44af6b5b6388ec14b574dfad76cbba6484c Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Fri, 26 Jan 2024 19:02:11 +0800 Subject: [PATCH 11/11] [ci skip] Update package.json --- apps/builder/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/builder/package.json b/apps/builder/package.json index 07a0b5392f..f10b39bd8c 100644 --- a/apps/builder/package.json +++ b/apps/builder/package.json @@ -5,7 +5,7 @@ "private": true, "author": "ILLA Cloud ", "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",