Skip to content

Commit 65ac0fb

Browse files
kylecarbskylecarbs
committed
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 8b9e1b4 commit 65ac0fb

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

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

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

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

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

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-
<ThemeProvider theme={light}>
34+
<ThemeProvider theme={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
<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

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",

0 commit comments

Comments
 (0)