Skip to content

feat: WorkspaceSection action #1623

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 1 commit into from
May 20, 2022
Merged

feat: WorkspaceSection action #1623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
feat: WorkspaceSection action, styles 
This PR is a squash of refactors and improvements in our Workspace and
WorkspaceSection components. An action prop is added to WorkspaceSection
and along the way, I refactored things that were not meeting conventions
or were hard to read. With this addition, I am further unblocked in
making auto-start/off editable in the UI, as I intend to use the Action
prop to trigger a modal (or routed page view) with the form.

Squashed commits:

* refactor: spaces for readability
It's hard to read HTMl markup without spaces on adjacent nodes

* refactor: props
Our components had unused props and arbitrary ordering.
  • Loading branch information
@greyscaled
greyscaled committed May 20, 2022
commit ba3794dc7f217f66b8cccb247f85ea72eefcb336
10 changes: 6 additions & 4 deletions site/src/components/Workspace/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"

export interface WorkspaceProps {
organization?: TypesGen.Organization
workspace: TypesGen.Workspace
template?: TypesGen.Template
handleStart: () => void
handleStop: () => void
handleRetry: () => void
handleUpdate: () => void
workspace: TypesGen.Workspace
Comment on lines -12 to +16
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Review:

  • oraganization and template were unused (note this is one caveat when a prop is optional, we don't really know if we're even using it. I wonder if there's a lint rule that can help with that, but suffice it to say I just checked which of these the component was de-structuring. Also this is why de-structuring props is superior to the prop arg...it's helpful to see where everything is being used with a simple find/replace).
  • Furthermore, the grouping was odd. I'll add a note about organizing props in our FE V, but essentially, I think what I see in most codebases is alphabetical but mandatory props are grouped in front of optional props. We can also use a different convention, what matters to me is "at a glance" behaviors. Mix-n-match requires more brain power to read.

workspaceStatus: WorkspaceStatus
builds?: TypesGen.WorkspaceBuild[]
}
Expand All @@ -24,11 +22,11 @@ export interface WorkspaceProps {
* Workspace is the top-level component for viewing an individual workspace
*/
export const Workspace: React.FC<WorkspaceProps> = ({
workspace,
handleStart,
handleStop,
handleRetry,
handleUpdate,
workspace,
workspaceStatus,
builds,
}) => {
Expand All @@ -45,19 +43,23 @@ export const Workspace: React.FC<WorkspaceProps> = ({
handleUpdate={handleUpdate}
workspaceStatus={workspaceStatus}
/>

<div className={styles.horizontal}>
<div className={styles.sidebarContainer}>
<WorkspaceSection title="Applications">
<Placeholder />
</WorkspaceSection>
<WorkspaceSchedule workspace={workspace} />

<WorkspaceSection title="Dev URLs">
<Placeholder />
</WorkspaceSection>

<WorkspaceSection title="Resources">
<Placeholder />
</WorkspaceSection>
</div>

Copy link
Contributor Author

@greyscaled greyscaled May 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Review: Will add this to FE V and search for lint rule. zero spaces in HTML markup makes me dizzy!

<div className={styles.timelineContainer}>
<WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
<BuildsTable builds={builds} className={styles.timelineTable} />
Expand Down
28 changes: 28 additions & 0 deletions site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import IconButton from "@material-ui/core/IconButton"
import EditIcon from "@material-ui/icons/Edit"
import { action } from "@storybook/addon-actions"
import { Story } from "@storybook/react"
import React from "react"
import { WorkspaceSection, WorkspaceSectionProps } from "./WorkspaceSection"

export default {
title: "components/WorkspaceSection",
component: WorkspaceSection,
}

const Template: Story<WorkspaceSectionProps> = (args) => <WorkspaceSection {...args}>Content</WorkspaceSection>

export const NoAction = Template.bind({})
NoAction.args = {
title: "A Workspace Section",
}

export const Action = Template.bind({})
Action.args = {
action: (
<IconButton onClick={action("edit")}>
<EditIcon />
</IconButton>
),
title: "Action Section",
}
Copy link
Contributor Author

@greyscaled greyscaled May 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Review: We forgot to add this story additionally, but now it's here and with two examples. I couldn't think of an example for contentProps because it's mostly used to inject styles or classes.

13 changes: 9 additions & 4 deletions site/src/components/WorkspaceSection/WorkspaceSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,24 @@ import { CardPadding, CardRadius } from "../../theme/constants"
import { combineClasses } from "../../util/combineClasses"

export interface WorkspaceSectionProps {
title?: string
/**
* action appears in the top right of the section card
*/
action?: React.ReactNode
contentsProps?: HTMLProps<HTMLDivElement>
title?: string
}

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

return (
<Paper elevation={0} className={styles.root}>
<Paper className={styles.root} elevation={0}>
{title && (
<div className={styles.headerContainer}>
<div className={styles.header}>
<Typography variant="h6">{title}</Typography>
{action && <div>{action}</div>}
</div>
</div>
)}
Expand All @@ -45,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
header: {
alignItems: "center",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginBottom: theme.spacing(1),
marginTop: theme.spacing(1),
paddingLeft: CardPadding + theme.spacing(1),
Expand Down