Auto-focus Search Input in Visualization Type Modal

.cursor/commands/design_system.md

@@ -0,0 +1,196 @@
+# Design System
+
+For the feature or bug in question, create a design document using the template below.
+
+Save the design using incrementing numbers like the following: memory/design/001_some_feature.md
+
+# [Feature/Component Name] Design Document
+
+## Metadata
+- **Status:** [Draft | In Review | Approved | Implemented]
+- **Author(s):** 
+- **Reviewers:** 
+- **Created:** 
+- **Updated:** 
+- **Implementation PR(s):** 
+
+## Overview
+<!-- What problem are we solving and why now? (2-3 paragraphs max) -->
+
+## Goals
+
+## Proposed Solution
+
+### High-Level Approach
+<!-- 2-3 paragraphs explaining the core solution -->
+
+### Key Components
+<!-- Major pieces and how they fit together -->
+- **Component A:** 
+- **Component B:** 
+- **Component C:** 
+
+### Simple Architecture Diagram
+<!-- Boxes and arrows diagram showing data flow and component interaction -->
+```
+[Diagram here - can be ASCII, Mermaid, or embedded image]
+```
+
+## Design Considerations
+
+### 1. [Design Choice Name]
+**Context:** <!-- Why this decision matters -->
+
+**Options:**
+- **Option A:** 
+  - Pros: 
+  - Cons: 
+- **Option B:** 
+  - Pros: 
+  - Cons: 
+- **Option C:** 
+  - Pros: 
+  - Cons: 
+
+**Recommendation:** <!-- What we're choosing and why -->
+
+### 2. [Design Choice Name]
+**Context:** 
+
+**Options:**
+- **Option A:** 
+  - Pros: 
+  - Cons: 
+- **Option B:** 
+  - Pros: 
+  - Cons: 
+
+**Recommendation:** 
+
+## Lifecycle of Code for Key Use Case
+<!-- Step-by-step flow of how the system handles the main use case -->
+
+1. **User initiates action:** 
+2. **System validates:** 
+3. **Processing step:** 
+4. **Data persistence:** 
+5. **Response to user:** 
+6. **Post-processing (if any):** 
+
+### Error Scenarios
+- **If validation fails:** 
+- **If external service is down:** 
+- **If database write fails:** 
+
+## Detailed Design
+
+### Schema Updates
+```sql
+-- Example table or schema changes
+CREATE TABLE example (
+    id UUID PRIMARY KEY,
+    created_at TIMESTAMP NOT NULL,
+    ...
+);
+```
+
+### API Endpoints
+
+#### `POST /api/v1/[endpoint]`
+**Request:**
+```json
+{
+  "field1": "value",
+  "field2": 123
+}
+```
+
+**Response (200 OK):**
+```json
+{
+  "id": "uuid",
+  "status": "success",
+  "data": {}
+}
+```
+
+**Error Response (4xx/5xx):**
+```json
+{
+  "error": "error_code",
+  "message": "Human readable message"
+}
+```
+
+#### `GET /api/v1/[endpoint]/{id}`
+**Response (200 OK):**
+```json
+{
+  "id": "uuid",
+  "field1": "value",
+  "field2": 123
+}
+```
+
+### UI Changes
+<!-- Screenshots, mockups, or description of UI changes -->
+- **Screen/Component:** 
+- **User flow:** 
+- **Key interactions:** 
+
+### Services / Business Logic
+
+#### Service A
+```python
+# Pseudocode or key algorithm
+def process_request(input):
+    # Validate
+    # Transform
+    # Persist
+    # Return
+```
+
+#### Service B
+<!-- Key business logic or processing steps -->
+
+### Data Migration Plan
+<!-- If applicable - how do we migrate existing data? -->
+- **Migration strategy:** 
+- **Rollback plan:** 
+- **Estimated data volume:** 
+
+## Risks & Mitigations
+
+| Risk | Impact | Likelihood | Mitigation |
+|------|--------|------------|------------|
+| [Risk description] | High/Med/Low | High/Med/Low | [How we prevent/handle it] |
+| | | | |
+
+### Technical Debt
+<!-- What shortcuts are we taking that we'll need to address later? -->
+- 
+
+## Rollout Plan
+
+### Deployment Strategy
+- [ ] Feature flag implementation
+- [ ] Canary deployment percentage: 
+- [ ] Full rollout criteria: 
+
+### Rollback Plan
+<!-- How do we undo this if something goes wrong? -->
+
+### Monitoring & Alerts
+<!-- What metrics/logs will we watch? -->
+- **Key metrics:** 
+- **Alert thresholds:** 
+- **Dashboards:** 
+
+## Open Questions
+
+
+
+## References
+- [Link to related documents]
+- [Link to previous ADRs this supersedes or relates to]
+- [Link to external resources]

.cursor/commands/implement.md

@@ -0,0 +1,5 @@
+# Implement
+
+For the indicated milestone, ask any clarifying questions. If relevant, review different implementation choices with pros and cons.
+
+Implement the milestone, and be clear with that I need to check in the final integration tests. Where possible, write temporary scripts to test the milestone.

PR_DESCRIPTION.md

@@ -0,0 +1,102 @@
+# 🎯 Auto-focus Search Input in Visualization Type Modal
+
+## Summary
+This PR improves the user experience in the "Change Visualization Type" modal by automatically focusing the search input when the modal opens, eliminating the need for users to manually click on the search field before typing.
+
+## Problem
+Currently, when users open the "Change Visualization Type" modal, they must manually click on the search input field before they can start typing to search for visualization types. This adds an unnecessary step to the workflow and creates friction in the user experience.
+
+**Before:**
+1. User clicks to change visualization type
+2. Modal opens
+3. User must click on search input field
+4. User can start typing to search
+
+**After:**
+1. User clicks to change visualization type
+2. Modal opens with search input automatically focused
+3. User can immediately start typing to search
+
+## Solution
+- Added `useRef` hook to create a reference to the search input element
+- Implemented `useEffect` hook to automatically focus the search input when the `VizTypeGallery` component mounts
+- Used `setTimeout` with 150ms delay to ensure the modal animation completes before focusing
+- Added proper cleanup to prevent memory leaks
+
+## Changes Made
+
+### Files Modified
+- `superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx`
+  - Added `useRef` and `useEffect` imports
+  - Created `searchInputRef` to reference the search input
+  - Added auto-focus logic with proper timing
+  - Added cleanup function to clear timeout
+
+- `superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx`
+  - Added comprehensive test case for auto-focus functionality
+  - Used `jest.useFakeTimers()` and `jest.runAllTimers()` for reliable testing
+  - Mocked `scroll-into-view-if-needed` to prevent test failures
+  - Added proper async assertions with `waitFor`
+
+## Technical Details
+
+### Implementation
+```typescript
+// Added to VizTypeGallery.tsx
+const searchInputRef = useRef<HTMLInputElement>();
+
+useEffect(() => {
+  // Use setTimeout to ensure the modal animation completes before focusing
+  const timeoutId = setTimeout(() => {
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, 150);
+
+  return () => clearTimeout(timeoutId);
+}, []);
+```
+
+### Testing
+- Added test case that verifies the search input is automatically focused when the modal opens
+- Used fake timers to control the `setTimeout` behavior
+- Ensured proper cleanup and async handling
+
+## Benefits
+- **Improved UX**: Eliminates unnecessary click step for power users
+- **Keyboard-friendly**: Enables full keyboard navigation workflow
+- **Faster chart creation**: Reduces clicks needed to change visualization type
+- **Consistent behavior**: Follows common modal interaction patterns
+
+## Use Cases
+- **Business Analysts**: Faster chart creation workflow
+- **Power Users**: Keyboard-only navigation support
+- **General Users**: Smoother, more intuitive interaction
+
+## Testing
+- ✅ Unit tests pass with new auto-focus test case
+- ✅ Manual testing confirms search input is focused on modal open
+- ✅ No regression in existing functionality
+- ✅ Proper cleanup prevents memory leaks
+
+## Accessibility
+- Maintains keyboard navigation support
+- Preserves screen reader compatibility
+- No impact on existing accessibility features
+
+## Backward Compatibility
+- ✅ No breaking changes
+- ✅ Existing functionality preserved
+- ✅ No API changes required
+
+## Related Issues
+- Addresses UX friction in visualization type selection
+- Improves workflow efficiency for chart creation
+- Enhances keyboard accessibility
+
+---
+
+**Type:** Enhancement  
+**Impact:** User Experience  
+**Breaking Changes:** None  
+**Dependencies:** None

docker-compose.yml

@@ -71,7 +71,7 @@ services:
     container_name: superset_db
     restart: unless-stopped
     ports:
-      - "127.0.0.1:5432:5432"
+      - "127.0.0.1:5433:5432"
     volumes:
       - db_home:/var/lib/postgresql/data
       - ./docker/docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d