feat: Add Space key support for row selection in data browser

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

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;
     }
   }
 

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();
+    });
+  });
+});