Merge pull request #3767 from illacloud/Release/4.7.0

Release/4.7.0

Author: Wangtaofeng

README-CN.md

@@ -94,8 +94,9 @@ ILLA CLI 使您能够以超乎想象的速度部署 ILLA Builder。 [单击此
 加入 ILLA 社区，分享您的想法、建议或问题，并与其他用户和贡献者交流。
 
 加入微信群：  
+![IMG_6451](https://github.com/illacloud/illa-builder/assets/112603073/06b024f1-5aad-428a-9342-ee4396d20e92)
+
 
-![IMG_6103](https://github.com/illacloud/illa-builder/assets/112603073/a4eb22b9-f826-49df-b538-75599292370f)
 
 
 Discord与Github社区入口

apps/builder/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "author": "ILLA Cloud <[email protected]>",
   "license": "Apache-2.0",
-  "version": "4.5.18",
+  "version": "4.7.0",
   "scripts": {
     "dev": "vite --strictPort --force",
     "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288  vite build --mode cloud",

apps/builder/src/page/App/components/Actions/ActionList/listWithNewButton.tsx

@@ -1,4 +1,4 @@
-import { getIconFromResourceType } from "@illa-public/icon"
+import { UpgradeIcon, getIconFromResourceType } from "@illa-public/icon"
 import {
   ILLA_MIXPANEL_BUILDER_PAGE_NAME,
   ILLA_MIXPANEL_EVENT_TYPE,
@@ -22,6 +22,9 @@ import {
   ActionGenerator,
   ResourceGeneratorProvider,
 } from "@illa-public/resource-generator"
+import { useUpgradeModal } from "@illa-public/upgrade-modal"
+import { isSubscribeForUseDrive } from "@illa-public/upgrade-modal/utils"
+import { getCurrentTeamInfo } from "@illa-public/user-data"
 import { isCloudVersion } from "@illa-public/utils"
 import { isEqual } from "lodash-es"
 import { FC, useCallback, useContext, useState } from "react"
@@ -65,9 +68,11 @@ import {
   actionListEmptyStyle,
   addNewActionButtonStyle,
   createDropListItemContainerStyle,
+  dropListWithUpgradeIconStyle,
   listContainerStyle,
   listStyle,
   prefixIconContainerStyle,
+  upgradeContainerStyle,
 } from "./style"
 
 export const ActionListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
@@ -81,6 +86,8 @@ export const ActionListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
   const [currentActionType, setCurrentActionType] =
     useState<ActionType | null>()
   const actionList = useSelector(getActionMixedList)
+  const teamInfo = useSelector(getCurrentTeamInfo)!
+  const upgradeModal = useUpgradeModal()
 
   const searchList = actionList.filter((value) => {
     return value.displayName
@@ -167,6 +174,13 @@ export const ActionListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
           break
         }
         case "illadrive": {
+          if (!isSubscribeForUseDrive(teamInfo)) {
+            upgradeModal({
+              modalType: "upgrade",
+              from: "drive_action",
+            })
+            return
+          }
           const displayName = DisplayNameGenerator.generateDisplayName(type)
           const initialContent = getInitialContent(type)
           const baseData = generateBaseActionItem(displayName, "")
@@ -302,11 +316,19 @@ export const ActionListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
                   key="illaDrive"
                   value="illaDrive"
                   title={
-                    <div css={createDropListItemContainerStyle}>
-                      <span css={prefixIconContainerStyle}>
-                        {getIconFromResourceType("illadrive", "16px")}
-                      </span>
-                      ILLA Drive
+                    <div css={dropListWithUpgradeIconStyle}>
+                      <div css={createDropListItemContainerStyle}>
+                        <span css={prefixIconContainerStyle}>
+                          {getIconFromResourceType("illadrive", "16px")}
+                        </span>
+                        ILLA Drive
+                      </div>
+                      {!isSubscribeForUseDrive(teamInfo) && (
+                        <div css={upgradeContainerStyle}>
+                          <UpgradeIcon />
+                          <span>{t("Upgrade")}</span>
+                        </div>
+                      )}
                     </div>
                   }
                   onClick={handleClickActionType("illadrive")}

apps/builder/src/page/App/components/Actions/ActionList/style.ts

@@ -48,3 +48,19 @@ export const prefixIconContainerStyle = css`
   align-items: center;
   justify-content: center;
 `
+
+export const dropListWithUpgradeIconStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const upgradeContainerStyle = css`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: ${getColor("techPurple", "03")};
+  font-size: 12px;
+  font-style: normal;
+  line-height: 20px;
+`

apps/builder/src/page/App/components/ComponentPanel/ComponentItem.tsx

@@ -1,3 +1,7 @@
+import { UpgradeIcon } from "@illa-public/icon"
+import { isSubscribeForUseDrive } from "@illa-public/upgrade-modal/utils"
+import { getCurrentTeamInfo } from "@illa-public/user-data"
+import { isCloudVersion } from "@illa-public/utils"
 import { FC, memo } from "react"
 import { useDrag } from "react-dnd"
 import { useSelector } from "react-redux"
@@ -16,14 +20,20 @@ import {
   DRAG_EFFECT,
   DragInfo,
 } from "../ScaleSquare/components/DragContainer/interface"
-import { iconStyle, itemContainerStyle, nameStyle } from "./style"
+import {
+  iconStyle,
+  itemContainerStyle,
+  nameStyle,
+  upgradeIconStyle,
+} from "./style"
 
 export const ComponentItem: FC<ComponentItemProps> = memo(
   (props: ComponentItemProps) => {
-    const { widgetName, widgetType, icon, displayName } = props
+    const { widgetName, widgetType, icon, displayName, isPremiumWidget } = props
 
     const isEditMode = useSelector(getIsILLAEditMode)
     const isGuideOpen = useSelector(getGuideStatus)
+    const teamInfo = useSelector(getCurrentTeamInfo)!
 
     const [, dragRef] = useDrag<DragInfo, DropResultInfo>(
       () => ({
@@ -81,6 +91,13 @@ export const ComponentItem: FC<ComponentItemProps> = memo(
           css={iconStyle}
           {...(isGuideOpen ? { "data-onboarding-icon": widgetType } : {})}
         >
+          {isPremiumWidget &&
+            isCloudVersion &&
+            !isSubscribeForUseDrive(teamInfo) && (
+              <span css={upgradeIconStyle}>
+                <UpgradeIcon />
+              </span>
+            )}
           {icon}
         </span>
         <span css={nameStyle}>{widgetName}</span>

apps/builder/src/page/App/components/ComponentPanel/ComponentSession.tsx

@@ -27,6 +27,7 @@ export const ComponentSession = memo((props: ComponentSessionProps) => {
             widgetType={item.widgetType}
             widgetName={item.widgetName}
             displayName={item.displayName}
+            isPremiumWidget={item.isPremiumWidget}
           />
         ))}
       </div>

apps/builder/src/page/App/components/ComponentPanel/componentListBuilder.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/widgetLibrary/widgetBuilder"
 
 export const DEPRECATED_WIDGETS = ["CHART", "TABLE_WIDGET"]
+export const PREMIUM_WIDGETS = ["DRIVE_PICKER_WIDGET"]
 
 export type SessionType = keyof typeof sessionTypeMapSessionNameKey
 
@@ -70,6 +71,7 @@ const translateChildren = (componentConfigs: WidgetConfig[]) => {
       widgetName,
       icon: item.icon,
       displayName,
+      isPremiumWidget: PREMIUM_WIDGETS.includes(type),
     }
     if (COMMONLY_WIDGET.has(type as string)) {
       sessionConfigs.COMMON.push(childrenConfig)

apps/builder/src/page/App/components/ComponentPanel/interface.ts

@@ -12,6 +12,7 @@ export interface WidgetCardInfo {
   widgetName: string
   widgetType: string
   icon: ReactNode
+  isPremiumWidget: boolean
 }
 
 export type ComponentSessionProps = {
@@ -29,4 +30,5 @@ export interface ComponentItemProps {
   displayName: string
   widgetType: string
   icon: ReactNode
+  isPremiumWidget: boolean
 }

apps/builder/src/page/App/components/ComponentPanel/style.tsx

@@ -1,5 +1,5 @@
 import { css } from "@emotion/react"
-import { globalColor, illaPrefix } from "@illa-design/react"
+import { getColor, globalColor, illaPrefix } from "@illa-design/react"
 
 export const componentContainerStyle = css`
   border-top: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)};
@@ -70,7 +70,8 @@ export const iconStyle = css`
   color: ${globalColor(`--${illaPrefix}-grayBlue-04`)};
   transition: background-color 200ms ease-in-out;
   padding: 8px;
-
+  position: relative;
+  overflow: hidden;
   &:hover {
     background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)};
   }
@@ -95,3 +96,15 @@ export const emptyContainerStyle = css`
   align-items: center;
   justify-content: center;
 `
+
+export const upgradeIconStyle = css`
+  position: absolute;
+  padding: 2px 8px;
+  top: 0;
+  left: 0;
+  color: ${getColor("techPurple", "03")};
+  background-color: ${getColor("techPurple", "08")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/components/SourceHeader/index.tsx

@@ -1,3 +1,4 @@
+import { useUpgradeModal } from "@illa-public/upgrade-modal"
 import { FC, useContext } from "react"
 import Folder from "@/assets/drive/panelFolder.svg?react"
 import { DriveFileSelectContext } from "@/components/DriveFileSelect"
@@ -12,13 +13,26 @@ interface SourceHeaderProps {
   labelName?: string
   labelDesc?: string
   showSelect: boolean
+  canUseDrive: boolean
 }
 const SourceHeader: FC<SourceHeaderProps> = ({
   labelName,
   labelDesc,
   showSelect,
+  canUseDrive,
 }) => {
+  const upgradeModal = useUpgradeModal()
   const { setModalVisible } = useContext(DriveFileSelectContext)
+  const handleClickSelect = () => {
+    if (canUseDrive) {
+      setModalVisible(true)
+    } else {
+      upgradeModal({
+        modalType: "upgrade",
+        from: "panel_setter_select",
+      })
+    }
+  }
   return (
     <div css={sourceHeaderContainerStyle}>
       <PanelLabel
@@ -27,12 +41,7 @@ const SourceHeader: FC<SourceHeaderProps> = ({
         labelSize="medium"
       />
       {showSelect && (
-        <div
-          css={fileSelectContainerStyle}
-          onClick={() => {
-            setModalVisible(true)
-          }}
-        >
+        <div css={fileSelectContainerStyle} onClick={handleClickSelect}>
           <span css={folderIconStyle}>
             <Folder />
           </span>

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/components/UploadInput/index.tsx

@@ -1,3 +1,4 @@
+import { useUpgradeModal } from "@illa-public/upgrade-modal"
 import { FC, useContext } from "react"
 import { FolderOperateModalContext } from "@/components/FolderOperateModal/context"
 import { FileUploadContext } from "@/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/provider/FileUploadProvider"
@@ -6,18 +7,26 @@ import { uploadContainerStyle, uploadIconStyle, uploadNameStyle } from "./style"
 
 interface UploadModeProps {
   widgetType: string
+  canUseDrive: boolean
 }
-const UploadMode: FC<UploadModeProps> = ({ widgetType }) => {
+const UploadMode: FC<UploadModeProps> = ({ widgetType, canUseDrive }) => {
   const placeholderInfo = getUploadModeInfo(widgetType)
-
+  const upgradeModal = useUpgradeModal()
   const { uploadName, isUpLoading } = useContext(FileUploadContext)
   const { setFolderOperateVisible } = useContext(FolderOperateModalContext)
+  const handleClickUpload = () => {
+    if (canUseDrive) {
+      setFolderOperateVisible(true)
+    } else {
+      upgradeModal({
+        modalType: "upgrade",
+        from: "panel_setter_upload",
+      })
+    }
+  }
 
   return (
-    <div
-      css={uploadContainerStyle(isUpLoading)}
-      onClick={() => setFolderOperateVisible(true)}
-    >
+    <div css={uploadContainerStyle(isUpLoading)} onClick={handleClickUpload}>
       <span css={uploadIconStyle}>{placeholderInfo?.icon}</span>
       <span css={uploadNameStyle}>{uploadName || placeholderInfo?.name}</span>
     </div>

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/index.tsx

@@ -1,13 +1,18 @@
+import { UpgradeIcon } from "@illa-public/icon"
+import { isSubscribeForUseDrive } from "@illa-public/upgrade-modal/utils"
+import { getCurrentTeamInfo } from "@illa-public/user-data"
 import { get } from "lodash-es"
 import { FC, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { RadioGroup } from "@illa-design/react"
+import { useSelector } from "react-redux"
+import { RadioGroup, getColor } from "@illa-design/react"
 import FilesModal, { ROOT_PATH } from "@/components/DriveFileSelect"
 import FolderOperateModal from "@/components/FolderOperateModal"
 import {
   applyRadioGroupWrapperStyle,
   baseRadioGroupContainerStyle,
   radioGroupStyle,
+  uploadButtonStyle,
 } from "@/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/style"
 import SourceHeader from "./components/SourceHeader"
 import URLModeInput from "./components/URLModeInput"
@@ -31,14 +36,21 @@ const DriveSourceGroupSetter: FC<DriveSourceGroupSetterProps> = (props) => {
   } = props
 
   const { t } = useTranslation()
+  const teamInfo = useSelector(getCurrentTeamInfo)!
+  const canUseDrive = isSubscribeForUseDrive(teamInfo)
 
   const options = [
     {
       label: t("widget.public.select_options.url"),
       value: DRIVE_SOURCE_MODE.URL,
     },
     {
-      label: t("widget.public.select_options.upload"),
+      label: (
+        <span css={uploadButtonStyle}>
+          {!canUseDrive && <UpgradeIcon color={getColor("techPurple", "03")} />}
+          <span>{t("widget.public.select_options.upload")}</span>
+        </span>
+      ),
       value: DRIVE_SOURCE_MODE.UPLOAD,
     },
   ]
@@ -93,6 +105,7 @@ const DriveSourceGroupSetter: FC<DriveSourceGroupSetterProps> = (props) => {
             labelDesc={labelDesc}
             labelName={labelName}
             showSelect={selectMode === DRIVE_SOURCE_MODE.URL}
+            canUseDrive={canUseDrive}
           />
           <div css={applyRadioGroupWrapperStyle(isSetterSingleRow)}>
             <RadioGroup
@@ -115,7 +128,7 @@ const DriveSourceGroupSetter: FC<DriveSourceGroupSetterProps> = (props) => {
               />
             )}
             {selectMode === DRIVE_SOURCE_MODE.UPLOAD && (
-              <UploadMode widgetType={widgetType} />
+              <UploadMode widgetType={widgetType} canUseDrive={canUseDrive} />
             )}
           </div>
         </div>

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DriveSourceGroupSetter/style.ts

@@ -41,3 +41,11 @@ export const baseRadioGroupContainerStyle = (
     width: 100%;
   `
 }
+
+export const uploadButtonStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 4px;
+`