Remove `redux-form` from setup (#22585)

* Move `DatabaseHelp` to `DatabaseStep`

* Remove `redux-form` usage from setup

* Fix unit tests

* Move engine state to redux

* Revert test changes

* Code style fix

frontend/src/metabase-types/store/setup.ts

@@ -36,6 +36,7 @@ export interface SetupState {
   step: number;
   locale?: Locale;
   user?: UserInfo;
+  databaseEngine?: string;
   database?: DatabaseInfo;
   invite?: InviteInfo;
   isLocaleLoaded: boolean;

frontend/src/metabase/setup/actions.ts

@@ -22,6 +22,9 @@ export const setLocale = createThunkAction(
 export const SET_USER = "metabase/setup/SET_USER";
 export const setUser = createAction(SET_USER);
 
+export const SET_DATABASE_ENGINE = "metabase/setup/SET_DATABASE_ENGINE";
+export const setDatabaseEngine = createAction(SET_DATABASE_ENGINE);
+
 export const SET_DATABASE = "metabase/setup/SET_DATABASE";
 export const setDatabase = createAction(SET_DATABASE);
 

frontend/src/metabase/setup/components/DatabaseStep/DatabaseStep.tsx

@@ -26,7 +26,7 @@ export interface DatabaseStepProps {
   isStepActive: boolean;
   isStepCompleted: boolean;
   isSetupCompleted: boolean;
-  onEngineChange: (engine: string) => void;
+  onEngineChange: (engine?: string) => void;
   onStepSelect: () => void;
   onDatabaseSubmit: (database: DatabaseInfo) => void;
   onInviteSubmit: (invite: InviteInfo) => void;
@@ -100,7 +100,7 @@ interface DatabaseFormProps {
   database?: DatabaseInfo;
   engine?: string;
   onSubmit: (database: DatabaseInfo) => void;
-  onEngineChange: (engine: string) => void;
+  onEngineChange: (engine?: string) => void;
 }
 
 const DatabaseForm = ({
@@ -118,7 +118,7 @@ const DatabaseForm = ({
   };
 
   const handleEngineChange = (value?: string) => {
-    value && onEngineChange(value);
+    onEngineChange(value);
   };
 
   return (

frontend/src/metabase/setup/containers/DatabaseStep/DatabaseStep.tsx

@@ -2,7 +2,13 @@ import { connect } from "react-redux";
 import Settings from "metabase/lib/settings";
 import { State, DatabaseInfo, InviteInfo } from "metabase-types/store";
 import DatabaseStep from "../../components/DatabaseStep";
-import { setDatabase, setInvite, setStep, submitDatabase } from "../../actions";
+import {
+  setDatabaseEngine,
+  setDatabase,
+  setInvite,
+  setStep,
+  submitDatabase,
+} from "../../actions";
 import {
   trackDatabaseSelected,
   trackAddDataLaterClicked,
@@ -33,8 +39,11 @@ const mapStateToProps = (state: State) => ({
 });
 
 const mapDispatchToProps = (dispatch: any) => ({
-  onEngineChange: (engine: string) => {
-    trackDatabaseSelected(engine);
+  onEngineChange: (engine?: string) => {
+    if (engine) {
+      trackDatabaseSelected(engine);
+    }
+    dispatch(setDatabaseEngine(engine || null));
   },
   onStepSelect: () => {
     dispatch(setStep(DATABASE_STEP));

frontend/src/metabase/setup/reducers.ts

@@ -3,6 +3,7 @@ import {
   SET_LOCALE,
   SET_STEP,
   SET_USER,
+  SET_DATABASE_ENGINE,
   SET_DATABASE,
   SET_TRACKING,
   SET_INVITE,
@@ -31,6 +32,13 @@ export const user = handleActions(
   null,
 );
 
+export const databaseEngine = handleActions(
+  {
+    [SET_DATABASE_ENGINE]: { next: (state, { payload }) => payload },
+  },
+  null,
+);
+
 export const database = handleActions(
   {
     [SET_DATABASE]: { next: (state, { payload }) => payload },
@@ -65,6 +73,7 @@ export default {
   locale,
   user,
   database,
+  databaseEngine,
   invite,
   isLocaleLoaded,
   isTrackingAllowed,

frontend/src/metabase/setup/selectors.ts

-import { getValues } from "redux-form";
-import { createSelector } from "reselect";
 import {
   DatabaseInfo,
   InviteInfo,
@@ -53,12 +51,6 @@ export const isSetupCompleted = (state: State): boolean => {
   return getStep(state) === COMPLETED_STEP;
 };
 
-export const getDatabaseFields = createSelector(
-  (state: State) => state.form.database,
-  form => getValues(form),
-);
-
-export const getDatabaseEngine = createSelector(
-  [getDatabaseFields],
-  fields => fields?.engine,
-);
+export const getDatabaseEngine = (state: State): string | undefined => {
+  return getDatabase(state)?.engine || state.setup.databaseEngine;
+};