feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup #203 #237

liavweiss · 2025-03-25T12:27:42Z

Implementation for #203

workspaceKindsPage20.3.mp4

I also changed the deprecatedMessage to be shown only in case of Active status.

paulovmr

Hi @liavweiss , thanks for the PR! I left a few comments inline. Also, as discussed in Slack, IMO this table should not have expandable rows, only the drawer for details.

paulovmr · 2025-03-25T14:27:16Z

workspaces/frontend/src/app/AppRoutes.tsx

+      path: '/',
+    },
+    {
+      label: 'WorkspaceKinds',


Suggested change

label: 'WorkspaceKinds',

label: 'Workspace Kinds',

paulovmr · 2025-03-25T14:41:23Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+        onClick: () => viewDetailsClick(workspaceKind),
+      },
+      {
+        isSeparator: true,


No need for a separator here.

paulovmr · 2025-03-25T14:42:10Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+  const [expandedWorkspaceKindsNames, setExpandedWorkspaceKindsNames] = React.useState<string[]>(
+    [],
+  );
+  const [selectedWorkspaceKind, setSelectedWorkspacekind] = React.useState<WorkspaceKind | null>(


Suggested change

const [selectedWorkspaceKind, setSelectedWorkspacekind] = React.useState<WorkspaceKind | null>(

const [selectedWorkspaceKind, setSelectedWorkspaceKind] = React.useState<WorkspaceKind | null>(

paulovmr · 2025-03-25T14:43:15Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+    numberOfWorkspaces: 'Number Of Workspaces',
+  };
+
+  const filterableColumns = {


Please consider adding the Description column here.

paulovmr · 2025-03-25T14:45:54Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+                      {workspaceKind.deprecated ? (
+                        <Label color="red">Deprecated</Label>
+                      ) : (
+                        <Tooltip content={workspaceKind.deprecationMessage}>


The Tooltip should be used when deprecated is true and not used when it is false.

paulovmr · 2025-03-25T15:06:23Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+
+  const filterableColumns = {
+    name: 'Name',
+    deprecated: 'Status',


For status filtering, I believe we should have the options listed, instead of a text input. Similarly to the "Attribute Search" PatternFly example.

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

paulovmr

Hi @liavweiss , I've commented just a few minor changes. Also, please consider adding useCallbackand useMemo hooks to the variables across the file. Thanks!

paulovmr · 2025-04-10T18:30:19Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+
+  const getSortableRowValues = (workspaceKind: WorkspaceKind): (string | boolean | number)[] => {
+    const { icon, name, description, deprecated, numOfWrokspaces } = {


Suggested change

const { icon, name, description, deprecated, numOfWrokspaces } = {

const { icon, name, description, deprecated, numberOfWorkspaces } = {

paulovmr · 2025-04-10T18:31:24Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+    name: 'Name',
+    description: 'Description',
+    deprecated: 'Status',
+    numberOfWorkspaces: 'Number Of Workspaces',


Suggested change

numberOfWorkspaces: 'Number Of Workspaces',

numberOfWorkspaces: 'Number of workspaces',

jenny-s51

Nice work on this @liavweiss - left a comment below.

jenny-s51 · 2025-04-11T20:32:57Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+                  <Th screenReaderText="Primary action" />
+                </Tr>
+              </Thead>
+              {filteredWorkspaceKinds.map((workspaceKind, rowIndex) => (


While testing the status filters, I noticed we’re not currently handling the empty state when the filtered list has a length of 0.

Could we add a check on the filtered results and render the empty state table in that case? WDYT @liavweiss ?

emptyState.mp4

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

paulovmr

Thanks @liavweiss . There are a few other variables, such as event handlers and UI elements, that are missing useCallback and useMemo hooks, could you please add to them as well? Thanks!

paulovmr · 2025-04-15T12:49:39Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+    setIsStatusMenuOpen(!isStatusMenuOpen);
+  };
+
+  function onStatusSelect(


Suggested change

function onStatusSelect(

const onStatusSelect = (

paulovmr · 2025-04-15T12:49:51Z

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

+  function onStatusSelect(
+    event: React.MouseEvent | undefined,
+    itemId: string | number | undefined,
+  ) {


Suggested change

) {

) => {

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

paulovmr · 2025-04-16T13:17:53Z

/ok-to-test

paulovmr

/lgtm

jenny-s51

Empty state looks great - thanks for the fix @liavweiss ! 🙌 We should also surface the empty state in the Workspaces table for consistency.

I’ll file a couple of follow-up issues:

Empty state for Workspaces table - When filters return 0 results, we should show an empty state (same as the Workspace Kind viewer in this PR). @liavweiss would you be able to add this in a follow-up PR?

Chip label padding - Needs a small tweak to align properly. I’ll create and assign this one to myself and get a fix in soon.

/lgtm

jenny-s51

Left one more comment @liavweiss - otherwise LGTM!

jenny-s51 · 2025-04-16T14:43:17Z

workspaces/frontend/src/app/AppRoutes.tsx

+    {
+      label: 'Workspaces',
+      path: '/',
+    },


Suggested change

{

label: 'Workspaces',

path: '/',

},

{

label: 'Workspaces',

path: '/',

},

This can be removed - it's currently rendering an additional nav item "Workspaces" and duplicating the Workspaces table there. We are already rendering the Workspaces table from the "Notebooks" nav item.

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

jenny-s51

/lgtm

ederign · 2025-04-22T20:29:53Z

/lgtm

ederign · 2025-04-22T20:29:58Z

/approve

google-oss-prow · 2025-04-22T20:30:04Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ederign

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

The pull request process is described here

Needs approval from an approver in each of these files:

~~workspaces/frontend/OWNERS~~ [ederign]

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

ederign · 2025-04-22T20:30:34Z

@paulovmr, probably we will review all those UIs later, but I'm merging this as this will be incremental deliveries!

…mockup kubeflow#203 (kubeflow#237) * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> --------- Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> Co-authored-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

…mockup kubeflow#203 (kubeflow#237) * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> --------- Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> Co-authored-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> Signed-off-by: CI Bot <mkoushni@redhat.com>

…mockup kubeflow#203 (kubeflow#237) * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> * feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> --------- Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com> Co-authored-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

github-project-automation bot added this to Kubeflow Notebooks Mar 25, 2025

github-project-automation bot moved this to Needs Triage in Kubeflow Notebooks Mar 25, 2025

google-oss-prow bot requested review from ederign and thesuperzapper March 25, 2025 12:27

google-oss-prow bot added the size/L label Mar 25, 2025

paulovmr suggested changes Mar 25, 2025

View reviewed changes

google-oss-prow bot added size/XL and removed size/L labels Apr 6, 2025

Liav Weiss (EXT-Nokia) added 3 commits April 9, 2025 17:22

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live …

08852d4

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live …

de04306

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live …

3601fb8

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

liavweiss force-pushed the workspaceKinds/viewer#203 branch from a60d2b2 to 3601fb8 Compare April 9, 2025 14:24

paulovmr suggested changes Apr 10, 2025

View reviewed changes

jenny-s51 suggested changes Apr 11, 2025

View reviewed changes

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live …

c273d86

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

paulovmr suggested changes Apr 15, 2025

View reviewed changes

google-oss-prow bot assigned paulovmr Apr 15, 2025

Liav Weiss (EXT-Nokia) added 2 commits April 16, 2025 10:42

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live …

ef198b6

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live …

641a0a5

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

google-oss-prow bot added the ok-to-test label Apr 16, 2025

paulovmr approved these changes Apr 16, 2025

View reviewed changes

google-oss-prow bot added the lgtm label Apr 16, 2025

jenny-s51 approved these changes Apr 16, 2025

View reviewed changes

google-oss-prow bot assigned jenny-s51 Apr 16, 2025

jenny-s51 mentioned this pull request Apr 16, 2025

Add Empty State to Workspace list #259

Closed

jenny-s51 suggested changes Apr 16, 2025

View reviewed changes

google-oss-prow bot removed the lgtm label Apr 16, 2025

jenny-s51 mentioned this pull request Apr 17, 2025

Notebooks 2.0 // Frontend // Fix Chip Label Padding #260

Closed

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live …

fbdbf2b

…mockup kubeflow#203 Signed-off-by: Liav Weiss (EXT-Nokia) <liav.weiss.ext@nokia.com>

jenny-s51 approved these changes Apr 22, 2025

View reviewed changes

google-oss-prow bot added the lgtm label Apr 22, 2025

google-oss-prow bot assigned ederign Apr 22, 2025

google-oss-prow bot added the approved label Apr 22, 2025

google-oss-prow bot merged commit 4d565db into kubeflow:notebooks-v2 Apr 22, 2025
7 checks passed

github-project-automation bot moved this from Needs Triage to Done in Kubeflow Notebooks Apr 22, 2025

liavweiss deleted the workspaceKinds/viewer#203 branch May 18, 2025 14:57

	const [selectedWorkspaceKind, setSelectedWorkspacekind] = React.useState<WorkspaceKind \| null>(
	const [selectedWorkspaceKind, setSelectedWorkspaceKind] = React.useState<WorkspaceKind \| null>(

	const { icon, name, description, deprecated, numOfWrokspaces } = {
	const { icon, name, description, deprecated, numberOfWorkspaces } = {

	numberOfWorkspaces: 'Number Of Workspaces',
	numberOfWorkspaces: 'Number of workspaces',

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup #203 #237

feat(ws): Notebooks 2.0 // Frontend // Workspace Kind Viewer // Live mockup #203 #237

Uh oh!

Conversation

liavweiss commented Mar 25, 2025

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jenny-s51 left a comment

Choose a reason for hiding this comment

Uh oh!

jenny-s51 Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

paulovmr commented Apr 16, 2025

Uh oh!

paulovmr left a comment

Choose a reason for hiding this comment

Uh oh!

jenny-s51 left a comment

Choose a reason for hiding this comment

Uh oh!

jenny-s51 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jenny-s51 left a comment

Choose a reason for hiding this comment

Uh oh!

ederign commented Apr 22, 2025

Uh oh!

ederign commented Apr 22, 2025

Uh oh!

google-oss-prow bot commented Apr 22, 2025

Uh oh!

Uh oh!

ederign commented Apr 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jenny-s51 Apr 11, 2025 •

edited

Loading