showing required for new row

Author: sadakchap

src/components/BrowserCell/BrowserCell.react.js

@@ -214,12 +214,12 @@ export default class BrowserCell extends Component {
   //#endregion
 
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly } = this.props;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly, isRequired } = this.props;
     let content = value;
     this.copyableValue = content;
     let classes = [styles.cell, unselectable];
     if (hidden) {
-      content = '(hidden)';
+      content = row < 0 && isRequired ? '(required)' : '(hidden)';
       classes.push(styles.empty);
     } else if (value === undefined) {
       if (type === 'ACL') {
@@ -228,6 +228,8 @@ export default class BrowserCell extends Component {
         this.copyableValue = content = '(undefined)';
         classes.push(styles.empty);
       }
+      content = row < 0 && isRequired ? '(required)' : content;
+      row < 0 && classes.push(styles.empty);
     } else if (value === null) {
       this.copyableValue = content = '(null)';
       classes.push(styles.empty);

src/components/BrowserRow/BrowserRow.react.js

@@ -58,6 +58,7 @@ export default class BrowserRow extends Component {
               hidden = true;
             }
           }
+          let isRequired = columns[name].required;
           return (
             <BrowserCell
               key={name}
@@ -80,6 +81,7 @@ export default class BrowserRow extends Component {
               objectId={obj.id}
               value={attr}
               hidden={hidden}
+              isRequired={isRequired}
               setCopyableValue={setCopyableValue}
               setContextMenu={setContextMenu}
               onEditSelectedRow={onEditSelectedRow} />

src/components/DataBrowserHeader/DataBrowserHeader.react.js

@@ -54,7 +54,7 @@ const dataBrowserHeaderSource = {
 }))
 class DataBrowserHeader extends React.Component {
   render() {
-    let { connectDragSource, connectDropTarget, name, type, targetClass, order, style, isDragging, isOver, required } = this.props;
+    let { connectDragSource, connectDropTarget, name, type, targetClass, order, style, isDragging, isOver } = this.props;
     let classes = [styles.header, unselectable];
     if (order) {
       classes.push(styles[order]);
@@ -67,7 +67,7 @@ class DataBrowserHeader extends React.Component {
     }
     return connectDragSource(connectDropTarget(
       <div className={classes.join(' ')} style={style}>
-        <div className={styles.name}>{name} {required && <span>*</span>}</div>
+        <div className={styles.name}>{name}</div>
         <div className={styles.type}>{targetClass ? `${type} <${targetClass}>` : type}</div>
       </div>
     ));

src/components/DataBrowserHeader/DataBrowserHeader.scss

@@ -20,21 +20,15 @@
 }
 
 .name {
-  position: relative;
   color: white;
   font-size: 12px;
   height: 22px;
   line-height: 22px;
-  padding-right: 8px;
+  margin-right: 8px;
   float: left;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  & span {
-    position: absolute;
-    top: -6px;
-    right: 0;
-  }
 }
 
 .type {
@@ -44,7 +38,6 @@
   line-height: 22px;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-left: 8px;
 }
 
 .ascending {

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -27,7 +27,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       </div>
     ];
 
-    headers.forEach(({ width, name, type, targetClass, order, visible, preventSort, required }, i) => {
+    headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => {
       if (!visible) return;
       let wrapStyle = { width };
       if (i % 2) {
@@ -57,7 +57,6 @@ export default class DataBrowserHeaderBar extends React.Component {
             targetClass={targetClass}
             order={order}
             index={i}
-            required={required}
             moveDataBrowserHeader={this.props.handleDragDrop}/>
         </div>
       );