(core) Initial data tables page

Summary:
- Added a new special page for viewing raw data widgets:
  - Implemented in DataTables.ts
  - Accessible only via the special URL path `/p/data`
  - Future diffs should make this page prettier and easily accessible
  - Shows a list of user tables
  - Clicking on a table name shows its `rawViewSection` by setting `GristDoc.viewModel.activeSectionId`. Note that in this case `GristDoc.viewModel` is an empty record, so this is a bit of a hack, but it works well and causes no known issues.
- Added `ViewSectionRec.isRaw` to know if the record represents a raw data widget.
- Added various restrictions in the UI for raw data widgets:
  - 'Delete widget' is disabled in the 3-dot widget menu.
  - Prevent hiding columns:
    - "Hide column" in the column context menu is disabled
    - The "VISIBLE/HIDDEN COLUMNS" section of the right panel > Table > Widget is hidden
  - The toggle bar isn't configurable to ensure that users know when raw data is filtered:
    - The filter bar always shows if and only if some filters are present
    - "Toggle Filter Bar" is hidden in:
      - Right panel > Table > Sort & Filter
      - The sort/filter menu next to the three-dot menu for widgets.
  - Other restrictions in the right panel:
    - In the Column tab:
      - 'Use separate settings' is disabled
    - In the Table tab:
      - In the Widget subtab:
        - 'Change Widget' is hidden
      - In the Data subtab:
        - 'Edit Data Selection' is hidden
        - 'SELECT BY' is hidden

Test Plan: Tested manually. The behaviour of raw data widgets may still change and they aren't easily visible to users yet.

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/ui/FieldMenus.ts

@@ -1,4 +1,5 @@
 import {menuItem, menuSubHeader} from 'app/client/ui2018/menus';
+import {dom} from 'grainjs';
 
 interface IFieldOptions {
   useSeparate: () => void;
@@ -6,10 +7,11 @@ interface IFieldOptions {
   revertToCommon: () => void;
 }
 
-export function FieldSettingsMenu(useColOptions: boolean, actions: IFieldOptions) {
+export function FieldSettingsMenu(useColOptions: boolean, disableSeparate: boolean, actions: IFieldOptions) {
+  useColOptions = useColOptions || disableSeparate;
   return [
     menuSubHeader(`Using ${useColOptions ? 'common' : 'separate'} settings`),
-    useColOptions ? menuItem(actions.useSeparate, 'Use separate settings') : [
+    useColOptions ? menuItem(actions.useSeparate, 'Use separate settings', dom.cls('disabled', disableSeparate)) : [
       menuItem(actions.saveAsCommon, 'Save as common settings'),
       menuItem(actions.revertToCommon, 'Revert to common settings'),
     ]

app/client/ui/GridViewMenus.ts

@@ -39,6 +39,7 @@ export interface IMultiColumnContextMenu {
   numFrozen: number;
   disableModify: boolean|'mixed';  // If the columns are read-only.
   isReadonly: boolean;
+  isRaw: boolean;
   isFiltered: boolean;            // If this view shows a proper subset of all rows in the table.
   isFormula: boolean|'mixed';
   columnIndices: number[];
@@ -57,10 +58,9 @@ export function calcFieldsCondition(fields: ViewFieldRec[], condition: (f: ViewF
 }
 
 export function ColumnContextMenu(options: IColumnContextMenu) {
-  const { disableModify, filterOpenFunc, colId, sortSpec, isReadonly } = options;
+  const { disableModify, filterOpenFunc, colId, sortSpec, isReadonly, isRaw } = options;
 
   const disableForReadonlyColumn = dom.cls('disabled', Boolean(disableModify) || isReadonly);
-  const disableForReadonlyView = dom.cls('disabled', isReadonly);
 
   const addToSortLabel = getAddToSortLabel(sortSpec, colId);
 
@@ -112,7 +112,7 @@ export function ColumnContextMenu(options: IColumnContextMenu) {
     menuItem(allCommands.sortFilterTabOpen.run, 'More sort options ...', testId('more-sort-options')),
     menuDivider({style: 'margin-top: 0;'}),
     menuItemCmd(allCommands.renameField, 'Rename column', disableForReadonlyColumn),
-    menuItemCmd(allCommands.hideField, 'Hide column', disableForReadonlyView),
+    menuItemCmd(allCommands.hideField, 'Hide column', dom.cls('disabled', isReadonly || isRaw)),
     freezeMenuItemCmd(options),
     menuDivider(),
     MultiColumnMenu((options.disableFrozenMenu = true, options)),

app/client/ui/RightPanel.ts

@@ -307,8 +307,14 @@ export class RightPanel extends Disposable {
         testId('right-widget-title')
       )),
 
-      cssRow(primaryButton('Change Widget', this._createPageWidgetPicker()),
-        cssRow.cls('-top-space')),
+      dom.maybe(
+        (use) => !use(activeSection.isRaw),
+        () => cssRow(
+          primaryButton('Change Widget', this._createPageWidgetPicker()),
+          cssRow.cls('-top-space')
+        ),
+      ),
+
       cssSeparator(),
 
       dom.maybe((use) => ['detail', 'single'].includes(use(this._pageWidgetType)!), () => [
@@ -346,10 +352,16 @@ export class RightPanel extends Disposable {
         ];
       }),
 
-      dom.maybe((use) => !use(hasCustomMapping) && use(this._pageWidgetType) !== 'chart', () => [
-        cssSeparator(),
-        dom.create(VisibleFieldsConfig, this._gristDoc, activeSection),
-      ]),
+      dom.maybe(
+        (use) => !(
+          use(hasCustomMapping) ||
+          use(this._pageWidgetType) === 'chart' ||
+          use(activeSection.isRaw)
+        ),
+        () => [
+          cssSeparator(),
+          dom.create(VisibleFieldsConfig, this._gristDoc, activeSection),
+        ]),
     ]);
   }
 
@@ -413,18 +425,19 @@ export class RightPanel extends Disposable {
         dom.hide((use) => !use(use(table).summarySourceTable)),
       ),
 
-      cssButtonRow(primaryButton('Edit Data Selection', this._createPageWidgetPicker(),
-        testId('pwc-editDataSelection')),
-        dom.maybe(
-          use => Boolean(use(use(activeSection.table).summarySourceTable)),
-          () => basicButton(
-            'Detach',
-            dom.on('click', () => this._gristDoc.docData.sendAction(
-              ["DetachSummaryViewSection", activeSection.getRowId()])),
-            testId('detach-button'),
-          )),
-        cssRow.cls('-top-space'),
-      ),
+      dom.maybe((use) => !use(activeSection.isRaw), () =>
+        cssButtonRow(primaryButton('Edit Data Selection', this._createPageWidgetPicker(),
+          testId('pwc-editDataSelection')),
+          dom.maybe(
+            use => Boolean(use(use(activeSection.table).summarySourceTable)),
+            () => basicButton(
+              'Detach',
+              dom.on('click', () => this._gristDoc.docData.sendAction(
+                ["DetachSummaryViewSection", activeSection.getRowId()])),
+              testId('detach-button'),
+            )),
+          cssRow.cls('-top-space'),
+      )),
 
       // TODO: "Advanced settings" is for "on-demand" marking of tables. This should only be shown
       // for raw data tables (once that's supported), should have updated UI, and should possibly
@@ -434,11 +447,13 @@ export class RightPanel extends Disposable {
       )),
       cssSeparator(),
 
-      cssLabel('SELECT BY'),
-      cssRow(
-        select(link, linkOptions, {defaultLabel: 'Select Widget'}),
-        testId('right-select-by')
-      ),
+      dom.maybe((use) => !use(activeSection.isRaw), () => [
+        cssLabel('SELECT BY'),
+        cssRow(
+          select(link, linkOptions, {defaultLabel: 'Select Widget'}),
+          testId('right-select-by')
+        ),
+      ]),
 
       domComputed((use) => {
         const activeSectionRef = activeSection.getRowId();

app/client/ui/ViewLayoutMenu.ts

@@ -1,5 +1,5 @@
 import {allCommands} from 'app/client/components/commands';
-import {ViewRec, ViewSectionRec} from 'app/client/models/DocModel';
+import {ViewSectionRec} from 'app/client/models/DocModel';
 import {testId} from 'app/client/ui2018/cssVars';
 import {menuDivider, menuItemCmd, menuItemLink} from 'app/client/ui2018/menus';
 import {dom} from 'grainjs';
@@ -7,7 +7,7 @@ import {dom} from 'grainjs';
 /**
  * Returns a list of menu items for a view section.
  */
-export function makeViewLayoutMenu(viewModel: ViewRec, viewSection: ViewSectionRec, isReadonly: boolean) {
+export function makeViewLayoutMenu(viewSection: ViewSectionRec, isReadonly: boolean) {
   const viewInstance = viewSection.viewInstance.peek()!;
   const gristDoc = viewInstance.gristDoc;
 
@@ -30,6 +30,7 @@ export function makeViewLayoutMenu(viewModel: ViewRec, viewSection: ViewSectionR
     menuDivider(),
   ];
 
+  const viewRec = viewSection.view();
   return [
     dom.maybe((use) => ['single'].includes(use(viewSection.parentKey)), () => contextMenu),
     menuItemCmd(allCommands.printSection, 'Print widget', testId('print-section')),
@@ -50,7 +51,7 @@ export function makeViewLayoutMenu(viewModel: ViewRec, viewSection: ViewSectionR
         testId('section-open-configuration')),
     ),
     menuItemCmd(allCommands.deleteSection, 'Delete widget',
-      dom.cls('disabled', viewModel.viewSections().peekLength <= 1 || isReadonly),
+      dom.cls('disabled', !viewRec.getRowId() || viewRec.viewSections().peekLength <= 1 || isReadonly),
       testId('section-delete')),
   ];
 }

app/client/ui/ViewSectionMenu.ts

@@ -1,18 +1,18 @@
-import { reportError } from 'app/client/models/AppModel';
-import { ColumnRec, DocModel, ViewRec, ViewSectionRec } from 'app/client/models/DocModel';
-import { FilterInfo } from 'app/client/models/entities/ViewSectionRec';
-import { CustomComputed } from 'app/client/models/modelUtil';
-import { attachColumnFilterMenu } from 'app/client/ui/ColumnFilterMenu';
-import { addFilterMenu } from 'app/client/ui/FilterBar';
-import { hoverTooltip } from 'app/client/ui/tooltips';
-import { makeViewLayoutMenu } from 'app/client/ui/ViewLayoutMenu';
-import { basicButton, primaryButton } from 'app/client/ui2018/buttons';
-import { colors, vars } from 'app/client/ui2018/cssVars';
-import { icon } from 'app/client/ui2018/icons';
-import { menu } from 'app/client/ui2018/menus';
-import { Sort } from 'app/common/SortSpec';
-import { Computed, dom, fromKo, IDisposableOwner, makeTestId, Observable, styled } from 'grainjs';
-import { PopupControl } from 'popweasel';
+import {reportError} from 'app/client/models/AppModel';
+import {ColumnRec, DocModel, ViewSectionRec} from 'app/client/models/DocModel';
+import {FilterInfo} from 'app/client/models/entities/ViewSectionRec';
+import {CustomComputed} from 'app/client/models/modelUtil';
+import {attachColumnFilterMenu} from 'app/client/ui/ColumnFilterMenu';
+import {addFilterMenu} from 'app/client/ui/FilterBar';
+import {hoverTooltip} from 'app/client/ui/tooltips';
+import {makeViewLayoutMenu} from 'app/client/ui/ViewLayoutMenu';
+import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
+import {colors, vars} from 'app/client/ui2018/cssVars';
+import {icon} from 'app/client/ui2018/icons';
+import {menu} from 'app/client/ui2018/menus';
+import {Sort} from 'app/common/SortSpec';
+import {Computed, dom, fromKo, IDisposableOwner, makeTestId, Observable, styled} from 'grainjs';
+import {PopupControl} from 'popweasel';
 import difference = require('lodash/difference');
 
 const testId = makeTestId('test-section-menu-');
@@ -39,7 +39,7 @@ function doRevert(viewSection: ViewSectionRec) {
 
 // [Filter Icon] (v) (x) - Filter toggle and all the components in the menu.
 export function viewSectionMenu(owner: IDisposableOwner, docModel: DocModel, viewSection: ViewSectionRec,
-                                viewModel: ViewRec, isReadonly: Observable<boolean>) {
+                                isReadonly: Observable<boolean>) {
 
   const popupControls = new WeakMap<ColumnRec, PopupControl>();
 
@@ -84,7 +84,8 @@ export function viewSectionMenu(owner: IDisposableOwner, docModel: DocModel, vie
           // [+] Add filter
           makeAddFilterButton(viewSection, popupControls),
           // [+] Toggle filter bar
-          makeFilterBarToggle(viewSection.activeFilterBar),
+          dom.maybe((use) => !use(viewSection.isRaw),
+            () => makeFilterBarToggle(viewSection.activeFilterBar)),
           // Widget options
           dom.maybe(use => use(viewSection.parentKey) === 'custom', () =>
             makeCustomOptions(viewSection)
@@ -125,7 +126,7 @@ export function viewSectionMenu(owner: IDisposableOwner, docModel: DocModel, vie
       testId('viewLayout'),
       cssFixHeight.cls(''),
       cssDotsIconWrapper(cssIcon('Dots')),
-      menu(_ctl => makeViewLayoutMenu(viewModel, viewSection, isReadonly.get()))
+      menu(_ctl => makeViewLayoutMenu(viewSection, isReadonly.get()))
     )
   ];
 }