Merge pull request #3227 from illacloud/beta

fix: redius & upstash cache action and postgre format bug

apps/builder/src/page/App/components/Actions/ResourceGenerator/ConfigElements/ActionButtons/TestConnectButton/utils.ts

@@ -2,7 +2,7 @@ import { ResourceType } from "@illa-public/public-types"
 import { FieldValues } from "react-hook-form"
 import { generateGraphQLAuthContent } from "@/page/App/components/Actions/api"
 import { generateSSLConfig } from "@/redux/resource/resourceState"
-import { DATABASE_INDEX, DEFAULT_NAME } from "@/redux/resource/upstashResource"
+import { DATABASE_INDEX } from "@/redux/resource/upstashResource"
 
 export const formatTestConnectValues = (
  data: FieldValues,
@@ -117,13 +117,22 @@ export const formatTestConnectValues = (
  ssl: generateSSLConfig(data.ssl, data),
  }
  }
- case "upstash":
  case "redis": {
+ return {
+ host: data.host.trim(),
+ port: data.port.toString(),
+ databaseIndex: data.databaseIndex,
+ databaseUsername: data.databaseUsername,
+ databasePassword: encodeURIComponent(data.databasePassword),
+ ssl: data.ssl,
+ }
+ }
+ case "upstash": {
  return {
  host: data.host.trim(),
  port: data.port.toString(),
  databaseIndex: DATABASE_INDEX,
- databaseUsername: DEFAULT_NAME,
+ databaseUsername: data.databaseUsername,
  databasePassword: encodeURIComponent(data.databasePassword),
  ssl: data.ssl,
  }

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

@@ -55,6 +55,11 @@ const getResourceDefaultPort = (resourceType: string) => {
  }
 }
 
+const checkIsValidConnectionString = (connectionString: string) => {
+ const pattern = /^(mysql|postgres):\/\/([^:]+):([^@]+)@([^/]+)\/(.+)$/
+ return pattern.test(connectionString)
+}
+
 function getPortFromConnectionString(scheme: string): string {
  switch (scheme) {
  case "postgres":
@@ -66,29 +71,28 @@ function getPortFromConnectionString(scheme: string): string {
  }
 }
 
-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 hostAndPort = match[4].split(":")
+ const host = hostAndPort[0]
+ const port =
+ hostAndPort.length > 1
+ ? hostAndPort[1]
+ : getPortFromConnectionString(match[1])
  const databaseName = match[5]
 
  return {
  databaseUsername,
  databasePassword,
  host,
- port: getPortFromConnectionString(databaseType),
+ port,
  databaseName,
  }
  } else {

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

@@ -1,19 +1,21 @@
 import { TextLink } from "@illa-public/text-link"
 import { isCloudVersion } from "@illa-public/utils"
 import { FC, useCallback, useMemo, useState } 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,
@@ -24,6 +26,7 @@ import {
 } from "@/page/App/components/Actions/styles"
 import { ControlledElement } from "@/page/App/components/ControlledElement"
 import { ControlledType } from "@/page/App/components/ControlledElement/interface"
+import { hostInputContainer } from "@/page/App/components/ControlledElement/style"
 import {
  RedisResource,
  RedisResourceInitial,
@@ -36,10 +39,35 @@ import { TestConnectButton } from "../ActionButtons/TestConnectButton"
 import { container } from "../style"
 import { RedisLikeConfigElementProps } from "./interface"
 
+function parseDatabaseConnectionString(
+ connectionString: string,
+): Omit<RedisResource, "ssl" | "databaseIndex"> | undefined {
+ const regex = /^redis:\/\/([^:]+):([^@]+)@([^:]+):(\d+)$/
+ const match = connectionString.match(regex)
+
+ if (!match || match.length !== 5) {
+ return undefined
+ }
+
+ const [, databaseUsername, databasePassword, host, port] = match
+
+ return {
+ databaseUsername,
+ databasePassword,
+ host,
+ port,
+ }
+}
+
+const checkIsValidConnectionString = (connectionString: string) => {
+ const pattern = /^redis:\/\/([^:]+):([^@]+)@([^:]+):(\d+)$/
+ return pattern.test(connectionString)
+}
+
 const RedisConfigElement: FC<RedisLikeConfigElementProps> = (props) => {
  const { onBack, resourceID, resourceType, hasFooter = true } = props
  const { t } = useTranslation()
- const { control } = useFormContext()
+ const { control, setValue } = useFormContext()
  const findResource = useSelector((state: RootState) => {
  return state.resource.find((r) => r.resourceID === resourceID)
  })
@@ -54,27 +82,17 @@ const RedisConfigElement: FC<RedisLikeConfigElementProps> = (props) => {
  const [showAlert, setShowAlert] = useState<boolean>(false)
 
  const userNameOrPassword = useMemo(() => {
- if (resourceType === "redis") {
- return {
- title: t("editor.action.resource.db.label.username_password"),
- controlledType: ["input", "password"] as ControlledType[],
- name: ["databaseUsername", "databasePassword"],
- defaultValue: [content.databaseUsername, content.databasePassword],
- placeholders: [
- t("editor.action.resource.db.placeholder.username"),
- t("editor.action.resource.db.placeholder.password"),
- ],
- }
- } else {
- return {
- title: t("editor.action.resource.db.label.password"),
- controlledType: "password" as ControlledType,
- name: "databasePassword",
- defaultValue: content.databasePassword,
- placeholders: [t("editor.action.resource.db.placeholder.password")],
- }
+ return {
+ title: t("editor.action.resource.db.label.username_password"),
+ controlledType: ["input", "password"] as ControlledType[],
+ name: ["databaseUsername", "databasePassword"],
+ defaultValue: [content.databaseUsername, content.databasePassword],
+ placeholders: [
+ t("editor.action.resource.db.placeholder.username"),
+ t("editor.action.resource.db.placeholder.password"),
+ ],
  }
- }, [content.databasePassword, content.databaseUsername, resourceType, t])
+ }, [content.databasePassword, content.databaseUsername, t])
 
  const handleHostValidate = useCallback(
  (value: string) => {
@@ -117,7 +135,52 @@ const RedisConfigElement: FC<RedisLikeConfigElementProps> = (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="redis://myuser:mypassword@localhost:6379"
+ />
+ <Button
+ disabled={!checkIsValidConnectionString(value)}
+ onClick={() => {
+ const db = parseDatabaseConnectionString(value)
+ if (db !== undefined) {
+ setValue("host", db.host)
+ setValue("port", db.port)
+ 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
  defaultValue={[content.host, content.port]}
  title={t("editor.action.resource.db.label.hostname_port")}