Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitc459928

Browse files
greyscaledkylecarbs
authored andcommitted
feat: WorkspaceSection action, styles (#1623)
This PR is a squash of refactors and improvements in our Workspace andWorkspaceSection components. An action prop is added to WorkspaceSectionand along the way, I refactored things that were not meeting conventionsor were hard to read. With this addition, I am further unblocked inmaking auto-start/off editable in the UI, as I intend to use the Actionprop to trigger a modal (or routed page view) with the form.Squashed commits:* refactor: spaces for readabilityIt's hard to read HTMl markup without spaces on adjacent nodes* refactor: propsOur components had unused props and arbitrary ordering.
1 parent8bb8d91 commitc459928

File tree

3 files changed

+43
-8
lines changed

3 files changed

+43
-8
lines changed

‎site/src/components/Workspace/Workspace.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
99
import{WorkspaceStatusBar}from"../WorkspaceStatusBar/WorkspaceStatusBar"
1010

1111
exportinterfaceWorkspaceProps{
12-
organization?:TypesGen.Organization
13-
workspace:TypesGen.Workspace
14-
template?:TypesGen.Template
1512
handleStart:()=>void
1613
handleStop:()=>void
1714
handleRetry:()=>void
1815
handleUpdate:()=>void
16+
workspace:TypesGen.Workspace
1917
workspaceStatus:WorkspaceStatus
2018
builds?:TypesGen.WorkspaceBuild[]
2119
}
@@ -24,11 +22,11 @@ export interface WorkspaceProps {
2422
* Workspace is the top-level component for viewing an individual workspace
2523
*/
2624
exportconstWorkspace:React.FC<WorkspaceProps>=({
27-
workspace,
2825
handleStart,
2926
handleStop,
3027
handleRetry,
3128
handleUpdate,
29+
workspace,
3230
workspaceStatus,
3331
builds,
3432
})=>{
@@ -45,19 +43,23 @@ export const Workspace: React.FC<WorkspaceProps> = ({
4543
handleUpdate={handleUpdate}
4644
workspaceStatus={workspaceStatus}
4745
/>
46+
4847
<divclassName={styles.horizontal}>
4948
<divclassName={styles.sidebarContainer}>
5049
<WorkspaceSectiontitle="Applications">
5150
<Placeholder/>
5251
</WorkspaceSection>
5352
<WorkspaceScheduleworkspace={workspace}/>
53+
5454
<WorkspaceSectiontitle="Dev URLs">
5555
<Placeholder/>
5656
</WorkspaceSection>
57+
5758
<WorkspaceSectiontitle="Resources">
5859
<Placeholder/>
5960
</WorkspaceSection>
6061
</div>
62+
6163
<divclassName={styles.timelineContainer}>
6264
<WorkspaceSectiontitle="Timeline"contentsProps={{className:styles.timelineContents}}>
6365
<BuildsTablebuilds={builds}className={styles.timelineTable}/>
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
importIconButtonfrom"@material-ui/core/IconButton"
2+
importEditIconfrom"@material-ui/icons/Edit"
3+
import{action}from"@storybook/addon-actions"
4+
import{Story}from"@storybook/react"
5+
importReactfrom"react"
6+
import{WorkspaceSection,WorkspaceSectionProps}from"./WorkspaceSection"
7+
8+
exportdefault{
9+
title:"components/WorkspaceSection",
10+
component:WorkspaceSection,
11+
}
12+
13+
constTemplate:Story<WorkspaceSectionProps>=(args)=><WorkspaceSection{...args}>Content</WorkspaceSection>
14+
15+
exportconstNoAction=Template.bind({})
16+
NoAction.args={
17+
title:"A Workspace Section",
18+
}
19+
20+
exportconstAction=Template.bind({})
21+
Action.args={
22+
action:(
23+
<IconButtononClick={action("edit")}>
24+
<EditIcon/>
25+
</IconButton>
26+
),
27+
title:"Action Section",
28+
}

‎site/src/components/WorkspaceSection/WorkspaceSection.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,24 @@ import { CardPadding, CardRadius } from "../../theme/constants"
66
import{combineClasses}from"../../util/combineClasses"
77

88
exportinterfaceWorkspaceSectionProps{
9-
title?:string
9+
/**
10+
* action appears in the top right of the section card
11+
*/
12+
action?:React.ReactNode
1013
contentsProps?:HTMLProps<HTMLDivElement>
14+
title?:string
1115
}
1216

13-
exportconstWorkspaceSection:React.FC<WorkspaceSectionProps>=({title, children, contentsProps})=>{
17+
exportconstWorkspaceSection:React.FC<WorkspaceSectionProps>=({action, children, contentsProps, title})=>{
1418
conststyles=useStyles()
1519

1620
return(
17-
<Paperelevation={0}className={styles.root}>
21+
<PaperclassName={styles.root}elevation={0}>
1822
{title&&(
1923
<divclassName={styles.headerContainer}>
2024
<divclassName={styles.header}>
2125
<Typographyvariant="h6">{title}</Typography>
26+
{action&&<div>{action}</div>}
2227
</div>
2328
</div>
2429
)}
@@ -45,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
4550
header:{
4651
alignItems:"center",
4752
display:"flex",
48-
flexDirection:"row",
53+
justifyContent:"space-between",
4954
marginBottom:theme.spacing(1),
5055
marginTop:theme.spacing(1),
5156
paddingLeft:CardPadding+theme.spacing(1),

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp