(core) New UI for raw data views

Summary:
Creating new UI for raw data views based on design.
- Renaming left for follow up diff
- Link in the menu is hidden for now
To access raw UI, use /p/data URL.

Test Plan: new tests

Reviewers: georgegevoian

Reviewed By: georgegevoian

Subscribers: dsagal

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

app/client/components/GridView.js

@@ -230,8 +230,12 @@ function GridView(gristDoc, viewSectionModel, isPreview = false) {
   this.onEvent(this.scrollPane, 'scroll', this.onScroll);
 
   //--------------------------------------------------
-  // Command group implementing all grid level commands.
+  // Command group implementing all grid level commands (except cancel)
   this.autoDispose(commands.createGroup(GridView.gridCommands, this, this.viewSection.hasFocus));
+  // Cancel command is registered conditionally, only when there is an active
+  // cell selection. This command is also used by Raw Data Views, to close the Grid popup.
+  const hasSelection = this.autoDispose(ko.pureComputed(() => !this.cellSelector.isCurrentSelectType('')));
+  this.autoDispose(commands.createGroup(GridView.selectionCommands, this, hasSelection));
 
   // Timer to allow short, otherwise non-actionable clicks on column names to trigger renaming.
   this._colClickTime = 0;  // Units: milliseconds.
@@ -244,6 +248,12 @@ _.extend(GridView.prototype, BaseView.prototype);
 // ======================================================================================
 // GRID-LEVEL COMMANDS
 
+// Moved out of all commands to support Raw Data Views (which use this command to close
+// the Grid popup).
+GridView.selectionCommands = {
+  cancel: function() { this.clearSelection(); }
+}
+
 GridView.gridCommands = {
   cursorUp: function() {
     // This conditional exists so that when users have the cursor in the top row but are not
@@ -302,7 +312,6 @@ GridView.gridCommands = {
     await this.paste(pasteObj, cutCallback);
     await this.scrollToCursor(false);
   },
-  cancel: function() { this.clearSelection(); },
   sortAsc: function() {
     sortBy(this.viewSection.activeSortSpec, this.currentColumn().getRowId(), Sort.ASC);
   },