8000 feat: Add "Outdated" tooltip and "Update version" button in the Workspaces page by BrunoQuaresma · Pull Request #2322 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: Add "Outdated" tooltip and "Update version" button in the Workspaces page #2322

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 7 commits into from
Jun 15, 2022
Merged

feat: Add "Outdated" tooltip and "Update version" button in the Workspaces page #2322

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e5cbcd8
Add version tooltup
BrunoQuaresma Jun 13, 2022
9d92df2
Add update action
BrunoQuaresma Jun 13, 2022
58d6a6a
Add pooling
BrunoQuaresma Jun 14, 2022
b4bc684
Fix pooling
BrunoQuaresma Jun 14, 2022
ca18646
Fix pulling and workspace data update
BrunoQuaresma Jun 14, 2022
d982d55
Update site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
BrunoQuaresma Jun 15, 2022
e6145bd
Fix formatting and add more context
BrunoQuaresma Jun 15, 2022
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
Next Next commit
Add update action
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Jun 13, 2022
commit 9d92df20f4c7db54023975ef7a42b0dcd460bb5a
43 changes: 36 additions & 7 deletions site/src/components/HelpTooltip/HelpTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Popover from "@material-ui/core/Popover"
import { makeStyles } from "@material-ui/core/styles"
import HelpIcon from "@material-ui/icons/HelpOutline"
import OpenInNewIcon from "@material-ui/icons/OpenInNew"
import React, { useState } from "react"
import React, { createContext, useContext, useState } from "react"
import { Stack } from "../Stack/Stack"

type Icon = typeof HelpIcon
Expand All @@ -15,25 +15,46 @@ export interface HelpTooltipProps {
size?: Size
}

const HelpTooltipContext = createContext<{ open: boolean; onClose: () => void } | undefined>(undefined)

const useHelpTooltip = () => {
const helpTooltipContext = useContext(HelpTooltipContext)

if (!helpTooltipContext) {
throw new Error("This hook should be used in side of the HelpTooltipContext.")
Copy link
Member

Choose a reason for hiding this comment

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

❤️

}

return helpTooltipContext
}

export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size = "medium" }) => {
const styles = useStyles({ size })
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
open = open ?? Boolean(anchorEl)
const id = open ? "help-popover" : undefined

const onClose = () => {
setAnchorEl(null)
}
Copy link
Member

Choose a reason for hiding this comment

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

Seems like when I click to escape the tooltip, regardless of where I click, I am automatically routed to the workspace page. Sometimes I just want to close the tooltip without leaving the list. Could we suppress navigation on close?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I think it is because you are clicking on a workspace row when you click outside of the tooltip.

Copy link
Member
@Kira-Pilot Kira-Pilot Jun 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

It does it even if I click somewhere else on the page. I think it is using the initial click into the tooltip to navigate.


return (
<>
<button aria-describedby={id} className={styles.button} onClick={(event) => setAnchorEl(event.currentTarget)}>
<button
aria-describedby={id}
className={styles.button}
onClick={(event) => {
event.stopPropagation()
setAnchorEl(event.currentTarget)
}}
>
<HelpIcon className={styles.icon} />
</button>
<Popover
classes={{ paper: styles.popoverPaper }}
id={id}
open={open}
anchorEl={anchorEl}
onClose={() => {
setAnchorEl(null)
}}
onClose={onClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
Expand All @@ -43,7 +64,7 @@ export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size =
horizontal: "left",
}}
>
{children}
<HelpTooltipContext.Provider value={{ open, onClose }}>{children}</HelpTooltipContext.Provider>
</Popover>
</>
)
Expand Down Expand Up @@ -74,9 +95,17 @@ export const HelpTooltipLink: React.FC<{ href: string }> = ({ children, href })

export const HelpTooltipAction: React.FC<{ icon: Icon; onClick: () => void }> = ({ children, icon: Icon, onClick }) => {
const styles = useStyles()
const tooltip = useHelpTooltip()

return (
<button className={styles.action} onClick={onClick}>
<button
className={styles.action}
onClick={(event) => {
event.stopPropagation()
onClick()
tooltip.onClose()
}}
>
<Icon className={styles.actionIcon} />
{children}
</button>
Expand Down
3 changes: 2 additions & 1 deletion site/src/pages/WorkspacesPage/WorkspacesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { WorkspacesPageView } from "./WorkspacesPageView"
const WorkspacesPage: FC = () => {
const [workspacesState, send] = useMachine(workspacesMachine)
const [searchParams, setSearchParams] = useSearchParams()
const { workspaceRefs } = workspacesState.context

useEffect(() => {
const filter = searchParams.get("filter")
Expand All @@ -30,7 +31,7 @@ const WorkspacesPage: FC = () => {
<WorkspacesPageView
filter={workspacesState.context.filter}
loading={workspacesState.hasTag("loading")}
workspaces={workspacesState.context.workspaces}
workspaceRefs={workspaceRefs}
onFilter={(query) => {
searchParams.set("filter", query)
setSearchParams(searchParams)
Expand Down
14 changes: 9 additions & 5 deletions site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { ComponentMeta, Story } from "@storybook/react"
import { spawn } from "xstate"
import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated"
import { MockWorkspace } from "../../testHelpers/entities"
import { workspaceFilterQuery } from "../../util/workspace"
import { workspaceItemMachine } from "../../xServices/workspaces/workspacesXService"
import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView"

export default {
Expand Down Expand Up @@ -43,27 +45,29 @@ const workspaces: { [key in ProvisionerJobStatus]: Workspace } = {

export const AllStates = Template.bind({})
AllStates.args = {
workspaces: [
workspaceRefs: [
...Object.values(workspaces),
createWorkspaceWithStatus("running", "stop"),
createWorkspaceWithStatus("succeeded", "stop"),
createWorkspaceWithStatus("running", "delete"),
],
].map((data) => spawn(workspaceItemMachine.withContext({ data }))),
}

export const Outdated = Template.bind({})
Outdated.args = {
workspaces: [createWorkspaceWithStatus("running", "stop", true)],
workspaceRefs: [createWorkspaceWithStatus("running", "stop", true)].map((data) =>
spawn(workspaceItemMachine.withContext({ data })),
),
}

export const OwnerHasNoWorkspaces = Template.bind({})
OwnerHasNoWorkspaces.args = {
workspaces: [],
workspaceRefs: [],
filter: workspaceFilterQuery.me,
}

export const NoResults = Template.bind({})
NoResults.args = {
workspaces: [],
workspaceRefs: [],
filter: "searchtearmwithnoresults",
}
137 changes: 71 additions & 66 deletions site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
import RefreshIcon from "@material-ui/icons/Refresh"
import SearchIcon from "@material-ui/icons/Search"
import useTheme from "@material-ui/styles/useTheme"
import { useActor } from "@xstate/react"
import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime"
import { FormikErrors, useFormik } from "formik"
import { FC, useState } from "react"
import { Link as RouterLink, useNavigate } from "react-router-dom"
import * as TypesGen from "../../api/typesGenerated"
import { AvatarData } from "../../components/AvatarData/AvatarData"
import { CloseDropdown, OpenDropdown } from "../../components/DropdownArrows/DropdownArrows"
import { EmptyState } from "../../components/EmptyState/EmptyState"
Expand All @@ -39,6 +39,7 @@ import { Stack } from "../../components/Stack/Stack"
import { TableLoader } from "../../components/TableLoader/TableLoader"
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
import { getDisplayStatus, workspaceFilterQuery } from "../../util/workspace"
import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"

dayjs.extend(relativeTime)

Expand Down Expand Up @@ -97,6 +98,64 @@ const OutdatedHelpTooltip: React.FC<{ onUpdateVersion: () => void }> = ({ onUpda
)
}

const WorkspaceRow: React.FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ workspaceRef }) => {
const styles = useStyles()
const navigate = useNavigate()
const theme: Theme = useTheme()
const [workspaceState, send] = useActor(workspaceRef)
const { data: workspace } = workspaceState.context
const status = getDisplayStatus(theme, workspace.latest_build)
const navigateToWorkspacePage = () => {
navigate(`/@${workspace.owner_name}/${workspace.name}`)
}
return (
<TableRow
hover
data-testid={`workspace-${workspace.id}`}
tabIndex={0}
onClick={navigateToWorkspacePage}
onKeyDown={(event) => {
if (event.key === "Enter") {
navigateToWorkspacePage()
}
}}
className={styles.clickableTableRow}
>
<TableCell>
<AvatarData title={workspace.name} subtitle={workspace.owner_name} />
</TableCell>
<TableCell>{workspace.template_name}</TableCell>
<TableCell>
{workspace.outdated ? (
<span className={styles.outdatedLabel}>
{Language.outdatedLabel}
<OutdatedHelpTooltip
onUpdateVersion={() => {
send("UPDATE_VERSION")
}}
/>
</span>
) : (
<span style={{ color: theme.palette.text.secondary }}>{Language.upToDateLabel}</span>
)}
</TableCell>
<TableCell>
<span data-chromatic="ignore" style={{ color: theme.palette.text.secondary }}>
{dayjs().to(dayjs(workspace.latest_build.created_at))}
</span>
</TableCell>
<TableCell>
<span style={{ color: status.color }}>{status.status}</span>
</TableCell>
<TableCell>
<div className={styles.arrowCell}>
<KeyboardArrowRight className={styles.arrowRight} />
</div>
</TableCell>
</TableRow>
)
}

interface FilterFormValues {
query: string
}
Expand All @@ -105,15 +164,13 @@ export type FilterFormErrors = FormikErrors<FilterFormValues>

export interface WorkspacesPageViewProps {
loading?: boolean
workspaces?: TypesGen.Workspace[]
workspaceRefs?: WorkspaceItemMachineRef[]
filter?: string
onFilter: (query: string) => void
}

export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, workspaces, filter, onFilter }) => {
export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, workspaceRefs, filter, onFilter }) => {
const styles = useStyles()
const navigate = useNavigate()
const theme: Theme = useTheme()

const form = useFormik<FilterFormValues>({
enableReinitialize: true,
Expand Down Expand Up @@ -216,17 +273,17 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Template</TableCell>
<TableCell>Version</TableCell>
<TableCell>Last Built</TableCell>
<TableCell>Status</TableCell>
<TableCell width="35%">Name</TableCell>
<TableCell width="15%">Template</TableCell>
<TableCell width="15%">Version</TableCell>
<TableCell width="20%">Last Built</TableCell>
<TableCell width="15%">Status</TableCell>
<TableCell width="1%"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{!workspaces && loading && <TableLoader />}
{workspaces && workspaces.length === 0 && (
{!workspaceRefs && loading && <TableLoader />}
{workspaceRefs && workspaceRefs.length === 0 && (
<>
{filter === workspaceFilterQuery.me || filter === workspaceFilterQuery.all ? (
<TableRow>
Expand All @@ -251,60 +308,8 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
)}
</>
)}
{workspaces &&
workspaces.map((workspace) => {
const status = getDisplayStatus(theme, workspace.latest_build)
const navigateToWorkspacePage = () => {
navigate(`/@${workspace.owner_name}/${workspace.name}`)
}
return (
<TableRow
key={workspace.id}
hover
data-testid={`workspace-${workspace.id}`}
tabIndex={0}
onClick={navigateToWorkspacePage}
onKeyDown={(event) => {
if (event.key === "Enter") {
navigateToWorkspacePage()
}
}}
className={styles.clickableTableRow}
>
<TableCell>
<AvatarData title={workspace.name} subtitle={workspace.owner_name} />
</TableCell>
<TableCell>{workspace.template_name}</TableCell>
<TableCell>
{workspace.outdated ? (
<span className={styles.outdatedLabel}>
{Language.outdatedLabel}
<OutdatedHelpTooltip
onUpdateVersion={() => {
console.log("UPDATE!!")
}}
/>
</span>
) : (
<span style={{ color: theme.palette.text.secondary }}>{Language.upToDateLabel}</span>
)}
</TableCell>
<TableCell>
<span data-chromatic="ignore" style={{ color: theme.palette.text.secondary }}>
{dayjs().to(dayjs(workspace.latest_build.created_at))}
</span>
</TableCell>
<TableCell>
<span style={{ color: status.color }}>{status.status}</span>
</TableCell>
<TableCell>
<div className={styles.arrowCell}>
<KeyboardArrowRight className={styles.arrowRight} />
</div>
</TableCell>
</TableRow>
)
})}
{workspaceRefs &&
workspaceRefs.map((workspaceRef) => <WorkspaceRow workspaceRef={workspaceRef} key={workspaceRef.id} />)}
</TableBody>
</Table>
</Margins>
Expand Down
Loading
0