May 20, 2022 · May 20, 2022 · May 20, 2022 · May 20, 2022 · May 20, 2022
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
 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
  workspaceStatus: WorkspaceStatus
  builds?: TypesGen.WorkspaceBuild[]
 }
 * 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,
 }) => {
          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>

          <div className={styles.timelineContainer}>
            <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
              <BuildsTable builds={builds} className={styles.timelineTable} />
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx
 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",
 }
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
 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 (
    <Paperelevation={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>
      )}
  header: {
    alignItems: "center",
    display: "flex",
 flexDirection: "row",
 justifyContent: "space-between",
    marginBottom: theme.spacing(1),
    marginTop: theme.spacing(1),
    paddingLeft: CardPadding + theme.spacing(1),
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 ContributorAuthor greyscaledMay 20, 2022 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. jsjoeio reacted with thumbs up emoji
		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 ContributorAuthor greyscaledMay 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! jsjoeio reacted with thumbs up emoji
		<div className={styles.timelineContainer}>
		<WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
		<BuildsTable builds={builds} className={styles.timelineTable} />
Expand Down
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 ContributorAuthor greyscaledMay 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. jsjoeio reacted with thumbs up emoji
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 (
		<Paperelevation={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