feat(ws): Split the Connect button, such that clicking it opens the d…

…efault (main) endpoint Signed-off-by: Yael <[email protected]>
kubeflow · Feb 4, 2025 · 19f4e9a · 19f4e9a
1 parent a933edc
commit 19f4e9a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 22 deletions.
diff --git a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceEndpoints.tsx b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceEndpoints.tsx
@@ -1,51 +1,67 @@
-import React from "react";
+import React from 'react';
 import {
   Dropdown,
   DropdownItem,
   DropdownList,
   MenuToggle,
   MenuToggleElement,
-} from "@patternfly/react-core";
-import { Workspace, WorkspaceState } from "~/shared/types";
+  MenuToggleAction,
+} from '@patternfly/react-core';
+import { Workspace, WorkspaceState } from '~/shared/types';
 
 type EndpointsDropdownProps = {
   workspace: Workspace;
 };
 
-export const EndpointsDropdown: React.FunctionComponent<EndpointsDropdownProps> = ({workspace}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+export const EndpointsDropdown: React.FunctionComponent<EndpointsDropdownProps> = ({
+  workspace,
+}) => {
+  const [open, setIsOpen] = React.useState(false);
 
   const onToggleClick = () => {
-    setIsOpen(!isOpen);
+    setIsOpen(!open);
   };
 
   const onSelect = (
     _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined) => {
+    value: string | number | undefined,
+  ) => {
     setIsOpen(false);
-    if (typeof value === 'string'){
+    if (typeof value === 'string') {
       openEndpoint(value);
     }
   };
 
+  const onClickConnect = () => {
+    openEndpoint(workspace.podTemplate.endpoints[0].port);
+  };
+
   const openEndpoint = (port: string) => {
-    window.open(`workspace/${workspace.namespace}/${workspace.name}/${port}`, '_blank'); 
+    window.open(`workspace/${workspace.namespace}/${workspace.name}/${port}`, '_blank');
   };
 
   return (
     <Dropdown
-      isOpen={isOpen}
+      isOpen={open}
       onSelect={onSelect}
       onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
           onClick={onToggleClick}
-          isExpanded={isOpen}
-          isFullWidth={true}
-          isDisabled={workspace.status.state != WorkspaceState.Running}
-        >Connect
-        </MenuToggle>
+          isExpanded={open}
+          isFullWidth
+          isDisabled={workspace.status.state !== WorkspaceState.Running}
+          splitButtonItems={[
+            <MenuToggleAction
+              id="connect-endpoint-button"
+              key="connect-endpoint-button"
+              onClick={onClickConnect}
+            >
+              Connect
+            </MenuToggleAction>,
+          ]}
+        />
       )}
       ouiaId="BasicDropdown"
       shouldFocusToggleOnSelect
@@ -59,4 +75,4 @@ export const EndpointsDropdown: React.FunctionComponent<EndpointsDropdownProps>
       </DropdownList>
     </Dropdown>
   );
-};
+};
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
@@ -28,9 +28,9 @@ import { Workspace, WorkspacesColumnNames, WorkspaceState } from '~/shared/types
 import { WorkspaceDetails } from '~/app/pages/Workspaces/Details/WorkspaceDetails';
 import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow';
 import DeleteModal from '~/shared/components/DeleteModal';
+import { EndpointsDropdown } from '~/app/pages/Workspaces/WorkspaceEndpoints';
 import Filter, { FilteredColumn } from 'shared/components/Filter';
 import { formatRam } from 'shared/utilities/WorkspaceResources';
-import { EndpointsDropdown } from '~/app/pages/Workspaces/WorkspaceEndpoints';
 
 export const Workspaces: React.FunctionComponent = () => {
   /* Mocked workspaces, to be removed after fetching info from backend */
@@ -66,8 +66,8 @@ export const Workspaces: React.FunctionComponent = () => {
         endpoints: [
           {
             displayName: 'JupyterLab',
-            port: '7777'
-          }
+            port: '7777',
+          },
         ],
       },
       options: {
@@ -117,11 +117,11 @@ export const Workspaces: React.FunctionComponent = () => {
         endpoints: [
           {
             displayName: 'JupyterLab',
-            port: '8888'
+            port: '8888',
           },
           {
             displayName: 'Spark Master',
-            port: '9999'
+            port: '9999',
           },
         ],
       },
@@ -456,7 +456,7 @@ export const Workspaces: React.FunctionComponent = () => {
                       </Timestamp>
                     </Td>
                     <Td>
-                      <EndpointsDropdown workspace={workspace}/>
+                      <EndpointsDropdown workspace={workspace} />
                     </Td>
                     <Td isActionCell data-testid="action-column">
                       <ActionsColumn