Skip to content

refactor: Workspace Page - Add section components #345

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
Feb 22, 2022
Merged

refactor: Workspace Page - Add section components #345

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
6be51fd
refactor: Add some simple workspace sections
bryphe-coder Feb 21, 2022
6434098
Remove unused QuestionHelp component
bryphe-coder Feb 21, 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
57 changes: 49 additions & 8 deletions site/components/Workspace/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,14 @@ import { makeStyles } from "@material-ui/core/styles"
import CloudCircleIcon from "@material-ui/icons/CloudCircle"
import Link from "next/link"
import React from "react"

import * as Constants from "./constants"
import * as API from "../../api"
import { WorkspaceSection } from "./WorkspaceSection"

export interface WorkspaceProps {
workspace: API.Workspace
}

namespace Constants {
export const TitleIconSize = 48
export const CardRadius = 8
export const CardPadding = 20
}

/**
* Workspace is the top-level component for viewing an individual workspace
*/
Expand All @@ -26,7 +21,32 @@ export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {

return (
<div className={styles.root}>
<WorkspaceHeader workspace={workspace} />
<div className={styles.vertical}>
<WorkspaceHeader workspace={workspace} />
<div className={styles.horizontal}>
<div className={styles.sidebarContainer}>
<WorkspaceSection title="Applications">
<Placeholder />
</WorkspaceSection>
<WorkspaceSection title="Dev URLs">
<Placeholder />
</WorkspaceSection>
<WorkspaceSection title="Resources">
<Placeholder />
</WorkspaceSection>
</div>
<div className={styles.timelineContainer}>
<WorkspaceSection title="Timeline">
<div
className={styles.vertical}
style={{ justifyContent: "center", alignItems: "center", height: "300px" }}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I used inline styles here since this was just a placeholder - figured it'd be OK since (hopefully) this goes away soon! Let me know if you'd prefer to have them factored out into useStyles block, though.

Copy link
Member

Choose a reason for hiding this comment

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

I think there's always a time and a place for inline styles, and this seems entirely reasonable to me!

>
<Placeholder />
</div>
</WorkspaceSection>
</div>
</div>
</div>
</div>
)
}
Expand Down Expand Up @@ -63,6 +83,18 @@ export const WorkspaceHeroIcon: React.FC = () => {
)
}

/**
* Temporary placeholder component until we have the sections implemented
* Can be removed once the Workspace page has all the necessary sections
*/
const Placeholder: React.FC = () => {
return (
<div style={{ textAlign: "center", opacity: "0.5" }}>
<Typography variant="caption">Not yet implemented</Typography>
</div>
)
}

export const useStyles = makeStyles((theme) => {
return {
root: {
Expand All @@ -81,6 +113,15 @@ export const useStyles = makeStyles((theme) => {
border: `1px solid ${theme.palette.divider}`,
borderRadius: Constants.CardRadius,
padding: Constants.CardPadding,
margin: theme.spacing(1),
},
sidebarContainer: {
display: "flex",
flexDirection: "column",
flex: "0 0 350px",
},
timelineContainer: {
flex: 1,
},
icon: {
width: Constants.TitleIconSize,
Expand Down
48 changes: 48 additions & 0 deletions site/components/Workspace/WorkspaceSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import Paper from "@material-ui/core/Paper"
import { makeStyles } from "@material-ui/core/styles"
import Typography from "@material-ui/core/Typography"
import React from "react"
import { CardPadding, CardRadius } from "./constants"

export interface WorkspaceSectionProps {
title: string
}

export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
const styles = useStyles()

return (
<Paper elevation={0} className={styles.root}>
<div className={styles.headerContainer}>
<div className={styles.header}>
<Typography variant="h6">{title}</Typography>
</div>
</div>

<div className={styles.contents}>{children}</div>
</Paper>
)
}

const useStyles = makeStyles((theme) => ({
root: {
border: `1px solid ${theme.palette.divider}`,
borderRadius: CardRadius,
margin: theme.spacing(1),
},
headerContainer: {
borderBottom: `1px solid ${theme.palette.divider}`,
},
contents: {
margin: theme.spacing(2),
},
header: {
alignItems: "center",
display: "flex",
flexDirection: "row",
marginBottom: theme.spacing(1),
marginTop: theme.spacing(1),
paddingLeft: CardPadding + theme.spacing(1),
paddingRight: CardPadding / 2,
},
}))
3 changes: 3 additions & 0 deletions site/components/Workspace/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const TitleIconSize = 48
Copy link
Contributor

Choose a reason for hiding this comment

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

Love that you're factoring out these and the section component - I imagine we'll add theming but it'll be easy to make changes from here. Something I just thought of - we're on MUI 4 in v1 but MUI 5 is out, have you considered using it for v2? I don't know how much change it requires for copy-pasted code, maybe we can talk about it at a FE V if you haven't already looked into it.

export const CardRadius = 8
export const CardPadding = 20