Skip to content

Commit 22ec366

Browse files
kylecarbskylecarbs
authored
feat: Redesign workspaces page (#1450)
* feat: Improve navbar to be more compact The navbar was unnecessarily large before, which made the 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 parent e925818 commit 22ec366

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

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
import CssBaseline from "@material-ui/core/CssBaseline"
22
import ThemeProvider from "@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_HistoryRouter as HistoryRouter } from "react-router-dom"
7-
import { dark, light } from "../src/theme"
6+
import { dark } from "../src/theme"
87
import "../src/theme/globalFonts"
98

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

1916
const history = createMemoryHistory()
2017

‎site/e2e/pom/TemplatesPage.ts renamed to ‎site/e2e/pom/WorkspacesPage.ts

+2-2
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-
export class TemplatesPage extends BasePom {
4+
export class WorkspacesPage extends BasePom {
55
constructor(baseURL: string | undefined, page: Page) {
6-
super(baseURL, "/templates", page)
6+
super(baseURL, "/workspaces", page)
77
}
88
}

‎site/e2e/pom/index.ts

+1-1
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

+5-5
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
await page.goto(baseURL + "/", { waitUntil: "networkidle" })
88

99
// Log-in with the default credentials we set up in the development server
1010
const signInPage = new SignInPage(baseURL, page)
1111
await signInPage.submitBuiltInAuthentication(email, password)
1212

13-
const templatesPage = new TemplatesPage(baseURL, page)
14-
await waitForClientSideNavigation(page, { to: templatesPage.url })
13+
const workspacesPage = new WorkspacesPage(baseURL, page)
14+
await waitForClientSideNavigation(page, { to: workspacesPage.url })
1515

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

‎site/package.json

+2-2
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

+3-26
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
const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
21+
const WorkspacesPage = React.lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
2422

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

49-
<Route path="templates">
47+
<Route path="workspaces">
5048
<Route
5149
index
5250
element={
5351
<AuthAndFrame>
54-
<TemplatesPage />
52+
<WorkspacesPage />
5553
</AuthAndFrame>
5654
}
5755
/>
58-
<Route path=":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-
<Route path="workspaces">
7956
<Route path=":workspace">
8057
<Route
8158
index

‎site/src/api/api.ts

+5
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,11 @@ export const getWorkspace = async (workspaceId: string): Promise<TypesGen.Worksp
115115
return response.data
116116
}
117117

118+
export const getWorkspaces = async (userID = "me"): Promise<TypesGen.Workspace[]> => {
119+
const response = await axios.get<TypesGen.Workspace[]>(`/api/v2/users/${userID}/workspaces`)
120+
return response.data
121+
}
122+
118123
export const getWorkspaceByOwnerAndName = async (
119124
organizationID: string,
120125
username = "me",

‎site/src/app.tsx

+2-2
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-
<ThemeProvider theme={light}>
34+
<ThemeProvider theme={dark}>
3535
<CssBaseline />
3636
<AppRouter />
3737
<GlobalSnackbar />

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const AdminDropdown: React.FC = () => {
5151
<>
5252
<div className={styles.link}>
5353
<ListItem selected={Boolean(anchorEl)} button onClick={onOpenAdminMenu}>
54-
<ListItemText className="no-brace" color="primary" primary={Language.menuTitle} />
54+
<ListItemText className="no-brace" primary={Language.menuTitle} />
5555
{anchorEl ? <CloseDropdown /> : <OpenDropdown />}
5656
</ListItem>
5757
</div>

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

+1-1
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

+1-1
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

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import ThemeProvider from "@material-ui/styles/ThemeProvider"
21
import { fireEvent, render } from "@testing-library/react"
32
import React from "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
namespace Helpers {
98
export const Component: React.FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
109
return (
11-
<ThemeProvider theme={light}>
10+
<WrapperComponent>
1211
<ConfirmDialog {...props} />
13-
</ThemeProvider>
12+
</WrapperComponent>
1413
)
1514
}
1615
}

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

+6-9
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,11 @@ interface StyleProps {
4848
const useStyles = 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

+3-3
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

+1-1
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ const useButtonStyles = makeStyles((theme) => ({
161161
},
162162
},
163163
confirmDialogCancelButton: (props: StyleProps) => {
164-
const color = props.type === "info" ? theme.palette.confirmDialog.info.text : theme.palette.confirmDialog.error.text
164+
const color = 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

+1-1
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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Button from "@material-ui/core/Button"
2-
import { lighten, makeStyles } from "@material-ui/core/styles"
2+
import { makeStyles } from "@material-ui/core/styles"
33
import React from "react"
44

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

31-
const useStyles = makeStyles((theme) => ({
31+
const useStyles = 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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default {
99

1010
const Template: Story = (args) => (
1111
<Margins {...args}>
12-
<div style={{ width: "100%", background: "lightgrey" }}>Here is some content that will not get too wide!</div>
12+
<div style={{ 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

+2-5
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
export const Margins: React.FC = ({ children }) => {
1516
const styles = useStyles()
16-
return (
17-
<div>
18-
<div className={styles.margins}>{children}</div>
19-
</div>
20-
)
17+
return <div className={styles.margins}>{children}</div>
2118
}

0 commit comments

Comments
 (0)