From 9d6d7af29bf2542bec135ecb23c8684aae51250c Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Wed, 9 Jul 2025 15:06:19 +0200
Subject: [PATCH 1/5] feat(data-browser): add optional row number column
---
src/components/BrowserRow/BrowserRow.react.js | 34 +++++++++++---
.../DataBrowserHeaderBar.react.js | 38 ++++++++++++++--
.../DataBrowserHeaderBar.scss | 22 ++++++---
src/dashboard/Data/Browser/Browser.react.js | 45 +++++++++++--------
src/dashboard/Data/Browser/Browser.scss | 35 ++++++++++-----
.../Data/Browser/BrowserTable.react.js | 35 ++++++++++-----
.../Data/Browser/DataBrowser.react.js | 33 +++++++++-----
7 files changed, 175 insertions(+), 67 deletions(-)
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index 12f577de63..2b9495e7fb 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/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,
@@ -82,12 +85,12 @@ export default class BrowserRow extends Component {
style={
freezeIndex >= 0
? {
- position: 'sticky',
- left: 0,
- zIndex: 1,
- background: rowBackground,
- borderBottom: '1px solid #e3e3ea',
- }
+ position: 'sticky',
+ left: 0,
+ zIndex: 1,
+ background: rowBackground,
+ borderBottom: '1px solid #e3e3ea',
+ }
: {}
}
>
@@ -98,6 +101,25 @@ export default class BrowserRow extends Component {
onMouseDown={e => onMouseDownRowCheckBox(e.target.checked)}
/>
+ {showRowNumber && (
+ = 0
+ ? {
+ position: 'sticky',
+ left: 30,
+ zIndex: 1,
+ background: rowBackground,
+ borderBottom: '1px solid #e3e3ea',
+ width: rowNumberWidth,
+ }
+ : { width: rowNumberWidth }
+ }
+ >
+ {row >= 0 ? (skip + row + 1).toLocaleString() : ''}
+
+ )}
{order.map(({ name, width, visible }, j) => {
if (!visible) {
return null;
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index b5955df6dd..c84334b417 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/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,6 +51,8 @@ export default class DataBrowserHeaderBar extends React.Component {
stickyLefts,
handleLefts,
freezeIndex,
+ showRowNumber,
+ rowNumberWidth,
} = this.props;
const elements = [
,
];
+ if (showRowNumber) {
+ elements.push(
+
= 0
+ ? { position: 'sticky', left: 30, zIndex: 11, width: rowNumberWidth }
+ : { width: rowNumberWidth }
+ }
+ >
+ #
+
+ );
+ }
+
headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => {
if (!visible) {
return;
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
index a69e8eba73..953b9ea53e 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
+++ b/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,18 @@
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: right;
+ background: rgb(114, 111, 133);
+ border-right: 1px solid #e3e3ea;
+ padding: 0 4px;
+ box-sizing: border-box;
}
.handle {
@@ -90,20 +101,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;
-
}
}
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index c61d216b29..17dd7b411a 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/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,7 +1398,7 @@ 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';
}
@@ -1426,7 +1426,7 @@ 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 ' +
@@ -1443,7 +1443,7 @@ class Browser extends DashboardView {
} 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';
@@ -1598,13 +1598,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 +1633,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 +1965,7 @@ class Browser extends DashboardView {
}}
removeFilter={filter => {
this.resetPage();
- this.removeFilter(filter)
+ this.removeFilter(filter);
}}
classClicked={() => {
this.resetPage();
@@ -1978,7 +1986,7 @@ class Browser extends DashboardView {
// Scroll to top
window.scrollTo({
top: 0,
- behavior: 'smooth'
+ behavior: 'smooth',
});
// Reset pagination to page 1
@@ -2201,6 +2209,7 @@ class Browser extends DashboardView {
errorAggregatedData={this.state.errorAggregatedData}
appName={this.props.params.appId}
limit={this.state.limit}
+ skip={this.state.skip}
/>
:nth-child(2) {
+ > :nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
@@ -138,7 +149,8 @@ body:global(.expanded) {
}
}
-.notificationMessage, .notificationError {
+.notificationMessage,
+.notificationError {
@include animation('fade-in 0.2s ease-out');
position: absolute;
bottom: 20px;
@@ -222,8 +234,8 @@ body:global(.expanded) {
right: 0;
width: 142px;
font-size: 12px;
- color: #0E69A1;
- background: #F4F5F7;
+ color: #0e69a1;
+ background: #f4f5f7;
font-family: 'Source Code Pro', 'Courier New', monospace;
.selectionHeader {
@@ -261,7 +273,7 @@ body:global(.expanded) {
position: relative;
}
}
-}
+}
.dataContainer {
height: 100%;
@@ -273,5 +285,4 @@ body:global(.expanded) {
}
.confirmConfig {
- padding: 10px 20px;
-}
\ No newline at end of file
+ padding: 10px 20px;}
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index a5c1220d50..1d8001816a 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -121,11 +121,13 @@ export default class BrowserTable extends React.Component {
const stickyLefts = [];
const handleLefts = [];
- if (
- typeof this.props.freezeIndex === 'number' &&
- this.props.freezeIndex >= 0
- ) {
- let left = 30;
+ const maxRowNumber =
+ this.props.skip + (this.props.data ? this.props.data.length : this.props.limit);
+ const rowNumberWidth = this.props.showRowNumber
+ ? maxRowNumber.toLocaleString().length * 8 + 16
+ : 0;
+ if (typeof this.props.freezeIndex === 'number' && this.props.freezeIndex >= 0) {
+ let left = 30 + rowNumberWidth;
headers.forEach((h, i) => {
stickyLefts[i] = left;
handleLefts[i] = left + h.width;
@@ -137,10 +139,11 @@ export default class BrowserTable extends React.Component {
let editor = null;
let table = ;
if (this.props.data) {
- const rowWidth = this.props.order.reduce(
- (rowWidth, { visible, width }) => (visible ? rowWidth + width : rowWidth),
- this.props.onAddRow ? 210 : 0
- );
+ const rowWidth =
+ this.props.order.reduce(
+ (rw, { visible, width }) => (visible ? rw + width : rw),
+ this.props.onAddRow ? 210 : 0
+ ) + rowNumberWidth;
let editCloneRows;
if (this.props.editCloneRows) {
editCloneRows = (
@@ -175,6 +178,9 @@ export default class BrowserTable extends React.Component {
row={index}
rowValue={this.props.data[index]}
rowWidth={rowWidth}
+ showRowNumber={this.props.showRowNumber}
+ rowNumberWidth={rowNumberWidth}
+ skip={this.props.skip}
selection={this.props.selection}
selectRow={this.props.selectRow}
setCurrent={this.props.setCurrent}
@@ -258,6 +264,9 @@ export default class BrowserTable extends React.Component {
readOnlyFields={READ_ONLY}
row={-1}
rowWidth={rowWidth}
+ showRowNumber={this.props.showRowNumber}
+ rowNumberWidth={rowNumberWidth}
+ skip={this.props.skip}
selection={this.props.selection}
selectRow={this.props.selectRow}
setCurrent={this.props.setCurrent}
@@ -352,6 +361,9 @@ export default class BrowserTable extends React.Component {
row={i}
rowValue={this.props.data[i]}
rowWidth={rowWidth}
+ showRowNumber={this.props.showRowNumber}
+ rowNumberWidth={rowNumberWidth}
+ skip={this.props.skip}
selection={this.props.selection}
selectRow={this.props.selectRow}
setCurrent={this.props.setCurrent}
@@ -450,7 +462,7 @@ export default class BrowserTable extends React.Component {
//for data rows & new row when there are edit clone rows
wrapTop += 2 * ROW_HEIGHT * this.props.editCloneRows.length;
}
- let wrapLeft = 30;
+ let wrapLeft = 30 + rowNumberWidth;
for (let i = 0; i < this.props.current.col; i++) {
const column = this.props.order[i];
wrapLeft += column.visible ? column.width : 0;
@@ -582,6 +594,9 @@ export default class BrowserTable extends React.Component {
freezeColumns={this.props.freezeColumns}
unfreezeColumns={this.props.unfreezeColumns}
updateOrdering={this.props.updateOrdering}
+ showRowNumber={this.props.showRowNumber}
+ setShowRowNumber={this.props.setShowRowNumber}
+ rowNumberWidth={rowNumberWidth}
readonly={!!this.props.relation || !!this.props.isUnique}
handleDragDrop={this.props.handleHeaderDragDrop}
onResize={this.props.handleResize}
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 1ab16c48e9..540e6febf5 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -50,6 +50,7 @@ export default class DataBrowser extends React.Component {
maxWidth: window.innerWidth - 300,
showAggregatedData: true,
frozenColumnIndex: -1,
+ showRowNumber: false,
};
this.handleResizeDiv = this.handleResizeDiv.bind(this);
@@ -69,6 +70,7 @@ export default class DataBrowser extends React.Component {
this.setContextMenu = this.setContextMenu.bind(this);
this.freezeColumns = this.freezeColumns.bind(this);
this.unfreezeColumns = this.unfreezeColumns.bind(this);
+ this.setShowRowNumber = this.setShowRowNumber.bind(this);
this.handleCellClick = this.handleCellClick.bind(this);
this.saveOrderTimeout = null;
}
@@ -297,9 +299,10 @@ export default class DataBrowser extends React.Component {
for (let colIndex = colStart; colIndex <= colEnd; colIndex++) {
const field = this.state.order[colIndex].name;
- const value = field === 'objectId'
- ? this.props.data[rowIndex].id
- : this.props.data[rowIndex].attributes[field];
+ const value =
+ field === 'objectId'
+ ? this.props.data[rowIndex].id
+ : this.props.data[rowIndex].attributes[field];
if (typeof value === 'number' && !isNaN(value)) {
rowData.push(String(value));
@@ -389,10 +392,10 @@ export default class DataBrowser extends React.Component {
e.ctrlKey || e.metaKey
? firstVisibleColumnIndex
: this.getNextVisibleColumnIndex(
- -1,
- firstVisibleColumnIndex,
- lastVisibleColumnIndex
- ),
+ -1,
+ firstVisibleColumnIndex,
+ lastVisibleColumnIndex
+ ),
},
});
e.preventDefault();
@@ -430,10 +433,10 @@ export default class DataBrowser extends React.Component {
e.ctrlKey || e.metaKey
? lastVisibleColumnIndex
: this.getNextVisibleColumnIndex(
- 1,
- firstVisibleColumnIndex,
- lastVisibleColumnIndex
- ),
+ 1,
+ firstVisibleColumnIndex,
+ lastVisibleColumnIndex
+ ),
},
});
e.preventDefault();
@@ -551,6 +554,10 @@ export default class DataBrowser extends React.Component {
this.setState({ frozenColumnIndex: -1 });
}
+ setShowRowNumber(show) {
+ this.setState({ showRowNumber: show });
+ }
+
handleColumnsOrder(order, shouldReload) {
this.setState({ order: [...order] }, () => {
this.updatePreferences(order, shouldReload);
@@ -666,6 +673,10 @@ export default class DataBrowser extends React.Component {
panelWidth={this.state.panelWidth}
isResizing={this.state.isResizing}
setShowAggregatedData={this.setShowAggregatedData}
+ showRowNumber={this.state.showRowNumber}
+ setShowRowNumber={this.setShowRowNumber}
+ skip={this.props.skip}
+ limit={this.props.limit}
firstSelectedCell={this.state.firstSelectedCell}
{...other}
/>
From e41a30dc7a4fb5d5345587e2b1e19cc5d8375e21 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Wed, 9 Jul 2025 15:20:28 +0200
Subject: [PATCH 2/5] Style row number column
---
.../DataBrowserHeaderBar/DataBrowserHeaderBar.scss | 5 +++--
src/dashboard/Data/Browser/Browser.scss | 2 +-
2 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
index 953b9ea53e..42fa242798 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -60,9 +60,10 @@
line-height: 30px;
height: 30px;
vertical-align: top;
- text-align: right;
+ text-align: center;
background: rgb(114, 111, 133);
- border-right: 1px solid #e3e3ea;
+ color: #A2A6B1;
+ font-size: 12px;
padding: 0 4px;
box-sizing: border-box;
}
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index 53e0d3bd2d..26e4809a0f 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -116,7 +116,7 @@ body:global(.expanded) {
line-height: 31px;
vertical-align: top;
border-right: 1px solid #e3e3ea;
- text-align: right;
+ text-align: center;
padding: 0 4px;
box-sizing: border-box;
}
From 9b3a7b64b101e954540390008da156cd7c7e9f6c Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Wed, 9 Jul 2025 15:38:39 +0200
Subject: [PATCH 3/5] fix: keep checkbox and row numbers sticky
---
src/components/BrowserRow/BrowserRow.react.js | 38 ++++++++-----------
.../DataBrowserHeaderBar.react.js | 8 +---
2 files changed, 17 insertions(+), 29 deletions(-)
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index 2b9495e7fb..c9993b7a0b 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -82,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',
+ }}
>
= 0
- ? {
- position: 'sticky',
- left: 30,
- zIndex: 1,
- background: rowBackground,
- borderBottom: '1px solid #e3e3ea',
- width: rowNumberWidth,
- }
- : { width: rowNumberWidth }
- }
+ style={{
+ position: 'sticky',
+ left: 30,
+ zIndex: 1,
+ background: rowBackground,
+ borderBottom: '1px solid #e3e3ea',
+ width: rowNumberWidth,
+ }}
>
{row >= 0 ? (skip + row + 1).toLocaleString() : ''}
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index c84334b417..7570f79734 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -58,7 +58,7 @@ export default class DataBrowserHeaderBar extends React.Component {
= 0 ? { position: 'sticky', left: 0, zIndex: 11 } : {}}
+ style={{ position: 'sticky', left: 0, zIndex: 11 }}
>
{readonly ? null : (
selectAll(e.target.checked)} />
@@ -71,11 +71,7 @@ export default class DataBrowserHeaderBar extends React.Component {
= 0
- ? { position: 'sticky', left: 30, zIndex: 11, width: rowNumberWidth }
- : { width: rowNumberWidth }
- }
+ style={{ position: 'sticky', left: 30, zIndex: 11, width: rowNumberWidth }}
>
#
From 7bc005203e03b749df8f067ab5e3ae9c5cd4cdae Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Wed, 9 Jul 2025 15:48:58 +0200
Subject: [PATCH 4/5] Persist row number column setting
---
src/dashboard/Data/Browser/DataBrowser.react.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 540e6febf5..a9901aeb3b 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -16,6 +16,8 @@ import styles from './Databrowser.scss';
import AggregationPanel from '../../../components/AggregationPanel/AggregationPanel';
+const BROWSER_SHOW_ROW_NUMBER = 'browserShowRowNumber';
+
/**
* DataBrowser renders the browser toolbar and data table
* It also manages the fetching / updating of column size prefs,
@@ -32,6 +34,9 @@ export default class DataBrowser extends React.Component {
props.className,
columnPreferences[props.className]
);
+ const storedRowNumber =
+ window.localStorage?.getItem(BROWSER_SHOW_ROW_NUMBER) === 'true';
+
this.state = {
order: order,
current: null,
@@ -50,7 +55,7 @@ export default class DataBrowser extends React.Component {
maxWidth: window.innerWidth - 300,
showAggregatedData: true,
frozenColumnIndex: -1,
- showRowNumber: false,
+ showRowNumber: storedRowNumber,
};
this.handleResizeDiv = this.handleResizeDiv.bind(this);
@@ -556,6 +561,7 @@ export default class DataBrowser extends React.Component {
setShowRowNumber(show) {
this.setState({ showRowNumber: show });
+ window.localStorage?.setItem(BROWSER_SHOW_ROW_NUMBER, show);
}
handleColumnsOrder(order, shouldReload) {
From d23c8d49b8b131c8f0b4a0127599c82d1f77a7be Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Wed, 9 Jul 2025 15:54:53 +0200
Subject: [PATCH 5/5] lint
---
src/dashboard/Data/Browser/Browser.react.js | 26 +++++++------------
.../Data/Browser/DataBrowser.react.js | 16 ++++++------
2 files changed, 18 insertions(+), 24 deletions(-)
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index 17dd7b411a..1d5cd34da1 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/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 = {
@@ -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`;
}
}
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index a9901aeb3b..31cc764810 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -397,10 +397,10 @@ export default class DataBrowser extends React.Component {
e.ctrlKey || e.metaKey
? firstVisibleColumnIndex
: this.getNextVisibleColumnIndex(
- -1,
- firstVisibleColumnIndex,
- lastVisibleColumnIndex
- ),
+ -1,
+ firstVisibleColumnIndex,
+ lastVisibleColumnIndex
+ ),
},
});
e.preventDefault();
@@ -438,10 +438,10 @@ export default class DataBrowser extends React.Component {
e.ctrlKey || e.metaKey
? lastVisibleColumnIndex
: this.getNextVisibleColumnIndex(
- 1,
- firstVisibleColumnIndex,
- lastVisibleColumnIndex
- ),
+ 1,
+ firstVisibleColumnIndex,
+ lastVisibleColumnIndex
+ ),
},
});
e.preventDefault();