chord: basic validate new base

invisal · invisal · commit aab9cf3fb557 · 2025-02-26T21:06:41.000+07:00
diff --git a/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx b/src/app/(outerbase)/local/edit-base/[baseId]/page.tsx
@@ -3,6 +3,7 @@ import { ConnectionTemplateList } from "@/app/(outerbase)/base-template";
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
+  validateTemplate,
 } from "@/components/connection-config-editor";
 import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
@@ -18,16 +19,28 @@ export default function LocalEditBasePage() {
   const [loading, setLoading] = useState(true);
   const [databaseName, setDatabaseName] = useState("");
   const [template, setTemplate] = useState<ConnectionTemplateList>();
+  const [validateErrors, setValidateErrors] = useState<Record<string, string>>(
+    {}
+  );
 
   const onSave = useCallback(async () => {
     if (!template?.localTo) return;
+
+    const errors = validateTemplate(value, template);
+    setValidateErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
     await updateLocalConnection(baseId, template.localTo(value));
     router.push("/local");
   }, [template, value, router, baseId]);
 
   const onConnect = useCallback(async () => {
     if (!template?.localTo) return;
 
+    const errors = validateTemplate(value, template);
+    setValidateErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
     setLoading(true);
     const tmp = await updateLocalConnection(baseId, template.localTo(value));
     router.push(
@@ -78,6 +91,7 @@ export default function LocalEditBasePage() {
           template={template}
           value={value}
           onChange={setValue}
+          errors={validateErrors}
         />
       </div>
 
diff --git a/src/app/(outerbase)/local/new-base/[driver]/page.tsx b/src/app/(outerbase)/local/new-base/[driver]/page.tsx
@@ -3,6 +3,7 @@
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
+  validateTemplate,
 } from "@/components/connection-config-editor";
 import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
@@ -18,6 +19,9 @@ export default function LocalNewBasePage() {
   const router = useRouter();
   const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
   const [loading, setLoading] = useState(false);
+  const [validateErrors, setValidateErrors] = useState<Record<string, string>>(
+    {}
+  );
 
   const template = useMemo(() => {
     return ConnectionTemplateDictionary[driver];
@@ -26,6 +30,10 @@ export default function LocalNewBasePage() {
   const onSave = useCallback(async () => {
     if (!template?.localTo) return;
 
+    const errors = validateTemplate(value, template);
+    setValidateErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
     setLoading(true);
     await createLocalConnection(template.localTo(value));
     router.push("/local");
@@ -34,6 +42,10 @@ export default function LocalNewBasePage() {
   const onConnect = useCallback(async () => {
     if (!template?.localTo) return;
 
+    const errors = validateTemplate(value, template);
+    setValidateErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
     setLoading(true);
     const newConnection = await createLocalConnection(template.localTo(value));
 
@@ -70,6 +82,7 @@ export default function LocalNewBasePage() {
           template={template}
           value={value}
           onChange={setValue}
+          errors={validateErrors}
         />
       </div>
 
diff --git a/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx b/src/app/(outerbase)/w/[workspaceId]/new-base/[driver]/page.tsx
@@ -2,6 +2,7 @@
 import {
   CommonConnectionConfig,
   ConnectionConfigEditor,
+  validateTemplate,
 } from "@/components/connection-config-editor";
 import { ConnectionTemplateDictionary } from "@/components/connection-config-editor/template";
 import { Button } from "@/components/orbit/button";
@@ -25,6 +26,9 @@ export default function WorkspaceNewBasePage() {
   const [value, setValue] = useState<CommonConnectionConfig>({ name: "" });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [validateErrors, setValidateErrors] = useState<Record<string, string>>(
+    {}
+  );
 
   const template = useMemo(() => {
     return ConnectionTemplateDictionary[driver];
@@ -34,6 +38,10 @@ export default function WorkspaceNewBasePage() {
     (overrideRedirect?: string) => {
       if (!template.remoteFrom || !template.remoteTo) return;
 
+      const errors = validateTemplate(value, template);
+      setValidateErrors(errors);
+      if (Object.keys(errors).length > 0) return;
+
       setLoading(true);
       setError("");
 
@@ -103,6 +111,7 @@ export default function WorkspaceNewBasePage() {
           template={template}
           value={value}
           onChange={setValue}
+          errors={validateErrors}
         />
       </div>
 
diff --git a/src/components/connection-config-editor/index.tsx b/src/components/connection-config-editor/index.tsx
@@ -19,17 +19,41 @@ import { Label } from "../orbit/label";
 import { Toggle } from "../orbit/toggle";
 import { Textarea } from "../ui/textarea";
 
+export function validateTemplate(
+  value: CommonConnectionConfig,
+  template: ConnectionTemplateList
+): Record<string, string> {
+  const templateRow = template.template;
+
+  const validationErrors: Record<string, string> = {};
+
+  if (!value.name) {
+    validationErrors["name"] = "Name is required";
+  }
+
+  for (const row of templateRow) {
+    for (const column of row.columns) {
+      if (column.required && !value[column.name]) {
+        validationErrors[column.name] = `${column.label} is required`;
+      }
+    }
+  }
+
+  return validationErrors;
+}
+
 export function ConnectionConfigEditor({
   template,
   onChange,
   value,
+  errors,
 }: ConnectionConfigEditorProps) {
   const templateRow = template.template;
 
   return (
     <div className="flex w-full gap-4">
       <div className="flex w-1/2 grow-0 flex-col gap-4">
-        <Label title="Name">
+        <Label title="Name" requiredDescription={errors?.["name"]} required>
           <Input
             autoFocus
             size="lg"
@@ -53,7 +77,11 @@ export function ConnectionConfigEditor({
 
                 if (column.type === "text" || column.type === "password") {
                   content = (
-                    <Label title={column.label} required={column.required}>
+                    <Label
+                      title={column.label}
+                      required={column.required}
+                      requiredDescription={errors?.[column.name]}
+                    >
                       <Input
                         size="lg"
                         type={column.type}
@@ -71,7 +99,11 @@ export function ConnectionConfigEditor({
                   );
                 } else if (column.type === "textarea") {
                   content = (
-                    <Label title={column.label} required={column.required}>
+                    <Label
+                      title={column.label}
+                      required={column.required}
+                      requiredDescription={errors?.[column.name]}
+                    >
                       <Textarea
                         rows={4}
                         className="resize-none"
@@ -107,7 +139,11 @@ export function ConnectionConfigEditor({
                   );
                 } else if (column.type === "file") {
                   content = (
-                    <Label title={column.label} required={column.required}>
+                    <Label
+                      title={column.label}
+                      required={column.required}
+                      requiredDescription={errors?.[column.name]}
+                    >
                       <div>
                         <CommonDialogProvider>
                           <FileHandlerPicker
@@ -179,4 +215,5 @@ interface ConnectionConfigEditorProps {
   template: ConnectionTemplateList;
   value: CommonConnectionConfig;
   onChange: (value: CommonConnectionConfig) => void;
+  errors?: Record<string, string>;
 }
diff --git a/src/components/label-input.tsx b/src/components/label-input.tsx
@@ -1,10 +1,16 @@
 import { Input, InputProps } from "./orbit/input";
 import { Label } from "./orbit/label";
 
-export default function LabelInput(props: InputProps & { label: string }) {
+export default function LabelInput(
+  props: InputProps & { label: string; requiredDescription?: string }
+) {
   return (
     <div className="flex flex-col gap-2">
-      <Label title={props.label} required={props.required}>
+      <Label
+        title={props.label}
+        required={props.required}
+        requiredDescription="required"
+      >
         <Input {...props} />
       </Label>
     </div>
