feat: add visual distinction in data browser for internal classes and display their real names with underscore (#1878)

Author: visualfanatic

src/components/CategoryList/CategoryList.react.js

@@ -59,6 +59,9 @@ export default class CategoryList extends React.Component {
       <div ref={this.listWrapperRef} className={styles.class_list}>
         {this.props.categories.map((c) => {
           let id = c.id || c.name;
+          if (c.type === 'separator') {
+            return <hr key={id} className={styles.separator} />;
+          }
           let count = c.count;
           let className = id === this.props.current ? styles.active : '';
           let link = this.context.generatePath(

src/components/CategoryList/CategoryList.scss

@@ -10,13 +10,13 @@
 .class_list {
   position: relative;
   margin-bottom: 5px;
+  border-left: 1px solid #3e87b2;
 
   a {
     display: block;
     padding-left: 12px;
     height: 20px;
     line-height: 20px;
-    border-left: 1px solid #3e87b2;
     color: #8fb9cf;
     font-size: 12px;
 
@@ -55,3 +55,10 @@
   background: white;
   transition: top 0.2s cubic-bezier(1, 0, 0, 1);
 }
+
+.separator {
+  margin: 6px 0 6px 12px;
+  background-color: #3e87b2;
+  border: 0;
+  height: 1px;
+}

src/dashboard/Data/Browser/AddColumnDialog.react.js

@@ -21,10 +21,7 @@ import SegmentSelect      from 'components/SegmentSelect/SegmentSelect.react';
 import FileInput          from 'components/FileInput/FileInput.react';
 import styles             from 'dashboard/Data/Browser/Browser.scss';
 import validateNumeric    from 'lib/validateNumeric';
-import {
-  DataTypes,
-  SpecialClasses
-}                         from 'lib/Constants';
+import { DataTypes }      from 'lib/Constants';
 
 function validColumnName(name) {
   return !!name.match(/^[a-zA-Z][_a-zA-Z0-9]*$/);
@@ -100,7 +97,7 @@ export default class AddColumnDialog extends React.Component {
       <Dropdown
         value={this.state.target}
         onChange={(target) => this.setState({ target: target })}>
-        {this.props.classes.map((c) => <Option key={c} value={c}>{SpecialClasses[c] || c}</Option>)}
+        {this.props.classes.map((c) => <Option key={c} value={c}>{c}</Option>)}
       </Dropdown>
     );
   }

src/dashboard/Data/Browser/AttachSelectedRowsDialog.react.js

@@ -5,7 +5,6 @@ import Label from 'components/Label/Label.react';
 import TextInput from 'components/TextInput/TextInput.react';
 import Dropdown from 'components/Dropdown/Dropdown.react';
 import Option from 'components/Dropdown/Option.react';
-import { SpecialClasses } from 'lib/Constants';
 
 export default class AttachSelectedRowsDialog extends React.Component {
   constructor(props) {
@@ -147,7 +146,7 @@ export default class AttachSelectedRowsDialog extends React.Component {
             >
               {classes.map(className => (
                 <Option key={className} value={className}>
-                  {SpecialClasses[className] || className}
+                  {className}
                 </Option>
               ))}
             </Dropdown>

src/dashboard/Data/Browser/Browser.react.js

@@ -1379,14 +1379,17 @@ class Browser extends DashboardView {
       } else if (count >= 1000) {
         count = prettyNumber(count);
       }
-      if (SpecialClasses[key]) {
-        special.push({ name: SpecialClasses[key], id: key, count: count });
+      if (SpecialClasses.includes(key)) {
+        special.push({ name: key, id: key, count: count });
       } else {
         categories.push({ name: key, count: count });
       }
     });
     special.sort((a, b) => stringCompare(a.name, b.name));
     categories.sort((a, b) => stringCompare(a.name, b.name));
+    if (special.length > 0 && categories.length > 0) {
+      special.push({ type: 'separator', id: 'classSeparator' })
+    }
     return (
       <CategoryList
         current={current}
@@ -1621,7 +1624,7 @@ class Browser extends DashboardView {
     } else if (this.state.rowsToDelete) {
       extras = (
         <DeleteRowsDialog
-          className={SpecialClasses[className] || className}
+          className={className}
           selection={this.state.rowsToDelete}
           relation={this.state.relation}
           onCancel={() => this.setState({ rowsToDelete: null })}
@@ -1738,7 +1741,7 @@ class Browser extends DashboardView {
     } else if (this.state.rowsToExport) {
       extras = (
         <ExportSelectedRowsDialog
-          className={SpecialClasses[className] || className}
+          className={className}
           selection={this.state.rowsToExport}
           onCancel={this.cancelExportSelectedRows}
           onConfirm={() => this.confirmExportSelectedRows(this.state.rowsToExport)}

src/dashboard/Data/Browser/CreateClassDialog.react.js

@@ -46,9 +46,9 @@ export default class CreateClassDialog extends React.Component {
 
   render() {
     let availableClasses = ['Custom'];
-    for (let raw in SpecialClasses) {
-      if (raw !== '_Session' && this.props.currentClasses.indexOf(raw) < 0) {
-        availableClasses.push(SpecialClasses[raw]);
+    for (let raw of SpecialClasses) {
+      if (raw !== '_Session' && !this.props.currentClasses.includes(raw)) {
+        availableClasses.push(raw);
       }
     }
 

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -13,7 +13,6 @@ import * as ColumnPreferences from 'lib/ColumnPreferences';
 import ParseApp               from 'lib/ParseApp';
 import React                  from 'react';
 import PropTypes              from 'lib/PropTypes';
-import { SpecialClasses }     from 'lib/Constants';
 
 /**
  * DataBrowser renders the browser toolbar and data table
@@ -200,7 +199,7 @@ export default class DataBrowser extends React.Component {
         e.preventDefault();
         break;
       case 37:
-        // Left - standalone (move to the next visible column on the left) 
+        // Left - standalone (move to the next visible column on the left)
         // or with ctrl/meta (excel style - move to the first visible column)
         this.setState({
           current: {
@@ -212,7 +211,7 @@ export default class DataBrowser extends React.Component {
         e.preventDefault();
         break;
       case 38:
-        // Up - standalone (move to the previous row) 
+        // Up - standalone (move to the previous row)
         // or with ctrl/meta (excel style - move to the first row)
         this.setState({
           current: {
@@ -223,7 +222,7 @@ export default class DataBrowser extends React.Component {
         e.preventDefault();
         break;
       case 39:
-        // Right - standalone (move to the next visible column on the right) 
+        // Right - standalone (move to the next visible column on the right)
         // or with ctrl/meta (excel style - move to the last visible column)
         this.setState({
           current: {
@@ -235,7 +234,7 @@ export default class DataBrowser extends React.Component {
         e.preventDefault();
         break;
       case 40:
-        // Down - standalone (move to the next row) 
+        // Down - standalone (move to the next row)
         // or with ctrl/meta (excel style - move to the last row)
         this.setState({
           current: {
@@ -322,7 +321,7 @@ export default class DataBrowser extends React.Component {
         <BrowserToolbar
           count={count}
           hidePerms={className === '_Installation'}
-          className={SpecialClasses[className] || className}
+          className={className}
           classNameForEditors={className}
           setCurrent={this.setCurrent}
           enableDeleteAllRows={this.context.currentApp.serverInfo.features.schemas.clearAllDataFromClass && !preventSchemaEdits}

src/dashboard/Data/Browser/SchemaOverview.react.js

@@ -49,8 +49,8 @@ class Browser extends DashboardView {
       } else if (count >= 1000) {
         count = prettyNumber(count);
       }
-      if (SpecialClasses[key]) {
-        special.push({ name: SpecialClasses[key], id: key, count: count });
+      if (SpecialClasses.includes(key)) {
+        special.push({ name: key, id: key, count: count });
       } else {
         categories.push({ name: key, count: count });
       }

src/lib/Constants.js

@@ -45,14 +45,14 @@ export const Directions = {
   LEFT: 'LEFT'
 };
 
-export const SpecialClasses = {
-  _User: 'User',
-  _Installation: 'Installation',
-  _Role: 'Role',
-  _Product: 'Product',
-  _Session: 'Session',
-  _PushStatus: 'PushStatus',
-};
+export const SpecialClasses = [
+  '_User',
+  '_Installation',
+  '_Role',
+  '_Product',
+  '_Session',
+  '_PushStatus',
+];
 
 export const DefaultColumns = {
   All: [ 'objectId', 'ACL', 'createdAt', 'updatedAt' ],