Skip to content
  • Ross Nelson's avatar
    0f6be9f1
    DT-3069: Add search attributes form component with adapter pattern (#2793) · 0f6be9f1
    Ross Nelson authored
    * feat: add search attributes form component with adapter pattern
    
    Implements a search attributes management form using SuperForms and
    Svelte 5 runes. The component features error handling, form state
    management, and an adapter pattern for different API implementations.
    
    Key implementation details:
    - SuperForms integration with Zod validation and error callbacks
    - Adapter pattern with duck-typed interfaces for OSS/Cloud flexibility
    - Error handling with user-friendly messages
    - Support for both field-level and form-level validation display
    - Skeleton loading states and retry functionality for failed operations
    
    The adapter pattern abstracts API differences between OSS and Cloud
    implementations, with placeholder methods for future CRUD endpoints when
    the SDK team adds them.
    
    * refactor: simplify CLAUDE.md to focus on essentials
    
    Streamlined documentation to focus on actionable patterns and rules
    rather than verbose explanations. Condensed Svelte 5 runes patterns into
    concise examples and reduced overall content to key workflow commands
    and coding standards.
    
    * lint
    
    * feat: internationalize search attributes form
    
    Adds i18n support for all user-facing strings in the search attributes form feature. Creates new search-attributes namespace with strings for form labels, validation messages, error states, and data type labels.
    
    Key changes:
    - New search-attributes i18n namespace with 25+ strings
    - All form components updated to use translate() function
    - Adapter classes use i18n for type labels and error messages
    - Storybook stories internationalized
    - Validation messages and success/error states localized
    - Data type labels (Keyword, Text, Int, etc.) centralized
    
    All hardcoded strings replaced with proper i18n keys, making the feature ready for multi-language support.
    
    * fix: standardize font sizes in search attributes form
    
    Update font sizes to match Figma design specs:
    - Set story template header to 14px (text-sm)
    - Set "Add New Custom Search Attribute" button to 14px (size="sm")
    
    * feat: add dirty state indicator to save button
    
    Add count badge to save button showing number of unsaved changes using SuperForms isTainted state. Badge displays count of modified attributes and only appears when form has unsaved changes.
    
    - Use SuperForms tainted and isTainted for dirty state detection
    - Add Badge component with count type for numbered indicator
    - Count only attributes with actual field changes (ignore empty objects)
    - Position badge using established design system pattern
    
    * refactor: simplify search attributes adapter pattern
    
    Refactor adapter to use Svelte reactive context instead of constructor parameters:
    - Replace class-based adapter with reactive object using page.params
    - Move callbacks into adapter definition removing prop drilling
    - Create new route page demonstrating zero-config usage
    - Update all mock adapters and stories to match new pattern
    - Add proper form reset functionality using SuperForms reset()
    - Update documentation to reflect simplified API
    
    The adapter now automatically gets namespace from URL params and requires no setup.
    
    * refactor: simplify stories to use object adapter pattern
    
    Replace class-based mock adapters with simple object literals similar to the default adapter pattern. This eliminates confusion and clearly demonstrates the intended usage pattern for creating custom adapters.
    
    - Convert MockAdapter, ErrorMockAdapter, and EmptyMockAdapter from classes to objects
    - Remove complex constructor patterns and parameter passing
    - Use inline callback definitions matching defaultAdapter approach
    - Maintain all functionality while improving clarity
    
    * fix: update storybook imports in mdx file
    
    Fix outdated Storybook import paths that were causing dev server errors. Update from deprecated addon-docs/blocks to @storybook/blocks for Storybook 8.x compatibility.
    
    * docs: update storybook documentation for new adapter pattern
    
    Update MDX documentation to reflect the simplified reactive adapter pattern:
    - Document zero-configuration default adapter usage
    - Show object-based custom adapter examples instead of classes
    - Add dirty state management section with SuperForms isTainted
    - Update usage examples with correct import order
    - Document i18n support and new features
    - Simplify props table removing callback parameters
    
    * docs: fix formatting in search attributes documentation
    
    Minor spacing and line break adjustments for better readability.
    0f6be9f1
    DT-3069: Add search attributes form component with adapter pattern (#2793)
    Ross Nelson authored
    * feat: add search attributes form component with adapter pattern
    
    Implements a search attributes management form using SuperForms and
    Svelte 5 runes. The component features error handling, form state
    management, and an adapter pattern for different API implementations.
    
    Key implementation details:
    - SuperForms integration with Zod validation and error callbacks
    - Adapter pattern with duck-typed interfaces for OSS/Cloud flexibility
    - Error handling with user-friendly messages
    - Support for both field-level and form-level validation display
    - Skeleton loading states and retry functionality for failed operations
    
    The adapter pattern abstracts API differences between OSS and Cloud
    implementations, with placeholder methods for future CRUD endpoints when
    the SDK team adds them.
    
    * refactor: simplify CLAUDE.md to focus on essentials
    
    Streamlined documentation to focus on actionable patterns and rules
    rather than verbose explanations. Condensed Svelte 5 runes patterns into
    concise examples and reduced overall content to key workflow commands
    and coding standards.
    
    * lint
    
    * feat: internationalize search attributes form
    
    Adds i18n support for all user-facing strings in the search attributes form feature. Creates new search-attributes namespace with strings for form labels, validation messages, error states, and data type labels.
    
    Key changes:
    - New search-attributes i18n namespace with 25+ strings
    - All form components updated to use translate() function
    - Adapter classes use i18n for type labels and error messages
    - Storybook stories internationalized
    - Validation messages and success/error states localized
    - Data type labels (Keyword, Text, Int, etc.) centralized
    
    All hardcoded strings replaced with proper i18n keys, making the feature ready for multi-language support.
    
    * fix: standardize font sizes in search attributes form
    
    Update font sizes to match Figma design specs:
    - Set story template header to 14px (text-sm)
    - Set "Add New Custom Search Attribute" button to 14px (size="sm")
    
    * feat: add dirty state indicator to save button
    
    Add count badge to save button showing number of unsaved changes using SuperForms isTainted state. Badge displays count of modified attributes and only appears when form has unsaved changes.
    
    - Use SuperForms tainted and isTainted for dirty state detection
    - Add Badge component with count type for numbered indicator
    - Count only attributes with actual field changes (ignore empty objects)
    - Position badge using established design system pattern
    
    * refactor: simplify search attributes adapter pattern
    
    Refactor adapter to use Svelte reactive context instead of constructor parameters:
    - Replace class-based adapter with reactive object using page.params
    - Move callbacks into adapter definition removing prop drilling
    - Create new route page demonstrating zero-config usage
    - Update all mock adapters and stories to match new pattern
    - Add proper form reset functionality using SuperForms reset()
    - Update documentation to reflect simplified API
    
    The adapter now automatically gets namespace from URL params and requires no setup.
    
    * refactor: simplify stories to use object adapter pattern
    
    Replace class-based mock adapters with simple object literals similar to the default adapter pattern. This eliminates confusion and clearly demonstrates the intended usage pattern for creating custom adapters.
    
    - Convert MockAdapter, ErrorMockAdapter, and EmptyMockAdapter from classes to objects
    - Remove complex constructor patterns and parameter passing
    - Use inline callback definitions matching defaultAdapter approach
    - Maintain all functionality while improving clarity
    
    * fix: update storybook imports in mdx file
    
    Fix outdated Storybook import paths that were causing dev server errors. Update from deprecated addon-docs/blocks to @storybook/blocks for Storybook 8.x compatibility.
    
    * docs: update storybook documentation for new adapter pattern
    
    Update MDX documentation to reflect the simplified reactive adapter pattern:
    - Document zero-configuration default adapter usage
    - Show object-based custom adapter examples instead of classes
    - Add dirty state management section with SuperForms isTainted
    - Update usage examples with correct import order
    - Document i18n support and new features
    - Simplify props table removing callback parameters
    
    * docs: fix formatting in search attributes documentation
    
    Minor spacing and line break adjustments for better readability.
Loading