feat(client): connect to the sessions v2 backend (#3043)

Fixes #3044.
SwissDataScienceCenter · Feb 16, 2024 · 42181f2 · 42181f2
1 parent 90c3146
commit 42181f2
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 70 deletions.
diff --git a/client/src/features/sessionsV2/AddSessionV2Button.tsx b/client/src/features/sessionsV2/AddSessionV2Button.tsx
@@ -16,23 +16,24 @@
  * limitations under the License.
  */
 
+import cx from "classnames";
 import { useCallback, useEffect, useState } from "react";
+import { PlusLg, XLg } from "react-bootstrap-icons";
+import { Controller, useForm } from "react-hook-form";
+import { useParams } from "react-router-dom-v5-compat";
 import {
   Button,
+  Form,
+  Input,
+  Label,
   Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
-  Form,
-  Label,
-  Input,
 } from "reactstrap";
-import cx from "classnames";
-import { PlusLg, XLg } from "react-bootstrap-icons";
-import { Controller, useForm } from "react-hook-form";
-import { useAddSessionV2Mutation } from "./sessionsV2.api";
-import { useParams } from "react-router";
+
 import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
+import { useAddSessionV2Mutation } from "./sessionsV2.api";
 
 export default function AddSessionV2Button() {
   const [isOpen, setIsOpen] = useState(false);
@@ -57,7 +58,7 @@ interface AddSessionV2ModalProps {
 }
 
 function AddSessionV2Modal({ isOpen, toggle }: AddSessionV2ModalProps) {
-  const { id: projectId } = useParams<{ id: string }>();
+  const { id: projectId } = useParams<"id">();
 
   const [addSessionV2, result] = useAddSessionV2Mutation();
 
@@ -70,16 +71,16 @@ function AddSessionV2Modal({ isOpen, toggle }: AddSessionV2ModalProps) {
     defaultValues: {
       name: "",
       description: "",
-      environmentDefinition: "",
+      environment_id: "",
     },
   });
   const onSubmit = useCallback(
     (data: AddSessionV2Form) => {
       addSessionV2({
-        projectId,
+        project_id: projectId ?? "",
         name: data.name,
         description: data.description,
-        environmentDefinition: data.environmentDefinition,
+        environment_id: data.environment_id,
       });
     },
     [addSessionV2, projectId]
@@ -163,12 +164,12 @@ function AddSessionV2Modal({ isOpen, toggle }: AddSessionV2ModalProps) {
             </Label>
             <Controller
               control={control}
-              name="environmentDefinition"
+              name="environment_id"
               render={({ field }) => (
                 <Input
                   className={cx(
                     "form-control",
-                    errors.environmentDefinition && "is-invalid"
+                    errors.environment_id && "is-invalid"
                   )}
                   id="addSessionV2Environment"
                   placeholder="Docker image"
@@ -201,5 +202,5 @@ function AddSessionV2Modal({ isOpen, toggle }: AddSessionV2ModalProps) {
 interface AddSessionV2Form {
   name: string;
   description: string;
-  environmentDefinition: string;
+  environment_id: string;
 }
diff --git a/client/src/features/sessionsV2/SessionsV2.tsx b/client/src/features/sessionsV2/SessionsV2.tsx
@@ -17,8 +17,9 @@
  */
 
 import cx from "classnames";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { ThreeDotsVertical } from "react-bootstrap-icons";
+import { useParams } from "react-router-dom-v5-compat";
 import {
   Button,
   Card,
@@ -41,7 +42,7 @@ import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
 import AddSessionV2Button from "./AddSessionV2Button";
 import DeleteSessionV2Modal from "./DeleteSessionV2Modal";
 import UpdateSessionV2Modal from "./UpdateSessionV2Modal";
-import { useGetSessionsV2FakeQuery } from "./sessionsV2.api";
+import { useGetSessionsV2Query } from "./sessionsV2.api";
 import { SessionV2 } from "./sessionsV2.types";
 
 export default function SessionsV2() {
@@ -59,7 +60,14 @@ export default function SessionsV2() {
 }
 
 function SessionsV2ListDisplay() {
-  const { data: sessions, error, isLoading } = useGetSessionsV2FakeQuery();
+  const { id: projectId } = useParams<"id">();
+
+  const { data: sessions, error, isLoading } = useGetSessionsV2Query();
+
+  const filteredSessions = useMemo(
+    () => sessions?.filter((session) => session.project_id === projectId),
+    [projectId, sessions]
+  );
 
   if (isLoading) {
     return (
@@ -74,14 +82,14 @@ function SessionsV2ListDisplay() {
     return <RtkErrorAlert error={error} />;
   }
 
-  if (!sessions || sessions.length == 0) {
+  if (!filteredSessions || filteredSessions.length == 0) {
     return null;
   }
 
   return (
     <Container className="px-0" fluid>
       <Row>
-        {sessions.map((session) => (
+        {filteredSessions.map((session) => (
           <SessionV2Display key={session.id} session={session} />
         ))}
       </Row>
@@ -94,7 +102,7 @@ interface SessionV2DisplayProps {
 }
 
 function SessionV2Display({ session }: SessionV2DisplayProps) {
-  const { name, description, creationDate, environmentDefinition } = session;
+  const { creation_date, environment_id, name, description } = session;
 
   return (
     <Col>
@@ -115,11 +123,11 @@ function SessionV2Display({ session }: SessionV2DisplayProps) {
             {description ?? <i>No description</i>}
           </CardText>
           <CardText className="mb-0">
-            <CommandCopy command={environmentDefinition} />
+            <CommandCopy command={environment_id} />
           </CardText>
           <CardText>
             <TimeCaption
-              datetime={creationDate}
+              datetime={creation_date}
               enableTooltip
               prefix="Created"
             />

diff --git a/client/src/features/sessionsV2/UpdateSessionV2Modal.tsx b/client/src/features/sessionsV2/UpdateSessionV2Modal.tsx
@@ -57,16 +57,16 @@ export default function UpdateSessionV2Modal({
     defaultValues: {
       name: session.name,
       description: session.description,
-      environmentDefinition: session.environmentDefinition,
+      environment_id: session.environment_id,
     },
   });
   const onSubmit = useCallback(
     (data: UpdateSessionV2Form) => {
       updateSessionV2({
-        sessionId: session.id,
+        session_id: session.id,
         name: data.name,
         description: data.description,
-        environmentDefinition: data.environmentDefinition,
+        environment_id: data.environment_id,
       });
     },
     [session.id, updateSessionV2]
@@ -150,12 +150,12 @@ export default function UpdateSessionV2Modal({
             </Label>
             <Controller
               control={control}
-              name="environmentDefinition"
+              name="environment_id"
               render={({ field }) => (
                 <Input
                   className={cx(
                     "form-control",
-                    errors.environmentDefinition && "is-invalid"
+                    errors.environment_id && "is-invalid"
                   )}
                   id="addSessionV2Environment"
                   placeholder="Docker image"
@@ -188,5 +188,5 @@ export default function UpdateSessionV2Modal({
 interface UpdateSessionV2Form {
   name: string;
   description?: string;
-  environmentDefinition: string;
+  environment_id: string;
 }
diff --git a/client/src/features/sessionsV2/sessionsV2.api.ts b/client/src/features/sessionsV2/sessionsV2.api.ts
@@ -17,68 +17,62 @@
  */
 
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
 import {
   AddSessionV2Params,
   DeleteSessionV2Params,
   SessionV2,
   SessionV2List,
   UpdateSessionV2Params,
 } from "./sessionsV2.types";
-import { DateTime } from "luxon";
 
 const sessionsV2Api = createApi({
   reducerPath: "sessionsV2Api",
   baseQuery: fetchBaseQuery({
     baseUrl: "/ui-server/api/data/sessions",
   }),
-  tagTypes: ["SessionV2"],
+  tagTypes: ["Launcher"],
   endpoints: (builder) => ({
-    getSessionsV2: builder.query<unknown, void>({
+    getSessionsV2: builder.query<SessionV2List, void>({
       query: () => {
         return {
           url: "",
         };
       },
+      providesTags: (result) =>
+        result
+          ? [
+              ...result.map(({ id }) => ({ type: "Launcher" as const, id })),
+              "Launcher",
+            ]
+          : ["Launcher"],
     }),
-    getSessionsV2Fake: builder.query<SessionV2List, void>({
-      queryFn: () => {
-        const session1: SessionV2 = {
-          id: "session-1234",
-          name: "fake-session-1",
-          creationDate: DateTime.utc().minus({ days: 4 }).toISO(),
-          description: "A fake session",
-          environmentDefinition: "python:latest",
-        };
-        const session2: SessionV2 = {
-          id: "session-5678",
-          name: "fake-session-2",
-          creationDate: DateTime.utc().minus({ days: 1 }).toISO(),
-          description: "Another fake session",
-          environmentDefinition: "rstudio:latest",
-        };
-
-        return {
-          data: [session1, session2],
-        };
-      },
-    }),
-    addSessionV2: builder.mutation<unknown, AddSessionV2Params>({
-      query: (params) => {
+    addSessionV2: builder.mutation<SessionV2, AddSessionV2Params>({
+      query: ({ environment_id, name, project_id, description }) => {
         return {
           url: "",
           method: "POST",
-          body: { ...params },
+          body: {
+            project_id,
+            name,
+            description,
+            environment_id,
+          },
         };
       },
+      invalidatesTags: ["Launcher"],
     }),
-    updateSessionV2: builder.mutation<unknown, UpdateSessionV2Params>({
-      query: ({ sessionId, ...params }) => {
+    updateSessionV2: builder.mutation<SessionV2, UpdateSessionV2Params>({
+      query: ({ session_id, ...params }) => {
         return {
-          url: `${sessionId}`,
+          url: `${session_id}`,
           method: "PATCH",
           body: { ...params },
         };
       },
+      invalidatesTags: (_result, _error, { session_id }) => [
+        { id: session_id, type: "Launcher" },
+      ],
     }),
     deleteSessionV2: builder.mutation<unknown, DeleteSessionV2Params>({
       query: ({ sessionId }) => {
@@ -87,13 +81,14 @@ const sessionsV2Api = createApi({
           method: "DELETE",
         };
       },
+      invalidatesTags: ["Launcher"],
     }),
   }),
 });
 
 export default sessionsV2Api;
 export const {
-  useGetSessionsV2FakeQuery,
+  useGetSessionsV2Query,
   useAddSessionV2Mutation,
   useUpdateSessionV2Mutation,
   useDeleteSessionV2Mutation,

diff --git a/client/src/features/sessionsV2/sessionsV2.types.ts b/client/src/features/sessionsV2/sessionsV2.types.ts
@@ -17,27 +17,28 @@
  */
 
 export interface SessionV2 {
+  creation_date: string;
+  description?: string;
+  environment_id: string;
   id: string;
   name: string;
-  creationDate: string;
-  description?: string;
-  environmentDefinition: string;
+  project_id: string;
 }
 
 export type SessionV2List = SessionV2[];
 
 export interface AddSessionV2Params {
-  projectId: string;
-  name: string;
   description?: string;
-  environmentDefinition: string;
+  environment_id: string;
+  name: string;
+  project_id: string;
 }
 
 export interface UpdateSessionV2Params {
-  sessionId: string;
-  name: string;
   description?: string;
-  environmentDefinition: string;
+  environment_id: string;
+  name: string;
+  session_id: string;
 }
 
 export interface DeleteSessionV2Params {