(core) Add column matching to Importer

Summary:
The Importer dialog is now maximized, showing additional column
matching options and information on the left, with the preview
table shown on the right. Columns can be mapped via a select menu
listing all source columns, or by clicking a formula field next to
the menu and directly editing the transform formula.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3096

app/client/ui2018/IconList.ts

@@ -56,6 +56,7 @@ export type IconName = "ChartArea" |
   "Home" |
   "Idea" |
   "Import" |
+  "ImportArrow" |
   "Info" |
   "LeftAlign" |
   "Lock" |
@@ -153,6 +154,7 @@ export const IconList: IconName[] = ["ChartArea",
   "Home",
   "Idea",
   "Import",
+  "ImportArrow",
   "Info",
   "LeftAlign",
   "Lock",

app/client/ui2018/menus.ts

@@ -209,7 +209,10 @@ export function multiSelect<T>(selectedOptions: MutableObsArray<T>,
   return cssSelectBtn(
     dom.autoDispose(selectedOptionsSet),
     dom.autoDispose(selectedOptionsText),
-    cssMultiSelectSummary(dom.text(selectedOptionsText)),
+    cssMultiSelectSummary(
+      dom.text(selectedOptionsText),
+      cssMultiSelectSummary.cls('-placeholder', use => use(selectedOptionsSet).size === 0)
+    ),
     icon('Dropdown'),
     elem => {
       weasel.setPopupToCreateDom(elem, ctl => buildMultiSelectMenu(ctl), weasel.defaultMenuOptions);
@@ -535,6 +538,10 @@ const cssMultiSelectSummary = styled('div', `
   flex: 1 1 0px;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  &-placeholder {
+    color: ${colors.slate}
+  }
 `);
 
 const cssMultiSelectMenu = styled(weasel.cssMenu, `