(core) Remove code related to newui

Summary: Change code that conditionally depended on #newui in the URL to assume that everything is always in the new UI now.

Test Plan: this

Reviewers: dsagal

Reviewed By: dsagal

Subscribers: dsagal

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

app/client/components/ChartView.ts

@@ -431,7 +431,7 @@ function getPlotlyLayout(options: ChartOptions): Partial<Layout> {
 export class ChartConfig extends GrainJSDisposable {
 
   // helper to build the draggable field list
-  private _configFieldsHelper = VisibleFieldsConfig.create(this, this._gristDoc, this._section, true);
+  private _configFieldsHelper = VisibleFieldsConfig.create(this, this._gristDoc, this._section);
 
   // The index for the x-axis in the list visible fields. Could be eigther 0 or 1 depending on
   // whether multiseries is set.

app/client/components/DetailView.css

@@ -114,12 +114,8 @@
 }
 
 .grist-single-record__menu {
-  padding: .2rem .5rem .2rem 0;
   align-items: center;
   flex-shrink: 0;
-}
-
-.grist-single-record__menu.newui {
   padding: 0;
   margin-top: -4px;
 }

app/client/components/DetailView.js

@@ -331,7 +331,6 @@ DetailView.prototype.buildTitleControls = function() {
     kd.maybe(this.recordLayout.layoutEditor, (editor) => editor.buildEditorDom()),
 
     kd.maybe(showControls, () => dom('div.grist-single-record__menu.flexhbox.flexnone',
-      this.gristDoc.app.addNewUIClass(),
       dom('div.grist-single-record__menu__count.flexitem',
         // Total should not include the add record row
         kd.text(() => this._isAddRow() ? 'Add record' :

app/client/components/GridView.css

@@ -10,10 +10,6 @@
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
-  --gridview-header-height: 2.2rem;
-}
-
-.gridview_data_pane.newui {
   --gridview-header-height: 24px;
 }
 
@@ -28,7 +24,7 @@
   border-top: 1px solid lightgrey;
 }
 
-.gridview_data_pane.newui > .gridview_data_scroll {
+.gridview_data_pane > .gridview_data_scroll {
   border-top: none;
 }
 
@@ -253,12 +249,12 @@
   z-index: 1;
 }
 
-.gridview_data_pane.newui > .scroll_shadow_top {
+.gridview_data_pane > .scroll_shadow_top {
   top: var(--gridview-header-height);
 }
 
-.gridview_data_pane.newui > .gridview_data_corner_overlay,
-.gridview_data_pane.newui > .gridview_header_backdrop_top {
+.gridview_data_pane > .gridview_data_corner_overlay,
+.gridview_data_pane > .gridview_header_backdrop_top {
   top: 0px;
 }
 

app/client/components/GridView.js

@@ -849,7 +849,6 @@ GridView.prototype.buildDom = function() {
 
   return dom(
     'div.gridview_data_pane.flexvbox',
-    this.gristDoc.app.addNewUIClass(),
     // offset for frozen columns - how much move them to the left
     kd.style('--frozen-offset', this.frozenOffset),
     // total width of frozen columns

app/client/models/gristUrlState.ts

@@ -24,7 +24,7 @@
  */
 import {unsavedChanges} from 'app/client/components/UnsavedChanges';
 import {UrlState} from 'app/client/lib/UrlState';
-import {decodeUrl, encodeUrl, getSlugIfNeeded, GristLoadConfig, IGristUrlState, useNewUI} from 'app/common/gristUrls';
+import {decodeUrl, encodeUrl, getSlugIfNeeded, GristLoadConfig, IGristUrlState} from 'app/common/gristUrls';
 import {addOrgToPath} from 'app/common/urlUtils';
 import {Document} from 'app/common/UserAPI';
 import isEmpty = require('lodash/isEmpty');
@@ -146,7 +146,7 @@ export class UrlStateImpl {
   public updateState(prevState: IGristUrlState, newState: IGristUrlState): IGristUrlState {
     const keepState = (newState.org || newState.ws || newState.homePage || newState.doc || isEmpty(newState) ||
                        newState.account || newState.billing  || newState.welcome) ?
-      (prevState.org ? {org: prevState.org, newui: prevState.newui} : {}) :
+      (prevState.org ? {org: prevState.org} : {}) :
       prevState;
     return {...keepState, ...newState};
   }
@@ -166,14 +166,12 @@ export class UrlStateImpl {
     const accountReload = Boolean(prevState.account) !== Boolean(newState.account);
     // Reload when moving to/from a billing page.
     const billingReload = Boolean(prevState.billing) !== Boolean(newState.billing);
-    // Reload when changing 'newui' flag.
-    const newuiReload = useNewUI(prevState.newui) !== useNewUI(newState.newui);
     // Reload when moving to/from a welcome page.
     const welcomeReload = Boolean(prevState.welcome) !== Boolean(newState.welcome);
     // Reload when link keys change, which changes what the user can access
     const linkKeysReload = !isEqual(prevState.params?.linkParameters, newState.params?.linkParameters);
     return Boolean(orgReload || accountReload || billingReload || gristConfig.errPage
-      || docReload || newuiReload || welcomeReload || linkKeysReload);
+      || docReload || welcomeReload || linkKeysReload);
   }
 
   /**

app/client/ui/App.ts

@@ -17,7 +17,7 @@ import {BaseAPI} from 'app/common/BaseAPI';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
 import {fetchFromHome} from 'app/common/urlUtils';
 import {ISupportedFeatures} from 'app/common/UserConfig';
-import {dom, DomElementMethod} from 'grainjs';
+import {dom} from 'grainjs';
 import * as ko from 'knockout';
 
 // tslint:disable:no-console
@@ -31,9 +31,6 @@ export class App extends DisposableWithEvents {
   // Used by #newui code to avoid a dependency on commands.js, and by tests to issue commands.
   public allCommands = commands.allCommands;
 
-  // Whether new UI should be produced by code that can do either old or new.
-  public readonly useNewUI: true = true;
-
   public comm = this.autoDispose(Comm.create());
   public clientScope: ClientScope;
   public features: ko.Computed<ISupportedFeatures>;
@@ -182,14 +179,6 @@ export class App extends DisposableWithEvents {
     this.topAppModel.reload();
   }
 
-  // When called as a dom method, adds the "newui" class when ?newui=1 is set. For example
-  //    dom('div.some-old-class', this.app.addNewUIClass(), ...)
-  // Then you may override newui styles in CSS by using selectors like:
-  //    .some-old-class.newui { ... }
-  public addNewUIClass(): DomElementMethod {
-    return (elem) => { if (this.useNewUI) { elem.classList.add('newui'); } };
-  }
-
   // Intended to be used by tests to enable specific features.
   public enableFeature(featureName: keyof ISupportedFeatures, onOff: boolean) {
     const features = this.features();

app/client/ui/Document.css

@@ -1,32 +0,0 @@
-#doc_window {
-  overflow: hidden;
-  height: 100%;
-}
-
-#doc_pane {
-  overflow: hidden;
-  z-index: 7;
-  background-color: #f4f4f4;
-}
-
-#doc_pane.newui {
-  background-color: white;
-}
-
-#view_pane {
-  position: relative;
-  min-width: 240px;
-
-  background-color: #f4f4f4;
-  margin: 3px;
-}
-
-#doc_pane.newui > #view_pane {
-  background-color: white;
-  margin: 0px;
-  padding: 12px;
-}
-
-#view_content {
-  position: relative;
-}

app/client/ui/RightPanel.ts

@@ -343,7 +343,7 @@ export class RightPanel extends Disposable {
 
       dom.maybe((use) => use(this._pageWidgetType) !== 'chart', () => [
         cssSeparator(),
-        dom.create(VisibleFieldsConfig, this._gristDoc, activeSection, true),
+        dom.create(VisibleFieldsConfig, this._gristDoc, activeSection),
       ]),
     ]);
   }

app/client/ui/VisibleFieldsConfig.ts

@@ -77,8 +77,7 @@ export class VisibleFieldsConfig extends Disposable {
   private _hiddenFieldsSelection = new Set<number>();
 
   constructor(private _gristDoc: GristDoc,
-              private _section: ViewSectionRec,
-              private _useNewUI: boolean = false) {
+              private _section: ViewSectionRec) {
     super();
 
     // Unselects visible fields that are hidden.
@@ -98,7 +97,6 @@ export class VisibleFieldsConfig extends Disposable {
    * Build the draggable list components to show the visible fields of a section.
    */
   public buildVisibleFieldsConfigHelper(options: DraggableFieldsOption) {
-    const itemClass = this._useNewUI ? cssDragRow.className : 'view_config_draggable_field';
     let fields = this._section.viewFields.peek();
 
     if (options.skipFirst || options.filterFunc) {
@@ -131,7 +129,7 @@ export class VisibleFieldsConfig extends Disposable {
       fields,
       options.itemCreateFunc,
       {
-        itemClass,
+        itemClass: cssDragRow.className,
         reorder: this.changeFieldPosition.bind(this),
         remove: this.removeField.bind(this),
         receive: this.addField.bind(this),
@@ -145,8 +143,8 @@ export class VisibleFieldsConfig extends Disposable {
    * section. Each draggable list can be parametrized using both `options.visibleFields` and
    * `options.hiddenFields` options.
    *
-   * @param {DraggableFieldOption} options.hiddenFields options for the list of hidden fields.
-   * @param {DraggableFieldOption} options.visibleFields options for the list of visible fields.
+   * @param {DraggableFieldsOption} options.hiddenFields options for the list of hidden fields.
+   * @param {DraggableFieldsOption} options.visibleFields options for the list of visible fields.
    * @return {[Element, Element]} the two draggable elements (ie: koForm.draggableList) showing
    *                              respectivelly the list of visible fields and the list of hidden
    *                              fields of section.
@@ -157,13 +155,12 @@ export class VisibleFieldsConfig extends Disposable {
       hiddenFields: DraggableFieldsOption,
     }): [HTMLElement, HTMLElement] {
 
-    const itemClass = this._useNewUI ? cssDragRow.className : 'view_config_draggable_field';
     const fieldsDraggable = this.buildVisibleFieldsConfigHelper(options.visibleFields);
     const hiddenFieldsDraggable = kf.draggableList(
       this._hiddenFields,
       options.hiddenFields.itemCreateFunc,
       {
-        itemClass,
+        itemClass: cssDragRow.className,
         reorder() { throw new Error('Hidden Fields cannot be reordered'); },
         receive() { throw new Error('Cannot drop items into Hidden Fields'); },
         remove(item: ColumnRec) {

app/common/gristUrls.ts

@@ -64,7 +64,6 @@ export interface IGristUrlState {
   mode?: OpenDocMode;
   fork?: UrlIdParts;
   docPage?: IDocPage;
-  newui?: boolean;
   account?: AccountPage;
   billing?: BillingPage;
   welcome?: WelcomePage;
@@ -198,9 +197,6 @@ export function encodeUrl(gristConfig: Partial<GristLoadConfig>,
   }
 
   const queryParams = pickBy(state.params, (v, k) => k !== 'linkParameters') as {[key: string]: string};
-  if (state.newui !== undefined) {
-    queryParams.newui = state.newui ? '1' : '0';
-  }
   for (const [k, v] of Object.entries(state.params?.linkParameters || {})) {
     queryParams[`${k}_`] = v;
   }
@@ -276,7 +272,6 @@ export function decodeUrl(gristConfig: Partial<GristLoadConfig>, location: Locat
     }
   }
   if (map.has('m')) { state.mode = OpenDocMode.parse(map.get('m')); }
-  if (sp.has('newui')) { state.newui = useNewUI(sp.get('newui') ? sp.get('newui') === '1' : undefined); }
   if (map.has('account')) { state.account = AccountPage.parse('account') || 'profile'; }
   if (map.has('billing')) { state.billing = BillingSubPage.parse(map.get('billing')) || 'billing'; }
   if (map.has('welcome')) { state.welcome = WelcomePage.parse(map.get('welcome')) || 'user'; }
@@ -331,10 +326,6 @@ export function decodeUrl(gristConfig: Partial<GristLoadConfig>, location: Locat
   return state;
 }
 
-export function useNewUI(newui: boolean|undefined) {
-  return newui !== false;
-}
-
 // Returns a function suitable for user with makeUrl/setHref/etc, which updates aclAsUser*
 // linkParameters in the current state, unsetting them if email is null. Optional extraState
 // allows setting other properties (e.g. 'docPage') at the same time.