8000 feat(site): Show warning if startup script is running by BrunoQuaresma · Pull Request #7326 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat(site): Show warning if startup script is running #7326

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 6 commits into from
May 2, 2023
Merged

feat(site): Show warning if startup script is running #7326

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
29301b9
Show warning
BrunoQuaresma Apr 28, 2023
98dca9f
feat(site): Display a warning message during startup script execution
BrunoQuaresma Apr 28, 2023
58a8fd6
Merge branch 'main' into bq/show-alert-on-terminal
BrunoQuaresma May 2, 2023
022796f
Update site/src/pages/TerminalPage/TerminalPage.tsx
BrunoQuaresma May 2, 2023
80545e4
Merge branch 'bq/show-alert-on-terminal' of https://github.com/coder/…
BrunoQuaresma May 2, 2023
36d5d7d
Refresh session and get error message
BrunoQuaresma May 2, 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
Next Next commit
Show warning
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Apr 28, 2023
commit 29301b9a672c22f0bd689372cfba4929ed46e4b3
115 changes: 86 additions & 29 deletions site/src/pages/TerminalPage/TerminalPage.tsx
View file
Open in desktop
8000
81C5
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { makeStyles } from "@material-ui/core/styles"
import WarningIcon from "@material-ui/icons/ErrorOutlineRounded"
import { useMachine } from "@xstate/react"
import { WorkspaceAgent } from "api/typesGenerated"
import { portForwardURL } from "components/PortForwardButton/PortForwardButton"
import { Stack } from "components/Stack/Stack"
import { FC, useCallback, useEffect, useRef, useState } from "react"
Expand All @@ -21,34 +23,6 @@ export const Language = {
websocketErrorMessagePrefix: "WebSocket failed: ",
}

const useReloading = (isDisconnected: boolean) => {
const [status, setStatus] = useState<"reloading" | "notReloading">(
"notReloading",
)

// Retry connection on key press when it is disconnected
useEffect(() => {
if (!isDisconnected) {
return
}

const keyDownHandler = () => {
setStatus("reloading")
window.location.reload()
}

document.addEventListener("keydown", keyDownHandler)

return () => {
document.removeEventListener("keydown", keyDownHandler)
}
}, [isDisconnected])

return {
status,
}
}

const TerminalPage: FC<
React.PropsWithChildren<{
readonly renderer?: XTerm.RendererType
Expand Down Expand Up @@ -100,6 +74,7 @@ const TerminalPage: FC<
applicationsHost,
} = terminalState.context
const reloading = useReloading(isDisconnected)
const startupWarning = useStartupWarning(workspaceAgent)

// handleWebLink handles opening of URLs in the terminal!
const handleWebLink = useCallback(
Expand Down Expand Up @@ -309,12 +284,70 @@ const TerminalPage: FC<
</Stack>
)}
</div>
{startupWarning.shouldDisplay && (
<div className={styles.alert} role="alert">
<WarningIcon className={styles.alertIcon} />
<div>
<div className={styles.alertTitle}>
Startup script is still running
</div>
<div className={styles.alertMessage}>
You can use it but dotfiles aren&lsquo;t setup yet
</div>
</div>
</div>
)}
<div className={styles.terminal} ref={xtermRef} data-testid="terminal" />
</>
)
}

export default TerminalPage
const useStartupWarning = (agent?: WorkspaceAgent) => {
const [shouldDisplay, setShouldDisplay] = useState(false)

useEffect(() => {
if (agent) {
setShouldDisplay(
["starting", "starting_timeout", "start_error"].includes(
agent.lifecycle_state,
),
)
}
}, [agent])

return {
shouldDisplay,
dismiss: () => setShouldDisplay(false),
}
}

const useReloading = (isDisconnected: boolean) => {
const [status, setStatus] = useState<"reloading" | "notReloading">(
"notReloading",
)

// Retry connection on key press when it is disconnected
useEffect(() => {
if (!isDisconnected) {
return
}

const keyDownHandler = () => {
setStatus("reloading")
window.location.reload()
}

document.addEventListener("keydown", keyDownHandler)

return () => {
document.removeEventListener("keydown", keyDownHandler)
}
}, [isDisconnected])

return {
status,
}
}

const useStyles = makeStyles((theme) => ({
overlay: {
Expand Down Expand Up @@ -348,6 +381,8 @@ const useStyles = makeStyles((theme) => ({
width: "100vw",
height: "100vh",
overflow: "hidden",
padding: theme.spacing(1),
backgroundColor: theme.palette.background.paper,
// These styles attempt to mimic the VS Code scrollbar.
"& .xterm": {
padding: 4,
Expand All @@ -370,4 +405,26 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: "rgba(255, 255, 255, 0.18)",
},
},
alert: {
display: "flex",
background: theme.palette.background.paperLight,
alignItems: "center",
padding: theme.spacing(2),
gap: theme.spacing(2),
borderBottom: `1px solid ${theme.palette.divider}`,
},
alertIcon: {
color: theme.palette.warning.light,
fontSize: theme.spacing(3),
},
alertTitle: {
fontWeight: 600,
color: theme.palette.text.primary,
},
alertMessage: {
fontSize: 14,
color: theme.palette.text.secondary,
},
}))

export default TerminalPage
0