From 958c302feb212538bcae92d35ca4eaeff6c98be1 Mon Sep 17 00:00:00 2001 From: Damian Stasik Date: Wed, 20 Oct 2021 15:49:51 +0200 Subject: [PATCH 1/3] refactor: distinguish external from internal classes by showing real name with underscore --- .../Data/Browser/AddColumnDialog.react.js | 7 ++----- .../Browser/AttachSelectedRowsDialog.react.js | 3 +-- src/dashboard/Data/Browser/Browser.react.js | 8 ++++---- .../Data/Browser/CreateClassDialog.react.js | 6 +++--- src/dashboard/Data/Browser/DataBrowser.react.js | 11 +++++------ .../Data/Browser/SchemaOverview.react.js | 4 ++-- src/lib/Constants.js | 16 ++++++++-------- 7 files changed, 25 insertions(+), 30 deletions(-) diff --git a/src/dashboard/Data/Browser/AddColumnDialog.react.js b/src/dashboard/Data/Browser/AddColumnDialog.react.js index ab2ec9d208..7c422962fa 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 1722341c97..3132ad6af1 100644 --- a/src/dashboard/Data/Browser/Browser.react.js +++ b/src/dashboard/Data/Browser/Browser.react.js @@ -1379,8 +1379,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 }); } @@ -1621,7 +1621,7 @@ class Browser extends DashboardView { } else if (this.state.rowsToDelete) { extras = ( this.setState({ rowsToDelete: null })} @@ -1738,7 +1738,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' ], From db84533fe958b7c1d1f3e4daa2cc6cfe66b56084 Mon Sep 17 00:00:00 2001 From: Damian Stasik Date: Wed, 20 Oct 2021 16:37:25 +0200 Subject: [PATCH 2/3] feat: add separator between internal and custom classes --- src/components/CategoryList/CategoryList.react.js | 3 +++ src/components/CategoryList/CategoryList.scss | 9 ++++++++- src/dashboard/Data/Browser/Browser.react.js | 3 +++ 3 files changed, 14 insertions(+), 1 deletion(-) 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..405d9cce3d 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; + background-color: #3e87b2; + border: 0; + height: 1px; +} diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js index 3132ad6af1..6e8ffc2fe4 100644 --- a/src/dashboard/Data/Browser/Browser.react.js +++ b/src/dashboard/Data/Browser/Browser.react.js @@ -1387,6 +1387,9 @@ class Browser extends DashboardView { }); 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 ( Date: Wed, 20 Oct 2021 17:01:43 +0200 Subject: [PATCH 3/3] fix: move the separator a bit to the right to align it with links --- src/components/CategoryList/CategoryList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CategoryList/CategoryList.scss b/src/components/CategoryList/CategoryList.scss index 405d9cce3d..f24bd69580 100644 --- a/src/components/CategoryList/CategoryList.scss +++ b/src/components/CategoryList/CategoryList.scss @@ -57,7 +57,7 @@ } .separator { - margin: 6px 0; + margin: 6px 0 6px 12px; background-color: #3e87b2; border: 0; height: 1px;