(core) Import redesign

Summary: New UI design for incremental imports.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/common/ActiveDocAPI.ts

@@ -45,21 +45,51 @@ export interface TransformRuleMap {
 
 // Special values for import destinations; null means "new table", "" means skip table.
 // Both special options exposed as consts.
-export type DestId = string | null;
 export const NEW_TABLE = null;
 export const SKIP_TABLE = "";
+export type DestId = string | typeof NEW_TABLE | typeof SKIP_TABLE;
 
+/**
+ * How to import data into an existing table or a new one.
+ */
 export interface TransformRule {
+  /**
+   * The destination table for the transformed data. If null, the data is imported into a new table.
+   */
   destTableId: DestId;
+  /**
+   * The list of columns to update (existing or new columns).
+   */
   destCols: TransformColumn[];
+  /**
+   * The list of columns to read from the source table (just the headers name).
+   */
   sourceCols: string[];
 }
 
+/**
+ * Existing or new column to update. It is created based on the temporary table that was imported.
+ */
 export interface TransformColumn {
+  /**
+   * Label of the column to update. For new table it is the same name as the source column.
+   */
   label: string;
+  /**
+   * Column id to update (null for a new table).
+   */
   colId: string|null;
+  /**
+   * Type of the column (important for new columns).
+   */
   type: string;
+  /**
+   * Formula to apply to the target column.
+   */
   formula: string;
+  /**
+   * Widget options when we need to create a column (copied from the source).
+   */
   widgetOptions: string;
 }
 

app/common/ThemePrefs-ti.ts

@@ -300,6 +300,12 @@ export const ThemeColors = t.iface([], {
   "importer-preview-border": "string",
   "importer-skipped-table-overlay": "string",
   "importer-match-icon": "string",
+  "importer-outside-bg": "string",
+  "importer-main-content-bg": "string",
+  "importer-active-file-bg": "string",
+  "importer-active-file-fg": "string",
+  "importer-inactive-file-bg": "string",
+  "importer-inactive-file-fg": "string",
   "menu-toggle-fg": "string",
   "menu-toggle-hover-fg": "string",
   "menu-toggle-active-fg": "string",

app/common/ThemePrefs.ts

@@ -392,6 +392,12 @@ export interface ThemeColors {
   'importer-preview-border': string;
   'importer-skipped-table-overlay': string;
   'importer-match-icon': string;
+  'importer-outside-bg': string;
+  'importer-main-content-bg': string;
+  'importer-active-file-bg': string;
+  'importer-active-file-fg': string;
+  'importer-inactive-file-bg': string;
+  'importer-inactive-file-fg': string;
 
   /* Menu Toggles */
   'menu-toggle-fg': string;

app/common/gutil.ts

@@ -1,5 +1,6 @@
 import {delay} from 'app/common/delay';
-import {BindableValue, DomElementMethod, ISubscribable, Listener, Observable, subscribeElem, UseCB} from 'grainjs';
+import {BindableValue, DomElementMethod, IKnockoutReadObservable, ISubscribable, Listener, Observable,
+        subscribeElem, UseCB, UseCBOwner} from 'grainjs';
 import {Observable as KoObservable} from 'knockout';
 import identity = require('lodash/identity');
 
@@ -76,7 +77,7 @@ export function clamp(value: number, min: number, max: number): number {
 /**
  * Checks if ele is contained within the given bounds.
  * @param {Number} value
- * @param {Number} bound1 - does not have to be less than/eqal to bound2
+ * @param {Number} bound1 - does not have to be less than/equal to bound2
  * @param {Number} bound2
  * @returns {Boolean} - True/False
  */
@@ -713,7 +714,7 @@ export function cloneFunc(fn: Function): Function {     // tslint:disable-line:b
 
 /**
  * Generates a random id using a sequence of uppercase alphanumeric characters
- * preceeded by an optional prefix.
+ * preceded by an optional prefix.
  */
 export function genRandomId(len: number, optPrefix?: string): string {
   const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
@@ -926,6 +927,11 @@ export const unwrap: UseCB = (obs: ISubscribable) => {
   return (obs as ko.Observable).peek();
 };
 
+/**
+ * Use helper for simple boolean negation.
+ */
+export const not = (obs: Observable<any>|IKnockoutReadObservable<any>) => (use: UseCBOwner) => !use(obs);
+
 /**
  * Get a set of up to `count` distinct values of `values`.
  */

app/common/themes/GristDark.ts

@@ -371,6 +371,12 @@ export const GristDark: ThemeColors = {
   'importer-preview-border': '#69697D',
   'importer-skipped-table-overlay': 'rgba(111,111,117,0.6)',
   'importer-match-icon': '#69697D',
+  'importer-outside-bg': '#32323F',
+  'importer-main-content-bg': '#262633',
+  'importer-active-file-bg': '#16B378',
+  'importer-active-file-fg': '#FFFFFF',
+  'importer-inactive-file-bg': '#808080',
+  'importer-inactive-file-fg': '#FFFFFF',
 
   /* Menu Toggles */
   'menu-toggle-fg': '#A4A4A4',

app/common/themes/GristLight.ts

@@ -371,6 +371,12 @@ export const GristLight: ThemeColors = {
   'importer-preview-border': '#D9D9D9',
   'importer-skipped-table-overlay': 'rgba(217,217,217,0.6)',
   'importer-match-icon': '#D9D9D9',
+  'importer-outside-bg': '#F7F7F7',
+  'importer-main-content-bg': '#FFFFFF',
+  'importer-active-file-bg': '#16B378',
+  'importer-active-file-fg': '#FFFFFF',
+  'importer-inactive-file-bg': 'rgba(217,217,217,0.6)',
+  'importer-inactive-file-fg': '#FFFFFF',
 
   /* Menu Toggles */
   'menu-toggle-fg': '#929299',