Fix importing malformed legacy storage

jest.json

@@ -1,5 +1,5 @@
 {
   "transform": {
-    "^.+\\.[t|j]sx?$": "babel-jest"
+    "^.+\\.tsx?$": "ts-jest"
   }
 }

package.json

@@ -73,7 +73,6 @@
     "@types/webpack-env": "^1.14.0",
     "@typescript-eslint/eslint-plugin": "^2.3.0",
     "@typescript-eslint/parser": "^2.3.0",
-    "babel-jest": "^24.9.0",
     "chalk": "^4.0.0",
     "copy-webpack-plugin": "^6.2.1",
     "cross-env": "^6.0.0",
@@ -88,14 +87,15 @@
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^2.3.0",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.9.0",
+    "jest": "^26.6.2",
     "json-loader": "^0.5.7",
     "png2icons": "^2.0.1",
     "prettier": "^2.0.2",
     "react-hot-loader": "^4.12.13",
     "react-test-renderer": "^16.9.0",
     "rimraf": "^3.0.0",
     "style-loader": "^1.0.0",
+    "ts-jest": "^26.4.3",
     "ts-loader": "^7.0.3",
     "ts-node": "^8.4.1",
     "type-fest": "^0.13.1",

src/components/PreferencesModal/StorageTab.tsx

@@ -69,26 +69,6 @@ const StorageEditPage = ({ storage }: StorageEditPageProps) => {
     setEditingName(false)
   }, [storage.id, db, newName])
 
-  const [importLegacyFormIsFolded, setImportLegacyFormIsFolded] = useState(true)
-
-  const openImportLegacyForm = useCallback(() => {
-    setImportLegacyFormIsFolded(false)
-  }, [])
-
-  const foldImportLegacyForm = useCallback(() => {
-    setImportLegacyFormIsFolded(true)
-  }, [])
-
-  const [convertPouchFormIsFolded, setConvertPouchFormIsFolded] = useState(true)
-
-  const openConvertPouchForm = useCallback(() => {
-    setConvertPouchFormIsFolded(false)
-  }, [])
-
-  const foldConvertPouchForm = useCallback(() => {
-    setConvertPouchFormIsFolded(true)
-  }, [])
-
   return (
     <div>
       <h2>Storage Name</h2>
@@ -138,42 +118,17 @@ const StorageEditPage = ({ storage }: StorageEditPageProps) => {
       {storage.type === 'fs' && (
         <>
           <hr />
-          <FormHeading depth={2}>
-            Import Notes from Legacy BoostNote
-          </FormHeading>
-          {importLegacyFormIsFolded ? (
-            <FormGroup>
-              <FormSecondaryButton onClick={openImportLegacyForm}>
-                Import
-              </FormSecondaryButton>
-            </FormGroup>
-          ) : (
-            <ImportLegacyNotesForm
-              storageId={storage.id}
-              onCancel={foldImportLegacyForm}
-            />
-          )}
+          <ImportLegacyNotesForm storageId={storage.id} />
         </>
       )}
 
       {storage.type === 'pouch' && appIsElectron && (
         <>
           <hr />
-
-          <FormHeading depth={2}>Convert File System based Storage</FormHeading>
-          {convertPouchFormIsFolded ? (
-            <FormGroup>
-              <FormSecondaryButton onClick={openConvertPouchForm}>
-                Convert
-              </FormSecondaryButton>
-            </FormGroup>
-          ) : (
-            <ConvertPouchStorageForm
-              storageId={storage.id}
-              storageName={storage.name}
-              onCancel={foldConvertPouchForm}
-            />
-          )}
+          <ConvertPouchStorageForm
+            storageId={storage.id}
+            storageName={storage.name}
+          />
         </>
       )}
       <hr />

src/components/atoms/FormFolderSelector.tsx

@@ -68,7 +68,7 @@ const FormFolderSelector = ({ value, setValue }: FormFolderSelector) => {
     } finally {
       setDialogIsOpen(false)
     }
-  }, [dialogIsOpen, setValue])
+  }, [dialogIsOpen, setValue, t])
 
   return (
     <FormFolderSelectorContainer>

src/components/organisms/ConvertPouchStorageForm.tsx

@@ -6,6 +6,7 @@ import {
   FormPrimaryButton,
   FormBlockquote,
   FormSecondaryButton,
+  FormHeading,
 } from '../atoms/form'
 import FormFolderSelector from '../atoms/FormFolderSelector'
 import { useDb } from '../../lib/db'
@@ -14,25 +15,35 @@ import { join } from 'path'
 import { writeFile, prepareDirectory } from '../../lib/electronOnly'
 import { entries } from '../../lib/db/utils'
 import { useRouter } from '../../lib/router'
+import { usePreferences } from '../../lib/preferences'
 
 interface ConvertPouchStorageProps {
   storageId: string
   storageName: string
-  onCancel: () => void
 }
 
 const ConvertPouchStorage = ({
   storageId,
   storageName,
-  onCancel,
 }: ConvertPouchStorageProps) => {
-  const [newStorageName, setNewStorageName] = useState(
-    `${storageName} - Converted`
-  )
-  const [newStorageLocation, setNewStorageLocation] = useState('')
+  const { push } = useRouter()
+  const { setClosed } = usePreferences()
   const { storageMap, createStorage } = useDb()
+  const [newStorageLocation, setNewStorageLocation] = useState('')
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const { push } = useRouter()
+  const [newStorageName, setNewStorageName] = useState('')
+  const [opened, setOpened] = useState(false)
+
+  const openForm = useCallback(() => {
+    setNewStorageName(`${storageName} - Converted`)
+    setNewStorageLocation('')
+    setErrorMessage(null)
+    setOpened(true)
+  }, [storageName])
+
+  const closeForm = useCallback(() => {
+    setOpened(false)
+  }, [])
 
   const updateNewStorageName = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -93,7 +104,7 @@ const ConvertPouchStorage = ({
         type: 'fs',
         location: newStorageLocation,
       })
-
+      setClosed(true)
       push(`/app/storages/${newStorage.id}`)
     } catch (error) {
       console.error(error)
@@ -105,34 +116,49 @@ const ConvertPouchStorage = ({
     newStorageLocation,
     newStorageName,
     createStorage,
+    setClosed,
     push,
   ])
-  console.log(errorMessage)
+
   return (
     <>
-      <FormBlockquote variant={errorMessage == null ? 'primary' : 'danger'}>
-        {errorMessage == null
-          ? 'This operation will clone data to File System based Storage.'
-          : errorMessage}
-      </FormBlockquote>
+      <FormHeading depth={2}>Convert File System based Storage</FormHeading>
+      {!opened ? (
+        <FormGroup>
+          <FormSecondaryButton onClick={openForm}>Convert</FormSecondaryButton>
+        </FormGroup>
+      ) : (
+        <>
+          <FormBlockquote variant={errorMessage == null ? 'primary' : 'danger'}>
+            {errorMessage == null
+              ? 'This operation will clone data to File System based Storage.'
+              : errorMessage}
+          </FormBlockquote>
 
-      <FormGroup>
-        <FormLabel>Converted Storage Name</FormLabel>
-        <FormTextInput value={newStorageName} onChange={updateNewStorageName} />
-      </FormGroup>
-      <FormGroup>
-        <FormLabel>Converted Storage Location</FormLabel>
-        <FormFolderSelector
-          value={newStorageLocation}
-          setValue={setNewStorageLocation}
-        />
-      </FormGroup>
-      <FormGroup>
-        <FormPrimaryButton onClick={cloneAndConvertStorage}>
-          Convert to File System based Storage
-        </FormPrimaryButton>
-        <FormSecondaryButton onClick={onCancel}>Cancel</FormSecondaryButton>
-      </FormGroup>
+          <FormGroup>
+            <FormLabel>Converted Storage Name</FormLabel>
+            <FormTextInput
+              value={newStorageName}
+              onChange={updateNewStorageName}
+            />
+          </FormGroup>
+          <FormGroup>
+            <FormLabel>Converted Storage Location</FormLabel>
+            <FormFolderSelector
+              value={newStorageLocation}
+              setValue={setNewStorageLocation}
+            />
+          </FormGroup>
+          <FormGroup>
+            <FormPrimaryButton onClick={cloneAndConvertStorage}>
+              Convert to File System based Storage
+            </FormPrimaryButton>
+            <FormSecondaryButton onClick={closeForm}>
+              Cancel
+            </FormSecondaryButton>
+          </FormGroup>
+        </>
+      )}
     </>
   )
 }