move location of modal

Author: ciyer

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

@@ -24,7 +24,7 @@ import type { SessionLauncher } from "../api/sessionLaunchersV2.api";
 import { useGetSessionsQuery as useGetSessionsQueryV2 } from "../api/sessionsV2.api";
 import UpdateSessionLauncherEnvironmentModal from "../components/SessionModals/UpdateSessionLauncherModal";
 import DeleteSessionV2Modal from "../DeleteSessionLauncherModal";
-import SessionStartLinkModal from "../SessionView/SessionStartLinkModal";
+import SessionLaunchLinkModal from "../SessionView/SessionLaunchLinkModal";
 import { SessionView } from "../SessionView/SessionView";
 import SessionLauncherCard from "./SessionLauncherCard";
 import EnvironmentLogsV2 from "../../../components/LogsV2";
@@ -135,7 +135,7 @@ export function SessionLauncherDisplay({
             toggle={toggleDelete}
             sessionsLength={filteredSessions?.length}
           />
-          <SessionStartLinkModal
+          <SessionLaunchLinkModal
             isOpen={isShareLinkOpen}
             launcher={launcher}
             toggle={toggleShareLink}

client/src/features/sessionsV2/SessionView/SessionLaunchLinkModal.tsx

@@ -18,7 +18,12 @@
 
 import cx from "classnames";
 import { useContext, useEffect, useMemo } from "react";
-import { ArrowClockwise, CheckCircle, XLg } from "react-bootstrap-icons";
+import {
+  ArrowClockwise,
+  CheckCircle,
+  Link45deg,
+  XLg,
+} from "react-bootstrap-icons";
 import {
   Controller,
   useFieldArray,
@@ -32,6 +37,7 @@ import {
   Col,
   Form,
   FormGroup,
+  Input,
   Label,
   Modal,
   ModalBody,
@@ -49,8 +55,6 @@ import AppContext from "../../../utils/context/appContext";
 import { Project } from "../../projectsV2/api/projectV2.api";
 import type { SessionLauncher } from "../api/sessionLaunchersV2.api";
 
-import { Input } from "reactstrap";
-
 interface CustomizeLaunchLinkFormProps {
   control: ReturnType<typeof useForm<EnvVariablesCustomizationForm>>["control"];
   errors: FieldErrors<EnvVariablesCustomizationForm>;
@@ -408,7 +412,10 @@ export default function SessionLaunchLinkModal({
       scrollable
     >
       <ModalHeader toggle={toggle}>
-        <div>Share Session launch link for {launcher.name}</div>
+        <div>
+          <Link45deg className={cx("bi", "me-1")} /> Share Session launch link
+          for {launcher.name}
+        </div>
         <div className="fs-6">
           Create and share a link that directly launches a Renku session.
         </div>

client/src/features/sessionsV2/SessionView/SessionStartLinkModal.tsx

@@ -24,7 +24,6 @@ import {
   Database,
   ExclamationTriangleFill,
   FileCode,
-  Link45deg,
   Pencil,
 } from "react-bootstrap-icons";
 import {
@@ -70,10 +69,8 @@ import {
 import { DEFAULT_URL } from "../session.constants";
 import { SessionV2 } from "../sessionsV2.types";
 import EnvironmentCard from "./EnvironmentCard";
-import useSessionStartLink from "./useSessionStartLink.hook";
 import EnvVariablesCard from "./EnvVariablesCard";
 import EnvVariablesModal from "./EnvVariablesModal";
-import SessionLaunchLinkModal from "./SessionLaunchLinkModal";
 
 interface SessionCardContentProps {
   color: string;
@@ -195,23 +192,6 @@ function getSessionColor(state: string) {
     : "dark";
 }
 
-function SessionLaunchLink({
-  launcher,
-  project,
-}: Required<Pick<SessionViewProps, "launcher" | "project">>) {
-  const { url } = useSessionStartLink({ launcher, project });
-  return (
-    <div className="mb-2">
-      <h4 className="my-auto">
-        <Link45deg className={cx("bi", "me-1")} />
-        Session Launch Link
-      </h4>
-      <p className="mb-2">A session launch link leads directly to a session.</p>
-      <CommandCopy command={url.toString()} noMargin />
-    </div>
-  );
-}
-
 interface SessionViewProps {
   id?: string;
   isOpen: boolean;
@@ -237,8 +217,6 @@ export function SessionView({
   const [isUpdateOpen, setIsUpdateOpen] = useState(false);
   const [isModifyResourcesOpen, setModifyResourcesOpen] = useState(false);
   const [isEnvVariablesModalOpen, setEnvVariablesModalOpen] = useState(false);
-  const [isSessionLaunchLinksModalOpen, setSessionLaunchLinksModalOpen] =
-    useState(false);
   const toggle = useCallback(() => {
     setIsUpdateOpen((open) => !open);
   }, []);
@@ -248,9 +226,6 @@ export function SessionView({
   const toggleEnvVariables = useCallback(() => {
     setEnvVariablesModalOpen((open) => !open);
   }, []);
-  const toggleSessionLaunchLinks = useCallback(() => {
-    setSessionLaunchLinksModalOpen((open) => !open);
-  }, []);
   const permissions = useProjectPermissions({ projectId: project.id });
   const environment = launcher?.environment;
 
@@ -558,38 +533,6 @@ export function SessionView({
           </div>
 
           <SessionViewSessionSecrets />
-          {launcher && (
-            <div className="mb-2">
-              <div className={cx("d-flex", "justify-content-between", "mb-2")}>
-                <h4 className="my-auto">
-                  <Link45deg className={cx("bi", "me-1")} />
-                  Session Launch Link
-                </h4>
-                <Button
-                  color="outline-primary"
-                  id="define-launch-links-button"
-                  onClick={toggleSessionLaunchLinks}
-                  size="sm"
-                  tabIndex={0}
-                >
-                  <Pencil className="bi" />
-                </Button>
-                <UncontrolledTooltip target="define-launch-links-button">
-                  Define custom launch links
-                </UncontrolledTooltip>
-              </div>
-              <p className="mb-2">
-                A session launch link leads directly to a session.
-              </p>
-              <SessionLaunchLink launcher={launcher} project={project} />
-              <SessionLaunchLinkModal
-                isOpen={isSessionLaunchLinksModalOpen}
-                launcher={launcher}
-                project={project}
-                toggle={toggleSessionLaunchLinks}
-              />
-            </div>
-          )}
           {launcher && (
             <div>
               <div className={cx("d-flex", "justify-content-between", "mb-2")}>

client/src/features/sessionsV2/SessionView/SessionView.tsx

@@ -651,8 +651,11 @@ describe("Customize session environment variables", () => {
 
     cy.wait("@sessionLaunchers");
     // check session launcher view and edit session launcher
-    cy.getDataCy("session-name").click();
-    cy.get("#define-launch-links-button").click();
+    cy.getDataCy("session-launcher-item")
+      .find('[data-cy="button-with-menu-dropdown"]')
+      .click();
+    cy.getDataCy("session-launcher-menu-share-link").click();
+    // cy.get("#define-launch-links-button").click();
     // cy.contains(
     //   "To add environment variables, see the Environment Variables section of the session launcher."
     // ).should("be.visible");
@@ -685,8 +688,10 @@ describe("Customize session environment variables", () => {
 
     cy.wait("@sessionLaunchers");
     // check session launcher view and edit session launcher
-    cy.getDataCy("session-name").click();
-    cy.get("#define-launch-links-button").click();
+    cy.getDataCy("session-launcher-item")
+      .find('[data-cy="button-with-menu-dropdown"]')
+      .click();
+    cy.getDataCy("session-launcher-menu-share-link").click();
     cy.contains(
       "To add environment variables, see the Environment Variables section of the session launcher."
     ).should("be.visible");