this.setState({ open: false })}>
+
this.setState({ open: false })}>
{this.props.title}
@@ -48,6 +52,9 @@ export default class BrowserMenu extends React.Component {
);
}
const classes = [styles.entry];
+ if (this.props.active) {
+ classes.push(styles.active);
+ }
if (this.props.disabled) {
classes.push(styles.disabled);
}
@@ -55,6 +62,7 @@ export default class BrowserMenu extends React.Component {
if (!this.props.disabled) {
onClick = () => {
this.setState({ open: true });
+ this.props.setCurrent(null);
};
}
return (
diff --git a/src/components/BrowserMenu/BrowserMenu.scss b/src/components/BrowserMenu/BrowserMenu.scss
index 189d8f1efa..4c357e980d 100644
--- a/src/components/BrowserMenu/BrowserMenu.scss
+++ b/src/components/BrowserMenu/BrowserMenu.scss
@@ -12,8 +12,8 @@
}
.entry {
- height: 22px;
- padding: 8px 8px 0 8px;
+ height: 30px;
+ padding: 8px;
svg {
fill: #66637A;
@@ -33,6 +33,15 @@
fill: #66637A;
}
}
+
+ &.active {
+ background: $orange;
+ border-radius: 5px;
+
+ svg {
+ fill: white;
+ }
+ }
}
.title {
@@ -43,21 +52,28 @@
svg {
fill: white;
}
+
+ &.active {
+ background: $orange;
+ border-radius: 5px;
+ }
}
.entry, .title {
@include NotoSansFont;
+ position: relative;
+ bottom: -4px;
font-size: 14px;
color: #ffffff;
cursor: pointer;
svg {
- vertical-align: middle;
+ vertical-align: top;
margin-right: 4px;
}
span {
- vertical-align: middle;
+ vertical-align: top;
height: 14px;
line-height: 14px;
}
diff --git a/src/components/BrowserMenu/MenuItem.react.js b/src/components/BrowserMenu/MenuItem.react.js
index b0fb1fbd2b..27b1df6f9f 100644
--- a/src/components/BrowserMenu/MenuItem.react.js
+++ b/src/components/BrowserMenu/MenuItem.react.js
@@ -8,11 +8,17 @@
import React from 'react';
import styles from 'components/BrowserMenu/BrowserMenu.scss';
-let MenuItem = ({ text, disabled, onClick }) => {
+let MenuItem = ({ text, disabled, active, greenActive, onClick }) => {
let classes = [styles.item];
if (disabled) {
classes.push(styles.disabled);
}
+ if (active) {
+ classes.push(styles.active);
+ }
+ if (greenActive) {
+ classes.push(styles.greenActive);
+ }
return
{text}
;
};
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index da8302e5e9..25924d651e 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -19,8 +19,21 @@ export default class BrowserRow extends Component {
}
render() {
- const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange } = this.props;
+ const { className, columns, currentCol, isUnique, obj, onPointerClick, onPointerCmdClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange, markRequiredFieldRow } = this.props;
let attributes = obj.attributes;
+ let requiredCols = [];
+ Object.entries(columns).reduce((acc, cur) => {
+ if (cur[1].required) {
+ acc.push(cur[0]);
+ }
+ return acc;
+ }, requiredCols);
+ // for dynamically changing required field on _User class
+ if (obj.className === '_User' && (obj.get('username') !== undefined || obj.get('password') !== undefined)) {
+ requiredCols = ['username', 'password'];
+ } else if (obj.className === '_User' && obj.get('authData') !== undefined) {
+ requiredCols = ['authData'];
+ }
return (
@@ -58,6 +71,7 @@ export default class BrowserRow extends Component {
hidden = true;
}
}
+ let isRequired = requiredCols.includes(name);
return (
@@ -88,4 +105,4 @@ export default class BrowserRow extends Component {
);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
index b4e6df4280..f190d098fa 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
@@ -40,7 +40,14 @@ export default class ColumnsConfiguration extends React.Component {
}
showAll() {
- this.props.handleColumnsOrder(this.props.order.map(order => ({ ...order, visible: true })));
+ let shouldReload = false;
+ let updatedOrder = this.props.order.map(field => {
+ if (!shouldReload && !field.cached) {
+ shouldReload = true;
+ }
+ return { ...field, visible: true }
+ });
+ this.props.handleColumnsOrder(updatedOrder, shouldReload);
}
hideAll() {
@@ -48,13 +55,19 @@ export default class ColumnsConfiguration extends React.Component {
}
render() {
- const { handleColumnDragDrop, handleColumnsOrder, order } = this.props;
- const [ title, entry ] = [styles.title, styles.entry ].map(className => (
+ const { handleColumnDragDrop, handleColumnsOrder, order, disabled } = this.props;
+ let [ title, entry ] = [styles.title, styles.entry ].map(className => (
Manage Columns
));
+ if (disabled) {
+ entry =
+
+ Manage Columns
+
;
+ }
let popover = null;
if (this.state.open) {
@@ -78,7 +91,19 @@ export default class ColumnsConfiguration extends React.Component {
name,
visible
};
- handleColumnsOrder(updatedOrder);
+ let shouldReload = visible;
+ // these fields are always cached as they are never excluded from server
+ // therefore no need to make another request.
+ if (name === 'objectId' || name === 'createdAt' || name === 'updatedAt' || name === 'ACL') {
+ shouldReload = false;
+ }
+ if (this.props.className === '_User' && name === 'password') {
+ shouldReload = false;
+ }
+ if (updatedOrder[index].cached) {
+ shouldReload = false;
+ }
+ handleColumnsOrder(updatedOrder, shouldReload);
}}
handleColumnDragDrop={handleColumnDragDrop} />
})}
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.scss b/src/components/ColumnsConfiguration/ColumnsConfiguration.scss
index 5efb6b55e8..eb3220140d 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.scss
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.scss
@@ -12,6 +12,15 @@
&:hover svg {
fill: white;
}
+
+ &.disabled {
+ cursor: not-allowed;
+ color: #66637A;
+
+ &:hover svg {
+ fill: #66637A;
+ }
+ }
}
.title {
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index a773e13cf4..04007d4426 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -27,7 +27,7 @@ export default class DataBrowserHeaderBar extends React.Component {
];
- headers.forEach(({ width, name, type, targetClass, order, visible }, i) => {
+ headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => {
if (!visible) return;
let wrapStyle = { width };
if (i % 2) {
@@ -36,15 +36,20 @@ export default class DataBrowserHeaderBar extends React.Component {
wrapStyle.background = '#66637A';
}
let onClick = null;
- if (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean') {
+ if (!preventSort && (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean')) {
onClick = () => updateOrdering((order === 'descending' ? '' : '-') + name);
}
+ let className = styles.wrap;
+ if (preventSort) {
+ className += ` ${styles.preventSort} `;
+ }
+
elements.push(