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

Show file tree
Hide file tree
Changes from 2 commits
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
2 changes: 1 addition & 1 deletion site/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -966,7 +966,7 @@ export const getWorkspaceBuildParameters = async (
return response.data
}
type Claims = {
license_expires?: jwt.NumericDate
license_expires?: number
account_type?: string
account_id?: string
trial: boolean
Expand Down
115 changes: 86 additions & 29 deletions site/src/pages/TerminalPage/TerminalPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import Button from "@material-ui/core/Button"
import { makeStyles } from "@material-ui/core/styles"
import WarningIcon from "@material-ui/icons/ErrorOutlineRounded"
import RefreshOutlined from "@material-ui/icons/RefreshOutlined"
import { useMachine } from "@xstate/react"
import { portForwardURL } from "components/PortForwardButton/PortForwardButton"
import { Stack } from "components/Stack/Stack"
Expand All @@ -21,34 +24,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 +75,11 @@ const TerminalPage: FC<
applicationsHost,
} = terminalState.context
const reloading = useReloading(isDisconnected)
const shouldDisplayStartupWarning = workspaceAgent
? ["starting", "starting_timeout", "start_error"].includes(
Copy link
Member

@mafredri mafredri Apr 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This start_error is a permanent state when error is encountered (until shutdown). The workspace will never be ready. Perhaps we should show a different kind of warning in that case?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhh I see. I totally agree.

workspaceAgent.lifecycle_state,
)
: false

// handleWebLink handles opening of URLs in the terminal!
const handleWebLink = useCallback(
Expand Down Expand Up @@ -309,12 +289,62 @@ const TerminalPage: FC<
</Stack>
)}
</div>
{shouldDisplayStartupWarning && (
<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 className={styles.alertActions}>
<Button
startIcon={<RefreshOutlined />}
size="small"
onClick={() => {
window.location.reload()
}}
>
Refresh
</Button>
</div>
</div>
)}
<div className={styles.terminal} ref={xtermRef} data-testid="terminal" />
</>
)
}

export default TerminalPage
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 +378,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 +402,29 @@ 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,
},
alertActions: {
marginLeft: "auto",
},
}))

export default TerminalPage