@@ -164,31 +198,51 @@ export function TableList() {
{/* Create Modal */}
{showCreate && (
-
setShowCreate(false)}>
-
e.stopPropagation()}>
+
+
)}
diff --git a/frontend/src/components/wizard/OnboardingWizard.tsx b/frontend/src/components/wizard/OnboardingWizard.tsx
index ac98bba..7a570f5 100644
--- a/frontend/src/components/wizard/OnboardingWizard.tsx
+++ b/frontend/src/components/wizard/OnboardingWizard.tsx
@@ -1,16 +1,40 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { App } from 'antd';
import { Check, CheckCircle2, CloudDownload } from 'lucide-react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
import { enrichmentApi, questionsApi, tablesApi } from '../../api/client';
-import type { EnrichmentData, GoldenQuestionCreate, Table, TableCreate } from '../../types';
+import type { Table, GoldenQuestionCreate, EnrichmentData } from '../../types';
const STEPS = ['select', 'schema', 'enrichment', 'validate', 'questions', 'submit'] as const;
+const columnSchema = z.object({
+ name: z.string().trim().min(1, 'Column name is required'),
+ description: z.string().trim().min(20, 'Description must be at least 20 characters'),
+});
+
+const questionSchema = z.object({
+ question: z.string().trim().min(1, 'Question is required'),
+ expected_sql: z.string().trim().min(1, 'Expected SQL is required'),
+ difficulty: z.enum(['simple', 'medium', 'complex']),
+ question_type: z.enum(['join', 'simple', 'complex', 'geo', 'aggregate', 'time_series']),
+});
+
+const wizardSchema = z.object({
+ oasis_source_id: z.string().trim().min(1, 'Oasis Source ID is required'),
+ table_description: z.string().trim().min(20, 'Table description must be at least 20 characters'),
+ columns: z.array(columnSchema),
+ questions: z.array(questionSchema),
+});
+
+type WizardFormValues = z.infer
;
+
export function OnboardingWizard() {
const { t } = useTranslation();
const navigate = useNavigate();
@@ -19,17 +43,40 @@ export function OnboardingWizard() {
const [currentStep, setCurrentStep] = useState(0);
const [done, setDone] = useState(false);
+ const [submitError, setSubmitError] = useState(null);
- const [tableForm, setTableForm] = useState({ oasis_source_id: '' });
- const [enrichmentForm, setEnrichmentForm] = useState({
- table_description: '',
- columns: [],
- });
- const [questions, setQuestions] = useState([]);
const [createdTableId, setCreatedTableId] = useState(null);
const [createdTable, setCreatedTable] = useState(null);
const [isFetchingSchema, setIsFetchingSchema] = useState(false);
+ const {
+ register,
+ control,
+ trigger,
+ getValues,
+ watch,
+ formState: { errors },
+ } = useForm({
+ resolver: zodResolver(wizardSchema),
+ defaultValues: {
+ oasis_source_id: '',
+ table_description: '',
+ columns: [],
+ questions: [],
+ },
+ mode: 'onTouched',
+ });
+
+ const { fields: columnFields, replace: replaceColumns, append: appendColumn, remove: removeColumn } = useFieldArray({
+ control,
+ name: 'columns',
+ });
+
+ const { fields: questionFields, append: appendQuestion, remove: removeQuestion } = useFieldArray({
+ control,
+ name: 'questions',
+ });
+
const createTableMutation = useMutation({ mutationFn: tablesApi.create });
const createEnrichmentMutation = useMutation({
mutationFn: ({ id, data }: { id: string; data: EnrichmentData }) =>
@@ -41,65 +88,80 @@ export function OnboardingWizard() {
const step = STEPS[currentStep];
- const canNext = () => {
- if (step === 'select') return !!tableForm.oasis_source_id;
- if (step === 'enrichment') return enrichmentForm.table_description.length >= 20;
- if (step === 'validate') {
- return (
- enrichmentForm.table_description.length >= 20 &&
- enrichmentForm.columns.every((c) => c.description.length >= 20)
- );
- }
- return true;
- };
+ const watchOasisSourceId = watch('oasis_source_id');
+ const watchTableDescription = watch('table_description');
+ const watchColumns = watch('columns') || [];
+ const watchQuestions = watch('questions') || [];
+
+ useEffect(() => {
+ setSubmitError(null);
+ }, [watchOasisSourceId, watchTableDescription, watchColumns, watchQuestions]);
+
+
const handleFetchSchema = () => {
setIsFetchingSchema(true);
setTimeout(() => {
- setEnrichmentForm((f) => ({
- ...f,
- columns: [
- { name: 'id', description: '' },
- { name: 'created_at', description: '' },
- { name: 'status', description: '' },
- ],
- }));
+ replaceColumns([
+ { name: 'id', description: '' },
+ { name: 'created_at', description: '' },
+ { name: 'status', description: '' },
+ ]);
setIsFetchingSchema(false);
message.success(`Fetched 3 columns from OpenMetadata`);
}, 1500);
};
const handleNext = async () => {
- if (step === 'select') {
- const t = await createTableMutation.mutateAsync(tableForm);
- setCreatedTableId(t.id);
- setCreatedTable(t);
- // Ensure columns aren't overwritten if already fetched
- setEnrichmentForm((f) => ({ ...f, columns: f.columns.length ? f.columns : [] }));
- }
- if (step === 'enrichment' && createdTableId) {
- await createEnrichmentMutation.mutateAsync({ id: createdTableId, data: enrichmentForm });
- message.success('Enrichment saved successfully');
+ setSubmitError(null);
+
+ let fieldsToValidate: any[] = [];
+ if (step === 'select') fieldsToValidate = ['oasis_source_id'];
+ if (step === 'enrichment') fieldsToValidate = ['table_description', 'columns'];
+ if (step === 'validate') fieldsToValidate = ['table_description', 'columns'];
+ if (step === 'questions') fieldsToValidate = ['questions'];
+
+ if (fieldsToValidate.length > 0) {
+ const isValid = await trigger(fieldsToValidate as any);
+ if (!isValid) return;
}
- if (step === 'questions' && createdTableId) {
- for (const q of questions) {
- await createQuestionMutation.mutateAsync({ id: createdTableId, q });
+
+ try {
+ if (step === 'select') {
+ const t = await createTableMutation.mutateAsync({ oasis_source_id: getValues('oasis_source_id') });
+ setCreatedTableId(t.id);
+ setCreatedTable(t);
+ }
+ if (step === 'enrichment' && createdTableId) {
+ await createEnrichmentMutation.mutateAsync({
+ id: createdTableId,
+ data: {
+ table_description: getValues('table_description'),
+ columns: getValues('columns'),
+ },
+ });
+ message.success('Enrichment saved successfully');
+ }
+ if (step === 'questions' && createdTableId) {
+ const qs = getValues('questions') || [];
+ for (const q of qs) {
+ await createQuestionMutation.mutateAsync({ id: createdTableId, q });
+ }
+ message.success('Golden questions added');
+ qc.invalidateQueries({ queryKey: ['tables'] });
+ setDone(true);
+ return;
}
- message.success('Golden questions added');
- qc.invalidateQueries({ queryKey: ['tables'] });
- setDone(true);
- return;
+ setCurrentStep((s) => Math.min(s + 1, STEPS.length - 1));
+ } catch (err: any) {
+ const msg = err.response?.data?.detail || err.message || 'An unexpected error occurred';
+ setSubmitError(msg);
+ message.error(msg);
}
- setCurrentStep((s) => Math.min(s + 1, STEPS.length - 1));
};
const addQuestion = () =>
- setQuestions((q) => [
- ...q,
- { question: '', expected_sql: '', difficulty: 'simple', question_type: 'simple' },
- ]);
- const updateQuestion = (i: number, patch: Partial) =>
- setQuestions((qs) => qs.map((q, idx) => (idx === i ? { ...q, ...patch } : q)));
+ appendQuestion({ question: '', expected_sql: '', difficulty: 'simple', question_type: 'simple' });
if (done) {
return (
@@ -165,17 +227,36 @@ export function OnboardingWizard() {
{/* Step content */}
+ {submitError && (
+
+ {submitError}
+
+ )}
+
{step === 'select' && (
{t('wizard.steps.select')}
setTableForm({ oasis_source_id: e.target.value })}
+ className={`form-input${errors.oasis_source_id ? ' form-input--error' : ''}`}
placeholder="e.g. some-uuid-or-fqn"
+ {...register('oasis_source_id')}
/>
+ {errors.oasis_source_id && (
+
{errors.oasis_source_id.message}
+ )}
)}
@@ -192,6 +273,7 @@ export function OnboardingWizard() {
>
{t('wizard.steps.schema')}