feat: Add row number column to data browser

src/components/BrowserRow/BrowserRow.react.js

@@ -33,6 +33,9 @@ export default class BrowserRow extends Component {
       row,
       rowValue,
       rowWidth,
+      showRowNumber,
+      rowNumberWidth,
+      skip,
       selection,
       selectRow,
       setCopyableValue,
@@ -79,17 +82,13 @@ export default class BrowserRow extends Component {
           className={styles.checkCell}
           onMouseUp={onMouseUpRowCheckBox}
           onMouseOver={() => onMouseOverRowCheckBox(obj.id)}
-          style={
-            freezeIndex >= 0
-              ? {
-                position: 'sticky',
-                left: 0,
-                zIndex: 1,
-                background: rowBackground,
-                borderBottom: '1px solid #e3e3ea',
-              }
-              : {}
-          }
+          style={{
+            position: 'sticky',
+            left: 0,
+            zIndex: 1,
+            background: rowBackground,
+            borderBottom: '1px solid #e3e3ea',
+          }}
         >
           <input
             type="checkbox"
@@ -98,6 +97,21 @@ export default class BrowserRow extends Component {
             onMouseDown={e => onMouseDownRowCheckBox(e.target.checked)}
           />
         </span>
+        {showRowNumber && (
+          <span
+            className={styles.rowNumberCell}
+            style={{
+              position: 'sticky',
+              left: 30,
+              zIndex: 1,
+              background: rowBackground,
+              borderBottom: '1px solid #e3e3ea',
+              width: rowNumberWidth,
+            }}
+          >
+            {row >= 0 ? (skip + row + 1).toLocaleString() : ''}
+          </span>
+        )}
         {order.map(({ name, width, visible }, j) => {
           if (!visible) {
             return null;

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -15,11 +15,23 @@ import { DndProvider } from 'react-dnd';
 export default class DataBrowserHeaderBar extends React.Component {
   handleContextMenu = (index, event) => {
     event.preventDefault();
-    const { freezeIndex, freezeColumns, unfreezeColumns, setContextMenu } = this.props;
-    const items =
+    const {
+      freezeIndex,
+      freezeColumns,
+      unfreezeColumns,
+      setContextMenu,
+      showRowNumber,
+      setShowRowNumber,
+    } = this.props;
+    const items = [
+      {
+        text: showRowNumber ? 'Hide row number' : 'Display row number',
+        callback: () => setShowRowNumber(!showRowNumber),
+      },
       freezeIndex >= 0 && index <= freezeIndex
-        ? [{ text: 'Unfreeze column', callback: () => unfreezeColumns() }]
-        : [{ text: 'Freeze column', callback: () => freezeColumns(index) }];
+        ? { text: 'Unfreeze column', callback: () => unfreezeColumns() }
+        : { text: 'Freeze column', callback: () => freezeColumns(index) },
+    ];
     setContextMenu(event.pageX, event.pageY, items);
   };
 
@@ -39,19 +51,33 @@ export default class DataBrowserHeaderBar extends React.Component {
       stickyLefts,
       handleLefts,
       freezeIndex,
+      showRowNumber,
+      rowNumberWidth,
     } = this.props;
     const elements = [
       <div
         key="check"
         className={[styles.wrap, styles.check].join(' ')}
-        style={freezeIndex >= 0 ? { position: 'sticky', left: 0, zIndex: 11 } : {}}
+        style={{ position: 'sticky', left: 0, zIndex: 11 }}
       >
         {readonly ? null : (
           <input type="checkbox" checked={selected} onChange={e => selectAll(e.target.checked)} />
         )}
       </div>,
     ];
 
+    if (showRowNumber) {
+      elements.push(
+        <div
+          key="rowNumber"
+          className={[styles.wrap, styles.rowNumber].join(' ')}
+          style={{ position: 'sticky', left: 30, zIndex: 11, width: rowNumberWidth }}
+        >
+          #
+        </div>
+      );
+    }
+
     headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => {
       if (!visible) {
         return;

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -18,7 +18,7 @@
   display: inline-block;
   min-width: 100%;
   // to resolve rendering issue with retina displays
-  -webkit-transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
 }
 
 .wrap {
@@ -53,7 +53,19 @@
   vertical-align: top;
   text-align: center;
   width: 30px;
-  background: rgb(114, 111, 133)
+  background: rgb(114, 111, 133);
+}
+
+.rowNumber {
+  line-height: 30px;
+  height: 30px;
+  vertical-align: top;
+  text-align: center;
+  background: rgb(114, 111, 133);
+  color: #A2A6B1;
+  font-size: 12px;
+  padding: 0 4px;
+  box-sizing: border-box;
 }
 
 .handle {
@@ -90,20 +102,19 @@
   border-top: 1px solid #e3e3ea;
   border-bottom: 1px solid #e3e3ea;
   height: 30px;
-  width:100%;
+  width: 100%;
   vertical-align: middle;
   padding-left: 2px;
   margin-top: 30px;
   line-height: 31px;
   animation: skeleton-loading 1s linear infinite alternate;
 }
-  
+
 @keyframes skeleton-loading {
   0% {
-    background-color:#ffffff;
+    background-color: #ffffff;
   }
   100% {
     background-color: #e3e3ea;
-
   }
 }

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

@@ -661,7 +661,7 @@ class Browser extends DashboardView {
     }
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
-        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' created';
+        const msg = `${objectSaved.className} with id '${objectSaved.id}' created`;
         this.showNote(msg, false);
 
         const state = { data: this.state.data };
@@ -764,7 +764,7 @@ class Browser extends DashboardView {
 
     obj.save(null, { useMasterKey: true }).then(
       objectSaved => {
-        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' ' + 'created';
+        const msg = `${objectSaved.className} with id '${objectSaved.id}' created`;
         this.showNote(msg, false);
 
         const state = {
@@ -908,7 +908,7 @@ class Browser extends DashboardView {
     const { useMasterKey, skip, limit } = this.state;
     this.setState({
       data: null,
-    })
+    });
     const query = await queryFromFilters(source, filters);
     const sortDir = this.state.ordering[0] === '-' ? '-' : '+';
     const field = this.state.ordering.substr(sortDir === '-' ? 1 : 0);
@@ -1270,7 +1270,7 @@ class Browser extends DashboardView {
     const { useMasterKey } = this.state;
     obj.save(null, { useMasterKey }).then(
       objectSaved => {
-        const msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' updated';
+        const msg = `${objectSaved.className} with id '${objectSaved.id}' updated`;
         this.showNote(msg, false);
 
         const state = {
@@ -1398,9 +1398,9 @@ class Browser extends DashboardView {
             let deletedNote;
 
             if (toDeleteObjectIds.length == 1) {
-              deletedNote = className + ' with id \'' + toDeleteObjectIds[0] + '\' deleted';
+              deletedNote = `${className} with id '${toDeleteObjectIds[0]}' deleted`;
             } else {
-              deletedNote = toDeleteObjectIds.length + ' ' + className + ' objects deleted';
+              deletedNote = `${toDeleteObjectIds.length} ${className} objects deleted`;
             }
 
             this.showNote(deletedNote, false);
@@ -1426,27 +1426,21 @@ class Browser extends DashboardView {
             if (error.code === Parse.Error.AGGREGATE_ERROR) {
               if (error.errors.length == 1) {
                 errorDeletingNote =
-                  'Error deleting ' + className + ' with id \'' + error.errors[0].object.id + '\'';
+                  `Error deleting ${className} with id '${error.errors[0].object.id}'`;
               } else if (error.errors.length < toDeleteObjectIds.length) {
                 errorDeletingNote =
-                  'Error deleting ' +
-                  error.errors.length +
-                  ' out of ' +
-                  toDeleteObjectIds.length +
-                  ' ' +
-                  className +
-                  ' objects';
+                  `Error deleting ${error.errors.length} out of ${toDeleteObjectIds.length} ${className} objects`;
               } else {
                 errorDeletingNote =
-                  'Error deleting all ' + error.errors.length + ' ' + className + ' objects';
+                  `Error deleting all ${error.errors.length} ${className} objects`;
               }
             } else {
               if (toDeleteObjectIds.length == 1) {
                 errorDeletingNote =
-                  'Error deleting ' + className + ' with id \'' + toDeleteObjectIds[0] + '\'';
+                  `Error deleting ${className} with id '${toDeleteObjectIds[0]}'`;
               } else {
                 errorDeletingNote =
-                  'Error deleting ' + toDeleteObjectIds.length + ' ' + className + ' objects';
+                  `Error deleting ${toDeleteObjectIds.length} ${className} objects`;
               }
             }
 
@@ -1598,13 +1592,15 @@ class Browser extends DashboardView {
             script.cloudCodeFunction,
             { object: object.toPointer() },
             { useMasterKey: true }
-          ).then(response => ({
-            objectId: object.id,
-            response,
-          })).catch(error => ({
-            objectId: object.id,
-            error,
-          }))
+          )
+            .then(response => ({
+              objectId: object.id,
+              response,
+            }))
+            .catch(error => ({
+              objectId: object.id,
+              error,
+            }))
         );
 
         const results = await Promise.all(promises);
@@ -1631,12 +1627,18 @@ class Browser extends DashboardView {
         totalErrorCount += batchErrorCount;
 
         if (objects.length > 1) {
-          this.showNote(`Ran script "${script.title}" on ${batch.length} objects in batch ${batchCount}/${totalBatchCount} with ${batchErrorCount} errors.`, batchErrorCount > 0);
+          this.showNote(
+            `Ran script "${script.title}" on ${batch.length} objects in batch ${batchCount}/${totalBatchCount} with ${batchErrorCount} errors.`,
+            batchErrorCount > 0
+          );
         }
       }
 
       if (objects.length > 1) {
-        this.showNote(`Ran script "${script.title}" on ${objects.length} objects in ${batchCount} batches with ${totalErrorCount} errors.`, totalErrorCount > 0);
+        this.showNote(
+          `Ran script "${script.title}" on ${objects.length} objects in ${batchCount} batches with ${totalErrorCount} errors.`,
+          totalErrorCount > 0
+        );
       }
       this.refresh();
     } catch (e) {
@@ -1957,7 +1959,7 @@ class Browser extends DashboardView {
         }}
         removeFilter={filter => {
           this.resetPage();
-          this.removeFilter(filter)
+          this.removeFilter(filter);
         }}
         classClicked={() => {
           this.resetPage();
@@ -1978,7 +1980,7 @@ class Browser extends DashboardView {
     // Scroll to top
     window.scrollTo({
       top: 0,
-      behavior: 'smooth'
+      behavior: 'smooth',
     });
 
     // Reset pagination to page 1
@@ -2201,6 +2203,7 @@ class Browser extends DashboardView {
               errorAggregatedData={this.state.errorAggregatedData}
               appName={this.props.params.appId}
               limit={this.state.limit}
+              skip={this.state.skip}
             />
             <BrowserFooter
               skip={this.state.skip}