diff --git a/src/components/ApiSetup/index.tsx b/src/components/ApiSetup/index.tsx index 745cbb72..2aa6704e 100644 --- a/src/components/ApiSetup/index.tsx +++ b/src/components/ApiSetup/index.tsx @@ -106,7 +106,7 @@ const ApiSetup: FC = ({ password = initialValue?.password, database = initialValue?.db, }) => { - const [hostname, port] = host.split(":"); + const [hostname, port] = host ? host?.split?.(":") : []; const portOption = port ? `-P ${port}` : ""; const psqlPortOption = port ? `--port=${port}` : ""; @@ -239,7 +239,16 @@ const ApiSetup: FC = ({
= ({ }) => { const { t } = useTranslation(["dataModelGeneration", "common"]); + console.log(initialValue); const { control, handleSubmit, watch, reset } = useForm({ values: initialValue, }); @@ -74,7 +76,21 @@ const DataModelGeneration: FC = ({ } }; + console.log("loading", loading); + const onFormSubmit = (data: DynamicForm, type: string) => { + Object.keys(data).forEach((scope) => { + if (typeof data?.[scope] === "object") { + data[scope] = Object.keys(data[scope]).reduce( + (res: any, table: any) => ({ + ...res, + [table.replace(`${scope}.`, "")]: data[scope][table], + }), + {} + ); + } + }); + console.log("formsubmit", data); onSubmit(data, type); if (resetOnSubmit) reset(); }; diff --git a/src/components/DataSourceForm/index.tsx b/src/components/DataSourceForm/index.tsx index a6ae021d..016a8deb 100644 --- a/src/components/DataSourceForm/index.tsx +++ b/src/components/DataSourceForm/index.tsx @@ -43,7 +43,6 @@ const DataSourceForm: FC = ({ }) => { const { t } = useTranslation(["dataSourceStepForm"]); const { step } = DataSourceStore(); - return ( = ({ ); case 3: const initialValue = formState?.step3 || formData?.step3; + return ( = ({ defaultValue: initialValue, }); + console.log(value); + const isAllSelected = () => - Object.keys(schema[path]).every((tb) => value[tb] === true); + Object.keys(schema[path]).every((tb) => value[`${path}.${tb}`] === true); const onClear = () => { const newVal: DynamicForm = {}; - Object.keys(value).forEach((k) => (newVal[k] = false)); + Object.keys(value).forEach((k) => (newVal[`${path}.${k}`] = false)); onChange(newVal); }; const onSelectAll = (e: CheckboxChangeEvent) => { if (!e.target.checked) return onClear(); const newVal: DynamicForm = {}; - Object.keys(schema[path]).forEach((tb) => (newVal[tb] = true)); + Object.keys(schema[path]).forEach((tb) => (newVal[`${path}.${tb}`] = true)); onChange(newVal); }; @@ -66,12 +68,12 @@ const TableSelection: FC = ({
{Object.keys(schema[path]).map((tb) => ( -
+
{ - onChange({ ...value, [tb]: e.target.checked }); + onChange({ ...value, [`${path}.${tb}`]: e.target.checked }); }} > { clean, setSchema, setFormStateData, + formState, } = DataSourceStore(); const [fetchTablesQuery, execFetchTables] = useFetchTablesQuery({ - variables: { id: dataSourceSetup?.id }, + variables: { id: editId }, pause: true, }); @@ -91,9 +92,11 @@ export default ({ editId }: Props) => { () => teamData?.dataSources || [], [teamData] ) as DataSourceInfo[]; + const curDataSource = useMemo( () => - dataSources.find((d) => d.id === editId || d.id === dataSourceSetup?.id), + dataSources.find((d) => d.id === editId) || + dataSources.find((d) => d.id === dataSourceSetup?.id), [editId, dataSourceSetup?.id, dataSources] ); @@ -130,56 +133,70 @@ export default ({ editId }: Props) => { } }; - const prepareSqlApiData = ( - dataSourceName?: string, - dataSourceId?: string - ): { apiConfig: ApiSetupForm; credentialParams: CredentialParams } => { - const apiConfig: ApiSetupForm = prepareInitValues( - dataSourceId, - currentUser.id, - dataSourceName - ); - const credentialParams: CredentialParams = { - user_id: currentUser.id, - username: apiConfig.db_username, - password: apiConfig.password, - }; - - if (dataSourceId) { - credentialParams.datasource_id = dataSourceId; - } + const prepareSqlApiData = useCallback( + ( + dataSourceName?: string, + dataSourceId?: string + ): { apiConfig: ApiSetupForm; credentialParams: CredentialParams } => { + const apiConfig: ApiSetupForm = prepareInitValues( + dataSourceId, + currentUser.id, + dataSourceName + ); + const credentialParams: CredentialParams = { + user_id: currentUser.id, + username: apiConfig.db_username, + password: apiConfig.password, + }; - return { apiConfig, credentialParams }; - }; + if (dataSourceId) { + credentialParams.datasource_id = dataSourceId; + } - const tryInsertSqlCredentials = async ( - dataSourceId?: string, - dataSourceName?: string, - attemptsLeft: number = 5 - ): Promise => { - if (attemptsLeft === 0) { - return false; - } + return { apiConfig, credentialParams }; + }, + [currentUser.id] + ); - const { apiConfig, credentialParams } = prepareSqlApiData( - dataSourceName, - dataSourceId - ); - const res = await execInsertSqlCredentialsMutation({ - object: credentialParams, - }); + const tryInsertSqlCredentials = useCallback( + async ( + dataSourceId?: string, + dataSourceName?: string, + attemptsLeft: number = 5 + ): Promise => { + if (attemptsLeft === 0) { + return false; + } - const newCredentials = res.data?.insert_sql_credentials_one; - if (res.error || !newCredentials) { - return await tryInsertSqlCredentials( - dataSourceId, + const { apiConfig, credentialParams } = prepareSqlApiData( dataSourceName, - attemptsLeft - 1 + dataSourceId ); - } + const res = await execInsertSqlCredentialsMutation({ + object: credentialParams, + }); - return apiConfig; - }; + const newCredentials = res.data?.insert_sql_credentials_one; + if (res.error || !newCredentials) { + return await tryInsertSqlCredentials( + dataSourceId, + dataSourceName, + attemptsLeft - 1 + ); + } + + DataSourceStore.setState((prev) => ({ + ...prev, + formState: { + ...prev.formState, + step3: { ...apiConfig }, + }, + })); + + return apiConfig; + }, + [execInsertSqlCredentialsMutation, prepareSqlApiData] + ); const createOrUpdateDataSource = async (data: DataSourceSetupForm) => { let dataSourceId; @@ -321,10 +338,10 @@ export default ({ editId }: Props) => { }, [curDataSource, dataSourceSetup?.id, dataSources, editId]); useEffect(() => { - if (step === 2 && dataSourceSetup?.id && !schema) { + if (step === 2 && curDataSource?.id && !schema) { execFetchTables(); } - }, [dataSourceSetup?.id, schema, step, execFetchTables]); + }, [curDataSource?.id, schema, step, execFetchTables]); useEffect(() => { if (fetchTablesQuery.data) { @@ -333,10 +350,13 @@ export default ({ editId }: Props) => { }, [fetchTablesQuery.data, setSchema]); useEffect(() => { - if (step === 0) { - clean(); + if (step === 3) { + tryInsertSqlCredentials( + curDataSource?.id as string | undefined, + curDataSource?.name as string | undefined + ); } - }, [clean, step]); + }, [curDataSource?.id, curDataSource?.name, step, tryInsertSqlCredentials]); const loading = createMutation.fetching || diff --git a/src/pages/DataSources/index.tsx b/src/pages/DataSources/index.tsx index 87ecacd3..3af9e8c1 100644 --- a/src/pages/DataSources/index.tsx +++ b/src/pages/DataSources/index.tsx @@ -251,7 +251,6 @@ const DataSourcesWrapper = () => { isGenerate, setIsGenerate, setStep, - setIsOnboarding, clean, nextStep, setFormStateData, @@ -332,12 +331,6 @@ const DataSourcesWrapper = () => { await onDataSourceSetupSubmit(data, true, nextStep); }; - useEffect(() => { - if (connect) { - setIsOnboarding(true); - } - }, [connect, setIsOnboarding]); - useEffect(() => { if (!connect && editId && !generate) { setStep(1); diff --git a/src/pages/Onboarding/index.tsx b/src/pages/Onboarding/index.tsx index c48dffaa..14360da3 100644 --- a/src/pages/Onboarding/index.tsx +++ b/src/pages/Onboarding/index.tsx @@ -41,7 +41,7 @@ const Onboarding: React.FC = ({ onDataModelGenerationSubmit = () => {}, }) => { const responsive = useResponsive(); - const { currentUser } = CurrentUserStore(); + const { currentUser, teamData } = CurrentUserStore(); const header = ( { const [, setLocation] = useLocation(); const basePath = ONBOARDING; + const { teamData } = CurrentUserStore(); const step = useMemo(() => parseInt(pageStep || "0", 10) - 1, [pageStep]); const { @@ -91,7 +92,9 @@ const OnboardingWrapper = () => { } = DataSourceStore(); const { loading, onDataSourceSetupSubmit, onDataModelGenerationSubmit } = - useOnboarding({}); + useOnboarding({ + editId: teamData?.dataSources?.[0]?.id as string | undefined, + }); const onFinish = () => { clean(); diff --git a/src/stores/DataSourceStore.ts b/src/stores/DataSourceStore.ts index 3da53aaf..e84cefca 100644 --- a/src/stores/DataSourceStore.ts +++ b/src/stores/DataSourceStore.ts @@ -33,6 +33,7 @@ export interface DataSourceState extends DataSourceData { setIsGenerate: (value: boolean) => void; setIsOnboarding: (value: boolean) => void; clean: () => void; + reset: (set: (newValue: DataSourceState) => void) => void; } export const defaultFormState = { @@ -81,7 +82,9 @@ const dataSourceStore = create((set) => ({ ...prev, isOnboarding: value, })), - clean: () => set({ ...defaultState }), + clean: () => + set((prev) => ({ ...defaultState, isOnboarding: prev.isOnboarding })), + reset: set as any, })); export default dataSourceStore;