Refactor/datasets content

[Creylay]

Summary

This PR refactors the DatasetsContent.jsx module, which had grown in complexity by mixing business logic, state management, and UI rendering in a single file. The refactor aims to improve code readability, maintainability, and scalability by separating concerns, extracting reusable and specific components, and preparing the codebase for future extensions and performance improvements.

---

Type of Change

Check all that apply like this [x]:

• Backend change
• Frontend change
• CI / Workflow change
• Build / Packaging change
• Bug fix
• Documentation

---

Changes (by file)

• src/pages/datasets/DatasetsContent.jsx: Refactored to delegate business logic and UI state to specialized hooks, and to use new reusable layout components for a three-panel structure. Central render logic is now encapsulated in a dedicated subcomponent.
• src/components/threeSectionLayout/panels/LeftPanel.jsx: Reusable left sidebar panel with show/hide and resize logic, using context for state.
• src/components/threeSectionLayout/panels/RightPanel.jsx: Fully generic right sidebar panel, with customizable toggle button position via the toggleButtonTop prop, and context-driven state.
• src/components/threeSectionLayout/panels/CenterPanel.jsx: Central panel that dynamically adjusts its width based on the state of the side panels.
• src/components/notebooks/dataset/DatasetsCenterContent.jsx: New subcomponent that encapsulates all conditional rendering logic for the central panel, improving modularity and readability.
• src/hooks/datasets/useDatasets.js: Encapsulates all logic related to the Dataset entity (state, lifecycle, CRUD, polling, metadata enrichment).
• src/hooks/datasets/useNotebooks.js: Manages state and operations for the Notebook entity, including its relationship with datasets.
• src/hooks/datasets/useDatasetUIState.js: Maintains navigation and flow state for the module (step, selectedOption).
• src/hooks/datasets/useDatasetFlow.js: Handles complex business flows involving datasets, such as creating a dataset from a notebook.
• src/hooks/datasets/useDatasetActions.js: Defines user actions on datasets and notebooks from a UI interaction perspective.
• src/hooks/datasets/useNotebooksActions.js: Contains notebook-specific actions, such as creating notebooks from datasets and navigation after creation.
• src/hooks/datasets/useLayoutActions.js: Centralizes high-level actions that coordinate navigation, UI state, and UX side-effects.
• src/hooks/useThreePanelsLayout.js: Manages the three-panel layout behavior (visibility, sizing, resizing, transitions).

---

Testing (optional)

• Please verify that all dataset and notebook flows work as expected, including creation, editing, deletion, and navigation.
• Check that the three-panel layout behaves correctly: panels can be shown/hidden and resized, and the toggle button appears in the correct position.
• Ensure that the central content renders properly in all navigation states.

---

Notes (optional)

1) Datasets Module Hook Architecture

The Datasets module is now structured using multiple specialized hooks, each with a clearly defined responsibility. This reduces coupling, improves maintainability, and allows each part of the system to evolve independently.

• useDatasets: Handles all Dataset entity logic (state, CRUD, polling, metadata enrichment).
• useNotebooks: Manages Notebook entity state and operations, including its relationship with datasets.
• useDatasetUIState: Models the conceptual navigation state of the user within the module (step, selectedOption).
• useDatasetFlow: Groups complex business flows involving datasets and side effects.
• useDatasetActions: Defines user actions on datasets and notebooks from a UI perspective.
• useNotebookActions: Contains notebook-specific actions and navigation logic.
• useLayoutActions: Centralizes high-level actions that coordinate navigation, UI state, and UX side-effects.
• useThreePanelLayout: Manages the three-panel layout behavior (visibility, sizing, resizing, transitions).

2) Three Panel Layout Components

Reusable components were introduced to encapsulate the logic and presentation of a three-section layout (left, center, right):

• LeftPanel: Manages the left sidebar, including show/hide transitions and dynamic width adjustment.
• RightPanel: Fully generic right sidebar, with a customizable toggle button position (toggleButtonTop prop).
• CenterPanel: Central panel that adapts its width based on the state of the side panels.

All panels use context to manage visibility, sizing, and user interaction events, and render their content via children.

3) Central Content Encapsulation

A new subcomponent, DatasetsCenterContent, was implemented to encapsulate and centralize the conditional rendering logic for the central panel of the datasets module. This improves readability, maintainability, and keeps the main file clean and modular.

---