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

Commit65ac0fb

Browse files
committed
feat: Redesign workspaces page (#1450)
* feat: Improve navbar to be more compactThe navbar was unnecessarily large before, which madethe UI feel a bit bloaty from my perspective.* Attempt to remove overrides* Update theme* Add text field* Update theme to dark!* Fix import ordering* Fix page location* Fix requested changes* Add storybook for workspaces page view* Add empty view* Add tests for empty view* Remove templates page* Fix local port* Remove templates from nav* Fix e2e test* Remove time.ts* Remove dep* Add background color to margins* Merge status checking from workspace page* Fix requested changes* Fix workspace status tests
1 parent8b9e1b4 commit65ac0fb

File tree

53 files changed

+624
-1741
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+624
-1741
lines changed

‎site/.storybook/preview.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
importCssBaselinefrom"@material-ui/core/CssBaseline"
22
importThemeProviderfrom"@material-ui/styles/ThemeProvider"
3-
import{withThemes}from"@react-theming/storybook-addon"
43
import{createMemoryHistory}from"history"
54
import{addDecorator}from"node_modules/@storybook/react"
65
import{unstable_HistoryRouterasHistoryRouter}from"react-router-dom"
7-
import{dark,light}from"../src/theme"
6+
import{dark}from"../src/theme"
87
import"../src/theme/globalFonts"
98

10-
constproviderFn=({ children, theme})=>(
11-
<ThemeProvidertheme={theme}>
9+
addDecorator((story)=>(
10+
<ThemeProvidertheme={dark}>
1211
<CssBaseline/>
13-
{children}
12+
{story()}
1413
</ThemeProvider>
15-
)
16-
17-
addDecorator(withThemes(null,[light,dark],{ providerFn}))
14+
))
1815

1916
consthistory=createMemoryHistory()
2017

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import{Page}from"@playwright/test"
22
import{BasePom}from"./BasePom"
33

4-
exportclassTemplatesPageextendsBasePom{
4+
exportclassWorkspacesPageextendsBasePom{
55
constructor(baseURL:string|undefined,page:Page){
6-
super(baseURL,"/templates",page)
6+
super(baseURL,"/workspaces",page)
77
}
88
}

‎site/e2e/pom/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export*from"./SignInPage"
2-
export*from"./TemplatesPage"
2+
export*from"./WorkspacesPage"

‎site/e2e/tests/login.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import{test}from"@playwright/test"
22
import{email,password}from"../constants"
3-
import{SignInPage,TemplatesPage}from"../pom"
3+
import{SignInPage,WorkspacesPage}from"../pom"
44
import{waitForClientSideNavigation}from"./../util"
55

6-
test("Login takes user to /templates",async({ baseURL, page})=>{
6+
test("Login takes user to /workspaces",async({ baseURL, page})=>{
77
awaitpage.goto(baseURL+"/",{waitUntil:"networkidle"})
88

99
// Log-in with the default credentials we set up in the development server
1010
constsignInPage=newSignInPage(baseURL,page)
1111
awaitsignInPage.submitBuiltInAuthentication(email,password)
1212

13-
consttemplatesPage=newTemplatesPage(baseURL,page)
14-
awaitwaitForClientSideNavigation(page,{to:templatesPage.url})
13+
constworkspacesPage=newWorkspacesPage(baseURL,page)
14+
awaitwaitForClientSideNavigation(page,{to:workspacesPage.url})
1515

16-
awaitpage.waitForSelector("text=Templates")
16+
awaitpage.waitForSelector("text=Workspaces")
1717
})

‎site/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"typegen":"xstate typegen 'src/**/*.ts'"
2626
},
2727
"dependencies": {
28-
"@fontsource/fira-code":"4.5.9",
28+
"@fontsource/ibm-plex-mono":"4.5.9",
2929
"@fontsource/inter":"4.5.7",
3030
"@material-ui/core":"4.9.4",
3131
"@material-ui/icons":"4.5.1",
@@ -35,6 +35,7 @@
3535
"@xstate/react":"3.0.0",
3636
"axios":"0.26.1",
3737
"cronstrue":"2.4.0",
38+
"dayjs":"^1.11.2",
3839
"formik":"2.2.9",
3940
"history":"5.3.0",
4041
"react":"17.0.2",
@@ -53,7 +54,6 @@
5354
"devDependencies": {
5455
"@playwright/test":"1.21.1",
5556
"@pmmmwh/react-refresh-webpack-plugin":"0.5.5",
56-
"@react-theming/storybook-addon":"1.1.5",
5757
"@storybook/addon-actions":"6.4.22",
5858
"@storybook/addon-essentials":"6.4.22",
5959
"@storybook/addon-links":"6.4.22",

‎site/src/AppRouter.tsx

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,13 @@ import { OrgsPage } from "./pages/OrgsPage/OrgsPage"
1212
import{SettingsPage}from"./pages/SettingsPage/SettingsPage"
1313
import{AccountPage}from"./pages/SettingsPages/AccountPage/AccountPage"
1414
import{SSHKeysPage}from"./pages/SettingsPages/SSHKeysPage/SSHKeysPage"
15-
import{CreateWorkspacePage}from"./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
16-
import{TemplatePage}from"./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
17-
import{TemplatesPage}from"./pages/TemplatesPages/TemplatesPage"
1815
import{CreateUserPage}from"./pages/UsersPage/CreateUserPage/CreateUserPage"
1916
import{UsersPage}from"./pages/UsersPage/UsersPage"
2017
import{WorkspacePage}from"./pages/WorkspacePage/WorkspacePage"
2118
import{WorkspaceSettingsPage}from"./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"
2219

2320
constTerminalPage=React.lazy(()=>import("./pages/TerminalPage/TerminalPage"))
21+
constWorkspacesPage=React.lazy(()=>import("./pages/WorkspacesPage/WorkspacesPage"))
2422

2523
exportconstAppRouter:React.FC=()=>(
2624
<React.Suspensefallback={<></>}>
@@ -46,36 +44,15 @@ export const AppRouter: React.FC = () => (
4644
}
4745
/>
4846

49-
<Routepath="templates">
47+
<Routepath="workspaces">
5048
<Route
5149
index
5250
element={
5351
<AuthAndFrame>
54-
<TemplatesPage/>
52+
<WorkspacesPage/>
5553
</AuthAndFrame>
5654
}
5755
/>
58-
<Routepath=":organization/:template">
59-
<Route
60-
index
61-
element={
62-
<AuthAndFrame>
63-
<TemplatePage/>
64-
</AuthAndFrame>
65-
}
66-
/>
67-
<Route
68-
path="create"
69-
element={
70-
<RequireAuth>
71-
<CreateWorkspacePage/>
72-
</RequireAuth>
73-
}
74-
/>
75-
</Route>
76-
</Route>
77-
78-
<Routepath="workspaces">
7956
<Routepath=":workspace">
8057
<Route
8158
index

‎site/src/api/api.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,11 @@ export const getWorkspace = async (workspaceId: string): Promise<TypesGen.Worksp
115115
returnresponse.data
116116
}
117117

118+
exportconstgetWorkspaces=async(userID="me"):Promise<TypesGen.Workspace[]>=>{
119+
constresponse=awaitaxios.get<TypesGen.Workspace[]>(`/api/v2/users/${userID}/workspaces`)
120+
returnresponse.data
121+
}
122+
118123
exportconstgetWorkspaceByOwnerAndName=async(
119124
organizationID:string,
120125
username="me",

‎site/src/app.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from "react-router-dom"
55
import{SWRConfig}from"swr"
66
import{AppRouter}from"./AppRouter"
77
import{GlobalSnackbar}from"./components/GlobalSnackbar/GlobalSnackbar"
8-
import{light}from"./theme"
8+
import{dark}from"./theme"
99
import"./theme/globalFonts"
1010
import{XServiceProvider}from"./xServices/StateContext"
1111

@@ -31,7 +31,7 @@ export const App: React.FC = () => {
3131
}}
3232
>
3333
<XServiceProvider>
34-
<ThemeProvidertheme={light}>
34+
<ThemeProvidertheme={dark}>
3535
<CssBaseline/>
3636
<AppRouter/>
3737
<GlobalSnackbar/>

‎site/src/components/AdminDropdown/AdminDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const AdminDropdown: React.FC = () => {
5151
<>
5252
<divclassName={styles.link}>
5353
<ListItemselected={Boolean(anchorEl)}buttononClick={onOpenAdminMenu}>
54-
<ListItemTextclassName="no-brace"color="primary"primary={Language.menuTitle}/>
54+
<ListItemTextclassName="no-brace"primary={Language.menuTitle}/>
5555
{anchorEl ?<CloseDropdown/> :<OpenDropdown/>}
5656
</ListItem>
5757
</div>

‎site/src/components/CodeBlock/CodeBlock.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
2626
root:{
2727
minHeight:156,
2828
background:theme.palette.background.default,
29-
color:theme.palette.codeBlock.contrastText,
29+
color:theme.palette.text.primary,
3030
fontFamily:MONOSPACE_FONT_FAMILY,
3131
fontSize:13,
3232
wordBreak:"break-all",

‎site/src/components/CodeExample/CodeExample.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
2828
justifyContent:"space-between",
2929
alignItems:"center",
3030
background:theme.palette.background.default,
31-
color:theme.palette.codeBlock.contrastText,
31+
color:theme.palette.primary.contrastText,
3232
fontFamily:MONOSPACE_FONT_FAMILY,
3333
fontSize:13,
3434
padding:theme.spacing(2),

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
importThemeProviderfrom"@material-ui/styles/ThemeProvider"
21
import{fireEvent,render}from"@testing-library/react"
32
importReactfrom"react"
43
import{act}from"react-dom/test-utils"
5-
import{light}from"../../theme"
4+
import{WrapperComponent}from"../../testHelpers/renderHelpers"
65
import{ConfirmDialog,ConfirmDialogProps}from"./ConfirmDialog"
76

87
namespaceHelpers{
98
exportconstComponent:React.FC<ConfirmDialogProps>=(props:ConfirmDialogProps)=>{
109
return(
11-
<ThemeProvidertheme={light}>
10+
<WrapperComponent>
1211
<ConfirmDialog{...props}/>
13-
</ThemeProvider>
12+
</WrapperComponent>
1413
)
1514
}
1615
}

‎site/src/components/ConfirmDialog/ConfirmDialog.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,11 @@ interface StyleProps {
4848
constuseStyles=makeStyles((theme)=>({
4949
dialogWrapper:(props:StyleProps)=>({
5050
"& .MuiPaper-root":{
51-
background:
52-
props.type==="info"
53-
?theme.palette.confirmDialog.info.background
54-
:theme.palette.confirmDialog.error.background,
51+
background:props.type==="info" ?theme.palette.primary.main :theme.palette.error.dark,
5552
},
5653
}),
5754
dialogContent:(props:StyleProps)=>({
58-
color:props.type==="info" ?theme.palette.confirmDialog.info.text :theme.palette.confirmDialog.error.text,
55+
color:props.type==="info" ?theme.palette.primary.contrastText :theme.palette.error.contrastText,
5956
padding:theme.spacing(6),
6057
textAlign:"center",
6158
}),
@@ -65,15 +62,15 @@ const useStyles = makeStyles((theme) => ({
6562
description:(props:StyleProps)=>({
6663
color:
6764
props.type==="info"
68-
?fade(theme.palette.confirmDialog.info.text,0.75)
69-
:fade(theme.palette.confirmDialog.error.text,0.75),
65+
?fade(theme.palette.primary.contrastText,0.75)
66+
:fade(theme.palette.error.contrastText,0.75),
7067
lineHeight:"160%",
7168

7269
"& strong":{
7370
color:
7471
props.type==="info"
75-
?fade(theme.palette.confirmDialog.info.text,0.95)
76-
:fade(theme.palette.confirmDialog.error.text,0.95),
72+
?fade(theme.palette.primary.contrastText,0.95)
73+
:fade(theme.palette.error.contrastText,0.95),
7774
},
7875
}),
7976
}))

‎site/src/components/CopyButton/CopyButton.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,13 @@ const useStyles = makeStyles((theme) => ({
5252
},
5353
copyButton:{
5454
borderRadius:7,
55-
background:theme.palette.codeBlock.button.main,
56-
color:theme.palette.codeBlock.button.contrastText,
55+
background:theme.palette.background.default,
56+
color:theme.palette.primary.contrastText,
5757
padding:theme.spacing(0.85),
5858
minWidth:32,
5959

6060
"&:hover":{
61-
background:theme.palette.codeBlock.button.hover,
61+
background:theme.palette.background.paper,
6262
},
6363
},
6464
fileCopyIcon:{

‎site/src/components/Dialog/Dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ const useButtonStyles = makeStyles((theme) => ({
161161
},
162162
},
163163
confirmDialogCancelButton:(props:StyleProps)=>{
164-
constcolor=props.type==="info" ?theme.palette.confirmDialog.info.text :theme.palette.confirmDialog.error.text
164+
constcolor=props.type==="info" ?theme.palette.primary.contrastText :theme.palette.error.contrastText
165165
return{
166166
background:fade(color,0.15),
167167
color,

‎site/src/components/Header/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({
6868
display:"flex",
6969
alignItems:"center",
7070
height:126,
71-
background:theme.palette.hero.main,
71+
background:theme.palette.background.default,
7272
boxShadow:theme.shadows[3],
7373
},
7474
topInner:{

‎site/src/components/HeaderButton/HeaderButton.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
importButtonfrom"@material-ui/core/Button"
2-
import{lighten,makeStyles}from"@material-ui/core/styles"
2+
import{makeStyles}from"@material-ui/core/styles"
33
importReactfrom"react"
44

55
exportinterfaceHeaderButtonProps{
@@ -28,10 +28,8 @@ export const HeaderButton: React.FC<HeaderButtonProps> = (props) => {
2828
)
2929
}
3030

31-
constuseStyles=makeStyles((theme)=>({
31+
constuseStyles=makeStyles(()=>({
3232
pageButton:{
3333
whiteSpace:"nowrap",
34-
backgroundColor:lighten(theme.palette.hero.main,0.1),
35-
color:"#B5BFD2",
3634
},
3735
}))

‎site/src/components/Margins/Margins.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default {
99

1010
constTemplate:Story=(args)=>(
1111
<Margins{...args}>
12-
<divstyle={{width:"100%",background:"lightgrey"}}>Here is some content that will not get too wide!</div>
12+
<divstyle={{width:"100%",background:"black"}}>Here is some content that will not get too wide!</div>
1313
</Margins>
1414
)
1515

‎site/src/components/Margins/Margins.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,11 @@ const useStyles = makeStyles(() => ({
88
maxWidth,
99
padding:`0${sidePadding}`,
1010
flex:1,
11+
width:"100%",
1112
},
1213
}))
1314

1415
exportconstMargins:React.FC=({ children})=>{
1516
conststyles=useStyles()
16-
return(
17-
<div>
18-
<divclassName={styles.margins}>{children}</div>
19-
</div>
20-
)
17+
return<divclassName={styles.margins}>{children}</div>
2118
}

0 commit comments

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