Merge pull request #436 from illa-family/develop

Develop
illacloud · Nov 3, 2022 · 7699154 · 7699154
2 parents 41e1cb5 + 70efaa0
commit 7699154
Show file tree

Hide file tree

Showing 49 changed files with 290 additions and 145 deletions.
diff --git a/apps/builder/.env.cloud b/apps/builder/.env.cloud
@@ -1,3 +1,4 @@
 VITE_API_BASE_URL=http://localhost:9999/api/v1
+VITE_SENTRY_ENV=prod
 VITE_INSTANCE_ID=CLOUD
 NODE_ENV=production
diff --git a/apps/builder/.env.self b/apps/builder/.env.self
@@ -1,2 +1,3 @@
-VITE_API_BASE_URL=http://127.0.0.1/api/v1
-VITE_INSTANCE_ID=SELF_HOST
+VITE_API_BASE_URL=http://localhost:9999/api/v1
+VITE_INSTANCE_ID=SELF_HOST
+NODE_ENV=production
diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -61,7 +61,9 @@
     "remark-gfm": "^3.0.1",
     "tern": "^0.24.3",
     "toposort": "^2.0.2",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "@sentry/react": "^7.17.3",
+    "@sentry/tracing": "^7.17.3"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.2",

diff --git a/apps/builder/src/env.d.ts b/apps/builder/src/env.d.ts
@@ -1,6 +1,7 @@
 interface ImportMetaEnv {
   readonly VITE_API_BASE_URL: string
   readonly VITE_INSTANCE_ID: string
+  readonly VITE_SENTRY_ENV: string
 }
 
 interface ImportMeta {

diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json
@@ -553,7 +553,7 @@
         "overFlow": "OverFlow",
         "pattern": "Pattern",
         "pending": "Pending",
-        "pageSize": "Rows per page",
+        "pageSize": "PageSize",
         "placeholder": "Placeholder",
         "prefix_text": "Prefix text",
         "radius": "Radius",
@@ -608,26 +608,27 @@
         "action": "Your actions to components trigger queries, control components, or call the data in your resources. Multiple async actions will be executed in parallel.",
         "component_default_value": "The initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.",
         "custom_rule": "Create your validation logic here. The rules should be made in JavaScript and covered by {{}}.",
-        "date_format": "A valid date format string. See [dayJS](https://day.js.org/docs/en/parse/string-format)",
+        "date_format": "A valid date format string. See [dayJS](https://day.js.org/docs/en/parse/string-format).",
         "default_value": "The initial value of the input box. You can dynamically change the initial value of the input field by typing JavaScript in {{}}.",
         "disabled": "Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.",
         "disabled_submit": "When disabled, the components that call the form.submit() method will also be disabled.",
-        "download": "Show download button in toolbar",
-        "filter": "Show filter button in toolbar",
+        "download": "Show download button in toolbar.",
+        "filter": "Show filter button in toolbar.",
         "form_data_key": "Specify a key of a wrapping form component when constructing the data attribute.",
         "hidden": "Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.",
         "hide_validation_message": "You can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.",
         "input_default_value": "The initial value of the input box. You can dynamically change the initial value of the input field by typing JavaScript in {{}}.",
         "loading": "Whether the component should show a loading indicator.",
-        "map_data_option": "Use either an array of values or an object of keys mapped to arrays. Each item in your data source is mapped to each option",
-        "only_run_when": "Conditions that must be met before the event executes",
+        "map_data_option": "Use either an array of values or an object of keys mapped to arrays. Each item in your data source is mapped to each option.",
+        "only_run_when": "Conditions that must be met before the event executes.",
         "placeholder": "The value will be shown when the input field is empty.",
-        "progress_percentage": "The percentage value is between 0 and 100",
-        "read_only": "Control the status of whether the component is read only. A read only component can be selected and focused but cannont be modified.",
+        "progress_percentage": "The percentage value is between 0 and 100.",
+        "read_only": "Control the status of whether the component is read only. A read only component can be selected and focused but cannot be modified.",
         "required_field": "Valid only when the switch is on.",
         "switch_default_value": "Set the initial status of the switch. You can dynamically change the default value by JavaScript.",
-        "text_value": "You can choose to enter value either in Markdown mode or Plain text mode. Only links in markdown mode can be recognized",
+        "text_value": "You can choose to enter value either in Markdown mode or Plain text mode. Only links in markdown mode can be recognized.",
         "timeline_direction": "Change the direction of the timeline.",
+        "timeline_pending": "Whether to show a node with a pending status.",
         "tooltip": "User can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported."
       },
       "tab_title": "Inspect",
@@ -931,7 +932,9 @@
       "text_model": "Plain text"
     },
     "timeline": {
-      "name": "Timeline"
+      "name": "Timeline",
+      "vertical": "vertical",
+      "horizontal": "horizontal"
     }
   }
 }
diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json
@@ -552,7 +552,7 @@
         "only_run_when": "先决条件",
         "overFlow": "翻页方式",
         "pattern": "模式",
-        "pending": "等待",
+        "pending": "待处理节点",
         "pageSize": "每页行数",
         "placeholder": "占位符",
         "prefix_text": "前缀文本",
@@ -612,22 +612,23 @@
         "default_value": "输入框的默认值。您可以使用模版语法在框中输入JavaScript语句动态改变输入框的默认值。",
         "disabled": "控制组件是否为禁用状态。当组件为禁用状态时，组件不能被修改。",
         "disabled_submit": "禁用提交时，调用form.submit()方法的组件也会被禁用。",
-        "download": "在工具栏显示下载按钮",
-        "filter": "在工具栏显示筛选按钮",
+        "download": "在工具栏显示下载按钮。",
+        "filter": "在工具栏显示筛选按钮。",
         "form_data_key": "在构建数据属性时，指定一个包装表单组件的键。",
-        "hidden": "动态控制组件是否为隐藏状态。您可以在此处输入动态改变的Boolean值改变组件的隐藏状态",
+        "hidden": "动态控制组件是否为隐藏状态。您可以在此处输入动态改变的Boolean值改变组件的隐藏状态。",
         "hide_validation_message": "当验证输入有误时隐藏错误信息。您可以通过编写 JavaScript 对是否隐藏进行动态修改。",
         "input_default_value": "输入框的默认值。您可以使用模版语法在框中输入 JavaScript 语句动态改变输入框的默认值。",
         "loading": "控制组件是否为加载状态。",
-        "map_data_option": "使用数值或由键值组成的对象映射成选项。数据源中的每个项都映射到每个选项",
-        "only_run_when": "在此输入该事件执行前必须满足的条件",
+        "map_data_option": "使用数值或由键值组成的对象映射成选项。数据源中的每个项都映射到每个选项。",
+        "only_run_when": "在此输入该事件执行前必须满足的条件。",
         "placeholder": "当输入中没有值时，展示的信息。",
-        "progress_percentage": "进度条的数值范围为 0-100",
+        "progress_percentage": "进度条的数值范围为 0-100。",
         "read_only": "控制组件是否为只读状态。只读组件的内容可以被选中和聚焦，但不能被修改。",
         "required_field": "在开关开启后对输入框执行验证。",
         "switch_default_value": "设置开关的初始状态。您可以通过 JavaScript 动态改变开关的初始状态。",
         "text_value": "您可以选择在 Markdown 模式或纯文本模式下输入值。只有在 Markdown 模式下可以输入链接。",
-        "timeline_direction": "切换时间轴的方向",
+        "timeline_direction": "切换时间轴的方向。",
+        "timeline_pending": "是否显示一个待处理状态的节点。",
         "tooltip": "用户可以在输入框输入提示内容，当鼠标放在组件上，展示提示信息，支持Markdown格式。"
       },
       "tab_title": "属性",
@@ -931,7 +932,9 @@
       "text_model": "纯文本"
     },
     "timeline": {
-      "name": "时间线"
+      "name": "时间线",
+      "vertical": "纵向",
+      "horizontal": "横向"
     }
   }
 }
diff --git a/apps/builder/src/main.tsx b/apps/builder/src/main.tsx
@@ -6,6 +6,18 @@ import store from "./store"
 import "@/i18n/config"
 import "@/utils/dayjs"
 
+import * as Sentry from "@sentry/react"
+import { BrowserTracing } from "@sentry/tracing"
+
+if (import.meta.env.VITE_INSTANCE_ID === "CLOUD") {
+  Sentry.init({
+    dsn: "http://[email protected]/1",
+    integrations: [new BrowserTracing()],
+    environment: import.meta.env.VITE_SENTRY_ENV,
+    tracesSampleRate: 1.0,
+  })
+}
+
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>

diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/index.tsx
@@ -64,8 +64,9 @@ export const ActionResult: FC<ActionResultProps> = (props) => {
                 setDragMaxHeight(ele?.scrollHeight + 40)
               }
               if (placeholderRef?.current && ele?.clientHeight) {
-                placeholderRef.current.style.paddingBottom = `${ele?.clientHeight +
-                  48}px`
+                placeholderRef.current.style.paddingBottom = `${
+                  ele?.clientHeight + 48
+                }px`
               }
             }}
             mode={"JSON"}

diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx
@@ -1,7 +1,8 @@
-import { FC, useState } from "react"
+import { FC, useContext, useState } from "react"
 import {
   createNewStyle,
   itemContainer,
+  itemLogo,
   itemText,
   resourceChooseContainerStyle,
   resourceTitleStyle,
@@ -28,6 +29,7 @@ import {
   getCachedAction,
   getSelectedAction,
 } from "@/redux/config/configSelector"
+import { ActionPanelContext } from "@/page/App/components/Actions/ActionPanel/actionPanelContext"
 
 export const ResourceChoose: FC = () => {
   const { t } = useTranslation()
@@ -40,6 +42,8 @@ export const ResourceChoose: FC = () => {
   const action = useSelector(getCachedAction)!!
   const selectedAction = useSelector(getSelectedAction)!!
 
+  const { onChangeSelectedResource } = useContext(ActionPanelContext)
+
   //maybe empty
   const currentSelectResource = resourceList.find(
     (r) => r.resourceId === action.resourceId,
@@ -74,6 +78,7 @@ export const ResourceChoose: FC = () => {
                         : getInitialContent(resource.resourceType),
                   }),
                 )
+                onChangeSelectedResource?.()
               }
             }}
             addonAfter={{
@@ -110,7 +115,9 @@ export const ResourceChoose: FC = () => {
               return (
                 <Option value={item.resourceId} key={item.resourceId}>
                   <div css={itemContainer}>
-                    {getIconFromResourceType(item.resourceType, "14px")}
+                    <span css={itemLogo}>
+                      {getIconFromResourceType(item.resourceType, "14px")}
+                    </span>
                     <span css={itemText}>{item.resourceName}</span>
                   </div>
                 </Option>

diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts
@@ -27,6 +27,10 @@ export const itemContainer = css`
   align-items: center;
 `
 
+export const itemLogo = css`
+  flex-shrink: 0;
+`
+
 export const itemText = css`
   margin-left: 8px;
   flex-shrink: 1;

diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/actionPanelContext.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/actionPanelContext.tsx
@@ -0,0 +1,6 @@
+import { createContext } from "react"
+import { ActionPanelContextProps } from "@/page/App/components/Actions/ActionPanel/interface"
+
+export const ActionPanelContext = createContext<ActionPanelContextProps>({})
+
+ActionPanelContext.displayName = "ActionPanelContext"
diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/index.tsx
@@ -14,6 +14,7 @@ import { ActionResultType } from "@/page/App/components/Actions/ActionPanel/Acti
 import { RedisPanel } from "@/page/App/components/Actions/ActionPanel/RedisPanel"
 import { MongoDbPanel } from "@/page/App/components/Actions/ActionPanel/MongoDbPanel"
 import { ActionPanelContainerProps } from "@/page/App/components/Actions/ActionPanel/interface"
+import { ActionPanelContext } from "@/page/App/components/Actions/ActionPanel/actionPanelContext"
 
 export const ActionPanel: FC<ActionPanelContainerProps> = (props) => {
   const { maxHeight } = props
@@ -46,27 +47,35 @@ export const ActionPanel: FC<ActionPanelContainerProps> = (props) => {
     }
   }, [cachedAction])
 
+  const clearActionResult = () => {
+    setActionResult(undefined)
+    if (contentRef.current) {
+      contentRef.current.style.paddingBottom = "48px"
+    }
+  }
+
   if (cachedAction === null || cachedAction === undefined) {
     return <></>
   }
 
   return (
     <div css={actionPanelStyle} ref={panelRef}>
-      <ActionTitleBar onActionRun={run} />
-      <div ref={contentRef} css={actionContentStyle}>
-        {panel}
-      </div>
-      <ActionResult
-        result={actionResult}
-        onClose={() => {
-          setActionResult(undefined)
-          if (contentRef.current) {
-            contentRef.current.style.paddingBottom = "48px"
-          }
+      <ActionPanelContext.Provider
+        value={{
+          onChangeSelectedResource: clearActionResult,
         }}
-        maxHeight={maxHeight}
-        placeholderRef={contentRef}
-      />
+      >
+        <ActionTitleBar onActionRun={run} />
+        <div ref={contentRef} css={actionContentStyle}>
+          {panel}
+        </div>
+        <ActionResult
+          result={actionResult}
+          onClose={clearActionResult}
+          maxHeight={maxHeight}
+          placeholderRef={contentRef}
+        />
+      </ActionPanelContext.Provider>
     </div>
   )
 }

diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/interface.ts b/apps/builder/src/page/App/components/Actions/ActionPanel/interface.ts
@@ -1,3 +1,7 @@
 export interface ActionPanelContainerProps {
   maxHeight?: number
 }
+
+export interface ActionPanelContextProps {
+  onChangeSelectedResource?: () => void
+}
diff --git a/apps/builder/src/page/App/components/Actions/api.ts b/apps/builder/src/page/App/components/Actions/api.ts
@@ -1,6 +1,5 @@
 import {
   ActionContent,
-  ActionEvents,
   ActionItem,
 } from "@/redux/currentApp/action/actionState"
 import { omit } from "@illa-design/system"
@@ -19,15 +18,13 @@ function getBaseActionUrl() {
   return `/apps/${appId}/actions`
 }
 
-export function onCopyActionItem(
-  action: ActionItem<ActionContent, ActionEvents>,
-) {
+export function onCopyActionItem(action: ActionItem<ActionContent>) {
   const baseActionUrl = getBaseActionUrl()
   const newAction = omit(action, ["displayName", "actionId"])
   const displayName = DisplayNameGenerator.generateDisplayName(
     action.actionType,
   )
-  const data: Partial<ActionItem<ActionContent, ActionEvents>> = {
+  const data: Partial<ActionItem<ActionContent>> = {
     ...newAction,
     displayName,
   }
@@ -37,7 +34,7 @@ export function onCopyActionItem(
       method: "POST",
       data,
     },
-    ({ data }: { data: ActionItem<ActionContent, ActionEvents> }) => {
+    ({ data }: { data: ActionItem<ActionContent> }) => {
       Message.success(
         i18n.t("editor.action.action_list.message.success_created"),
       )
@@ -55,9 +52,7 @@ export function onCopyActionItem(
   )
 }
 
-export function onDeleteActionItem(
-  action: ActionItem<ActionContent, ActionEvents>,
-) {
+export function onDeleteActionItem(action: ActionItem<ActionContent>) {
   const baseActionUrl = getBaseActionUrl()
   const { actionId, displayName } = action
 
@@ -66,7 +61,7 @@ export function onDeleteActionItem(
       url: `${baseActionUrl}/${actionId}`,
       method: "DELETE",
     },
-    ({ data }: { data: ActionItem<ActionContent, ActionEvents> }) => {
+    ({ data }: { data: ActionItem<ActionContent> }) => {
       DisplayNameGenerator.removeDisplayName(displayName)
       store.dispatch(actionActions.removeActionItemReducer(displayName))
       Message.success(

diff --git a/apps/builder/src/page/App/components/Actions/index.tsx b/apps/builder/src/page/App/components/Actions/index.tsx
@@ -9,14 +9,19 @@ import { FocusManager } from "@/utils/focusManager"
 const ActionEditorDefaultHeight = 300
 
 export const ActionEditor: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-  const panelRef = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
   const [maxHeight, setMaxHeight] = useState<number>()
 
   return (
     <div
       className={props.className}
       css={applyActionEditorStyle(ActionEditorDefaultHeight)}
-      ref={panelRef}
+      ref={(ele) => {
+        panelRef.current = ele
+        if (ele?.offsetHeight) {
+          setMaxHeight(ele?.offsetHeight - 100)
+        }
+      }}
       onClick={() => {
         FocusManager.switchFocus("action")
       }}

diff --git a/apps/builder/src/page/App/components/DotPanel/renderComponentCanvas.tsx b/apps/builder/src/page/App/components/DotPanel/renderComponentCanvas.tsx
@@ -222,9 +222,6 @@ export const RenderComponentCanvas: FC<{
           ) {
             const finalNumber = landingY / UNIT_HEIGHT + item.h + safeRowNumber
             setRowNumber(finalNumber)
-            containerRef.current?.scrollTo({
-              top: bounds.height,
-            })
           }
 
           let childrenNodes = dragInfo.childrenNodes.filter(

diff --git a/apps/builder/src/page/Deploy/index.tsx b/apps/builder/src/page/Deploy/index.tsx
@@ -10,8 +10,6 @@ import { useInitBuilderApp } from "@/hooks/useInitApp"
 import { Unsubscribe } from "@reduxjs/toolkit"
 import { startAppListening } from "@/store"
 import { setupExecutionListeners } from "@/redux/currentApp/executionTree/executionListener"
-import { Button } from "@illa-design/button"
-import { globalColor, illaPrefix } from "@illa-design/theme"
 import { ReactComponent as Logo } from "@/assets/illa-logo.svg"
 
 export const Deploy: FC = () => {