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

Commitd28e973

Browse files
presleypgreyscaled
authored andcommitted
feat: Workspace StatusBar (#1362)
* Move component and prep* Make WorkspaceSection more reusable* Lay out elements* Layout tweaks* Add outdated to Workspace type* Fill out status bar component* Format* Add transition to types* Add api handlers for build toggle* Format* Parallelize machine* Lay out basics of build submachine* Pipe start and stop events through - needs status* Attempt at a machineIt's so big, but collapsing start and stop made it hard to distinguish retry from toggle* Update mock* Render status and buttons* Fix type error on template page* Move Settings* Format* Keep refreshed workspace* Make it switch workspaces* Lint* Fix relative api path* Test* Fix polling* Add loading workspace state* Format* Add stub settings page* Format* Lint* Get rid of let* Add update* Make start use version idImportant for update* Fix imports* Add polling for outdated* Rely on context instead of finite state for status* Handle canceling* Fix tests* Format* Display errors so users know when button presses didn't work* Fix api typo, remove logging* Lint* Simplify typeCo-authored-by: G r e y <grey@coder.com>* Add type, extract helperCo-authored-by: G r e y <grey@coder.com>
1 parent8d53c0e commitd28e973

File tree

17 files changed

+725
-125
lines changed

17 files changed

+725
-125
lines changed

‎site/src/AppRouter.tsx

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
1818
import{CreateUserPage}from"./pages/UsersPage/CreateUserPage/CreateUserPage"
1919
import{UsersPage}from"./pages/UsersPage/UsersPage"
2020
import{WorkspacePage}from"./pages/WorkspacePage/WorkspacePage"
21+
import{WorkspaceSettingsPage}from"./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"
2122

2223
constTerminalPage=React.lazy(()=>import("./pages/TerminalPage/TerminalPage"))
2324

@@ -75,14 +76,24 @@ export const AppRouter: React.FC = () => (
7576
</Route>
7677

7778
<Routepath="workspaces">
78-
<Route
79-
path=":workspace"
80-
element={
81-
<AuthAndFrame>
82-
<WorkspacePage/>
83-
</AuthAndFrame>
84-
}
85-
/>
79+
<Routepath=":workspace">
80+
<Route
81+
index
82+
element={
83+
<AuthAndFrame>
84+
<WorkspacePage/>
85+
</AuthAndFrame>
86+
}
87+
/>
88+
<Route
89+
path="edit"
90+
element={
91+
<AuthAndFrame>
92+
<WorkspaceSettingsPage/>
93+
</AuthAndFrame>
94+
}
95+
/>
96+
</Route>
8697
</Route>
8798

8899
<Routepath="users">

‎site/src/api/api.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
importaxios,{AxiosRequestHeaders}from"axios"
22
import{mutate}from"swr"
3+
import{WorkspaceBuildTransition}from"./types"
34
import*asTypesGenfrom"./typesGenerated"
45

56
constCONTENT_TYPE_JSON:AxiosRequestHeaders={
@@ -132,6 +133,21 @@ export const getWorkspaceResources = async (workspaceBuildID: string): Promise<T
132133
returnresponse.data
133134
}
134135

136+
constpostWorkspaceBuild=
137+
(transition:WorkspaceBuildTransition)=>
138+
async(workspaceId:string,template_version_id?:string):Promise<TypesGen.WorkspaceBuild>=>{
139+
constpayload={
140+
transition,
141+
template_version_id,
142+
}
143+
constresponse=awaitaxios.post(`/api/v2/workspaces/${workspaceId}/builds`,payload)
144+
returnresponse.data
145+
}
146+
147+
exportconststartWorkspace=postWorkspaceBuild("start")
148+
exportconststopWorkspace=postWorkspaceBuild("stop")
149+
exportconstdeleteWorkspace=postWorkspaceBuild("delete")
150+
135151
exportconstcreateUser=async(user:TypesGen.CreateUserRequest):Promise<TypesGen.User>=>{
136152
constresponse=awaitaxios.post<TypesGen.User>("/api/v2/users",user)
137153
returnresponse.data

‎site/src/api/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,5 @@ export interface ReconnectingPTYRequest {
1010
readonlyheight?:number
1111
readonlywidth?:number
1212
}
13+
14+
exporttypeWorkspaceBuildTransition="start"|"stop"|"delete"
Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import{action}from"@storybook/addon-actions"
12
import{Story}from"@storybook/react"
23
importReactfrom"react"
3-
import{MockOrganization,MockTemplate,MockWorkspace}from"../../testHelpers/renderHelpers"
4+
import{MockOrganization,MockOutdatedWorkspace,MockTemplate,MockWorkspace}from"../../testHelpers/renderHelpers"
45
import{Workspace,WorkspaceProps}from"./Workspace"
56

67
exportdefault{
@@ -11,9 +12,43 @@ export default {
1112

1213
constTemplate:Story<WorkspaceProps>=(args)=><Workspace{...args}/>
1314

14-
exportconstExample=Template.bind({})
15-
Example.args={
15+
exportconstStarted=Template.bind({})
16+
Started.args={
1617
organization:MockOrganization,
1718
template:MockTemplate,
1819
workspace:MockWorkspace,
20+
handleStart:action("start"),
21+
handleStop:action("stop"),
22+
handleRetry:action("retry"),
23+
workspaceStatus:"started",
1924
}
25+
26+
exportconstStarting=Template.bind({})
27+
Starting.args={ ...Started.args,workspaceStatus:"starting"}
28+
29+
exportconstStopped=Template.bind({})
30+
Stopped.args={ ...Started.args,workspaceStatus:"stopped"}
31+
32+
exportconstStopping=Template.bind({})
33+
Stopping.args={ ...Started.args,workspaceStatus:"stopping"}
34+
35+
exportconstError=Template.bind({})
36+
Error.args={ ...Started.args,workspaceStatus:"error"}
37+
38+
exportconstBuildLoading=Template.bind({})
39+
BuildLoading.args={ ...Started.args,workspaceStatus:"loading"}
40+
41+
exportconstDeleting=Template.bind({})
42+
Deleting.args={ ...Started.args,workspaceStatus:"deleting"}
43+
44+
exportconstDeleted=Template.bind({})
45+
Deleted.args={ ...Started.args,workspaceStatus:"deleted"}
46+
47+
exportconstCanceling=Template.bind({})
48+
Canceling.args={ ...Started.args,workspaceStatus:"canceling"}
49+
50+
exportconstNoBreadcrumb=Template.bind({})
51+
NoBreadcrumb.args={ ...Started.args,template:undefined}
52+
53+
exportconstOutdated=Template.bind({})
54+
Outdated.args={ ...Started.args,workspace:MockOutdatedWorkspace}

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

Lines changed: 0 additions & 15 deletions
This file was deleted.
Lines changed: 30 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,51 @@
1-
importBoxfrom"@material-ui/core/Box"
2-
importPaperfrom"@material-ui/core/Paper"
31
import{makeStyles}from"@material-ui/core/styles"
42
importTypographyfrom"@material-ui/core/Typography"
5-
importCloudCircleIconfrom"@material-ui/icons/CloudCircle"
63
importReactfrom"react"
7-
import{Link}from"react-router-dom"
84
import*asTypesGenfrom"../../api/typesGenerated"
5+
import{WorkspaceStatus}from"../../pages/WorkspacePage/WorkspacePage"
96
import{WorkspaceSchedule}from"../WorkspaceSchedule/WorkspaceSchedule"
107
import{WorkspaceSection}from"../WorkspaceSection/WorkspaceSection"
11-
import*asConstantsfrom"./constants"
8+
import{WorkspaceStatusBar}from"../WorkspaceStatusBar/WorkspaceStatusBar"
129

1310
exportinterfaceWorkspaceProps{
14-
organization:TypesGen.Organization
11+
organization?:TypesGen.Organization
1512
workspace:TypesGen.Workspace
16-
template:TypesGen.Template
13+
template?:TypesGen.Template
14+
handleStart:()=>void
15+
handleStop:()=>void
16+
handleRetry:()=>void
17+
handleUpdate:()=>void
18+
workspaceStatus:WorkspaceStatus
1719
}
1820

1921
/**
2022
* Workspace is the top-level component for viewing an individual workspace
2123
*/
22-
exportconstWorkspace:React.FC<WorkspaceProps>=({ organization, template, workspace})=>{
24+
exportconstWorkspace:React.FC<WorkspaceProps>=({
25+
organization,
26+
template,
27+
workspace,
28+
handleStart,
29+
handleStop,
30+
handleRetry,
31+
handleUpdate,
32+
workspaceStatus,
33+
})=>{
2334
conststyles=useStyles()
2435

2536
return(
2637
<divclassName={styles.root}>
2738
<divclassName={styles.vertical}>
28-
<WorkspaceHeaderorganization={organization}template={template}workspace={workspace}/>
39+
<WorkspaceStatusBar
40+
organization={organization}
41+
template={template}
42+
workspace={workspace}
43+
handleStart={handleStart}
44+
handleStop={handleStop}
45+
handleRetry={handleRetry}
46+
handleUpdate={handleUpdate}
47+
workspaceStatus={workspaceStatus}
48+
/>
2949
<divclassName={styles.horizontal}>
3050
<divclassName={styles.sidebarContainer}>
3151
<WorkspaceSectiontitle="Applications">
@@ -55,40 +75,6 @@ export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, wo
5575
)
5676
}
5777

58-
/**
59-
* Component for the header at the top of the workspace page
60-
*/
61-
exportconstWorkspaceHeader:React.FC<WorkspaceProps>=({ organization, template, workspace})=>{
62-
conststyles=useStyles()
63-
64-
consttemplateLink=`/templates/${organization.name}/${template.name}`
65-
66-
return(
67-
<Paperelevation={0}className={styles.section}>
68-
<divclassName={styles.horizontal}>
69-
<WorkspaceHeroIcon/>
70-
<divclassName={styles.vertical}>
71-
<Typographyvariant="h4">{workspace.name}</Typography>
72-
<Typographyvariant="body2"color="textSecondary">
73-
<Linkto={templateLink}>{template.name}</Link>
74-
</Typography>
75-
</div>
76-
</div>
77-
</Paper>
78-
)
79-
}
80-
81-
/**
82-
* Component to render the 'Hero Icon' in the header of a workspace
83-
*/
84-
exportconstWorkspaceHeroIcon:React.FC=()=>{
85-
return(
86-
<Boxmr="1em">
87-
<CloudCircleIconwidth={Constants.TitleIconSize}height={Constants.TitleIconSize}/>
88-
</Box>
89-
)
90-
}
91-
9278
/**
9379
* Temporary placeholder component until we have the sections implemented
9480
* Can be removed once the Workspace page has all the necessary sections
@@ -101,7 +87,7 @@ const Placeholder: React.FC = () => {
10187
)
10288
}
10389

104-
exportconstuseStyles=makeStyles((theme)=>{
90+
exportconstuseStyles=makeStyles(()=>{
10591
return{
10692
root:{
10793
display:"flex",
@@ -115,12 +101,6 @@ export const useStyles = makeStyles((theme) => {
115101
display:"flex",
116102
flexDirection:"column",
117103
},
118-
section:{
119-
border:`1px solid${theme.palette.divider}`,
120-
borderRadius:Constants.CardRadius,
121-
padding:Constants.CardPadding,
122-
margin:theme.spacing(1),
123-
},
124104
sidebarContainer:{
125105
display:"flex",
126106
flexDirection:"column",
@@ -129,9 +109,5 @@ export const useStyles = makeStyles((theme) => {
129109
timelineContainer:{
130110
flex:1,
131111
},
132-
icon:{
133-
width:Constants.TitleIconSize,
134-
height:Constants.TitleIconSize,
135-
},
136112
}
137113
})

‎site/src/components/Workspace/constants.ts

Lines changed: 0 additions & 3 deletions
This file was deleted.

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,24 @@ import Paper from "@material-ui/core/Paper"
22
import{makeStyles}from"@material-ui/core/styles"
33
importTypographyfrom"@material-ui/core/Typography"
44
importReactfrom"react"
5-
import{CardPadding,CardRadius}from"../Workspace/constants"
5+
import{CardPadding,CardRadius}from"../../theme/constants"
66

77
exportinterfaceWorkspaceSectionProps{
8-
title:string
8+
title?:string
99
}
1010

1111
exportconstWorkspaceSection:React.FC<WorkspaceSectionProps>=({ title, children})=>{
1212
conststyles=useStyles()
1313

1414
return(
1515
<Paperelevation={0}className={styles.root}>
16-
<divclassName={styles.headerContainer}>
17-
<divclassName={styles.header}>
18-
<Typographyvariant="h6">{title}</Typography>
16+
{title&&(
17+
<divclassName={styles.headerContainer}>
18+
<divclassName={styles.header}>
19+
<Typographyvariant="h6">{title}</Typography>
20+
</div>
1921
</div>
20-
</div>
22+
)}
2123

2224
<divclassName={styles.contents}>{children}</div>
2325
</Paper>

0 commit comments

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