feat: external knowledge api crud frontend & connect external knowledge base

web/app/components/datasets/external-api/endpoint-validator/declarations.ts

@@ -0,0 +1,42 @@
+import type { Dispatch, SetStateAction } from 'react'
+
+export enum ValidatedEndpointStatus {
+  Success = 'success',
+  Error = 'error',
+}
+
+export type ValidatedStatusState = {
+  status?: ValidatedEndpointStatus
+  message?: string
+}
+
+export type Status = 'add' | 'fail' | 'success'
+
+export type ValidateValue = string
+
+export type ValidateCallback = {
+  before: (v?: ValidateValue) => boolean | undefined
+  run?: (v?: ValidateValue) => Promise<ValidatedStatusState>
+}
+
+export type Form = {
+  key: string
+  title: string
+  placeholder: string
+  value?: string
+  validate?: ValidateCallback
+  handleFocus?: (v: ValidateValue, dispatch: Dispatch<SetStateAction<ValidateValue>>) => void
+}
+
+export type KeyFrom = {
+  text: string
+  link: string
+}
+
+export type KeyValidatorProps = {
+  type: string
+  title: React.ReactNode
+  status: Status
+  forms: Form[]
+  keyFrom: KeyFrom
+}

web/app/components/datasets/external-api/endpoint-validator/hooks.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { useDebounceFn } from 'ahooks'
+import type { DebouncedFunc } from 'lodash-es'
+import { ValidatedEndpointStatus } from './declarations'
+import type { ValidateCallback, ValidateValue, ValidatedStatusState } from './declarations'
+
+export const useValidateEndpoint: (value: ValidateValue) => [DebouncedFunc<(validateCallback: ValidateCallback) => Promise<void>>, boolean, ValidatedStatusState] = (value) => {
+  const [validating, setValidating] = useState(false)
+  const [validatedStatus, setValidatedStatus] = useState<ValidatedStatusState>({})
+
+  const { run } = useDebounceFn(async (validateCallback: ValidateCallback) => {
+    if (!validateCallback.before(value)) {
+      setValidating(false)
+      setValidatedStatus({})
+      return
+    }
+    setValidating(true)
+
+    if (validateCallback.run) {
+      const res = await validateCallback?.run(value)
+      setValidatedStatus(
+        res.status === 'success'
+          ? { status: ValidatedEndpointStatus.Success }
+          : { status: ValidatedEndpointStatus.Error, message: res.message })
+
+      setValidating(false)
+    }
+  }, { wait: 1000 })
+
+  return [run, validating, validatedStatus]
+}