feat: add Session Improvements

client/src/features/ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay.tsx

@@ -73,6 +73,7 @@ import repositoriesApi, {
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
 import { SshRepositoryUrlWarning } from "./AddCodeRepositoryModal";
 import {
+  getRepositoryName,
   validateCodeRepository,
   validateNoDuplicatesInCodeRepositories,
 } from "./repositories.utils";
@@ -398,12 +399,8 @@ export function RepositoryItem({
     setShowDetails((open) => !open);
   }, []);
   const canonicalUrlStr = useMemo(() => `${url.replace(/.git$/i, "")}`, [url]);
-  const canonicalUrl = useMemo(
-    () => safeNewUrl(canonicalUrlStr),
-    [canonicalUrlStr]
-  );
 
-  const title = canonicalUrl?.pathname.split("/").pop() || canonicalUrlStr;
+  const title = getRepositoryName(url);
   // ! Product team wants this restored -- keeping the code for the next iteration
   // const urlDisplay = (
   //   <div className={cx("d-flex", "align-items-center", "gap-2")}>

client/src/features/ProjectPageV2/ProjectPageContent/CodeRepositories/repositories.utils.ts

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { safeNewUrl } from "../../../../utils/helpers/safeNewUrl.utils";
+
 /**
  * Validates the URL of a code repository. Note that RenkuLab only supports HTTP(S) at the moment.
  */
@@ -67,3 +69,9 @@ export function detectSSHRepository(repositoryURL: string): boolean {
   const gitUrlRegex = /git@(?:.)+:/;
   return cleaned.match(gitUrlRegex) != null;
 }
+
+export function getRepositoryName(repositoryURL: string): string {
+  const canonicalUrlStr = `${repositoryURL.replace(/.git$/i, "")}`;
+  const canonicalUrl = safeNewUrl(canonicalUrlStr);
+  return canonicalUrl?.pathname.split("/").pop() || canonicalUrlStr;
+}

client/src/features/ProjectPageV2/ProjectPageContent/Settings/ProjectSettings.tsx

@@ -259,13 +259,6 @@ function ProjectSettingsForm({ project }: ProjectPageSettingsProps) {
   const formId = "project-settings-form";
   return (
     <div>
-      {error && <RtkErrorAlert error={error} />}
-      {isSuccess && (
-        <SuccessAlert dismissible={false} timeout={0}>
-          <p className="mb-0">The project has been successfully updated.</p>
-        </SuccessAlert>
-      )}
-
       <Form
         className={cx("d-flex", "flex-column", "gap-3")}
         id={formId}
@@ -416,7 +409,12 @@ function ProjectSettingsForm({ project }: ProjectPageSettingsProps) {
           requestedPermission="write"
           userPermissions={permissions}
         />
-
+        {error && <RtkErrorAlert error={error} />}
+        {isSuccess && (
+          <SuccessAlert dismissible={false} timeout={0}>
+            <p className="mb-0">The project has been successfully updated.</p>
+          </SuccessAlert>
+        )}
         <PermissionsGuard
           disabled={null}
           enabled={

client/src/features/dashboardV2/DashboardV2Sessions.tsx

@@ -30,8 +30,9 @@ import { useGetProjectsByProjectIdQuery } from "../projectsV2/api/projectV2.enha
 import { useGetSessionLaunchersByLauncherIdQuery as useGetProjectSessionLauncherQuery } from "../sessionsV2/api/sessionLaunchersV2.api";
 import ActiveSessionButton from "../sessionsV2/components/SessionButton/ActiveSessionButton";
 import {
-  SessionStatusV2Badge,
+  getSessionStatusStyles,
   SessionStatusV2Description,
+  SessionStatusV2Label,
 } from "../sessionsV2/components/SessionStatus/SessionStatus";
 import { SessionList, SessionV2 } from "../sessionsV2/sessionsV2.types";
 
@@ -131,7 +132,6 @@ function DashboardSession({ session }: DashboardSessionProps) {
         id: projectId,
       })
     : ABSOLUTE_ROUTES.v2.root;
-  const sessionHash = project && launcherId ? `launcher-${launcherId}` : "";
   const showSessionUrl = project
     ? generatePath(ABSOLUTE_ROUTES.v2.projects.show.sessions.show, {
         namespace: project.namespace,
@@ -140,6 +140,9 @@ function DashboardSession({ session }: DashboardSessionProps) {
       })
     : ABSOLUTE_ROUTES.v2.root;
 
+  const sessionStyles = getSessionStatusStyles(session);
+  const state = session.status.state;
+
   return (
     <div
       className={cx("list-group-item-action", "list-group-item")}
@@ -154,7 +157,7 @@ function DashboardSession({ session }: DashboardSessionProps) {
           "text-body",
           "text-decoration-none"
         )}
-        to={{ pathname: projectUrl, hash: sessionHash }}
+        to={{ pathname: projectUrl }}
       >
         <Row className="g-2">
           <Col className="order-1" xs={12} md={9} lg={10}>
@@ -181,9 +184,6 @@ function DashboardSession({ session }: DashboardSessionProps) {
                   )}
                 </h6>
               </Col>
-              <Col xs={12} xl="auto" className="mt-1">
-                <SessionStatusV2Badge session={session} />
-              </Col>
             </Row>
           </Col>
           <Col className={cx("order-3", "order-md-2")} xs={12} md={3} lg={2}>
@@ -192,8 +192,29 @@ function DashboardSession({ session }: DashboardSessionProps) {
               <span className="bi" />
             </div>
           </Col>
-          <Col className={cx("order-2", "order-md-3", "mt-2")} xs={12}>
-            <SessionStatusV2Description session={session} />
+          <Col
+            className={cx(
+              "order-2",
+              "order-md-3",
+              "mt-2",
+              "d-block",
+              "d-sm-flex",
+              "gap-5"
+            )}
+            xs={12}
+          >
+            <div className={cx("d-flex", "gap-2")}>
+              <img
+                src={sessionStyles.sessionIcon}
+                alt={`Session is ${state}`}
+                loading="lazy"
+              />
+              <SessionStatusV2Label session={session} variant="list" />
+            </div>
+            <SessionStatusV2Description
+              session={session}
+              showInfoDetails={false}
+            />
           </Col>
         </Row>
       </Link>

client/src/features/sessionsV2/SessionList/SessionCard.tsx

@@ -77,15 +77,15 @@ export default function SessionCard({ project, session }: SessionCardProps) {
                 xs="12"
                 xl="auto"
               >
-                <SessionStatusV2Label session={session} />
+                <SessionStatusV2Label session={session} variant="card" />
               </Col>
               <Col
                 xs="auto"
                 className={cx("mt-0", "ms-0", "ms-xl-3", "d-flex")}
               >
                 <SessionStatusV2Description
                   session={session}
-                  showInfoDetails={false}
+                  showInfoDetails={true}
                 />
               </Col>
             </Row>

client/src/features/sessionsV2/SessionList/SessionItem.tsx

@@ -80,7 +80,7 @@ export default function SessionItem({
             </Col>
             <Col xs={12} xl="auto">
               {session ? (
-                <SessionStatusV2Label session={session} />
+                <SessionStatusV2Label session={session} variant="card" />
               ) : (
                 <SessionBadge className={cx("border-dark-subtle", "bg-light")}>
                   <CircleFill

client/src/features/sessionsV2/SessionList/SessionLauncherCard.tsx

@@ -346,7 +346,7 @@ function SessionLauncherDropdownActions({
               onClick={toggleShareLink}
             >
               <Link45deg className={cx("bi", "me-1")} />
-              Session launcher share link
+              Share session launch link
             </DropdownItem>
             <DropdownItem divider />
             <DropdownItem

client/src/features/sessionsV2/SessionList/SessionLauncherDisplay.tsx

@@ -137,9 +137,10 @@ export function SessionLauncherDisplay({
           />
           <SessionStartLinkModal
             isOpen={isShareLinkOpen}
-            launcher={launcher}
+            launcherId={launcher.id}
             toggle={toggleShareLink}
-            project={project}
+            namespace={project.namespace}
+            slug={project.slug}
           />
         </>
       )}

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

@@ -27,6 +27,7 @@ import {
   Cloud,
   ExclamationTriangle,
   FileEarmarkText,
+  Link45deg,
   PauseCircle,
   Trash,
 } from "react-bootstrap-icons";
@@ -58,6 +59,7 @@ import { useGetProjectsByProjectIdSessionLaunchersQuery as useGetProjectSessionL
 import { useGetSessionsQuery } from "../api/sessionsV2.api";
 import { getSessionFavicon } from "../session.utils";
 import { SessionV2 } from "../sessionsV2.types";
+import SessionStartLinkModal from "../SessionView/SessionStartLinkModal";
 import SessionIframe from "./SessionIframe";
 import SessionPaused from "./SessionPaused";
 import SessionUnavailable from "./SessionUnavailable";
@@ -214,6 +216,11 @@ export default function ShowSessionPage() {
             <LogsBtn toggle={toggleModalLogs} />
             <PauseSessionBtn openPauseSession={openPauseSession} />
             <DeleteSessionBtn openDeleteSession={openDeleteSession} />
+            <ShareSessionLinkButton
+              session={thisSession}
+              namespace={namespace}
+              slug={slug}
+            />
           </div>
           <div
             className={cx(
@@ -505,3 +512,57 @@ function SessionDetails({
     </>
   );
 }
+
+function ShareSessionLinkButton({
+  session,
+  namespace,
+  slug,
+}: {
+  session?: SessionV2;
+  namespace?: string;
+  slug?: string;
+}) {
+  const launcherId = session?.launcher_id;
+  const ref = useRef<HTMLButtonElement>(null);
+  const buttonId = "share-session-button";
+  const tooltip = "Share session launch link";
+
+  const [isShareLinkOpen, setIsShareLinkOpen] = useState(false);
+  const toggleShareLink = useCallback(() => {
+    setIsShareLinkOpen((open) => !open);
+  }, []);
+
+  if (launcherId == null || namespace == null || slug == null) return null;
+
+  return (
+    <div>
+      <Button
+        className={cx(
+          "bg-transparent",
+          "border-0",
+          "no-focus",
+          "p-0",
+          "shadow-none",
+          "text-dark"
+        )}
+        data-cy={buttonId}
+        id={buttonId}
+        innerRef={ref}
+        onClick={toggleShareLink}
+      >
+        <Link45deg className="bi" />
+        <span className="visually-hidden">{tooltip}</span>
+      </Button>
+      <UncontrolledTooltip placement="bottom" target={ref}>
+        {tooltip}
+      </UncontrolledTooltip>
+      <SessionStartLinkModal
+        isOpen={isShareLinkOpen}
+        launcherId={launcherId}
+        toggle={toggleShareLink}
+        slug={slug}
+        namespace={namespace}
+      />
+    </div>
+  );
+}

client/src/features/sessionsV2/SessionStyles.constants.ts

@@ -22,6 +22,12 @@ import linePaused from "../../styles/assets/linePaused.svg";
 import lineStopped from "../../styles/assets/lineStopped.svg";
 import lineBlock from "../../styles/assets/lineBlock.svg";
 
+import playingIcon from "../../styles/assets/playing.svg";
+import failedIcon from "../../styles/assets/failed.svg";
+import pausedIcon from "../../styles/assets/paused.svg";
+import stoppedIcon from "../../styles/assets/stopped.svg";
+import blockIcon from "../../styles/assets/block.svg";
+
 export const SESSION_STATES = {
   RUNNING: "running",
   STARTING: "starting",
@@ -32,45 +38,75 @@ export const SESSION_STATES = {
 
 export const SESSION_STYLES = {
   WARNING: {
-    textColor: "text-warning-emphasis",
+    textColorCard: "text-warning-emphasis",
+    textColorList: "text-warning-emphasis",
     bgColor: "warning",
     bgOpacity: 10,
     borderColor: "border-warning",
     sessionLine: linePlaying,
+    sessionIcon: playingIcon,
   },
   SUCCESS: {
-    textColor: "text-success-emphasis",
+    textColorCard: "text-success-emphasis",
+    textColorList: "text-primary",
     bgColor: "success",
     bgOpacity: 10,
     borderColor: "border-success",
     sessionLine: linePlaying,
+    sessionIcon: playingIcon,
   },
   HIBERNATED: {
-    textColor: "text-dark-emphasis",
+    textColorCard: "text-dark-emphasis",
+    textColorList: "text-dark-emphasis",
     bgColor: "light",
     bgOpacity: 100,
     borderColor: "border-dark-subtle",
     sessionLine: linePaused,
+    sessionIcon: pausedIcon,
   },
   FAILED: {
-    textColor: "text-danger-emphasis",
+    textColorCard: "text-danger-emphasis",
+    textColorList: "text-danger-emphasis",
     bgColor: "danger",
     bgOpacity: 10,
     borderColor: "border-danger",
     sessionLine: lineFailed,
+    sessionIcon: failedIcon,
   },
   STOPPING: {
-    textColor: "text-warning-emphasis",
+    textColorCard: "text-warning-emphasis",
+    textColorList: "text-warning-emphasis",
     bgColor: "warning",
     bgOpacity: 10,
     borderColor: "border-warning",
     sessionLine: lineStopped,
+    sessionIcon: stoppedIcon,
   },
   DEFAULT: {
-    textColor: "text-warning",
+    textColorCard: "text-warning-emphasis",
+    textColorList: "text-warning-emphasis",
     bgColor: "warning",
     bgOpacity: 10,
     borderColor: "border-warning",
     sessionLine: lineBlock,
+    sessionIcon: blockIcon,
   },
 } as const;
+
+export const SESSION_TITLE = {
+  [SESSION_STATES.RUNNING]: "My running session",
+  [SESSION_STATES.STARTING]: "Launching my session",
+  [SESSION_STATES.STOPPING]: "Shutting down my session...",
+  [SESSION_STATES.HIBERNATED]: "My paused session",
+  [SESSION_STATES.FAILED]: "Error in my session",
+  default: "Unknown status",
+};
+
+export const SESSION_TITLE_DASHBOARD = {
+  [SESSION_STATES.RUNNING]: "Running session",
+  [SESSION_STATES.STARTING]: "Launching session",
+  [SESSION_STATES.STOPPING]: "Shutting down session...",
+  [SESSION_STATES.HIBERNATED]: "Paused session",
+  [SESSION_STATES.FAILED]: "Error in session",
+  default: "Unknown status",
+};