data duplicator style

packages/web/src/elements/ObjectConfigurationControl.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export let title;
+</script>
+
+<div class="wrapper">
+  <div class="header">
+    <span class="title mr-1">{title}</span>
+  </div>
+  <div class="body">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    margin-bottom: 20px;
+  }
+
+  .header {
+    background-color: var(--theme-bg-1);
+    padding: 5px;
+  }
+
+  .title {
+    font-weight: bold;
+    margin-left: 5px;
+  }
+
+  .body {
+    margin: 20px;
+  }
+</style>

packages/web/src/tabs/DataDuplicatorTab.svelte

@@ -22,6 +22,7 @@
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import invalidateCommands from '../commands/invalidateCommands';
   import registerCommand from '../commands/registerCommand';
+  import ObjectConfigurationControl from '../elements/ObjectConfigurationControl.svelte';
   import TableControl from '../elements/TableControl.svelte';
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import CheckboxField from '../forms/CheckboxField.svelte';
@@ -153,6 +154,8 @@
       isChecked,
       operation,
       matchColumn1,
+      file: `${name}.jsonl`,
+      table: tableInfo?.schemaName ? `${tableInfo?.schemaName}.${tableInfo?.pureName}` : tableInfo?.pureName,
     };
   });
 
@@ -162,7 +165,8 @@
 <ToolStripContainer>
   <VerticalSplitter>
     <svelte:fragment slot="1">
-      <div>
+      <div class="wrapper">
+        <ObjectConfigurationControl title="Configuration">
           <div class="bold m-2">Source archive</div>
           <SelectField
             isNative
@@ -178,14 +182,15 @@
               value: x.name,
             })) || []}
           />
+        </ObjectConfigurationControl>
 
-        <div class="bold m-2">Imported files</div>
-
+        <ObjectConfigurationControl title="Imported files">
           <TableControl
             rows={tableRows}
             columns={[
               { header: '', fieldName: 'isChecked', slot: 1 },
-            { header: 'File=>Table', fieldName: 'name' },
+              { header: 'Source file', fieldName: 'file' },
+              { header: 'Target table', fieldName: 'table' },
               { header: 'Operation', fieldName: 'operation', slot: 2 },
               { header: 'Match column', fieldName: 'matchColumn1', slot: 3 },
             ]}
@@ -232,6 +237,7 @@
               {/if}
             </svelte:fragment>
           </TableControl>
+        </ObjectConfigurationControl>
       </div>
     </svelte:fragment>
     <svelte:fragment slot="2">
@@ -255,3 +261,12 @@
         font-weight: bold;
     }
 </style> -->
+<style>
+  .wrapper {
+    overflow-y: auto;
+    background-color: var(--theme-bg-0);
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+</style>