Skip to content

ISSUE-738: Refactor Left Panel#750

Open
ada333 wants to merge 6 commits intokubeflow:mainfrom
ada333:ISSUE-738
Open

ISSUE-738: Refactor Left Panel#750
ada333 wants to merge 6 commits intokubeflow:mainfrom
ada333:ISSUE-738

Conversation

@ada333
Copy link
Copy Markdown
Collaborator

@ada333 ada333 commented Apr 9, 2026

This PR refactors LeftPanel into functional component using custom hooks. This make the component much more simple - from 800 lines to 300. The 6 hooks introduced in here ->

Hook Responsibility
useNotebookMetadata Owns all pipeline metadata state (experiment, pipeline name/description, base image, caching, namespace, etc.) and exposes granular updaters for each form field. Composes the three hooks below.
useNotebookLoader Subscribes to the notebook tracker's currentChanged signal and runs the async loading sequence (wait for session, fetch base image/namespace/experiments via RPC, read .ipynb metadata, merge defaults).
useNotebookMetadataPersistence Writes metadata back to the .ipynb file whenever the state changes.
useEnableByDefaultEffect Reacts to the "Enable Kale by default" JupyterLab setting: when it transitions from off→on, it flips the toggle without requiring a notebook switch.
useKfpStatus Polls kfp.ping every 30s and returns the connection status for the header badge.
useDeployment Manages the full compile/upload/run lifecycle: triggering deploys, tracking progress per deploy index, handling unsaved-changes prompts, and exposing callbacks for the toolbar and deploy button.

Other important changes:

  1. Types extracted to LeftPanelTypes.ts
    DeployType, IExperiment, IKaleNotebookMetadata, DefaultState, and NEW_EXPERIMENT moved to a dedicated types file. LeftPanel.tsx re-exports them so existing imports from other files continue to work without changes.

  2. Toolbar decoupled from the class instance
    kaleToolbar.ts no longer imports KubeflowKaleLeftPanel directly. Instead it defines an ILeftPanelHandle interface (triggerCompile, triggerRun, isKaleEnabled) and exposes setLeftPanelCallbacks. The function component registers its callbacks via a useEffect, eliminating the React ref that was previously threaded through widget.tsx.

  3. Utility functions made standalone
    getNotebookFileName, sanitizePipelineName, and getNotebookPath were extracted from class methods into plain functions in useNotebookLoader.ts — they had no dependency on this and are now easier to unit-test.

I tested this by simply running JupyterLab and trying Left Panel in different ways. But this definitely needs thorough testing - there are lot of different scenarios.

ada333 added 4 commits April 9, 2026 13:20
Signed-off-by: Adam Maly <amaly@redhat.com>
Signed-off-by: Adam Maly <amaly@redhat.com>
Signed-off-by: Adam Maly <amaly@redhat.com>
Signed-off-by: Adam Maly <amaly@redhat.com>
@review-notebook-app
Copy link
Copy Markdown

Check out this pull request on  ReviewNB

See visual diffs & provide feedback on Jupyter Notebooks.


Powered by ReviewNB

@google-oss-prow
Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign stefanofioravanzo for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

ada333 added 2 commits April 9, 2026 16:22
Signed-off-by: Adam Maly <amaly@redhat.com>
Signed-off-by: Adam Maly <amaly@redhat.com>
@ederign
Copy link
Copy Markdown
Member

ederign commented Apr 9, 2026

@ada333 keeps those PR's coming, I'm just waiting to branch for 2.0 to start to review and merge those.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants