feat: add Session Improvements #3659

andre-code · 2025-04-25T08:11:06Z

This PR includes a set of enhancements and UI refinements to improve the session launcher and session-related views:

✨ Features:

Added a documentation link to assist users in setting up a custom environment and remove toggle of Advance settings.
Implemented new proposal for environment icons in the environment selector.
Reordered session launcher options and updated copy text on action buttons.
Added a share link button on the show session page.
Updated copy text for the shared session link
Modified session tiles to show session details on hover instead of on click.
Repositioned error/success messages closer to the update button.
Disabled search functionality in the code repository selector and show code repository name for better UX

🐛 Fixes:

Fixed navigation to the show session page after resuming a session.

/deploy renku=andrea/session-improvements extra-values=dataService.imageBuilders.enabled=true,dataService.imageBuilders.pushSecretName=harbor-secret,dataService.imageBuilders.outputImagePrefix=harbor.dev.renku.ch/andrea-dev/

RenkuBot · 2025-04-25T08:12:16Z

You can access the deployment of this PR at https://renku-ci-ui-3659.dev.renku.ch

…d organize auxiliary build components into a separate file

client/src/features/dashboardV2/DashboardV2Sessions.tsx

leafty · 2025-05-07T06:00:01Z

client/src/features/dashboardV2/DashboardV2Sessions.tsx

+            <div className={cx("d-flex", "gap-2")}>
+              <img
+                src={sessionStyles.sessionIcon}
+                alt="Session icon indicator"


Improvement: make the alt text reflect the status of the session

leafty · 2025-05-07T06:01:52Z

client/src/features/sessionsV2/SessionShowPage/ShowSessionPage.tsx

+  const { launcherId } = useMemo(() => {
+    if (session == null) {
+      return { launcherId: undefined };
+    }
+    return {
+      launcherId: session.launcher_id,
+    };
+  }, [session]);


Suggested change

const { launcherId } = useMemo(() => {

if (session == null) {

return { launcherId: undefined };

}

return {

launcherId: session.launcher_id,

};

}, [session]);

const launcherId = session?.launcher_id;

leafty · 2025-05-07T06:03:25Z

client/src/features/sessionsV2/SessionView/SessionStartLinkModal.tsx

 import useSessionStartLink from "./useSessionStartLink.hook";

 interface SessionStartLinkModalProps {
  isOpen: boolean;
-  launcher: SessionLauncher;
-  project: Project;
+  launcherId: Ulid;


This is just a string for the client:

Suggested change

launcherId: Ulid;

launcherId: string;

leafty · 2025-05-07T06:04:06Z

client/src/features/sessionsV2/SessionView/useSessionStartLink.hook.ts

 }: {
-  launcher: SessionLauncher;
-  project: Project;
+  launcherId: Ulid;


Suggested change

launcherId: Ulid;

launcherId: string;

leafty · 2025-05-07T06:05:22Z

client/src/features/sessionsV2/components/SessionForm/CodeRepositorySelector.tsx

@@ -160,7 +161,7 @@ function CodeRepositorySelect({
      inputId="builder-environment-code-repository-select-input"
      name={name}
      isClearable={false}
-      isSearchable
+      isSearchable={false}


Why? It works and is useful for cases with a lot of repositories. This is not an improvement, this is a downgrade!! 😢

Yes, however, users can easily misunderstand how the search logic works in this context. In one case, a user pasted a repository URL into the search bar without realizing that it hadn't matched an existing repository. The input silently switched to an existing repo, and the user didn’t notice the change. As a result, they launched a session using the wrong repository.

To avoid this kind of confusion, our longer-term goal is to include a clear option to add a new repository explicitly when launching a session. For now, though, this change already helps mitigate a major source of user frustration.

I very much disagree here, look at this project -> https://dev.renku.ch/v2/projects/flora.thiebaut/flora-test-many-repos. How is it an improvement to remove the search bar here?!? With the search feature, I can easily pick which repository I want to use without having to scroll and find the repository I need.

I don't think that the search is causing a major frustration. Its absence is doing that.

Thanks for the feedback! You’re totally right — the search is super handy when there are lots of repositories, and I get why removing it feels like a step back.

That said, in testing, most projects had just one or two repos, and we saw users getting confused. One person pasted a repo URL, and because it didn’t exactly match anything, the input silently picked a different repo — they didn’t notice, and ended up launching the session with the wrong one. That caused a lot of frustration.

I think both situations are frustrating in their own way, which is why we want to fix them separately. Ideally, we’d add something like a clear “+ Add new repository” button that opens a modal or something more obvious.

leafty · 2025-05-07T06:12:27Z

client/src/features/sessionsV2/components/SessionForm/CustomEnvironmentFields.tsx

+          <ExternalLink
+            role="text"
+            url={Links.RENKU_2_HOW_TO_USE_OWN_DOCKER_IMAGE}
+            title="documentation"
+          />{" "}


Include the box arrow up right icon in the link here.

leafty · 2025-05-07T06:12:54Z

client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx

+      <InfoAlert dismissible={false} timeout={0}>
+        <p className="mb-0">
+          Please see the{" "}
+          <ExternalLink


Same here, include the external link icon.

leafty · 2025-05-07T06:13:07Z

client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx

 import { Loader } from "../../../../components/Loader";
+import { Links } from "../../../../utils/constants/Docs.js";


Suggested change

import { Links } from "../../../../utils/constants/Docs.js";

import { Links } from "../../../../utils/constants/Docs";

leafty · 2025-05-07T06:13:54Z

client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx

+                    "flex-row",
+                    "gap-3",
+                    "text-center",
+                    "text-md-start"


Add align-items-center here for nicer looks: see it fixed here on the last option.

- show icon external link for documentation - make icon alt status show the current session status - fix vertical alignment in environment selector - use type string for launcherId instead of Ulid

andre-code · 2025-05-07T09:13:59Z

Thanks @leafty for the review!
I’ve added your suggestions in the latest commit.

leafty · 2025-05-07T09:30:36Z

client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx

  if (!status.message) return null;

  const popover = (
-    <UncontrolledPopover target={uid} trigger="legacy" placement="bottom">
+    <UncontrolledPopover target={ref} trigger="hover" placement="bottom">


For accessibility:

Suggested change

<UncontrolledPopover target={ref} trigger="hover" placement="bottom">

<UncontrolledPopover target={ref} placement="bottom">

Ok! Hover or focus works well, still mobile-friendly that way.

leafty · 2025-05-07T09:31:46Z

client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx

@@ -223,16 +232,18 @@ export function SessionListRowStatusExtraDetailsV2({
    return (
      <>
        {" "}
-        <span id={uid} className={cx("text-muted", "cursor-pointer")}>
-          (Click here for details.)
+        <span ref={ref} className={cx("text-muted", "cursor-pointer")}>


For accessibility:

Suggested change

<span ref={ref} className={cx("text-muted", "cursor-pointer")}>

<span ref={ref} className={cx("text-muted", "cursor-pointer")} tabIndex={0}>

See: https://getbootstrap.com/docs/5.3/components/tooltips/#disabled-elements

leafty · 2025-05-09T13:52:37Z

client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx

+      onClick={(event) => {
+        event.stopPropagation();
+      }}


This is not needed, popovers are created outside of the app root.

leafty · 2025-05-09T14:38:33Z

client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx

  if (!status.message) return null;

  const popover = (
-    <UncontrolledPopover target={uid} trigger="legacy" placement="bottom">
+    <UncontrolledPopover target={ref} trigger="hover focus" placement="bottom">


Note: "focus" does not allow users to select the text inside the popover.

maybe try "hover click" for the trigger

andre-code · 2025-05-12T07:00:28Z

@leafty I reverted the last change because it was causing the side panel to open when clicking inside the popover body. I verified that it's still possible to copy the text inside the popover.

RenkuBot · 2025-05-12T08:29:18Z

Tearing down the temporary RenkuLab deplyoment for this PR.

andre-code had a problem deploying to renku-ci-ui-3659 April 25, 2025 08:11 — with GitHub Actions Error

andre-code changed the base branch from main to andrea/add-new-session-card-design April 25, 2025 08:11

andre-code temporarily deployed to renku-ci-ui-3659 April 25, 2025 08:11 — with GitHub Actions Inactive

andre-code temporarily deployed to renku-ci-ui-3659 April 25, 2025 09:17 — with GitHub Actions Inactive

andre-code force-pushed the andrea/add-new-session-card-design branch from 33ac8a8 to 23b76e2 Compare April 29, 2025 06:01

andre-code force-pushed the andrea/other-session-improvements branch from 1d86cf3 to ce6f270 Compare April 29, 2025 06:41

andre-code temporarily deployed to renku-ci-ui-3659 April 29, 2025 06:41 — with GitHub Actions Inactive

andre-code force-pushed the andrea/add-new-session-card-design branch from 23b76e2 to 863ca6e Compare April 29, 2025 06:56

andre-code force-pushed the andrea/other-session-improvements branch from ce6f270 to 91eae40 Compare April 29, 2025 06:57

andre-code temporarily deployed to renku-ci-ui-3659 April 29, 2025 06:57 — with GitHub Actions Inactive

andre-code temporarily deployed to renku-ci-ui-3659 April 30, 2025 09:38 — with GitHub Actions Inactive

andre-code force-pushed the andrea/add-new-session-card-design branch from 275eb89 to 8373c13 Compare May 2, 2025 09:12

andre-code force-pushed the andrea/other-session-improvements branch from 85e0f94 to aa6284e Compare May 2, 2025 10:49

andre-code temporarily deployed to renku-ci-ui-3659 May 2, 2025 10:49 — with GitHub Actions Inactive

andre-code had a problem deploying to renku-ci-ui-3659 May 5, 2025 09:43 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3659 May 5, 2025 10:00 — with GitHub Actions Failure

andre-code force-pushed the andrea/add-new-session-card-design branch from 8373c13 to dd36bf5 Compare May 5, 2025 10:09

andre-code changed the title ~~feat: add session improvements II~~ feat: add Session Improvements May 5, 2025

andre-code force-pushed the andrea/other-session-improvements branch from a0e42a8 to 695f2d4 Compare May 5, 2025 10:28

andre-code had a problem deploying to renku-ci-ui-3659 May 5, 2025 10:29 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3659 May 5, 2025 10:49 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3659 May 5, 2025 11:53 — with GitHub Actions Failure

Base automatically changed from andrea/add-new-session-card-design to main May 5, 2025 11:56

andre-code temporarily deployed to renku-ci-ui-3659 May 5, 2025 13:52 — with GitHub Actions Inactive

andre-code added 5 commits May 6, 2025 09:08

feat: add new design for sessions preview

c1517bf

fix imports after rebase

ba5c9f5

Apply code suggestions from Sekhar: use SVG images instead of PNGs an…

ee4bdfe

…d organize auxiliary build components into a separate file

fix: add missed imports

0593538

feat: add new design for sessions preview

052aa29

andre-code force-pushed the andrea/other-session-improvements branch from b632052 to b36744e Compare May 6, 2025 07:17

andre-code temporarily deployed to renku-ci-ui-3659 May 6, 2025 07:17 — with GitHub Actions Inactive

andre-code marked this pull request as ready for review May 6, 2025 07:19

andre-code requested a review from a team as a code owner May 6, 2025 07:19

andre-code temporarily deployed to renku-ci-ui-3659 May 6, 2025 07:53 — with GitHub Actions Inactive

leafty self-assigned this May 7, 2025

leafty requested changes May 7, 2025

View reviewed changes

apply code suggestions:

1970e20

- show icon external link for documentation - make icon alt status show the current session status - fix vertical alignment in environment selector - use type string for launcherId instead of Ulid

andre-code temporarily deployed to renku-ci-ui-3659 May 7, 2025 09:13 — with GitHub Actions Inactive

andre-code requested a review from leafty May 7, 2025 09:14

leafty requested changes May 7, 2025

View reviewed changes

Merge branch 'main' into andrea/other-session-improvements

ccbb720

andre-code temporarily deployed to renku-ci-ui-3659 May 8, 2025 18:51 — with GitHub Actions Inactive

apply suggestions to improve accessibility

7304bd7

andre-code temporarily deployed to renku-ci-ui-3659 May 9, 2025 10:31 — with GitHub Actions Inactive

andre-code requested a review from leafty May 9, 2025 10:50

leafty reviewed May 9, 2025

View reviewed changes

andre-code temporarily deployed to renku-ci-ui-3659 May 9, 2025 14:06 — with GitHub Actions Inactive

leafty reviewed May 9, 2025

View reviewed changes

leafty previously approved these changes May 9, 2025

View reviewed changes

andre-code dismissed leafty’s stale review via 7304bd7 May 9, 2025 18:04

andre-code force-pushed the andrea/other-session-improvements branch from 4cf5794 to 7304bd7 Compare May 9, 2025 18:04

andre-code deployed to renku-ci-ui-3659 May 9, 2025 18:05 — with GitHub Actions View deployment

andre-code requested a review from leafty May 12, 2025 07:43

leafty approved these changes May 12, 2025

View reviewed changes

andre-code merged commit a0caa13 into main May 12, 2025
38 checks passed

andre-code deleted the andrea/other-session-improvements branch May 12, 2025 08:28

		import { Loader } from "../../../../components/Loader";
		import { Links } from "../../../../utils/constants/Docs.js";

	<UncontrolledPopover target={ref} trigger="hover" placement="bottom">
	<UncontrolledPopover target={ref} placement="bottom">

	<span ref={ref} className={cx("text-muted", "cursor-pointer")}>
	<span ref={ref} className={cx("text-muted", "cursor-pointer")} tabIndex={0}>

feat: add Session Improvements #3659

feat: add Session Improvements #3659

Uh oh!

Conversation

andre-code commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RenkuBot commented Apr 25, 2025

Uh oh!

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!

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!

andre-code commented May 7, 2025

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!

andre-code commented May 12, 2025

Uh oh!

Uh oh!

RenkuBot commented May 12, 2025

Uh oh!

Uh oh!

andre-code commented Apr 25, 2025 •

edited

Loading