feat: add/update launcher with custom environment

client/.eslintrc.json

@@ -168,6 +168,7 @@
           "jupyter",
           "katex",
           "kernelspec",
+          "kubernetes",
           "Keycloak",
           "Lausanne",
           "linkify",

client/src/components/MoreInfo.tsx

@@ -0,0 +1,52 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { ReactNode, useRef } from "react";
+import { InfoCircleFill } from "react-bootstrap-icons";
+import { PopoverBody, UncontrolledPopover } from "reactstrap";
+import LazyRenkuMarkdown from "./markdown/LazyRenkuMarkdown";
+
+export function MoreInfo({
+  help,
+  trigger = "hover focus",
+  children,
+}: {
+  help: string;
+  trigger?: string;
+  children?: ReactNode;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  return (
+    <>
+      <span ref={ref}>
+        <InfoCircleFill
+          className={cx("bi", "ms-1", "cursor-pointer", "text-light-emphasis")}
+          tabIndex={0}
+        />
+      </span>
+      <UncontrolledPopover target={ref} placement="right" trigger={trigger}>
+        <PopoverBody>
+          <LazyRenkuMarkdown markdownText={help} />
+          {children}
+        </PopoverBody>
+      </UncontrolledPopover>
+    </>
+  );
+}

client/src/features/sessionsV2/AddSessionLauncherButton.tsx

@@ -20,8 +20,7 @@ import cx from "classnames";
 import { useCallback, useState } from "react";
 import { PlusLg } from "react-bootstrap-icons";
 import { Button } from "reactstrap";
-
-import { Step1AddSessionModal } from "./components/SessionModals/AddSession.tsx";
+import NewSessionLauncherModal from "./components/SessionModals/NewSessionLauncherModal.tsx";
 
 export default function AddSessionLauncherButton({
   "data-cy": dataCy,
@@ -52,7 +51,7 @@ export default function AddSessionLauncherButton({
           <PlusLg className="icon-text" />
         </Button>
       )}
-      <Step1AddSessionModal isOpen={isOpen} toggleModal={toggle} />
+      <NewSessionLauncherModal isOpen={isOpen} toggle={toggle} />
     </>
   );
 }