Skip to content

VSN-2041 : Defining initial responsivity drawer handling based on action forms inputs dimentsions.

yassine.elazami a demandé de fusionner VSN-2041 vers develop

Merge Request Description

Title

Dynamic Drawer Width Management for Circuits Forms and Tabs Integration


Overview

This merge request introduces a complete refactor and enhancement of the drawer width management mechanism within the prepared circuits module. The goal is to improve UI adaptability and usability by dynamically adjusting the drawer width based on the currently displayed content (add, update, read, confirmation views), while ensuring clean integration across tabs, forms, and list views.

The implementation replaces previously static drawer width values with a fully state-driven approach, enabling better responsiveness and consistency across the user journey when managing circuits.


Scope of Changes

The work covered in this MR focuses on:

  • Making the drawer width fully dynamic and state-driven
  • Propagating drawer width control through hooks, views, and components
  • Adapting the drawer size automatically depending on the rendered circuit form
  • Ensuring proper reset and cleanup behaviors
  • Improving overall code quality by removing unused artifacts

Detailed Commit Breakdown

1. Drawer Width as a Dynamic State

  • Converted the drawer width from a hardcoded constant into a React state.
  • This change enables runtime updates of the drawer size based on UI context and user interactions.

2. Circuit Add / Update Form Integration

  • Introduced the circuit add/update form into the drawer layout.
  • Ensured the form renders correctly within the dynamically sized drawer.

3. Drawer Width Control via Circuit Tabs

  • Extended the useCircuitTabs hook to accept a drawer width setter as a parameter.
  • This allows tab navigation logic to influence the drawer size when switching contexts.

4. Propagation of Width Setter from List View

  • Passed the drawer width setter from the circuits list view down into the useCircuitTabs hook.
  • Ensures a single source of truth for drawer width management.

5. Circuit Form Enhancement

  • Added the drawer width setter as a prop to the Circuit Form component.
  • This allows the form itself to request width adjustments depending on its mode (add, update, read).

6. Automatic Width Adjustment Effect

  • Implemented a useEffect hook inside the circuit form to automatically resize the drawer on each render.
  • Ensures optimal space allocation for different form modes without manual intervention.

7. Drawer Width Invocation from Form

  • Explicitly invoked the drawer width setter from within the Circuit Form component.
  • Guarantees that width changes are applied immediately when the form is displayed.

8. Confirmation Flow Reset

  • Added logic to reset the drawer width when reaching confirmation states.
  • Prevents layout inconsistencies when navigating back to other views.

9. Tabs Manager Integration

  • Invoked the drawer width setter within the useTabsManager hook.
  • Ensures consistent width behavior across all tab-managed views.

10. Code Cleanup and Refactoring

  • Removed unused imports, variables, and constants.
  • Improved readability and maintainability of the affected components and hooks.

Functional Impact

  • The drawer now adapts seamlessly to different circuit management contexts.
  • Forms benefit from increased space when needed, improving data entry comfort.
  • Navigation between tabs and views no longer causes layout inconsistencies.
  • The UI logic is more centralized, predictable, and easier to extend.

Technical Benefits

  • Clear separation of concerns between layout control and business logic
  • Improved reusability of hooks and components
  • Reduced reliance on magic values and hardcoded UI constraints
  • Cleaner and more maintainable codebase

Conclusion

This MR significantly enhances the responsiveness and flexibility of the circuits management UI by introducing a robust, state-driven drawer width system. The changes improve user experience, simplify future enhancements, and align the circuits module with modern UI design best practices.

Closes VSN-2041

Modification effectuée par yassine.elazami

Rapports de requête de fusion