-
Notifications
You must be signed in to change notification settings - Fork 937
chore: cleaning up workspaces table code #2765
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.
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
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./HelpTooltip" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import RefreshIcon from "@material-ui/icons/Refresh" | ||
| import { FC } from "react" | ||
| import { | ||
| HelpTooltip, | ||
| HelpTooltipAction, | ||
| HelpTooltipLinksGroup, | ||
| HelpTooltipText, | ||
| HelpTooltipTitle, | ||
| } from "./HelpTooltip" | ||
|
|
||
| const Language = { | ||
| outdatedLabel: "Outdated", | ||
| versionTooltipText: "This workspace version is outdated and a newer version is available.", | ||
| updateVersionLabel: "Update version", | ||
| } | ||
|
|
||
| interface TooltipProps { | ||
| onUpdateVersion: () => void | ||
| } | ||
|
|
||
| export const OutdatedHelpTooltip: FC<TooltipProps> = ({ onUpdateVersion }) => { | ||
| return ( | ||
| <HelpTooltip size="small"> | ||
| <HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle> | ||
| <HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText> | ||
| <HelpTooltipLinksGroup> | ||
| <HelpTooltipAction icon={RefreshIcon} onClick={onUpdateVersion}> | ||
| {Language.updateVersionLabel} | ||
| </HelpTooltipAction> | ||
| </HelpTooltipLinksGroup> | ||
| </HelpTooltip> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { FC } from "react" | ||
| import { | ||
| HelpTooltip, | ||
| HelpTooltipLink, | ||
| HelpTooltipLinksGroup, | ||
| HelpTooltipText, | ||
| HelpTooltipTitle, | ||
| } from "./HelpTooltip" | ||
|
|
||
| const Language = { | ||
| workspaceTooltipTitle: "What is a workspace?", | ||
| workspaceTooltipText: | ||
| "A workspace is your development environment in the cloud. It includes the infrastructure and tools you need to work on your project.", | ||
| workspaceTooltipLink1: "Create workspaces", | ||
| workspaceTooltipLink2: "Connect with SSH", | ||
| workspaceTooltipLink3: "Editors and IDEs", | ||
| } | ||
|
|
||
| export const WorkspaceHelpTooltip: FC = () => { | ||
| return ( | ||
| <HelpTooltip> | ||
| <HelpTooltipTitle>{Language.workspaceTooltipTitle}</HelpTooltipTitle> | ||
| <HelpTooltipText>{Language.workspaceTooltipText}</HelpTooltipText> | ||
| <HelpTooltipLinksGroup> | ||
| <HelpTooltipLink href="https://github.com/coder/coder/blob/main/docs/workspaces.md#create-workspaces"> | ||
| {Language.workspaceTooltipLink1} | ||
| </HelpTooltipLink> | ||
| <HelpTooltipLink href="https://github.com/coder/coder/blob/main/docs/workspaces.md#connect-with-ssh"> | ||
| {Language.workspaceTooltipLink2} | ||
| </HelpTooltipLink> | ||
| <HelpTooltipLink href="https://github.com/coder/coder/blob/main/docs/workspaces.md#editors-and-ides"> | ||
| {Language.workspaceTooltipLink3} | ||
| </HelpTooltipLink> | ||
| </HelpTooltipLinksGroup> | ||
| </HelpTooltip> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export { AgentHelpTooltip } from "./AgentHelpTooltip" | ||
| export { OutdatedHelpTooltip } from "./OutdatedHelpTooltip" | ||
| export { ResourcesHelpTooltip } from "./ResourcesHelpTooltip" | ||
| export { WorkspaceHelpTooltip } from "./WorkspaceHelpTooltip" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import { fade, makeStyles, Theme } from "@material-ui/core/styles" | ||
| import TableRow from "@material-ui/core/TableRow" | ||
| import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" | ||
| import useTheme from "@material-ui/styles/useTheme" | ||
| import { useActor } from "@xstate/react" | ||
| import dayjs from "dayjs" | ||
| import relativeTime from "dayjs/plugin/relativeTime" | ||
| import { FC } from "react" | ||
| import { useNavigate } from "react-router-dom" | ||
| import { getDisplayStatus } from "../../util/workspace" | ||
| import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService" | ||
| import { AvatarData } from "../AvatarData/AvatarData" | ||
| import { TableCellLink } from "../TableCellLink/TableCellLink" | ||
| import { OutdatedHelpTooltip } from "../Tooltips" | ||
|
|
||
| dayjs.extend(relativeTime) | ||
|
|
||
| const Language = { | ||
| upToDateLabel: "Up to date", | ||
| outdatedLabel: "Outdated", | ||
| } | ||
|
|
||
| export const WorkspacesRow: 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 workspacePageLink = `/@${workspace.owner_name}/${workspace.name}` | ||
|
|
||
| return ( | ||
| <TableRow | ||
| hover | ||
| data-testid={`workspace-${workspace.id}`} | ||
| tabIndex={0} | ||
| onKeyDown={(event) => { | ||
| if (event.key === "Enter") { | ||
| navigate(workspacePageLink) | ||
| } | ||
| }} | ||
| className={styles.clickableTableRow} | ||
| > | ||
| <TableCellLink to={workspacePageLink}> | ||
| <AvatarData title={workspace.name} subtitle={workspace.owner_name} /> | ||
| </TableCellLink> | ||
| <TableCellLink to={workspacePageLink}>{workspace.template_name}</TableCellLink> | ||
| <TableCellLink to={workspacePageLink}> | ||
| {workspace.outdated ? ( | ||
| <span className={styles.outdatedLabel}> | ||
| {Language.outdatedLabel} | ||
| <OutdatedHelpTooltip | ||
| onUpdateVersion={() => { | ||
| send("UPDATE_VERSION") | ||
| }} | ||
| /> | ||
| </span> | ||
| ) : ( | ||
| <span style={{ color: theme.palette.text.secondary }}>{Language.upToDateLabel}</span> | ||
| )} | ||
| </TableCellLink> | ||
| <TableCellLink to={workspacePageLink}> | ||
| <span data-chromatic="ignore" style={{ color: theme.palette.text.secondary }}> | ||
| {dayjs().to(dayjs(workspace.latest_build.created_at))} | ||
| </span> | ||
| </TableCellLink> | ||
| <TableCellLink to={workspacePageLink}> | ||
| <span style={{ color: status.color }}>{status.status}</span> | ||
| </TableCellLink> | ||
| <TableCellLink to={workspacePageLink}> | ||
| <div className={styles.arrowCell}> | ||
| <KeyboardArrowRight className={styles.arrowRight} /> | ||
| </div> | ||
| </TableCellLink> | ||
| </TableRow> | ||
| ) | ||
| } | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| clickableTableRow: { | ||
| "&:hover td": { | ||
| backgroundColor: fade(theme.palette.primary.light, 0.1), | ||
| }, | ||
|
|
||
| "&:focus": { | ||
| outline: `1px solid ${theme.palette.secondary.dark}`, | ||
| }, | ||
|
|
||
| "& .MuiTableCell-root:last-child": { | ||
| paddingRight: theme.spacing(2), | ||
| }, | ||
| }, | ||
| arrowRight: { | ||
| color: fade(theme.palette.primary.contrastText, 0.7), | ||
| width: 20, | ||
| height: 20, | ||
| }, | ||
| arrowCell: { | ||
| display: "flex", | ||
| }, | ||
| outdatedLabel: { | ||
| color: theme.palette.error.main, | ||
| display: "flex", | ||
| alignItems: "center", | ||
| gap: theme.spacing(0.5), | ||
| }, | ||
| })) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import Table from "@material-ui/core/Table" | ||
| import TableBody from "@material-ui/core/TableBody" | ||
| import TableCell from "@material-ui/core/TableCell" | ||
| import TableHead from "@material-ui/core/TableHead" | ||
| import TableRow from "@material-ui/core/TableRow" | ||
| import { FC } from "react" | ||
| import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService" | ||
| import { WorkspacesTableBody } from "./WorkspacesTableBody" | ||
|
|
||
| const Language = { | ||
| name: "Name", | ||
| template: "Template", | ||
| version: "Version", | ||
| lastBuilt: "Last Built", | ||
| status: "Status", | ||
| } | ||
|
|
||
| export interface WorkspacesTableProps { | ||
| isLoading?: boolean | ||
| workspaceRefs?: WorkspaceItemMachineRef[] | ||
| filter?: string | ||
| } | ||
|
|
||
| export const WorkspacesTable: FC<WorkspacesTableProps> = ({ isLoading, workspaceRefs, filter }) => { | ||
| return ( | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell width="35%">{Language.name}</TableCell> | ||
| <TableCell width="15%">{Language.template}</TableCell> | ||
| <TableCell width="15%">{Language.version}</TableCell> | ||
| <TableCell width="20%">{Language.lastBuilt}</TableCell> | ||
| <TableCell width="15%">{Language.status}</TableCell> | ||
| <TableCell width="1%"></TableCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| <WorkspacesTableBody isLoading={isLoading} workspaceRefs={workspaceRefs} filter={filter} /> | ||
| </TableBody> | ||
| </Table> | ||
| ) | ||
| } |
69 changes: 69 additions & 0 deletions
69
site/src/components/WorkspacesTable/WorkspacesTableBody.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import Button from "@material-ui/core/Button" | ||
| import Link from "@material-ui/core/Link" | ||
| import TableCell from "@material-ui/core/TableCell" | ||
| import TableRow from "@material-ui/core/TableRow" | ||
| import AddCircleOutline from "@material-ui/icons/AddCircleOutline" | ||
| import { FC } from "react" | ||
| import { Link as RouterLink } from "react-router-dom" | ||
| import { workspaceFilterQuery } from "../../util/filters" | ||
| import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService" | ||
| import { EmptyState } from "../EmptyState/EmptyState" | ||
| import { TableLoader } from "../TableLoader/TableLoader" | ||
| import { WorkspacesRow } from "./WorkspacesRow" | ||
|
|
||
| export const Language = { | ||
| emptyCreateWorkspaceMessage: "Create your first workspace", | ||
| emptyCreateWorkspaceDescription: "Start editing your source code and building your software.", | ||
| createFromTemplateButton: "Create from template", | ||
| emptyResultsMessage: "No results matched your search", | ||
| } | ||
|
|
||
| interface TableBodyProps { | ||
| isLoading?: boolean | ||
| workspaceRefs?: WorkspaceItemMachineRef[] | ||
| filter?: string | ||
| } | ||
|
|
||
| export const WorkspacesTableBody: FC<TableBodyProps> = ({ isLoading, workspaceRefs, filter }) => { | ||
| if (isLoading) { | ||
| return <TableLoader /> | ||
| } | ||
|
|
||
| if (!workspaceRefs || !workspaceRefs.length) { | ||
| return ( | ||
| <> | ||
| {filter === workspaceFilterQuery.me || filter === workspaceFilterQuery.all ? ( | ||
| <TableRow> | ||
| <TableCell colSpan={999}> | ||
| <EmptyState | ||
| message={Language.emptyCreateWorkspaceMessage} | ||
| description={Language.emptyCreateWorkspaceDescription} | ||
| cta={ | ||
| <Link underline="none" component={RouterLink} to="/templates"> | ||
| <Button startIcon={<AddCircleOutline />}> | ||
| {Language.createFromTemplateButton} | ||
| </Button> | ||
| </Link> | ||
| } | ||
| /> | ||
| </TableCell> | ||
| </TableRow> | ||
| ) : ( | ||
| <TableRow> | ||
| <TableCell colSpan={999}> | ||
| <EmptyState message={Language.emptyResultsMessage} /> | ||
| </TableCell> | ||
| </TableRow> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {workspaceRefs.map((workspaceRef) => ( | ||
| <WorkspacesRow workspaceRef={workspaceRef} key={workspaceRef.id} /> | ||
| ))} | ||
| </> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice 👍🏼!