(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/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();