Skip to content

Commit

Permalink
fix: update session buttons in Renku 2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@leafty
leafty committed May 31, 2024
1 parent fd0f0e8 commit 75c8945
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 52 deletions.
7 changes: 5 additions & 2 deletions client/src/features/sessionsV2/StartSessionButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
import cx from "classnames";
import { PlayFill } from "react-bootstrap-icons";
import { Link, generatePath } from "react-router-dom-v5-compat";

import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";

interface StartSessionButtonProps {
namespace: string;
slug: string;
Expand All @@ -31,7 +34,7 @@ export default function StartSessionButton({
slug,
}: StartSessionButtonProps) {
const startUrl = generatePath(
"/v2/projects/:namespace/:slug/sessions/:launcherId/start",
ABSOLUTE_ROUTES.v2.projects.show.sessions.start,
{
launcherId,
namespace,
Expand All @@ -51,7 +54,7 @@ export default function StartSessionButton({
)}
to={startUrl}
>
<PlayFill size="20" />
<PlayFill className={cx("bi", "me-1")} />
Launch
</Link>
);
Expand Down
87 changes: 37 additions & 50 deletions client/src/features/sessionsV2/components/SessionButton/ActiveSessionButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@
* limitations under the License.
*/

import { faPlay, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { SerializedError } from "@reduxjs/toolkit";
import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
import cx from "classnames";
Expand All @@ -29,6 +27,7 @@ import {
PlayFill,
Tools,
Trash,
TrashFill,
XLg,
} from "react-bootstrap-icons";
import { Link, useNavigate } from "react-router-dom-v5-compat";
Expand All @@ -44,35 +43,32 @@ import {
Row,
} from "reactstrap";

import { ErrorAlert, WarnAlert } from "../../../../components/Alert.jsx";
import { Loader } from "../../../../components/Loader.tsx";
import { ButtonWithMenu } from "../../../../components/buttons/Button.tsx";
import SessionPausedIcon from "../../../../components/icons/SessionPausedIcon.tsx";
import { User } from "../../../../model/renkuModels.types.ts";
import { ErrorAlert, WarnAlert } from "../../../../components/Alert";
import { Loader } from "../../../../components/Loader";
import { EnvironmentLogs } from "../../../../components/Logs";
import { ButtonWithMenu } from "../../../../components/buttons/Button";
import SessionPausedIcon from "../../../../components/icons/SessionPausedIcon";
import { User } from "../../../../model/renkuModels.types";
import { NotebooksHelper } from "../../../../notebooks";
import { NotebookAnnotations } from "../../../../notebooks/components/session.types.ts";
import { NOTIFICATION_TOPICS } from "../../../../notifications/Notifications.constants.ts";
import { NotificationsManager } from "../../../../notifications/notifications.types.ts";
import AppContext from "../../../../utils/context/appContext.ts";
import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook.ts";
import useLegacySelector from "../../../../utils/customHooks/useLegacySelector.hook.ts";
import { useGetResourcePoolsQuery } from "../../../dataServices/dataServices.api.ts";
import { ResourceClass } from "../../../dataServices/dataServices.types.ts";
import { toggleSessionLogsModal } from "../../../display/displaySlice.ts";
import { SessionRowResourceRequests } from "../../../session/components/SessionsList.tsx";
import UnsavedWorkWarning from "../../../session/components/UnsavedWorkWarning.tsx";
import { SessionClassSelector } from "../../../session/components/options/SessionClassOption.tsx";
import { NotebookAnnotations } from "../../../../notebooks/components/session.types";
import { NOTIFICATION_TOPICS } from "../../../../notifications/Notifications.constants";
import { NotificationsManager } from "../../../../notifications/notifications.types";
import AppContext from "../../../../utils/context/appContext";
import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook";
import useAppSelector from "../../../../utils/customHooks/useAppSelector.hook";
import useLegacySelector from "../../../../utils/customHooks/useLegacySelector.hook";
import { useGetResourcePoolsQuery } from "../../../dataServices/dataServices.api";
import { ResourceClass } from "../../../dataServices/dataServices.types";
import { toggleSessionLogsModal } from "../../../display/displaySlice";
import { SessionRowResourceRequests } from "../../../session/components/SessionsList";
import UnsavedWorkWarning from "../../../session/components/UnsavedWorkWarning";
import { SessionClassSelector } from "../../../session/components/options/SessionClassOption";
import {
usePatchSessionMutation,
useStopSessionMutation,
} from "../../../session/sessions.api.ts";
import {
Session,
SessionStatusState,
} from "../../../session/sessions.types.ts";
import useWaitForSessionStatus from "../../../session/useWaitForSessionStatus.hook.ts";
import { EnvironmentLogs } from "../../../../components/Logs.tsx";
import useAppSelector from "../../../../utils/customHooks/useAppSelector.hook.ts";
} from "../../../session/sessions.api";
import { Session, SessionStatusState } from "../../../session/sessions.types";
import useWaitForSessionStatus from "../../../session/useWaitForSessionStatus.hook";

interface ActiveSessionButtonProps {
session: Session;
Expand Down Expand Up @@ -260,12 +256,12 @@ export default function ActiveSessionButton({
const defaultAction =
status === "stopping" || isStopping ? (
<Button className={buttonClassName} data-cy="stopping-btn" disabled>
<Loader className="me-2" inline size={16} />
<Loader className={cx("bi", "me-1")} inline size={16} />
Deleting
</Button>
) : isHibernating ? (
<Button className={buttonClassName} data-cy="stopping-btn" disabled>
<Loader className="me-2" inline size={16} />
<Loader className={cx("bi", "me-1")} inline size={16} />
Pausing
</Button>
) : status === "starting" || status === "running" ? (
Expand All @@ -275,7 +271,7 @@ export default function ActiveSessionButton({
to={showSessionUrl}
>
<img
className={cx("rk-icon", "rk-icon-md", "me-2")}
className={cx("rk-icon", "rk-icon-md", "me-1")}
src="/connect.svg"
/>
Open
Expand All @@ -289,14 +285,12 @@ export default function ActiveSessionButton({
>
{isResuming ? (
<>
<Loader className="me-2" inline size={16} />
<Loader className={cx("bi", "me-1")} inline size={16} />
Resuming
</>
) : (
<>
<PlayFill
className={cx("rk-icon", "rk-icon-md", "flex-shrink-0", "me-2")}
/>
<PlayFill className={cx("bi", "me-1")} />
Resume
</>
)}
Expand All @@ -307,9 +301,7 @@ export default function ActiveSessionButton({
data-cy="modify-session-button"
onClick={toggleModifySession}
>
<Tools
className={cx("rk-icon", "rk-icon-md", "flex-shrink-0", "me-2")}
/>
<Tools className={cx("bi", "me-1")} />
Modify
</Button>
) : (
Expand All @@ -323,10 +315,7 @@ export default function ActiveSessionButton({
<SessionPausedIcon size={16} />
</span>
) : (
<FontAwesomeIcon
className={cx("rk-icon", "rk-icon-md", "me-2")}
icon={faTrash}
/>
<TrashFill className={cx("bi", "me-1")} />
)}
{logged ? "Pause" : "Delete"}
</Button>
Expand All @@ -342,10 +331,7 @@ export default function ActiveSessionButton({
disabled={status === "starting"}
onClick={onHibernateSession}
>
<SessionPausedIcon
className={cx("svg-inline--fa", "fa-fw", "me-2")}
size={16}
/>
<SessionPausedIcon className={cx("bi", "me-1")} size={16} />
Pause session
</DropdownItem>
);
Expand All @@ -355,7 +341,7 @@ export default function ActiveSessionButton({
data-cy="delete-session-button"
onClick={logged ? toggleStopSession : onStopSession}
>
<Trash className={cx("svg-inline--fa", "fa-w-16", "me-2")} />
<Trash className={cx("bi", "me-1")} />
Delete session
</DropdownItem>
);
Expand All @@ -368,22 +354,22 @@ export default function ActiveSessionButton({
data-cy="modify-session-button"
onClick={toggleModifySession}
>
<Tools className={cx("bi", "me-2")} />
<Tools className={cx("bi", "me-1")} />
Modify session
</DropdownItem>
);

const openInNewTabAction = (status === "starting" ||
status === "running") && (
<DropdownItem href={session.url} target="_blank">
<BoxArrowUpRight className={cx("svg-inline--fa", "fa-w-16", "me-2")} />
<BoxArrowUpRight className={cx("bi", "me-1")} />
Open in new tab
</DropdownItem>
);

const logsAction = status !== "hibernated" && (
<DropdownItem data-cy="session-log-button" onClick={onToggleLogs}>
<FileEarmarkText className={cx("svg-inline--fa", "fa-w-16", "me-2")} />
<FileEarmarkText className={cx("bi", "me-1")} />
Get logs
</DropdownItem>
);
Expand Down Expand Up @@ -669,7 +655,8 @@ function ModifySessionModalContent({
onClick={onClick({ resumeSession: true })}
type="submit"
>
<FontAwesomeIcon icon={faPlay} /> Modify and resume session
<PlayFill className={cx("bi", "me-1")} />
Modify and resume session
</Button>
)}
<Button
Expand Down

0 comments on commit 75c8945

Please sign in to comment.