SYNC: archive UX

packages/web/src/forms/FormArchiveFolderSelect.svelte

@@ -43,7 +43,7 @@
     if (e.detail == '@create') {
       showModal(InputTextModal, {
         header: 'Archive',
-        label: 'Name of new folder',
+        label: 'Name of new archive folder',
         onConfirm: createOption,
       });
     }

packages/web/src/impexp/SourceTargetConfig.svelte

@@ -23,6 +23,8 @@
   import { findEngineDriver } from 'dbgate-tools';
   import AceEditor from '../query/AceEditor.svelte';
   import { _t } from '../translations';
+  import { showModal } from '../modals/modalTools';
+  import InputTextModal from '../modals/InputTextModal.svelte';
 
   export let direction;
   export let storageTypeField;
@@ -54,7 +56,7 @@
           { value: 'query', label: _t('common.query', { defaultMessage: 'Query' }), directions: ['source'] },
           {
             value: 'archive',
-            label: _t('common.archive', { defaultMessage: 'Archive' }),
+            label: _t('common.archive', { defaultMessage: 'Archive (JSONL)' }),
             directions: ['source', 'target'],
           },
         ];
@@ -108,11 +110,18 @@
       <FormStyledButton
         value="New archive"
         on:click={() => {
-          values.update(x => ({
+          showModal(InputTextModal, {
-            ...x,
+            header: 'Archive',
-            [storageTypeField]: 'archive',
+            label: 'Name of new archive folder',
-            [archiveFolderField]: `import-${moment().format('YYYY-MM-DD-hh-mm-ss')}`,
+            value: `import-${moment().format('YYYY-MM-DD-hh-mm-ss')}`,
-          }));
+            onConfirm: value => {
+              values.update(x => ({
+                ...x,
+                [storageTypeField]: 'archive',
+                [archiveFolderField]: value,
+              }));
+            },
+          });
         }}
       />
     {/if}