Merge branch 'improve/improve_left_bar' into develop

apps/builder/src/config/template/interface.ts

@@ -1,8 +1,9 @@
+import { ResourceType } from "@illa-public/public-types"
 import {
  ActionContent,
  ActionItem,
 } from "@/redux/currentApp/action/actionState"
-import { ResourceContent, ResourceType } from "@/redux/resource/resourceState"
+import { ResourceContent } from "@/redux/resource/resourceState"
 
 export type TemplateResources = {
  resourceName: string

apps/builder/src/page/App/Module/DataWorkspace/components/BaseDataItem/index.tsx

@@ -1,8 +1,7 @@
 import { getIconFromWidgetType } from "@illa-public/icon"
 import { AnimatePresence, motion } from "framer-motion"
 import { FC, useContext, useState } from "react"
-import { CaretRightIcon, getColor } from "@illa-design/react"
-import { ReactComponent as LocateIcon } from "@/assets/dataWorkspace/locate.svg"
+import { CaretRightIcon } from "@illa-design/react"
 import { ReactComponent as StateIcon } from "@/assets/dataWorkspace/state.svg"
 import IconHotSpot from "@/components/IconHotSpot"
 import { MovableModal } from "@/components/Modal/movableModal"
@@ -30,11 +29,9 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  type,
  level,
  canExpand,
- canFocused,
  haveMoreAction,
  value,
  onClick,
- onFocus,
  dataType,
  selectedDisplayNames,
  } = props
@@ -48,10 +45,7 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
 
  const handleClickOnContainer = () => {
  onClick?.(title, type ?? "")
- }
-
- const handleOnFocus = () => {
- onFocus?.(title)
+ handleUpdateExpandedWidget(title, isExpanded)
  }
 
  const handleClickOnExpandIcon = (e: React.MouseEvent) => {
@@ -81,14 +75,6 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  </div>
  </div>
  <div css={iconContainerStyle} id="action-bar">
- {canFocused && (
- <IconHotSpot
- inactiveColor={getColor("grayBlue", "02")}
- onClick={handleOnFocus}
- >
- <LocateIcon />
- </IconHotSpot>
- )}
  <IconHotSpot onClick={() => setIsOpenCodeModal(true)}>
  <StateIcon />
  </IconHotSpot>
@@ -119,7 +105,6 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  type={item.$widgetType as string}
  canExpand={item.$childrenNode.length > 0}
  haveMoreAction={item.$widgetType.endsWith("_WIDGET")}
- canFocused={item.$widgetType.endsWith("_WIDGET")}
  selectedDisplayNames={selectedDisplayNames}
  onClick={onClick}
  />

apps/builder/src/page/App/Module/DataWorkspace/components/BaseDataItem/interface.ts

@@ -3,11 +3,9 @@ export interface BaseDataItemProps {
  title: string
  type?: string
  canExpand?: boolean
- canFocused?: boolean
  haveMoreAction?: boolean
  value: Record<string, unknown>
  selectedDisplayNames?: string[]
  onClick?: (displayName: string, type: string) => void
  dataType: "globalData" | "action" | "widget"
- onFocus?: (displayName: string) => void
 }

apps/builder/src/page/App/Module/DataWorkspace/components/ComponentSpaceTree/index.tsx

@@ -32,7 +32,14 @@ export const ComponentSpaceTree: FC = () => {
  const modalSectionTree = useSelector(getCurrentPageModalWidgetTree)
  const selectedComponent = useSelector(getSelectedComponentDisplayNames)
 
- const handleOnClick = useCallback(
+ const baseClickHandler = useCallback(
+ (displayName: string) => {
+ dispatch(configActions.updateSelectedComponent([displayName]))
+ },
+ [dispatch],
+ )
+
+ const handleClickOnModalSection = useCallback(
  (displayName: string, type: string) => {
  if (!type.endsWith("_WIDGET")) return
  if (type === "MODAL_WIDGET") {
@@ -43,17 +50,50 @@ export const ComponentSpaceTree: FC = () => {
  }),
  )
  }
- dispatch(configActions.updateSelectedComponent([displayName]))
+ baseClickHandler(displayName)
  },
- [dispatch],
+ [baseClickHandler, dispatch],
+ )
+
+ const handleClickOnHeaderSection = useCallback(
+ (displayName: string, type: string) => {
+ if (!type.endsWith("_WIDGET")) return
+ baseClickHandler(displayName)
+ },
+ [baseClickHandler],
  )
 
- const handleOnFocus = useCallback((displayName: string) => {
- const dom = document.querySelector(`#${displayName}`)
- if (dom) {
- dom.scrollIntoView({ behavior: "smooth" })
- }
- }, [])
+ const handleClickOnBodySection = useCallback(
+ (displayName: string, type: string) => {
+ if (!type.endsWith("_WIDGET")) return
+ baseClickHandler(displayName)
+ },
+ [baseClickHandler],
+ )
+
+ const handleClickOnLeftSection = useCallback(
+ (displayName: string, type: string) => {
+ if (!type.endsWith("_WIDGET")) return
+ baseClickHandler(displayName)
+ },
+ [baseClickHandler],
+ )
+
+ const handleClickOnRightSection = useCallback(
+ (displayName: string, type: string) => {
+ if (!type.endsWith("_WIDGET")) return
+ baseClickHandler(displayName)
+ },
+ [baseClickHandler],
+ )
+
+ const handleClickOnFooterSection = useCallback(
+ (displayName: string, type: string) => {
+ if (!type.endsWith("_WIDGET")) return
+ baseClickHandler(displayName)
+ },
+ [baseClickHandler],
+ )
 
  return (
  <PanelBar
@@ -64,25 +104,42 @@ export const ComponentSpaceTree: FC = () => {
  destroyChildrenWhenClose
  >
  <BaseDataItemContextProvider>
+ <WorkSpaceTreeGroup title="Body">
+ {bodySectionTree.map((tree) => (
+ <BaseDataItem
+ key={tree.displayName}
+ title={tree.displayName}
+ value={tree}
+ level={0}
+ dataType="widget"
+ type={tree.$widgetType as string}
+ canExpand={tree.$childrenNode.length > 0}
+ haveMoreAction
+ onClick={handleClickOnBodySection}
+ selectedDisplayNames={selectedComponent}
+ />
+ ))}
+ </WorkSpaceTreeGroup>
  {modalSectionTree.length > 0 && (
- <WorkSpaceTreeGroup title="Modal">
- {modalSectionTree.map((tree) => (
- <BaseDataItem
- key={tree.displayName}
- title={tree.displayName}
- value={tree}
- level={0}
- dataType="widget"
- type={tree.$widgetType as string}
- canExpand
- haveMoreAction
- canFocused
- onClick={handleOnClick}
- selectedDisplayNames={selectedComponent}
- onFocus={handleOnFocus}
- />
- ))}
- </WorkSpaceTreeGroup>
+ <>
+ <Divider css={dividerStyle} />
+ <WorkSpaceTreeGroup title="Modal">
+ {modalSectionTree.map((tree) => (
+ <BaseDataItem
+ key={tree.displayName}
+ title={tree.displayName}
+ value={tree}
+ level={0}
+ dataType="widget"
+ type={tree.$widgetType as string}
+ canExpand
+ haveMoreAction
+ onClick={handleClickOnModalSection}
+ selectedDisplayNames={selectedComponent}
+ />
+ ))}
+ </WorkSpaceTreeGroup>
+ </>
  )}
  {headerSectionTree.length > 0 && (
  <>
@@ -97,36 +154,14 @@ export const ComponentSpaceTree: FC = () => {
  dataType="widget"
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
- canFocused
- onClick={handleOnClick}
+ onClick={handleClickOnHeaderSection}
  selectedDisplayNames={selectedComponent}
- onFocus={handleOnFocus}
  />
  ))}
  </WorkSpaceTreeGroup>
  </>
  )}
 
- <Divider css={dividerStyle} />
- <WorkSpaceTreeGroup title="Body">
- {bodySectionTree.map((tree) => (
- <BaseDataItem
- key={tree.displayName}
- title={tree.displayName}
- value={tree}
- level={0}
- dataType="widget"
- type={tree.$widgetType as string}
- canExpand={tree.$childrenNode.length > 0}
- haveMoreAction
- canFocused
- onClick={handleOnClick}
- selectedDisplayNames={selectedComponent}
- onFocus={handleOnFocus}
- />
- ))}
- </WorkSpaceTreeGroup>
-
  {leftSectionTree.length > 0 && (
  <>
  <Divider css={dividerStyle} />
@@ -141,10 +176,8 @@ export const ComponentSpaceTree: FC = () => {
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
  haveMoreAction
- canFocused
- onClick={handleOnClick}
+ onClick={handleClickOnLeftSection}
  selectedDisplayNames={selectedComponent}
- onFocus={handleOnFocus}
  />
  ))}
  </WorkSpaceTreeGroup>
@@ -165,10 +198,8 @@ export const ComponentSpaceTree: FC = () => {
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
  haveMoreAction
- canFocused
- onClick={handleOnClick}
+ onClick={handleClickOnRightSection}
  selectedDisplayNames={selectedComponent}
- onFocus={handleOnFocus}
  />
  ))}
  </WorkSpaceTreeGroup>
@@ -190,10 +221,8 @@ export const ComponentSpaceTree: FC = () => {
  type={tree.$widgetType as string}
  canExpand={tree.$childrenNode.length > 0}
  haveMoreAction
- canFocused
- onClick={handleOnClick}
+ onClick={handleClickOnFooterSection}
  selectedDisplayNames={selectedComponent}
- onFocus={handleOnFocus}
  />
  ))}
  </WorkSpaceTreeGroup>

apps/builder/src/page/App/components/Actions/ActionGenerator/ActionCard/index.tsx

@@ -1,9 +1,9 @@
 import { getIconFromResourceType } from "@illa-public/icon"
-import { FC, Suspense, useCallback } from "react"
 import {
- getActionNameFromActionType,
- getActionSubTitleFromActionType,
-} from "@/utils/actionResourceTransformer"
+ getResourceNameFromResourceType,
+ useResourceTypeToResourceName,
+} from "@illa-public/resource-generator"
+import { FC, Suspense, useCallback } from "react"
 import AIAgentCard from "./components/AIAgentCard"
 import { ActionTypeSelectorCardProps } from "./interface"
 import {
@@ -16,7 +16,7 @@ import {
 export const ActionCard: FC<ActionTypeSelectorCardProps> = (props) => {
  const { actionType, onSelect } = props
 
- const subTitle = getActionSubTitleFromActionType(actionType)
+ const subTitle = useResourceTypeToResourceName(actionType)
 
  const onClickCard = useCallback(() => {
  onSelect?.(actionType)
@@ -30,7 +30,7 @@ export const ActionCard: FC<ActionTypeSelectorCardProps> = (props) => {
  <div css={applyItemStyle} onClick={onClickCard}>
  <Suspense> {getIconFromResourceType(actionType, "24px")}</Suspense>
  <div css={titleContainerStyle}>
- <div css={nameStyle}>{getActionNameFromActionType(actionType)}</div>
+ <div css={nameStyle}>{getResourceNameFromResourceType(actionType)}</div>
  {subTitle !== "" && <div css={subTitleStyle}>{subTitle}</div>}
  </div>
  </div>

apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceSelector/interface.ts

@@ -1,6 +1,6 @@
+import { ResourceType } from "@illa-public/public-types"
 import { ActionCreatorPage } from "@/page/App/components/Actions/ActionGenerator/interface"
 import { ActionType } from "@/redux/currentApp/action/actionState"
-import { ResourceType } from "@/redux/resource/resourceState"
 
 export interface ActionResourceSelectorProps {
  actionType: ActionType

apps/builder/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/index.tsx

@@ -2,10 +2,10 @@ import {
  ILLA_MIXPANEL_BUILDER_PAGE_NAME,
  ILLA_MIXPANEL_EVENT_TYPE,
 } from "@illa-public/mixpanel-utils"
+import { ResourceTypeList } from "@illa-public/resource-generator"
 import { FC } from "react"
 import { Spin } from "@illa-design/react"
 import { WhiteList } from "@/components/WhiteList"
-import { ActionTypeList } from "@/page/App/components/Actions/ActionGenerator/config"
 import { track } from "@/utils/mixpanelHelper"
 import { ActionCard } from "../ActionCard"
 import { ActionTypeSelectorProps } from "./interface"
@@ -16,7 +16,7 @@ export const ActionTypeSelector: FC<ActionTypeSelectorProps> = (props) => {
 
  return (
  <Spin css={containerStyle} colorScheme="techPurple" loading={false}>
- {ActionTypeList.map(({ title, item, category }) => (
+ {ResourceTypeList.map(({ title, item, category }) => (
  <div key={category}>
  <span css={categoryStyle}>{title}</span>
  <div css={resourceListStyle}>