Skip to content
Merged
Prev Previous commit
Next Next commit
Add more info to outdated tooltip
  • Loading branch information
BrunoQuaresma committed Jul 11, 2023
commit 42643b63f703d211ed7e20e681bc8195d8b50ae5
79 changes: 76 additions & 3 deletions site/src/components/Tooltips/WorkspaceOutdatedTooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ import {
import InfoIcon from "@mui/icons-material/InfoOutlined"
import { makeStyles } from "@mui/styles"
import { colors } from "theme/colors"
import { useQuery } from "@tanstack/react-query"
import { getTemplate, getTemplateVersion } from "api/api"
import Box from "@mui/material/Box"
import Skeleton from "@mui/material/Skeleton"
import Link from "@mui/material/Link"

export const Language = {
outdatedLabel: "Outdated",
Expand All @@ -20,13 +25,24 @@ export const Language = {

interface TooltipProps {
onUpdateVersion: () => void
templateId: string
ariaLabel?: string
}

export const WorkspaceOutdatedTooltip: FC<
React.PropsWithChildren<TooltipProps>
> = ({ onUpdateVersion, ariaLabel }) => {
export const WorkspaceOutdatedTooltip: FC<TooltipProps> = ({
onUpdateVersion,
ariaLabel,
templateId,
}) => {
const styles = useStyles()
const { data: activeVersion } = useQuery({
queryFn: async () => {
const template = await getTemplate(templateId)
const activeVersion = await getTemplateVersion(template.active_version_id)
return activeVersion
},
queryKey: ["templates", templateId, "activeVersion"],
})

return (
<HelpTooltip
Expand All @@ -37,6 +53,63 @@ export const WorkspaceOutdatedTooltip: FC<
>
<HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
<HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>

<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
py: 1,
fontSize: 13,
}}
>
<Box>
<Box
sx={{
color: (theme) => theme.palette.text.primary,
fontWeight: 600,
}}
>
New version
</Box>
<Box>
{activeVersion ? (
<Link
href={`/templates/docker/versions/${activeVersion.name}`}
target="_blank"
sx={{ color: (theme) => theme.palette.primary.light }}
>
{activeVersion.name}
</Link>
) : (
<Skeleton variant="text" height={20} width={100} />
)}
</Box>
</Box>

<Box>
<Box
sx={{
color: (theme) => theme.palette.text.primary,
fontWeight: 600,
}}
>
Message
</Box>
<Box>
{activeVersion ? (
activeVersion.message === "" ? (
"No message"
) : (
activeVersion.message
)
) : (
<Skeleton variant="text" height={20} width={150} />
)}
</Box>
</Box>
</Box>

<HelpTooltipLinksGroup>
<HelpTooltipAction
icon={RefreshIcon}
Expand Down
1 change: 1 addition & 0 deletions site/src/components/WorkspaceStats/WorkspaceStats.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({

{workspace.outdated && (
<WorkspaceOutdatedTooltip
templateId={workspace.template_id}
onUpdateVersion={handleUpdate}
ariaLabel="update version"
/>
Expand Down
1 change: 1 addition & 0 deletions site/src/components/WorkspacesTable/WorkspacesRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const WorkspacesRow: FC<{
{workspace.name}
{workspace.outdated && (
<WorkspaceOutdatedTooltip
templateId={workspace.template_id}
onUpdateVersion={() => {
onUpdateWorkspace(workspace)
}}
Expand Down