From a45edd5d7a65dbee82a467b2ec62e25f107a1cc9 Mon Sep 17 00:00:00 2001
From: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>
Date: Mon, 3 Jun 2024 14:30:59 +0200
Subject: [PATCH] fix: update session badges in the project page of Renku 2.0
 (#3175)

Fixes #3174.
---
 .../SessionList/SessionItemDisplay.tsx        | 31 ++++++-----
 .../sessionsV2/SessionView/SessionView.tsx    | 46 ++++++++--------
 .../SessionStatus/SessionStatus.tsx           | 52 +++++++------------
 3 files changed, 62 insertions(+), 67 deletions(-)

diff --git a/client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx b/client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx
index 4c56e156e6..d5445f1ef1 100644
--- a/client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx
+++ b/client/src/features/sessionsV2/SessionList/SessionItemDisplay.tsx
@@ -23,22 +23,24 @@ import {
   LayoutSidebarInsetReverse,
 } from "react-bootstrap-icons";
 import { Col, Row } from "reactstrap";
-import { TimeCaption } from "../../../components/TimeCaption.tsx";
-import { NotebookAnnotations } from "../../../notebooks/components/session.types.ts";
-import { Project } from "../../projectsV2/api/projectV2.api.ts";
-import sessionsApi from "../../session/sessions.api.ts";
-import { filterSessionsWithCleanedAnnotations } from "../../session/sessions.utils.ts";
-import { SessionView } from "../SessionView/SessionView.tsx";
-import StartSessionButton from "../StartSessionButton.tsx";
-import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton.tsx";
+
+import { TimeCaption } from "../../../components/TimeCaption";
+import { NotebookAnnotations } from "../../../notebooks/components/session.types";
+import { Project } from "../../projectsV2/api/projectV2.api";
+import sessionsApi from "../../session/sessions.api";
+import { filterSessionsWithCleanedAnnotations } from "../../session/sessions.utils";
+import { SessionView } from "../SessionView/SessionView";
+import { getShowSessionUrlByProject } from "../SessionsV2";
+import StartSessionButton from "../StartSessionButton";
+import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton";
 import {
   SessionBadge,
   SessionStatusV2Description,
   SessionStatusV2Label,
-} from "../components/SessionStatus/SessionStatus.tsx";
-import { SessionLauncher } from "../sessionsV2.types.ts";
+} from "../components/SessionStatus/SessionStatus";
+import { SessionLauncher } from "../sessionsV2.types";
+
 import sessionItemStyles from "./SessionItemDisplay.module.scss";
-import { getShowSessionUrlByProject } from "../SessionsV2.tsx";
 
 export function SessionNameBox({
   children,
@@ -231,8 +233,11 @@ export function SessionItemDisplay({
             <span className={cx("text-truncate")}>{name}</span>
           </SessionNameBox>
           <SessionStatusBadgeBox>
-            <SessionBadge className={"border border-dark-subtle bg-light"}>
-              <DashCircleFill className="text-light-emphasis" size={16} />
+            <SessionBadge className={cx("border-dark-subtle", "bg-light")}>
+              <DashCircleFill
+                className={cx("bi", "me-1", "text-light-emphasis")}
+                size={16}
+              />
               <span className="text-dark">Not Running</span>
             </SessionBadge>
           </SessionStatusBadgeBox>
diff --git a/client/src/features/sessionsV2/SessionView/SessionView.tsx b/client/src/features/sessionsV2/SessionView/SessionView.tsx
index e56f8a85d8..888f92bd70 100644
--- a/client/src/features/sessionsV2/SessionView/SessionView.tsx
+++ b/client/src/features/sessionsV2/SessionView/SessionView.tsx
@@ -37,31 +37,30 @@ import {
   OffcanvasBody,
   Row,
 } from "reactstrap";
-import { TimeCaption } from "../../../components/TimeCaption.tsx";
-import ButtonStyles from "../../../components/buttons/Buttons.module.scss";
-import { CommandCopy } from "../../../components/commandCopy/CommandCopy.tsx";
-import { toHumanDateTime } from "../../../utils/helpers/DateTimeUtils.ts";
-import { Project } from "../../projectsV2/api/projectV2.api.ts";
-import { SessionRowResourceRequests } from "../../session/components/SessionsList.tsx";
-import { Session, Sessions } from "../../session/sessions.types.ts";
-import {
-  getShowSessionUrlByProject,
-  SessionV2Actions,
-} from "../SessionsV2.tsx";
-import StartSessionButton from "../StartSessionButton.tsx";
-import UpdateSessionLauncherModal from "../UpdateSessionLauncherModal.tsx";
-import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton.tsx";
+
+import { TimeCaption } from "../../../components/TimeCaption";
+import { CommandCopy } from "../../../components/commandCopy/CommandCopy";
+import { toHumanDateTime } from "../../../utils/helpers/DateTimeUtils";
+import { RepositoryItem } from "../../ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay";
+import { Project } from "../../projectsV2/api/projectV2.api";
+import { useGetStoragesV2Query } from "../../projectsV2/api/storagesV2.api";
+import { SessionRowResourceRequests } from "../../session/components/SessionsList";
+import { Session, Sessions } from "../../session/sessions.types";
+import { SessionV2Actions, getShowSessionUrlByProject } from "../SessionsV2";
+import StartSessionButton from "../StartSessionButton";
+import UpdateSessionLauncherModal from "../UpdateSessionLauncherModal";
+import ActiveSessionButton from "../components/SessionButton/ActiveSessionButton";
 import {
   SessionBadge,
   SessionStatusV2Description,
   SessionStatusV2Label,
   SessionStatusV2Title,
-} from "../components/SessionStatus/SessionStatus.tsx";
-import sessionsV2Api from "../sessionsV2.api.ts";
-import { SessionEnvironment, SessionLauncher } from "../sessionsV2.types.ts";
+} from "../components/SessionStatus/SessionStatus";
+import sessionsV2Api from "../sessionsV2.api";
+import { SessionEnvironment, SessionLauncher } from "../sessionsV2.types";
+
+import buttonStyles from "../../../components/buttons/Buttons.module.scss";
 import sessionViewStyles from "./SessionView.module.scss";
-import { useGetStoragesV2Query } from "../../projectsV2/api/storagesV2.api.ts";
-import { RepositoryItem } from "../../ProjectPageV2/ProjectPageContent/CodeRepositories/CodeRepositoryDisplay.tsx";
 
 function SessionCard({
   session,
@@ -142,8 +141,11 @@ function SessionCardNotRunning({
               "py-2"
             )}
           >
-            <SessionBadge className={"border border-dark-subtle bg-light"}>
-              <DashCircleFill className="text-light-emphasis" size={16} />
+            <SessionBadge className={cx("border-dark-subtle", "bg-light")}>
+              <DashCircleFill
+                className={cx("bi", "me-1", "text-light-emphasis")}
+                size={16}
+              />
               <span className="text-dark">Not Running</span>
             </SessionBadge>
           </Col>
@@ -231,7 +233,7 @@ function EnvironmentCard({
                     "bg-transparent",
                     "shadow-none",
                     "border-0",
-                    ButtonStyles.EditButton
+                    buttonStyles.EditButton
                   )}
                   onClick={toggle}
                 >
diff --git a/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx b/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx
index a1b73caaaf..d0ff175f48 100644
--- a/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx
+++ b/client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx
@@ -26,18 +26,16 @@ import {
   XCircleFill,
 } from "react-bootstrap-icons";
 import { Badge } from "reactstrap";
-import { Loader } from "../../../../components/Loader.tsx";
-import { TimeCaption } from "../../../../components/TimeCaption.tsx";
+
+import { Loader } from "../../../../components/Loader";
+import { TimeCaption } from "../../../../components/TimeCaption";
 import { NotebooksHelper } from "../../../../notebooks";
-import { SessionListRowStatusExtraDetails } from "../../../../notebooks/components/SessionListStatus.tsx";
-import { NotebookAnnotations } from "../../../../notebooks/components/session.types.ts";
-import { ensureDateTime } from "../../../../utils/helpers/DateTimeUtils.ts";
-import { MissingHibernationInfo } from "../../../session/components/status/SessionStatusText.tsx";
-import {
-  Session,
-  SessionStatusState,
-} from "../../../session/sessions.types.ts";
-import { SessionLauncher } from "../../sessionsV2.types.ts";
+import { SessionListRowStatusExtraDetails } from "../../../../notebooks/components/SessionListStatus";
+import { NotebookAnnotations } from "../../../../notebooks/components/session.types";
+import { ensureDateTime } from "../../../../utils/helpers/DateTimeUtils";
+import { MissingHibernationInfo } from "../../../session/components/status/SessionStatusText";
+import { Session, SessionStatusState } from "../../../session/sessions.types";
+import { SessionLauncher } from "../../sessionsV2.types";
 
 export function SessionBadge({
   children,
@@ -47,17 +45,7 @@ export function SessionBadge({
   className: string;
 }) {
   return (
-    <Badge
-      className={cx(
-        "d-flex",
-        "align-items-center",
-        "gap-2",
-        "fs-small",
-        "fw-normal",
-        className
-      )}
-      pill={true}
-    >
+    <Badge className={cx("border", "fs-small", "fw-normal", className)} pill>
       {children}
     </Badge>
   );
@@ -81,15 +69,15 @@ export function SessionStatusV2Label({ session }: ActiveSessionV2Props) {
 
   const badge =
     state === "running" && defaultImage ? (
-      <SessionBadge className="border border-warning bg-warning-subtle">
+      <SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
         <ExclamationCircleFill
           className={cx("bi", "me-1", "text-warning")}
           size={16}
         />
-        <span className="rk-bg-warning">Running Session</span>
+        <span className="text-warning">Running Session</span>
       </SessionBadge>
     ) : state === "running" ? (
-      <SessionBadge className="border border-success bg-success-subtle">
+      <SessionBadge className={cx("border-success", "bg-success-subtle")}>
         <CheckCircleFill
           className={cx("bi", "me-1", "text-success")}
           size={16}
@@ -97,17 +85,17 @@ export function SessionStatusV2Label({ session }: ActiveSessionV2Props) {
         <span className="text-success-emphasis">Running Session</span>
       </SessionBadge>
     ) : state === "starting" ? (
-      <SessionBadge className="border border-warning bg-warning-subtle">
-        <Loader size={16} className={cx("bi", "me-1", "text-warning")} inline />
+      <SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
+        <Loader size={16} className={cx("me-1", "text-warning")} inline />
         <span className="text-warning">Starting Session</span>
       </SessionBadge>
     ) : state === "stopping" ? (
-      <SessionBadge className="border border-warning bg-warning-subtle">
-        <Loader size={16} className={cx("bi", "me-1", "text-warning")} inline />
+      <SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
+        <Loader size={16} className={cx("me-1", "text-warning")} inline />
         <span className="text-warning">Stopping Session</span>
       </SessionBadge>
     ) : state === "hibernated" ? (
-      <SessionBadge className={"border border-dark-subtle bg-light"}>
+      <SessionBadge className={cx("border-dark-subtle", "bg-light")}>
         <PauseCircleFill
           className={cx("bi", "me-1", "text-light-emphasis")}
           size={16}
@@ -115,12 +103,12 @@ export function SessionStatusV2Label({ session }: ActiveSessionV2Props) {
         <span className="text-dark">Paused Session</span>
       </SessionBadge>
     ) : state === "failed" ? (
-      <SessionBadge className={"border border-danger bg-danger-subtle"}>
+      <SessionBadge className={cx("border-danger", "bg-danger-subtle")}>
         <XCircleFill className={cx("bi", "me-1", "text-danger")} size={16} />
         <span className="text-danger">Error in Session</span>
       </SessionBadge>
     ) : (
-      <SessionBadge className="border border-warning bg-warning-subtle">
+      <SessionBadge className={cx("border-warning", "bg-warning-subtle")}>
         <ExclamationCircleFill
           className={cx("bi", "me-1", "text-warning")}
           size={16}