diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 82fb546bc5f59..c8b4b87f2eea5 100644 --- 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 = ({ - workspace, handleStart, handleStop, handleRetry, handleUpdate, + workspace, workspaceStatus, builds, }) => { @@ -45,19 +43,23 @@ export const Workspace: React.FC = ({ handleUpdate={handleUpdate} workspaceStatus={workspaceStatus} /> +
+ +
+
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx new file mode 100644 index 0000000000000..caf13f16e82f4 --- /dev/null +++ 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 = (args) => Content + +export const NoAction = Template.bind({}) +NoAction.args = { + title: "A Workspace Section", +} + +export const Action = Template.bind({}) +Action.args = { + action: ( + + + + ), + title: "Action Section", +} diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx index 73dac822eb8d6..fd02ab2c66a99 100644 --- 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 + title?: string } -export const WorkspaceSection: React.FC = ({ title, children, contentsProps }) => { +export const WorkspaceSection: React.FC = ({ action, children, contentsProps, title }) => { const styles = useStyles() return ( - + {title && (
{title} + {action &&
{action}
}
)} @@ -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), pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy