#99 support query params for submited form

package.json

@@ -19,18 +19,18 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@reduxjs/toolkit": "^2.2.7",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@reduxjs/toolkit": "^2.3.0",
+    "@vitejs/plugin-react": "^4.3.3",
     "@vituum/vite-plugin-liquid": "^1.1.0",
-    "@yarnpkg/pnpify": "^4.1.2",
+    "@yarnpkg/pnpify": "^4.1.3",
     "classnames": "^2.5.1",
     "clipboard": "^2.0.11",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
     "formik": "^2.4.6",
     "highlight.js": "^11.10.0",
     "jest": "^29.7.0",
@@ -39,14 +39,14 @@
     "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
     "postcss-load-config": "^6.0.1",
-    "postcss-preset-env": "^10.0.5",
+    "postcss-preset-env": "^10.0.8",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
     "react-redux": "^9.1.2",
-    "react-router": "^6.26.2",
-    "react-router-dom": "^6.26.2",
+    "react-router": "^6.27.0",
+    "react-router-dom": "^6.27.0",
     "redux-logger": "^3.0.6",
-    "vite": "^5.4.8",
+    "vite": "^5.4.10",
     "vite-plugin-pwa": "^0.20.5",
     "vituum": "^1.1.1",
     "workbox-core": "^7.1.0",

src/common/components/configurationForm/index.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
+import { useSearchParams } from 'react-router-dom'
 import classnames from 'classnames'
 import { Formik, Field, Form } from 'formik'
 import FormField from '@common/components/form/field'
@@ -26,6 +27,19 @@ import {
 
 import './configuration-form.css'
 
+const FORM_DEFAULTS = {
+  dbVersion: DEFAULT_DB_VERSION,
+  osType: OS_LINUX,
+  dbType: DB_TYPE_WEB,
+  cpuNum: '',
+  totalMemory: '',
+  totalMemoryUnit: SIZE_UNIT_GB,
+  connectionNum: '',
+  hdType: HARD_DRIVE_SSD
+}
+
+const FORM_FIELDS = Object.keys(FORM_DEFAULTS)
+
 const dbVersionOptions = () =>
   DB_VERSIONS.map((version) => ({
     label: String(version),
@@ -85,27 +99,48 @@ const hdTypeOptions = () => [
   }
 ]
 
+const filterFormParams = (params = {}) =>
+  Object.keys(params).reduce((arr, key) => {
+    if (FORM_FIELDS.includes(key)) {
+      arr[key] = params[key]
+    }
+    return arr
+  }, {})
+
 const ConfigurationForm = () => {
   const dispatch = useDispatch()
+  const [searchParams, setSearchParams] = useSearchParams()
 
   const handleGenerateConfig = (values, { setSubmitting }) => {
-    dispatch(submitConfiguration(values))
+    setSearchParams(new URLSearchParams(values))
     setSubmitting(false)
   }
 
+  const urlParams = useMemo(() => {
+    return filterFormParams(Object.fromEntries(searchParams.entries()))
+  }, [searchParams])
+
+  const formParams = useMemo(() => {
+    let vParams = urlParams
+
+    try {
+      validationSchema.validateSync(vParams)
+    } catch (e) {
+      console.warn('Url params error', e)
+      vParams = {} // back to default
+    }
+
+    return Object.assign({}, FORM_DEFAULTS, vParams)
+  }, [urlParams])
+
+  useEffect(() => {
+    dispatch(submitConfiguration(formParams))
+  }, [dispatch, formParams])
+
   return (
     <Formik
       onSubmit={handleGenerateConfig}
-      initialValues={{
-        dbVersion: DEFAULT_DB_VERSION,
-        osType: OS_LINUX,
-        dbType: DB_TYPE_WEB,
-        cpuNum: '',
-        totalMemory: '',
-        totalMemoryUnit: SIZE_UNIT_GB,
-        connectionNum: '',
-        hdType: HARD_DRIVE_SSD
-      }}
+      initialValues={formParams}
       validationSchema={validationSchema}
     >
       {({ isSubmitting }) => (

src/features/configuration/configurationSlice.js

@@ -4,7 +4,6 @@ import {
   DEFAULT_DB_VERSION,
   OS_LINUX,
   OS_WINDOWS,
-  OS_MAC,
   DB_TYPE_WEB,
   DB_TYPE_OLTP,
   DB_TYPE_DW,
@@ -81,8 +80,8 @@ export const selectOSType = (state) => selectConfiguration(state).osType
 export const selectDBType = (state) => selectConfiguration(state).dbType
 export const selectTotalMemory = (state) => selectConfiguration(state).totalMemory
 export const selectTotalMemoryUnit = (state) => selectConfiguration(state).totalMemoryUnit
-export const selectCPUNum = (state) => selectConfiguration(state).cpuNum
-export const selectConnectionNum = (state) => selectConfiguration(state).connectionNum
+export const selectCPUNum = (state) => selectConfiguration(state).cpuNum || null
+export const selectConnectionNum = (state) => selectConfiguration(state).connectionNum || null
 export const selectHDType = (state) => selectConfiguration(state).hdType
 
 const selectTotalMemoryInBytes = createSelector(
@@ -246,20 +245,18 @@ export const selectDefaultStatisticsTarget = createSelector(
     })[dbType]
 )
 
-export const selectRandomPageCost = createSelector(
-  [selectHDType],
-  (hdType) =>
-    ({
-      [HARD_DRIVE_HDD]: 4,
-      [HARD_DRIVE_SSD]: 1.1,
-      [HARD_DRIVE_SAN]: 1.1
-    })[hdType]
-)
+export const selectRandomPageCost = createSelector([selectHDType], (hdType) => {
+  return {
+    [HARD_DRIVE_HDD]: 4,
+    [HARD_DRIVE_SSD]: 1.1,
+    [HARD_DRIVE_SAN]: 1.1
+  }[hdType]
+})
 
 export const selectEffectiveIoConcurrency = createSelector(
   [selectOSType, selectHDType],
   (osType, hdType) => {
-    if ([OS_WINDOWS, OS_MAC].indexOf(osType) >= 0) {
+    if (osType !== OS_LINUX) {
       return null
     }
     return {
@@ -273,7 +270,7 @@ export const selectEffectiveIoConcurrency = createSelector(
 export const selectParallelSettings = createSelector(
   [selectDBVersion, selectDBType, selectCPUNum],
   (dbVersion, dbType, cpuNum) => {
-    if (cpuNum < 4) {
+    if (!cpuNum || cpuNum < 4) {
       return []
     }