feat: WorkspaceSection action, styles (#1623)

greyscaled · web-flow · commit 4f70f8463504 · 2022-05-20T11:55:39.000-04:00
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.
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -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
   workspaceStatus: WorkspaceStatus
   builds?: TypesGen.WorkspaceBuild[]
 }
@@ -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,
 }) => {
@@ -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>
+
           <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
@@ -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",
+}
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -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>
       )}
@@ -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),
