diff --git a/src/components/CategoryList/CategoryList.react.js b/src/components/CategoryList/CategoryList.react.js
index 6a2ff95bee..97d55573c2 100644
--- a/src/components/CategoryList/CategoryList.react.js
+++ b/src/components/CategoryList/CategoryList.react.js
@@ -59,6 +59,9 @@ export default class CategoryList extends React.Component {
{this.props.categories.map((c) => {
let id = c.id || c.name;
+ if (c.type === 'separator') {
+ return
;
+ }
let count = c.count;
let className = id === this.props.current ? styles.active : '';
let link = this.context.generatePath(
diff --git a/src/components/CategoryList/CategoryList.scss b/src/components/CategoryList/CategoryList.scss
index 168540b28a..f24bd69580 100644
--- a/src/components/CategoryList/CategoryList.scss
+++ b/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;
+}
diff --git a/src/dashboard/Data/Browser/AddColumnDialog.react.js b/src/dashboard/Data/Browser/AddColumnDialog.react.js
index 493e99c3d2..6b11c174b3 100644
--- a/src/dashboard/Data/Browser/AddColumnDialog.react.js
+++ b/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 {
this.setState({ target: target })}>
- {this.props.classes.map((c) => )}
+ {this.props.classes.map((c) => )}
);
}
diff --git a/src/dashboard/Data/Browser/AttachSelectedRowsDialog.react.js b/src/dashboard/Data/Browser/AttachSelectedRowsDialog.react.js
index aea434f49d..6bdd247aca 100644
--- a/src/dashboard/Data/Browser/AttachSelectedRowsDialog.react.js
+++ b/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 => (
))}
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 6d97d54cea..518cbaa739 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/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 (
this.setState({ rowsToDelete: null })}
@@ -1738,7 +1741,7 @@ class Browser extends DashboardView {
} else if (this.state.rowsToExport) {
extras = (
this.confirmExportSelectedRows(this.state.rowsToExport)}
diff --git a/src/dashboard/Data/Browser/CreateClassDialog.react.js b/src/dashboard/Data/Browser/CreateClassDialog.react.js
index af2fd46249..49256390be 100644
--- a/src/dashboard/Data/Browser/CreateClassDialog.react.js
+++ b/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);
}
}
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 785815466a..f0e7e040ba 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/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 {
= 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 });
}
diff --git a/src/lib/Constants.js b/src/lib/Constants.js
index cb206cf9f4..60615d957a 100644
--- a/src/lib/Constants.js
+++ b/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' ],