Skip to content

refactor(site): update build log to be displayed only on active statuses #8459

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
Jul 12, 2023
Merged

refactor(site): update build log to be displayed only on active statuses #8459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbb7697
refactor(site): update build log to be displayed only on active statuses
BrunoQuaresma Jul 12, 2023
68ebba3
Fix storybook preview
BrunoQuaresma Jul 12, 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
8 changes: 0 additions & 8 deletions site/.storybook/preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { HelmetProvider } from "react-helmet-async"
import { dark } from "../src/theme"
import "../src/theme/globalFonts"
import "../src/i18n"
import { LocalPreferencesProvider } from "../src/contexts/LocalPreferencesContext"

export const decorators = [
(Story) => (
Expand All @@ -24,13 +23,6 @@ export const decorators = [
</HelmetProvider>
)
},
(Story) => {
return (
<LocalPreferencesProvider>
<Story />
</LocalPreferencesProvider>
)
},
]

export const parameters = {
Expand Down
25 changes: 11 additions & 14 deletions site/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
import { dark } from "./theme"
import "./theme/globalFonts"
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
import { LocalPreferencesProvider } from "contexts/LocalPreferencesContext"

const queryClient = new QueryClient({
defaultOptions: {
Expand All @@ -26,19 +25,17 @@ export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
return (
<HelmetProvider>
<StyledEngineProvider injectFirst>
<LocalPreferencesProvider>
<ThemeProvider theme={dark}>
<CssBaseline enableColorScheme />
<ErrorBoundary>
<QueryClientProvider client={queryClient}>
<AuthProvider>
{children}
<GlobalSnackbar />
</AuthProvider>
</QueryClientProvider>
</ErrorBoundary>
</ThemeProvider>
</LocalPreferencesProvider>
<ThemeProvider theme={dark}>
<CssBaseline enableColorScheme />
<ErrorBoundary>
<QueryClientProvider client={queryClient}>
<AuthProvider>
{children}
<GlobalSnackbar />
</AuthProvider>
</QueryClientProvider>
</ErrorBoundary>
</ThemeProvider>
</StyledEngineProvider>
</HelmetProvider>
)
Expand Down
6 changes: 0 additions & 6 deletions site/src/components/Workspace/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,6 @@ export interface WorkspaceProps {
quota_budget?: number
handleBuildRetry: () => void
buildLogs?: React.ReactNode
canChangeBuildLogsVisibility: boolean
isWorkspaceBuildLogsUIActive: boolean
}

/**
Expand Down Expand Up @@ -106,8 +104,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
handleBuildRetry,
templateWarnings,
buildLogs,
canChangeBuildLogsVisibility,
isWorkspaceBuildLogsUIActive,
}) => {
const styles = useStyles()
const navigate = useNavigate()
Expand Down Expand Up @@ -211,8 +207,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
canChangeVersions={canChangeVersions}
isUpdating={isUpdating}
isRestarting={isRestarting}
canChangeBuildLogsVisibility={canChangeBuildLogsVisibility}
isWorkspaceBuildLogsUIActive={isWorkspaceBuildLogsUIActive}
/>
</PageHeaderActions>
</FullWidthPageHeader>
Expand Down
44 changes: 0 additions & 44 deletions site/src/components/WorkspaceActions/WorkspaceActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@ import SettingsOutlined from "@mui/icons-material/SettingsOutlined"
import HistoryOutlined from "@mui/icons-material/HistoryOutlined"
import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
import IconButton from "@mui/material/IconButton"
import Divider from "@mui/material/Divider"
import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined"
import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined"
import { useLocalPreferences } from "contexts/LocalPreferencesContext"

export interface WorkspaceActionsProps {
workspaceStatus: WorkspaceStatus
Expand All @@ -42,8 +38,6 @@ export interface WorkspaceActionsProps {
isRestarting: boolean
children?: ReactNode
canChangeVersions: boolean
canChangeBuildLogsVisibility: boolean
isWorkspaceBuildLogsUIActive: boolean
}

export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
Expand All @@ -60,8 +54,6 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
isUpdating,
isRestarting,
canChangeVersions,
canChangeBuildLogsVisibility,
isWorkspaceBuildLogsUIActive,
}) => {
const styles = useStyles()
const {
Expand All @@ -72,9 +64,6 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
const canBeUpdated = isOutdated && canAcceptJobs
const menuTriggerRef = useRef<HTMLButtonElement>(null)
const [isMenuOpen, setIsMenuOpen] = useState(false)
const localPreferences = useLocalPreferences()
const isBuildLogsVisible =
localPreferences.getPreference("buildLogsVisibility") === "visible"

// A mapping of button type to the corresponding React component
const buttonMapping: ButtonMapping = {
Expand Down Expand Up @@ -151,39 +140,6 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
<DeleteOutlined />
Delete
</MenuItem>

{isWorkspaceBuildLogsUIActive && (
<>
<Divider sx={{ borderColor: (theme) => theme.palette.divider }} />
{isBuildLogsVisible ? (
<MenuItem
disabled={!canChangeBuildLogsVisibility}
onClick={onMenuItemClick(() => {
localPreferences.setPreference(
"buildLogsVisibility",
"hide",
)
})}
>
<VisibilityOffOutlined />
Hide build logs
</MenuItem>
) : (
<MenuItem
disabled={!canChangeBuildLogsVisibility}
onClick={onMenuItemClick(() => {
localPreferences.setPreference(
"buildLogsVisibility",
"visible",
)
})}
>
<VisibilityOutlined />
Show build logs
</MenuItem>
)}
</>
)}
</Menu>
</div>
</div>
Expand Down
111 changes: 0 additions & 111 deletions site/src/contexts/LocalPreferencesContext.tsx
View file
Open in desktop

This file was deleted.

23 changes: 0 additions & 23 deletions site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import CloseOutlined from "@mui/icons-material/CloseOutlined"
import Box from "@mui/material/Box"
import IconButton from "@mui/material/IconButton"
import Tooltip from "@mui/material/Tooltip"
import { ProvisionerJobLog } from "api/typesGenerated"
import { Loader } from "components/Loader/Loader"
import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
import { useRef, useEffect } from "react"

export const WorkspaceBuildLogsSection = ({
logs,
onHide,
}: {
logs: ProvisionerJobLog[] | undefined
onHide?: () => void
}) => {
const scrollRef = useRef<HTMLDivElement>(null)

Expand Down Expand Up @@ -43,24 +38,6 @@ export const WorkspaceBuildLogsSection = ({
})}
>
Build logs
{onHide && (
<Box sx={{ marginLeft: "auto" }}>
<Tooltip title="Hide build logs" placement="top">
<IconButton
onClick={onHide}
size="small"
sx={(theme) => ({
color: theme.palette.text.secondary,
"&:hover": {
color: theme.palette.text.primary,
},
})}
>
<CloseOutlined sx={{ height: 16, width: 16 }} />
</IconButton>
</Tooltip>
</Box>
)}
</Box>
<Box
ref={scrollRef}
Expand Down
23 changes: 5 additions & 18 deletions site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ import Checkbox from "@mui/material/Checkbox"
import FormControlLabel from "@mui/material/FormControlLabel"
import { workspaceBuildMachine } from "xServices/workspaceBuild/workspaceBuildXService"
import * as TypesGen from "api/typesGenerated"
import { useLocalPreferences } from "contexts/LocalPreferencesContext"
import { WorkspaceBuildLogsSection } from "./WorkspaceBuildLogsSection"

interface WorkspaceReadyPageProps {
Expand Down Expand Up @@ -94,16 +93,13 @@ export const WorkspaceReadyPage = ({
const user = useMe()
const { isWarningIgnored, ignoreWarning } = useIgnoreWarnings(user.id)
const buildLogs = useBuildLogs(workspace)
const localPreferences = useLocalPreferences()
const dashboard = useDashboard()
const canChangeBuildLogsVisibility = !hasJobError(workspace)
const isWorkspaceBuildLogsUIActive = dashboard.experiments.includes(
"workspace_build_logs_ui",
)
const shouldDisplayBuildLogs =
hasJobError(workspace) ||
(localPreferences.getPreference("buildLogsVisibility") === "visible" &&
isWorkspaceBuildLogsUIActive)
(dashboard.experiments.includes("workspace_build_logs_ui") &&
["canceling", "deleting", "pending", "starting", "stopping"].includes(
workspace.latest_build.status,
))

const {
mutate: restartWorkspace,
Expand Down Expand Up @@ -195,18 +191,9 @@ export const WorkspaceReadyPage = ({
template={template}
quota_budget={quotaState.context.quota?.budget}
templateWarnings={templateVersion?.warnings}
canChangeBuildLogsVisibility={canChangeBuildLogsVisibility}
isWorkspaceBuildLogsUIActive={isWorkspaceBuildLogsUIActive}
buildLogs={
shouldDisplayBuildLogs && (
<WorkspaceBuildLogsSection
logs={buildLogs}
onHide={() => {
if (canChangeBuildLogsVisibility) {
localPreferences.setPreference("buildLogsVisibility", "hide")
}
}}
/>
<WorkspaceBuildLogsSection logs={buildLogs} />
)
}
/>
Expand Down