Fix: resource bugs

apps/builder/package.json

@@ -5,7 +5,7 @@
  "private": true,
  "author": "ILLA Cloud <[email protected]>",
  "license": "Apache-2.0",
- "version": "3.2.2",
+ "version": "3.2.3",
  "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/ResourceGenerator/ConfigElements/ActionButtons/TestConnectButton/utils.ts

@@ -1,7 +1,6 @@
 import { ResourceType } from "@illa-public/public-types"
 import { FieldValues } from "react-hook-form"
 import { generateGraphQLAuthContent } from "@/page/App/components/Actions/api"
-import { neonSSLInitialValue } from "@/redux/resource/neonResource"
 import { generateSSLConfig } from "@/redux/resource/resourceState"
 import { DATABASE_INDEX, DEFAULT_NAME } from "@/redux/resource/upstashResource"
 
@@ -23,7 +22,7 @@ export const formatTestConnectValues = (
  host: data.host.trim(),
  port: +data.port,
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  databaseName: data.databaseName,
  ssl: generateSSLConfig(data.ssl, data, "clickhouse"),
  }
@@ -46,7 +45,7 @@ export const formatTestConnectValues = (
  host: data.host.trim(),
  port: data.port.toString(),
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  }
  }
  case "firebase": {
@@ -73,7 +72,7 @@ export const formatTestConnectValues = (
  port: data.port.toString(),
  databaseName: data.databaseName,
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  connectionOpts: data.connectionOpts,
  ssl: generateSSLConfig(data.ssl, data, "mssql"),
  }
@@ -97,7 +96,7 @@ export const formatTestConnectValues = (
  connectionFormat: data.connectionFormat,
  databaseName: data.databaseName,
  databaseUsername: data.databaseUsername,
- databasePassword: data.databasePassword,
+ databasePassword: encodeURIComponent(data.databasePassword),
  }
  : { uri: data.uri.trim() },
  }
@@ -107,33 +106,25 @@ export const formatTestConnectValues = (
  case "mariadb":
  case "mysql":
  case "hydra":
+ case "neon":
  case "postgresql": {
  return {
  host: data.host.trim(),
  port: data.port.toString(),
  databaseName: data.databaseName,
  databaseUsername: data.databaseUsername,
- databasePassword: data.databasePassword,
+ databasePassword: encodeURIComponent(data.databasePassword),
  ssl: generateSSLConfig(data.ssl, data),
  }
  }
- case "neon": {
- return {
- host: data.host.trim(),
- port: data.port.toString(),
- databaseName: data.databaseName,
- databaseUsername: data.databaseUsername,
- databasePassword: data.databasePassword,
- ssl: neonSSLInitialValue,
- }
- }
+ case "upstash":
  case "redis": {
  return {
  host: data.host.trim(),
  port: data.port.toString(),
  databaseIndex: DATABASE_INDEX,
  databaseUsername: DEFAULT_NAME,
- databasePassword: data.databasePassword,
+ databasePassword: encodeURIComponent(data.databasePassword),
  ssl: data.ssl,
  }
  }
@@ -158,7 +149,7 @@ export const formatTestConnectValues = (
  host: data.host.trim(),
  port: +data.port,
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  }
  }
  case "snowflake": {
@@ -173,7 +164,7 @@ export const formatTestConnectValues = (
  data.authentication === "basic"
  ? {
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  }
  : {
  username: data.username,

apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/MysqlLikeConfigElement/index.tsx

@@ -1,19 +1,21 @@
 import { TextLink } from "@illa-public/text-link"
 import { isCloudVersion } from "@illa-public/utils"
 import { FC, useMemo } from "react"
-import { useFormContext } from "react-hook-form"
+import { Controller, useFormContext } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
 import { useSelector } from "react-redux"
 import {
  Alert,
  Button,
  ButtonGroup,
  Divider,
+ Input,
  PreviousIcon,
  getColor,
 } from "@illa-design/react"
 import {
  applyConfigItemLabelText,
+ configItem,
  configItemTip,
  connectType,
  connectTypeStyle,
@@ -23,6 +25,7 @@ import {
  optionLabelStyle,
 } from "@/page/App/components/Actions/styles"
 import { ControlledElement } from "@/page/App/components/ControlledElement"
+import { hostInputContainer } from "@/page/App/components/ControlledElement/style"
 import {
  MysqlLikeResource,
  tiDBServertCertDefaultValue,
@@ -52,11 +55,52 @@ const getResourceDefaultPort = (resourceType: string) => {
  }
 }
 
+function getPortFromConnectionString(scheme: string): string {
+ switch (scheme) {
+ case "postgres":
+ return "5432"
+ case "mysql":
+ return "3306"
+ default:
+ return ""
+ }
+}
+
+const checkIsValidConnectionString = (connectionString: string) => {
+ const pattern = /^(mysql|postgres):\/\/([^:]+):([^@]+)@([^/]+)\/(.+)$/
+ return pattern.test(connectionString)
+}
+
+function parseDatabaseConnectionString(
+ connectionString: string,
+): Omit<MysqlLikeResource, "ssl"> | undefined {
+ const regex = /^(mysql|postgres):\/\/([^:]+):([^@]+)@([^/]+)\/(.+)$/
+ const match = connectionString.match(regex)
+
+ if (match) {
+ const databaseType = match[1]
+ const databaseUsername = match[2]
+ const databasePassword = match[3]
+ const host = match[4]
+ const databaseName = match[5]
+
+ return {
+ databaseUsername,
+ databasePassword,
+ host,
+ port: getPortFromConnectionString(databaseType),
+ databaseName,
+ }
+ } else {
+ return undefined // 无法解析的连接字符串
+ }
+}
+
 const MysqlLikeConfigElement: FC<MysqlLikeConfigElementProps> = (props) => {
  const { onBack, resourceType, resourceID, hasFooter = true } = props
 
  const { t } = useTranslation()
- const { control, watch } = useFormContext()
+ const { control, setValue, watch } = useFormContext()
 
  const resource = useSelector((state: RootState) => {
  return state.resource.find(
@@ -137,6 +181,53 @@ const MysqlLikeConfigElement: FC<MysqlLikeConfigElementProps> = (props) => {
  <div css={optionLabelStyle}>
  {t("editor.action.resource.db.title.general_option")}
  </div>
+ <Controller
+ control={control}
+ defaultValue=""
+ rules={{
+ required: false,
+ }}
+ render={({ field: { value, onChange, onBlur } }) => (
+ <div css={configItem}>
+ <div css={labelContainer}>
+ <span
+ css={applyConfigItemLabelText(getColor("grayBlue", "02"))}
+ >
+ {t("editor.action.form.option.neon.connection_string")}
+ </span>
+ </div>
+ <div css={hostInputContainer}>
+ <Input
+ onBlur={onBlur}
+ onChange={onChange}
+ error={!checkIsValidConnectionString(value) && value !== ""}
+ value={value}
+ colorScheme="techPurple"
+ placeholder="xxxxxx://myuser:mypassword@localhost:5432/mydb"
+ />
+ <Button
+ disabled={!checkIsValidConnectionString(value)}
+ onClick={() => {
+ const db = parseDatabaseConnectionString(value)
+ if (db !== undefined) {
+ setValue("host", db.host)
+ setValue("port", db.port)
+ setValue("databaseName", db.databaseName)
+ setValue("databaseUsername", db.databaseUsername)
+ setValue("databasePassword", db.databasePassword)
+ onChange("")
+ }
+ }}
+ colorScheme="techPurple"
+ h="32px"
+ >
+ {t("editor.action.form.option.neon.parse")}
+ </Button>
+ </div>
+ </div>
+ )}
+ name="connectionString"
+ />
  <ControlledElement
  title={t("editor.action.resource.db.label.hostname_port")}
  defaultValue={[resource?.content.host, resource?.content.port]}

apps/builder/src/page/App/components/Actions/api.ts

@@ -12,7 +12,6 @@ import {
 } from "@/redux/currentApp/action/actionState"
 import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
 import { GraphQLAuth, GraphQLAuthValue } from "@/redux/resource/graphqlResource"
-import { neonSSLInitialValue } from "@/redux/resource/neonResource"
 import { resourceActions } from "@/redux/resource/resourceSlice"
 import {
  ResourceContent,
@@ -200,7 +199,7 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  connectionFormat: data.connectionFormat,
  databaseName: data.databaseName,
  databaseUsername: data.databaseUsername,
- databasePassword: data.databasePassword,
+ databasePassword: encodeURIComponent(data.databasePassword),
  }
  : {
  uri: data.uri.trim(),
@@ -212,12 +211,13 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  case "mysql":
  case "postgresql":
  case "hydra":
+ case "neon":
  return {
  host: data.host.trim(),
  port: data.port.toString(),
  databaseName: data.databaseName,
  databaseUsername: data.databaseUsername,
- databasePassword: data.databasePassword,
+ databasePassword: encodeURIComponent(data.databasePassword),
  ssl: generateSSLConfig(data.ssl, data),
  }
  case "redis":
@@ -226,7 +226,7 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  port: data.port.toString(),
  databaseIndex: data.databaseIndex ?? 0,
  databaseUsername: data.databaseUsername,
- databasePassword: data.databasePassword,
+ databasePassword: encodeURIComponent(data.databasePassword),
  ssl: data.ssl,
  }
  case "upstash":
@@ -235,8 +235,8 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  port: data.port.toString(),
  databaseIndex: DATABASE_INDEX,
  databaseUsername: DEFAULT_NAME,
- databasePassword: data.databasePassword,
- ssl: true,
+ databasePassword: encodeURIComponent(data.databasePassword),
+ ssl: data.ssl,
  }
  case "firebase":
  return {
@@ -249,7 +249,7 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  host: data.host.trim(),
  port: data.port.toString(),
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  }
  case "s3":
  return {
@@ -276,7 +276,7 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  host: data.host.trim(),
  port: +data.port,
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  databaseName: data.databaseName,
  ssl: generateSSLConfig(!!data.ssl, data, "clickhouse"),
  }
@@ -296,7 +296,7 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  port: data.port.toString(),
  databaseName: data.databaseName,
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  connectionOpts: data.connectionOpts,
  ssl: generateSSLConfig(!!data.ssl, data, "mssql"),
  }
@@ -328,7 +328,7 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  data.authentication === "basic"
  ? {
  username: data.username,
- password: data.password,
+ password: encodeURIComponent(data.password),
  }
  : {
  username: data.username,
@@ -398,21 +398,6 @@ function getActionContentByType(data: FieldValues, type: ResourceType) {
  ...oAuthOpts,
  },
  }
- case "neon": {
- const {
- resourceName: _neonResourceName,
- connectionString: _connectionString,
- host,
- port,
- ...otherNeonParams
- } = data
- return {
- ...otherNeonParams,
- host: host.trim(),
- port: port.toString(),
- ssl: neonSSLInitialValue,
- }
- }
  case "airtable": {
  return {
  authenticationType: "personalToken",