From b8eac1fcdc8fde6130a49c7e6a109af1cf2e74f5 Mon Sep 17 00:00:00 2001
From: sahil-ansari01 <opensourcecarrier@gmail.com>
Date: Tue, 11 Feb 2025 15:46:42 +0530
Subject: [PATCH] feat: Add Space key support for row selection in data browser

- Implement keyboard shortcut to select/unselect rows using Space key
- Enable navigation and selection using arrow keys and Space
- Improve user efficiency when reviewing and selecting multiple rows
---
 CHANGELOG.md                                  | 12 ++-
 .../Data/Browser/DataBrowser.react.js         |  9 ++
 .../Browser/__tests__/DataBrowser.test.js     | 92 +++++++++++++++++++
 3 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 src/dashboard/Data/Browser/__tests__/DataBrowser.test.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d338a61c57..c6c996ac2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ Changelogs are separated by release type for better overview.
 
 These are the official, stable releases that you can use in your production environments.
 
-> ### “Stable for production!”
+> ### "Stable for production!"
 
 Details:
 - Stability: *stable*
@@ -19,7 +19,7 @@ Details:
 
 These are releases that are pretty stable, but may have still some bugs to be fixed before official release.
 
-> ### “Please try out, we’d love your feedback!”
+> ### "Please try out, we'd love your feedback!"
 
 Details:
 - Stability: *pretty stable*
@@ -30,7 +30,7 @@ Details:
 
 ## 🔥 [Alpha Releases][log_alpha]
 
-> ### “If you are curious to see what's next!”
+> ### "If you are curious to see what's next!"
 
 These releases contain the latest development changes, but you should be prepared for anything, including sudden breaking changes or code refactoring. Use this branch to contribute to the project and open pull requests.
 
@@ -41,6 +41,12 @@ Details:
 - Purpose: product development
 - Suitable environment: experimental
 
+## [Unreleased]
+### Added
+- Keyboard shortcut: Space key to select/unselect rows in data browser
+  - Users can now use arrow keys to navigate rows and press space to toggle row selection
+  - Works in combination with existing features like info panel and batch operations
+  - Improves efficiency when reviewing and selecting multiple rows
 
 [log_release]: https://github.com/parse-community/parse-dashboard/blob/release/changelogs/CHANGELOG_release.md
 [log_beta]: https://github.com/parse-community/parse-dashboard/blob/beta/changelogs/CHANGELOG_beta.md
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index b769d3942d..603ca59c06 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -419,6 +419,15 @@ export default class DataBrowser extends React.Component {
           e.preventDefault();
         }
         break;
+      case 32: // Space
+        // Only handle space if not editing and there's a current row selected
+        if (!this.state.editing && this.state.current && this.state.current.row >= 0) {
+          const rowId = this.props.data[this.state.current.row].id;
+          const isSelected = this.props.selection[rowId];
+          this.props.selectRow(rowId, !isSelected);
+          e.preventDefault();
+        }
+        break;
     }
   }
 
diff --git a/src/dashboard/Data/Browser/__tests__/DataBrowser.test.js b/src/dashboard/Data/Browser/__tests__/DataBrowser.test.js
new file mode 100644
index 0000000000..eb0eaf8f00
--- /dev/null
+++ b/src/dashboard/Data/Browser/__tests__/DataBrowser.test.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DataBrowser from '../DataBrowser.react';
+
+describe('DataBrowser', () => {
+  let wrapper;
+  const mockProps = {
+    data: [
+      { id: '1', attributes: { name: 'Test 1' } },
+      { id: '2', attributes: { name: 'Test 2' } }
+    ],
+    columns: {
+      name: { type: 'String' }
+    },
+    selection: {},
+    selectRow: jest.fn(),
+    app: {
+      applicationId: 'test-app',
+      serverInfo: {
+        features: {
+          schemas: {
+            clearAllDataFromClass: true,
+            exportClass: true,
+            editClassLevelPermissions: true
+          }
+        }
+      }
+    },
+    schema: {
+      data: {
+        get: () => ({
+          get: () => ({}),
+          toObject: () => ({})
+        })
+      }
+    }
+  };
+
+  beforeEach(() => {
+    wrapper = mount(<DataBrowser {...mockProps} />);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('keyboard controls', () => {
+    it('should select/unselect row when space key is pressed', () => {
+      // Set current row
+      wrapper.setState({ 
+        current: { row: 0, col: 0 },
+        editing: false 
+      });
+
+      // Simulate space key press
+      const event = new KeyboardEvent('keydown', { keyCode: 32 });
+      document.body.dispatchEvent(event);
+
+      expect(mockProps.selectRow).toHaveBeenCalledWith('1', true);
+
+      // Test unselecting
+      wrapper.setProps({ selection: { '1': true } });
+      document.body.dispatchEvent(event);
+
+      expect(mockProps.selectRow).toHaveBeenCalledWith('1', false);
+    });
+
+    it('should not select row when editing', () => {
+      wrapper.setState({ 
+        current: { row: 0, col: 0 },
+        editing: true 
+      });
+
+      const event = new KeyboardEvent('keydown', { keyCode: 32 });
+      document.body.dispatchEvent(event);
+
+      expect(mockProps.selectRow).not.toHaveBeenCalled();
+    });
+
+    it('should not select row when no current row', () => {
+      wrapper.setState({ 
+        current: null,
+        editing: false 
+      });
+
+      const event = new KeyboardEvent('keydown', { keyCode: 32 });
+      document.body.dispatchEvent(event);
+
+      expect(mockProps.selectRow).not.toHaveBeenCalled();
+    });
+  });
+}); 
\ No newline at end of file