Skip to content

fix: Fix responsive for workspaces and workspace page #3189

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
Jul 26, 2022
Merged

fix: Fix responsive for workspaces and workspace page #3189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c5d16d5
fix: Fix responsive for workspaces and workspace page
BrunoQuaresma Jul 25, 2022
7d3814d
Fix lint
BrunoQuaresma Jul 25, 2022
2383903
Merge branch 'main' of github.com:coder/coder into bq/add-responsive-…
BrunoQuaresma Jul 26, 2022
677b19f
Fix buttons
BrunoQuaresma Jul 26, 2022
6dead46
Fix viewport
BrunoQuaresma Jul 26, 2022
3a0fd3e
Revert test using table role
BrunoQuaresma Jul 26, 2022
8c5e0d3
Fix testid prop
BrunoQuaresma Jul 26, 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
131 changes: 67 additions & 64 deletions site/src/components/BuildsTable/BuildsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { fade, makeStyles, Theme } from "@material-ui/core/styles"
import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import TableContainer from "@material-ui/core/TableContainer"
import TableHead from "@material-ui/core/TableHead"
import TableRow from "@material-ui/core/TableRow"
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
Expand Down Expand Up @@ -37,72 +38,74 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
const styles = useStyles()

return (
<Table className={className} data-testid="builds-table">
<TableHead>
<TableRow>
<TableCell width="20%">{Language.actionLabel}</TableCell>
<TableCell width="20%">{Language.durationLabel}</TableCell>
<TableCell width="40%">{Language.startedAtLabel}</TableCell>
<TableCell width="20%">{Language.statusLabel}</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{isLoading && <TableLoader />}
{builds &&
builds.map((build) => {
const status = getDisplayWorkspaceBuildStatus(theme, build)
const buildPageLink = `/@${username}/${workspaceName}/builds/${build.build_number}`

return (
<TableRow
hover
key={build.id}
data-testid={`build-${build.id}`}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === "Enter") {
navigate(buildPageLink)
}
}}
className={styles.clickableTableRow}
>
<TableCellLink to={buildPageLink}>{build.transition}</TableCellLink>
<TableCellLink to={buildPageLink}>
<span style={{ color: theme.palette.text.secondary }}>
{displayWorkspaceBuildDuration(build)}
</span>
</TableCellLink>
<TableCellLink to={buildPageLink}>
<span style={{ color: theme.palette.text.secondary }}>
{new Date(build.created_at).toLocaleString()}
</span>
</TableCellLink>
<TableCellLink to={buildPageLink}>
<span style={{ color: status.color }} className={styles.status}>
{status.status}
</span>
</TableCellLink>
<TableCellLink to={buildPageLink}>
<div className={styles.arrowCell}>
<KeyboardArrowRight className={styles.arrowRight} />
</div>
</TableCellLink>
</TableRow>
)
})}

{builds && builds.length === 0 && (
<TableContainer className={className}>
<Table data-testid="builds-table" aria-describedby="builds table">
<TableHead>
<TableRow>
<TableCell colSpan={999}>
<Box p={4}>
<EmptyState message={Language.emptyMessage} />
</Box>
</TableCell>
<TableCell width="20%">{Language.actionLabel}</TableCell>
<TableCell width="20%">{Language.durationLabel}</TableCell>
<TableCell width="40%">{Language.startedAtLabel}</TableCell>
<TableCell width="20%">{Language.statusLabel}</TableCell>
<TableCell></TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableHead>
<TableBody>
{isLoading && <TableLoader />}
{builds &&
builds.map((build) => {
const status = getDisplayWorkspaceBuildStatus(theme, build)
const buildPageLink = `/@${username}/${workspaceName}/builds/${build.build_number}`

return (
<TableRow
hover
key={build.id}
data-testid={`build-${build.id}`}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === "Enter") {
navigate(buildPageLink)
}
}}
className={styles.clickableTableRow}
>
<TableCellLink to={buildPageLink}>{build.transition}</TableCellLink>
<TableCellLink to={buildPageLink}>
<span style={{ color: theme.palette.text.secondary }}>
{displayWorkspaceBuildDuration(build)}
</span>
</TableCellLink>
<TableCellLink to={buildPageLink}>
<span style={{ color: theme.palette.text.secondary }}>
{new Date(build.created_at).toLocaleString()}
</span>
</TableCellLink>
<TableCellLink to={buildPageLink}>
<span style={{ color: status.color }} className={styles.status}>
{status.status}
</span>
</TableCellLink>
<TableCellLink to={buildPageLink}>
<div className={styles.arrowCell}>
<KeyboardArrowRight className={styles.arrowRight} />
</div>
</TableCellLink>
</TableRow>
)
})}

{builds && builds.length === 0 && (
<TableRow>
<TableCell colSpan={999}>
<Box p={4}>
<EmptyState message={Language.emptyMessage} />
</Box>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
)
}

Expand Down
19 changes: 16 additions & 3 deletions site/src/components/PageHeader/PageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ export const PageHeader: React.FC<PageHeaderProps> = ({ children, actions, class
return (
<div className={combineClasses([styles.root, className])}>
<hgroup>{children}</hgroup>
<Stack direction="row" className={styles.actions}>
{actions}
</Stack>
{actions && (
<Stack direction="row" className={styles.actions}>
{actions}
</Stack>
)}
</div>
)
}
Expand All @@ -38,6 +40,11 @@ const useStyles = makeStyles((theme) => ({
alignItems: "center",
paddingTop: theme.spacing(6),
paddingBottom: theme.spacing(5),

[theme.breakpoints.down("sm")]: {
flexDirection: "column",
alignItems: "flex-start",
},
},

title: {
Expand All @@ -60,5 +67,11 @@ const useStyles = makeStyles((theme) => ({

actions: {
marginLeft: "auto",

[theme.breakpoints.down("sm")]: {
marginTop: theme.spacing(3),
marginLeft: "initial",
width: "100%",
},
},
}))
183 changes: 93 additions & 90 deletions site/src/components/Resources/Resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { makeStyles, Theme } from "@material-ui/core/styles"
import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import TableContainer from "@material-ui/core/TableContainer"
import TableHead from "@material-ui/core/TableHead"
import TableRow from "@material-ui/core/TableRow"
import useTheme from "@material-ui/styles/useTheme"
Expand Down Expand Up @@ -46,101 +47,103 @@ export const Resources: FC<ResourcesProps> = ({
{getResourcesError ? (
{ getResourcesError }
) : (
<Table className={styles.table}>
<TableHead>
<TableHeaderRow>
<TableCell>
<Stack direction="row" spacing={0.5} alignItems="center">
{Language.resourceLabel}
<ResourcesHelpTooltip />
</Stack>
</TableCell>
<TableCell className={styles.agentColumn}>
<Stack direction="row" spacing={0.5} alignItems="center">
{Language.agentLabel}
<AgentHelpTooltip />
</Stack>
</TableCell>
{canUpdateWorkspace && <TableCell></TableCell>}
</TableHeaderRow>
</TableHead>
<TableBody>
{resources?.map((resource) => {
{
/* We need to initialize the agents to display the resource */
}
const agents = resource.agents ?? [null]
const resourceName = (
<AvatarData
avatar={<ResourceAvatar type={resource.type} />}
title={resource.name}
subtitle={resource.type}
highlightTitle
/>
)

return agents.map((agent, agentIndex) => {
<TableContainer className={styles.tableContainer}>
<Table>
<TableHead>
<TableHeaderRow>
<TableCell>
<Stack direction="row" spacing={0.5} alignItems="center">
{Language.resourceLabel}
<ResourcesHelpTooltip />
</Stack>
</TableCell>
<TableCell className={styles.agentColumn}>
<Stack direction="row" spacing={0.5} alignItems="center">
{Language.agentLabel}
<AgentHelpTooltip />
</Stack>
</TableCell>
{canUpdateWorkspace && <TableCell></TableCell>}
</TableHeaderRow>
</TableHead>
<TableBody>
{resources?.map((resource) => {
{
/* If there is no agent, just display the resource name */
}
if (!agent) {
return (
<TableRow key={`${resource.id}-${agentIndex}`}>
<TableCell>{resourceName}</TableCell>
<TableCell colSpan={3}></TableCell>
</TableRow>
)
/* We need to initialize the agents to display the resource */
}
const agents = resource.agents ?? [null]
const resourceName = (
<AvatarData
avatar={<ResourceAvatar type={resource.type} />}
title={resource.name}
subtitle={resource.type}
highlightTitle
/>
)

const agentStatus = getDisplayAgentStatus(theme, agent)
return (
<TableRow key={`${resource.id}-${agent.id}`}>
{/* We only want to display the name in the first row because we are using rowSpan */}
{/* The rowspan should be the same than the number of agents */}
{agentIndex === 0 && (
<TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
{resourceName}
return agents.map((agent, agentIndex) => {
{
/* If there is no agent, just display the resource name */
}
if (!agent) {
return (
<TableRow key={`${resource.id}-${agentIndex}`}>
<TableCell>{resourceName}</TableCell>
<TableCell colSpan={3}></TableCell>
</TableRow>
)
}

const agentStatus = getDisplayAgentStatus(theme, agent)
return (
<TableRow key={`${resource.id}-${agent.id}`}>
{/* We only want to display the name in the first row because we are using rowSpan */}
{/* The rowspan should be the same than the number of agents */}
{agentIndex === 0 && (
<TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
{resourceName}
</TableCell>
)}

<TableCell className={styles.agentColumn}>
{agent.name}
<div className={styles.agentInfo}>
<span className={styles.operatingSystem}>{agent.operating_system}</span>
<span style={{ color: agentStatus.color }} className={styles.status}>
{agentStatus.status}
</span>
</div>
</TableCell>
)}

<TableCell className={styles.agentColumn}>
{agent.name}
<div className={styles.agentInfo}>
<span className={styles.operatingSystem}>{agent.operating_system}</span>
<span style={{ color: agentStatus.color }} className={styles.status}>
{agentStatus.status}
</span>
</div>
</TableCell>
<TableCell>
<>
{canUpdateWorkspace && agent.status === "connected" && (
<div className={styles.accessLinks}>
<SSHButton workspaceName={workspace.name} agentName={agent.name} />
<TerminalLink
workspaceName={workspace.name}
agentName={agent.name}
userName={workspace.owner_name}
/>
{agent.apps.map((app) => (
<AppLink
key={app.name}
appIcon={app.icon}
appName={app.name}
userName={workspace.owner_name}
<TableCell>
<>
{canUpdateWorkspace && agent.status === "connected" && (
<div className={styles.accessLinks}>
<SSHButton workspaceName={workspace.name} agentName={agent.name} />
<TerminalLink
workspaceName={workspace.name}
agentName={agent.name}
userName={workspace.owner_name}
/>
))}
</div>
)}
</>
</TableCell>
</TableRow>
)
})
})}
</TableBody>
</Table>
{agent.apps.map((app) => (
<AppLink
key={app.name}
appIcon={app.icon}
appName={app.name}
userName={workspace.owner_name}
workspaceName={workspace.name}
/>
))}
</div>
)}
</>
</TableCell>
</TableRow>
)
})
})}
</TableBody>
</Table>
</TableContainer>
)}
</div>
)
Expand All @@ -152,7 +155,7 @@ const useStyles = makeStyles((theme) => ({
border: `1px solid ${theme.palette.divider}`,
},

table: {
tableContainer: {
border: 0,
},

Expand Down
Loading