Skip to content

ISSUE-648: Change status classes to functional components#722

Open
ada333 wants to merge 2 commits intokubeflow:mainfrom
ada333:ISSUE-648
Open

ISSUE-648: Change status classes to functional components#722
ada333 wants to merge 2 commits intokubeflow:mainfrom
ada333:ISSUE-648

Conversation

@ada333
Copy link
Copy Markdown
Collaborator

@ada333 ada333 commented Mar 25, 2026

#648
This PR refactors these classes into functional components:

  1. CellMetadataEditor
  2. InlineCellsMetadata
  3. InlineMetadata
  4. StatusRunning
  5. StatusTerminated

For better code quality and readability there were some new hooks and separate component files added:
New hooks:

  1. useUpdateCellTags -- encapsulates all Kale cell metadata write operations
  2. useEditorPosition -- manages editor DOM positioning inside the active notebook cell
  3. useInlineCellsMetadata -- manages inline metadata portals, editor props, and active cell tracking
  4. useNotebookSignals -- connects/disconnects JupyterLab notebook signals (save, cell change, active cell, metadata)
  5. useLatestRef -- utility hook to avoid stale closures in signal handlers

New dialog components (extracted from CellMetadataEditor):

  1. BaseImageDialog
  2. CacheDialog
  3. GpuDialog (renamed from CellMetadataEditorDialog)

Other cleanup:

  1. Shared constants moved to constants.ts
  2. Dialog components organized into dialogs/ folder
  3. Removed dead commented-out code

Left Panel will be refactored in another PR.

TESTING:

To test this I spinned up jupyter lab with these changes and jupyter lab from main and I compared the behaviour of UI. I recommend for testing of this PR to do the same thing.

@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 ederign 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

Copy link
Copy Markdown
Collaborator

@jesuino jesuino left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello Adam,

Thanks for your work on this, I checked the other PR and it is looking good! Would it be possible to do all work in a single PR? It will even better for your to work on a single PR because when you get to dependent components you may have weird behavior related to state mismatch.

Thanks!

@@ -14,33 +14,34 @@

import * as React from 'react';
// import { CSSProperties } from 'jss/css';
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we take this opportunity to remove unused comments?

@google-oss-prow google-oss-prow bot added size/XXL and removed size/M labels Apr 1, 2026
@ada333 ada333 marked this pull request as draft April 1, 2026 12:46
@ada333 ada333 force-pushed the ISSUE-648 branch 2 times, most recently from c032b97 to 670b8e4 Compare April 2, 2026 12:40
Signed-off-by: Adam Maly <amaly@redhat.com>
Signed-off-by: Adam Maly <amaly@redhat.com>
@ada333 ada333 marked this pull request as ready for review April 2, 2026 13:49
@ada333 ada333 requested a review from jesuino April 2, 2026 13:55
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