Skip to content

refactor(site): do not block the screen when disconnected #10057

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 5, 2023
Merged

refactor(site): do not block the screen when disconnected #10057

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f5be21
refactor(site): do not block the screen when disconnected
BrunoQuaresma Oct 4, 2023
9df7dc3
Simplify refresh session action
BrunoQuaresma Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Simplify refresh session action
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Oct 5, 2023
commit 9df7dc3001faa55ce7425e03a6d2998190ba6ccf
21 changes: 18 additions & 3 deletions site/src/pages/TerminalPage/TerminalAlerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import { Alert, AlertProps } from "components/Alert/Alert";
import { useState } from "react";
import { docs } from "utils/docs";

export const ErrorScriptAlert = () => {
Expand Down Expand Up @@ -106,16 +107,30 @@ const TerminalAlert = (props: AlertProps) => {

export const DisconnectedAlert = (props: AlertProps) => {
return (
<TerminalAlert {...props} severity="warning">
<TerminalAlert
{...props}
severity="warning"
actions={<RefreshSessionButton />}
>
Disconnected
</TerminalAlert>
);
};

const RefreshSessionButton = () => {
const [isRefreshing, setIsRefreshing] = useState(false);

return (
<Button size="small" variant="text" onClick={window.location.reload}>
Refresh session
<Button
disabled={isRefreshing}
size="small"
variant="text"
onClick={() => {
setIsRefreshing(true);
window.location.reload();
}}
>
{isRefreshing ? "Refreshing session..." : "Refresh session"}
</Button>
);
};
41 changes: 1 addition & 40 deletions site/src/pages/TerminalPage/TerminalPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { getLatencyColor } from "utils/latency";
import Popover from "@mui/material/Popover";
import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
import { portForwardURL } from "utils/portForward";
import Button from "@mui/material/Button";
import {
DisconnectedAlert,
ErrorScriptAlert,
Expand Down Expand Up @@ -89,7 +88,6 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
workspaceAgent,
websocketError,
} = terminalState.context;
const reloadTerminal = useReloadTerminal();
const dashboard = useDashboard();
const proxyContext = useProxy();
const selectedProxy = proxyContext.proxy.proxy;
Expand Down Expand Up @@ -313,24 +311,7 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
{lifecycleState === "starting" && <LoadingScriptsAlert />}
{lifecycleState === "ready" &&
prevLifecycleState.current === "starting" && <LoadedScriptsAlert />}
{isDisconnected && (
<DisconnectedAlert
actions={
<Button
disabled={reloadTerminal.status === "reloading"}
size="small"
variant="text"
onClick={() => {
reloadTerminal.reload();
}}
>
{reloadTerminal.status === "reloading"
? "Reloading..."
: "Reload"}
</Button>
}
/>
)}
{isDisconnected && <DisconnectedAlert />}
<div
className={styles.terminal}
ref={xtermRef}
Expand Down Expand Up @@ -445,26 +426,6 @@ const BottomBar = ({ proxy, latency }: { proxy: Region; latency?: number }) => {
);
};

const useReloadTerminal = () => {
const [status, setStatus] = useState<"reloading" | "notReloading">(
"notReloading",
);

const reload = () => {
if (status === "reloading") {
return;
}

setStatus("reloading");
window.location.reload();
};

return {
status,
reload,
};
};

const useStyles = makeStyles((theme) => ({
overlay: {
position: "absolute",
Expand Down