Merge branch '425-configuration-ui-fixes' into 'master'

fix(ui): add missing configurator parameter, prevent sending empty databases, reload on tab change

Closes #425

See merge request postgres-ai/database-lab!594

Author: agneum

ui/packages/ce/src/api/configs/updateConfig.ts

@@ -38,6 +38,11 @@ export const updateConfig = async (req: Config) => {
               },
             },
           },
+          logicalRestore: {
+            options: {
+              parallelJobs: req.pg_restore,
+            },
+          },
         },
       },
     }),

ui/packages/shared/components/ErrorStub/index.tsx

@@ -11,7 +11,7 @@ import clsx from 'clsx'
 
 type Props = {
   title?: string
-  message: string
+  message?: string
   className?: string
   size?: 'big' | 'normal'
 }

ui/packages/shared/pages/Configuration/index.tsx

@@ -47,9 +47,11 @@ export const Configuration = observer(
   ({
     switchActiveTab,
     activeTab,
+    reload,
   }: {
     switchActiveTab: (activeTab: number) => void
     activeTab: number
+    reload: () => void
   }) => {
     const classes = useStyles()
     const stores = useStores()
@@ -74,6 +76,11 @@ export const Configuration = observer(
       useState<boolean>(false)
     const [isOpen, setIsOpen] = useState(false)
 
+    const switchTab = async () => {
+      reload()
+      switchActiveTab(0)
+    }
+
     const onSubmit = async (values: FormValues) => {
       setSubmitMessage(null)
       await updateConfig(values).then((response) => {
@@ -82,10 +89,7 @@ export const Configuration = observer(
           setSubmitMessage(
             <p>
               Changes applied.{' '}
-              <span
-                className={styles.underline}
-                onClick={() => switchActiveTab(0)}
-              >
+              <span className={styles.underline} onClick={switchTab}>
                 Switch to Overview
               </span>{' '}
               to see details and to work with clones
@@ -130,7 +134,7 @@ export const Configuration = observer(
         let curDividers = formik.values.databases.match(
           /[,(\s)(\n)(\r)(\t)(\r\n)]/gm,
         )
-        let splitDatabases = currentDatabases.split(',')
+        let splitDatabases = currentDatabases.split(' ')
         let newDatabases = ''
 
         for (let i in splitDatabases) {
@@ -346,7 +350,7 @@ export const Configuration = observer(
                   <div>
                     {formik.values.databases &&
                       uniqueDatabases(formik.values.databases)
-                        .split(',')
+                        .split(' ')
                         .map((database, index) => {
                           if (database !== '') {
                             return (

ui/packages/shared/pages/Configuration/utils/index.ts

@@ -1,28 +1,35 @@
-import { DatabaseType } from "types/api/entities/config"
+import { DatabaseType } from 'types/api/entities/config'
 
 export const uniqueDatabases = (values: string) => {
-  let splitValuesArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
-  let newValuesArray = []
+  const splitDatabaseArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
+  let databaseArray = []
 
-  for (let i in splitValuesArray) {
+  for (let i in splitDatabaseArray) {
     if (
-      splitValuesArray[i] !== '' &&
-      newValuesArray.indexOf(splitValuesArray[i]) === -1
+      splitDatabaseArray[i] !== '' &&
+      databaseArray.indexOf(splitDatabaseArray[i]) === -1
     ) {
-      newValuesArray.push(splitValuesArray[i])
+      databaseArray.push(splitDatabaseArray[i])
     }
   }
 
-  return newValuesArray.join(',')
+  return databaseArray.join(' ')
 }
 
 export const postUniqueDatabases = (values: any) => {
-  let splitValuesArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
+  const splitDatabaseArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
 
-  const obj = splitValuesArray.reduce((acc: DatabaseType, curr: number) => {
-    acc[curr] = {}
-    return acc
-  }, {})
+  const databases = splitDatabaseArray.reduce(
+    (acc: DatabaseType, curr: number) => {
+      acc[curr] = {}
+      return acc
+    },
+    {},
+  )
 
-  return values.length !== 0 ? obj : null
+  const nonEmptyDatabase = Object.fromEntries(
+    Object.entries(databases).filter(([name]) => name != ''),
+  )
+
+  return values.length !== 0 ? nonEmptyDatabase : null
 }

ui/packages/shared/pages/Instance/index.tsx

@@ -156,7 +156,10 @@ export const Instance = observer((props: Props) => {
         </>
 
         <TabPanel value={activeTab} index={2}>
-          <Configuration switchActiveTab={(id: number) => setActiveTab(id)} activeTab={activeTab} />
+          <Configuration 
+            switchActiveTab={(id: number) => setActiveTab(id)} 
+            activeTab={activeTab} 
+            reload={() => stores.main.load(props.instanceId)} />
         </TabPanel>
 
       </StoresProvider>