feat: add launcher apps

client/src/components/TimeCaption.tsx

@@ -34,6 +34,7 @@ interface TimeCaptionProps {
   noCaption?: boolean;
   prefix?: ReactNode;
   suffix?: ReactNode;
+  format?: "long" | "short";
 }
 
 export function TimeCaption({
@@ -43,13 +44,14 @@ export function TimeCaption({
   noCaption,
   prefix,
   suffix,
+  format = "long",
 }: TimeCaptionProps) {
   const [now, setNow] = useState<DateTime>(DateTime.utc());
 
   const datetime = datetime_ ? ensureDateTime(datetime_) : null;
   const durationStr =
     datetime != null && datetime.isValid
-      ? toHumanRelativeDuration({ datetime, now })
+      ? toHumanRelativeDuration({ datetime, now, format })
       : "at unknown time";
 
   const className = noCaption ? className_ : cx("time-caption", className_);

client/src/features/ProjectPageV2/utils/useProjectPermissions.hook.ts

@@ -44,17 +44,21 @@ export default function useProjectPermissions({
   }, [fetchPermissions, isUninitialized, projectId]);
 
   const isLoadingPermissions = isLoading || isUninitialized;
+  const arePermissionsResolved =
+    !isLoading && !isUninitialized && !isError && currentData != null;
 
   if (isLoading || isError || !currentData) {
     return {
       ...DEFAULT_PERMISSIONS,
+      arePermissionsResolved: false,
       isLoadingPermissions,
     };
   }
 
   return {
     ...DEFAULT_PERMISSIONS,
     ...currentData,
+    arePermissionsResolved,
     isLoadingPermissions: false,
   };
 }

client/src/features/dashboardV2/DashboardV2.tsx

@@ -25,6 +25,7 @@ import {
   Eye,
   FileEarmarkText,
   Folder,
+  Gear,
   Megaphone,
   People,
   PlayCircle,
@@ -65,6 +66,7 @@ import CreateProjectV2Button from "../projectsV2/new/CreateProjectV2Button";
 import GroupShortHandDisplay from "../projectsV2/show/GroupShortHandDisplay";
 import ProjectShortHandDisplay from "../projectsV2/show/ProjectShortHandDisplay";
 import { useGetSessionsQuery as useGetSessionsQueryV2 } from "../sessionsV2/api/sessionsV2.api";
+import { SESSION_LAUNCHER_KIND } from "../sessionsV2/sessionsV2.types";
 import { useGetUserQueryState } from "../usersV2/api/users.api";
 import UserAvatar from "../usersV2/show/UserAvatar";
 import DashboardV2Sessions from "./DashboardV2Sessions";
@@ -96,6 +98,7 @@ export default function DashboardV2() {
               className={cx("d-flex", "flex-column", "gap-4")}
             >
               <SessionsDashboard />
+              <JobsDashboard />
               <ProjectsDashboard />
               <FooterDashboard />
             </Col>
@@ -422,7 +425,11 @@ function GroupsList({ data, error, isLoading }: GroupListProps) {
 }
 
 function SessionsDashboard() {
-  const { data: sessions, error, isLoading } = useGetSessionsQueryV2({});
+  const {
+    data: sessions,
+    error,
+    isLoading,
+  } = useGetSessionsQueryV2({ sessionType: SESSION_LAUNCHER_KIND.INTERACTIVE });
   const totalSessions = sessions ? sessions?.length : 0;
   return (
     <Card data-cy="sessions-container">
@@ -447,6 +454,38 @@ function SessionsDashboard() {
   );
 }
 
+function JobsDashboard() {
+  const {
+    data: jobs,
+    error,
+    isLoading,
+  } = useGetSessionsQueryV2({
+    sessionType: SESSION_LAUNCHER_KIND.NON_INTERACTIVE,
+  });
+  const totalJobs = jobs ? jobs?.length : 0;
+  return (
+    <Card data-cy="sessions-container">
+      <CardHeader>
+        <div className={cx("align-items-center", "d-flex")}>
+          <h2 className={cx("mb-0", "me-2")}>
+            <Gear className={cx("me-1", "bi")} />
+            My Jobs
+          </h2>
+          <Badge>{totalJobs}</Badge>
+        </div>
+      </CardHeader>
+
+      <CardBody>
+        <DashboardV2Sessions
+          sessions={jobs}
+          isLoading={isLoading}
+          error={error}
+        />
+      </CardBody>
+    </Card>
+  );
+}
+
 function ViewAllLink({
   type,
   noItems,

client/src/features/dashboardV2/DashboardV2Sessions.tsx

@@ -22,6 +22,7 @@ import cx from "classnames";
 import { generatePath, Link } from "react-router";
 import { Col, ListGroup, Row } from "reactstrap";
 
+import { sessionLauncherKindToCategory } from "~/features/sessionsV2/session.utils";
 import RtkOrDataServicesError from "../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../components/Loader";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
@@ -30,10 +31,15 @@ import { useGetSessionLaunchersByLauncherIdQuery as useGetProjectSessionLauncher
 import ActiveSessionButton from "../sessionsV2/components/SessionButton/ActiveSessionButton";
 import {
   getSessionStatusStyles,
+  SessionStatusV2Badge,
   SessionStatusV2Description,
   SessionStatusV2Label,
 } from "../sessionsV2/components/SessionStatus/SessionStatus";
-import { SessionList, SessionV2 } from "../sessionsV2/sessionsV2.types";
+import {
+  SESSION_LAUNCHER_KIND,
+  SessionList,
+  SessionV2,
+} from "../sessionsV2/sessionsV2.types";
 
 import styles from "./DashboardV2Sessions.module.scss";
 
@@ -100,16 +106,13 @@ function SessionDashboardList({
   return (
     <ListGroup flush data-cy="dashboard-session-list">
       {sessions?.map((session) => (
-        <DashboardSession key={session.name} session={session} />
+        <DashboardSessionListItem key={session.name} session={session} />
       ))}
     </ListGroup>
   );
 }
 
-interface DashboardSessionProps {
-  session: SessionV2;
-}
-function DashboardSession({ session }: DashboardSessionProps) {
+function useDashboardSessionItem(session: SessionV2) {
   const { project_id: projectId, launcher_id: launcherId } = session;
   const { data: project } = useGetProjectsByProjectIdQuery(
     projectId ? { projectId } : skipToken,
@@ -136,9 +139,44 @@ function DashboardSession({ session }: DashboardSessionProps) {
       })
     : ABSOLUTE_ROUTES.v2.index;
 
-  const sessionStyles = getSessionStatusStyles(session);
+  return { launcher, project, projectId, projectUrl, showSessionUrl };
+}
+
+function DashboardSessionStatusRow({ session }: { session: SessionV2 }) {
+  const launcherCategory = sessionLauncherKindToCategory(session.session_type);
+  const sessionStyles = getSessionStatusStyles(session, launcherCategory);
   const state = session.status.state;
 
+  return (
+    <div className={cx("d-flex", "gap-2", "align-items-center")}>
+      <img
+        src={sessionStyles.sessionIcon}
+        alt={`Session is ${state}`}
+        loading="lazy"
+        width={16}
+        height={16}
+      />
+      <SessionStatusV2Label session={session} variant="list" />
+    </div>
+  );
+}
+
+function DashboardJobStatusRow({ session }: { session: SessionV2 }) {
+  return (
+    <div className={cx("d-flex", "gap-2", "align-items-center")}>
+      <span data-cy="job-submission-id" className={cx("text-truncate")}>
+        Job: {session.submission_id}
+      </span>
+      <SessionStatusV2Badge session={session} />
+    </div>
+  );
+}
+
+function DashboardSessionListItem({ session }: { session: SessionV2 }) {
+  const { launcher, project, projectId, projectUrl, showSessionUrl } =
+    useDashboardSessionItem(session);
+  const isJob = session.session_type === SESSION_LAUNCHER_KIND.NON_INTERACTIVE;
+
   return (
     <div
       className={cx("list-group-item-action", "list-group-item")}
@@ -195,21 +233,19 @@ function DashboardSession({ session }: DashboardSessionProps) {
               "mt-2",
               "d-block",
               "d-sm-flex",
-              "gap-5",
+              "justify-content-between",
             )}
             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>
+            {isJob ? (
+              <DashboardJobStatusRow session={session} />
+            ) : (
+              <DashboardSessionStatusRow session={session} />
+            )}
             <SessionStatusV2Description
               session={session}
               showInfoDetails={false}
+              includeIcon={false}
             />
           </Col>
         </Row>

client/src/features/logsDisplay/LogsModal.tsx

@@ -100,10 +100,13 @@ export default function LogsModal({
               "fs-4",
               "fst-italic",
               "mb-0",
-              getSessionStatusStyles({
-                status: { state: sessionState },
-                image: "url",
-              })["textColorCard"],
+              getSessionStatusStyles(
+                {
+                  status: { state: sessionState },
+                  image: "url",
+                },
+                "session",
+              )["textColorCard"],
             )}
           >
             Session status: {sessionState}

client/src/features/permissionsV2/permissions.types.ts

@@ -23,5 +23,6 @@ export type Permissions = {
 };
 
 export type ProjectPermissions = Permissions & {
+  arePermissionsResolved: boolean;
   isLoadingPermissions: boolean;
 };

client/src/features/sessionsV2/DataConnectorSecretsModal.tsx

@@ -59,6 +59,13 @@ const CONTEXT_STRINGS = {
     testError:
       "The data connector could not be mounted. Please retry with different credentials, or skip the data connector. If you skip, the data connector will not be mounted in the session.",
   },
+  job: {
+    continueButton: "Continue",
+    dataCy: "job-data-connector-credentials-modal",
+    header: "Job Storage Credentials",
+    testError:
+      "The data connector could not be mounted. Please retry with different credentials, or skip the data connector. If you skip, the data connector will not be mounted in the job.",
+  },
   storage: {
     continueButton: "Test and Save",
     dataCy: "data-connector-credentials-modal",
@@ -158,7 +165,7 @@ function DataConnectorSecrets({
 }
 
 interface DataConnectorSecretsModalProps {
-  context?: "session" | "storage";
+  context?: "session" | "job" | "storage";
   isOpen: boolean;
   onCancel: () => void;
   onStart: (dataConnectorConfigs: DataConnectorConfiguration[]) => void;
@@ -352,7 +359,9 @@ function CredentialsButtons({
         <XLg className={cx("bi", "me-1")} />
         Cancel
       </Button>
-      {context === "session" && <SkipConnectionTestButton onSkip={onSkip} />}
+      {(context === "session" || context === "job") && (
+        <SkipConnectionTestButton context={context} onSkip={onSkip} />
+      )}
       {context === "storage" && (
         <ClearCredentialsButton
           onSkip={onSkip}
@@ -612,9 +621,11 @@ function SensitiveFieldInput({
 }
 
 function SkipConnectionTestButton({
+  context,
   onSkip,
-}: Pick<CredentialsButtonsProps, "onSkip">) {
+}: Pick<CredentialsButtonsProps, "context" | "onSkip">) {
   const skipButtonRef = useRef<HTMLAnchorElement>(null);
+  const targetLabel = context === "job" ? "job" : "session";
   return (
     <>
       <span ref={skipButtonRef}>
@@ -624,7 +635,7 @@ function SkipConnectionTestButton({
         </Button>
       </span>
       <UncontrolledTooltip target={skipButtonRef}>
-        Skip the data connector. It will not be mounted in the session.
+        {`Skip the data connector. It will not be mounted in the ${targetLabel}.`}
       </UncontrolledTooltip>
     </>
   );