Skip to content

Commit babde57

Browse files
presleyppresleyp
committed
Merge branch 'main' into admin/presleyp/591
2 parents a121c7e + b7d7e19 commit babde57

File tree

16 files changed

+161
-101
lines changed

16 files changed

+161
-101
lines changed

‎.github/ISSUE_TEMPLATE/bug-report.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
name: Bug report
33
about: Report a bug
44
title: "Bug: "
5-
labels: "bug 🐛"
5+
labels: "bug :bug:"
66
---
77

88
## OS Information

‎.github/ISSUE_TEMPLATE/doc.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
name: Documentation improvement
33
about: Suggest a documentation improvement
44
title: "Docs: "
5-
labels: "documentation 📝"
5+
labels: "documentation :memo:"
66
---
77

88
## What is your suggestion?

‎docs/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ $ sudo service coder restart
4040
In a new terminal, create a new project (eg. Develop in Linux on Google Cloud):
4141

4242
```
43-
$ coder projects init
44-
$ coder projects create
43+
$ coder templates init
44+
$ coder templates create
4545
```
4646

4747
Create a new workspace and SSH in:
@@ -56,10 +56,10 @@ $ coder ssh my-first-workspace
5656
You can edit the Terraform from a sample project:
5757

5858
```sh
59-
$ coder projects init
59+
$ coder templates init
6060
$ cd gcp-linux/
6161
$ vim main.tf
62-
$ coder projects update gcp-linux
62+
$ coder templates update gcp-linux
6363
```
6464

6565
## Contributing

‎site/src/AppRouter.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import React from "react"
2-
import { Route, Routes } from "react-router-dom"
2+
import { Navigate, Route, Routes } from "react-router-dom"
33
import { AuthAndNav, RequireAuth } from "./components"
4+
import { PreferencesLayout } from "./components/Preferences/Layout"
45
import { IndexPage } from "./pages"
56
import { NotFoundPage } from "./pages/404"
67
import { CliAuthenticationPage } from "./pages/cli-auth"
78
import { HealthzPage } from "./pages/healthz"
89
import { SignInPage } from "./pages/login"
910
import { OrganizationsPage } from "./pages/orgs"
10-
import { PreferencesPage } from "./pages/preferences"
1111
import { SettingsPage } from "./pages/settings"
12+
import { PreferencesAccountPage } from "./pages/preferences/account"
13+
import { PreferencesLinkedAccountsPage } from "./pages/preferences/linked-accounts"
14+
import { PreferencesSecurityPage } from "./pages/preferences/security"
15+
import { PreferencesSSHKeysPage } from "./pages/preferences/ssh-keys"
1216
import { TemplatesPage } from "./pages/templates"
1317
import { TemplatePage } from "./pages/templates/[organization]/[template]"
1418
import { CreateWorkspacePage } from "./pages/templates/[organization]/[template]/create"
@@ -75,15 +79,12 @@ export const AppRouter: React.FC = () => (
7579
<Route path="orgs" element={<OrganizationsPage />} />
7680
<Route path="settings" element={<SettingsPage />} />
7781

78-
<Route path="preferences">
79-
<Route
80-
index
81-
element={
82-
<AuthAndNav>
83-
<PreferencesPage />
84-
</AuthAndNav>
85-
}
86-
/>
82+
<Route path="preferences" element={<PreferencesLayout />}>
83+
<Route index element={<Navigate to="account" />} />
84+
<Route path="account" element={<PreferencesAccountPage />} />
85+
<Route path="security" element={<PreferencesSecurityPage />} />
86+
<Route path="ssh-keys" element={<PreferencesSSHKeysPage />} />
87+
<Route path="linked-accounts" element={<PreferencesLinkedAccountsPage />} />
8788
</Route>
8889

8990
{/* Using path="*"" means "match anything", so this route

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

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

‎site/src/components/Preferences/Layout.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Box from "@material-ui/core/Box"
2+
import React from "react"
3+
import { Outlet } from "react-router-dom"
4+
import { AuthAndNav } from "../Page"
5+
import { TabPanel } from "../TabPanel"
6+
7+
export const Language = {
8+
accountLabel: "Account",
9+
securityLabel: "Security",
10+
sshKeysLabel: "SSH Keys",
11+
linkedAccountsLabel: "Linked Accounts",
12+
preferencesLabel: "Preferences",
13+
}
14+
15+
const menuItems = [
16+
{ label: Language.accountLabel, path: "/preferences/account" },
17+
{ label: Language.securityLabel, path: "/preferences/security" },
18+
{ label: Language.sshKeysLabel, path: "/preferences/ssh-keys" },
19+
{ label: Language.linkedAccountsLabel, path: "/preferences/linked-accounts" },
20+
]
21+
22+
export const PreferencesLayout: React.FC = () => {
23+
return (
24+
<AuthAndNav>
25+
<Box display="flex" flexDirection="column">
26+
<Box style={{ maxWidth: "1380px", margin: "1em auto" }}>
27+
<TabPanel title={Language.preferencesLabel} menuItems={menuItems}>
28+
<Outlet />
29+
</TabPanel>
30+
</Box>
31+
</Box>
32+
</AuthAndNav>
33+
)
34+
}

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

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

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Story } from "@storybook/react"
2+
import React from "react"
3+
import { TabPanel, TabPanelProps } from "."
4+
5+
export default {
6+
title: "TabPanel/TabPanel",
7+
component: TabPanel,
8+
}
9+
10+
const Template: Story<TabPanelProps> = (args: TabPanelProps) => <TabPanel {...args} />
11+
12+
export const Example = Template.bind({})
13+
Example.args = {
14+
title: "Title",
15+
menuItems: [
16+
{ label: "OAuth Settings", path: "oauthSettings" },
17+
{ label: "Security", path: "oauthSettings", hasChanges: true },
18+
{ label: "Hardware", path: "oauthSettings" },
19+
],
20+
}

‎site/src/components/TabPanel/TabSidebar.stories.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Story } from "@storybook/react"
2+
import React from "react"
3+
import { TabSidebar, TabSidebarProps } from "./TabSidebar"
4+
5+
export default {
6+
title: "TabPanel/TabSidebar",
7+
component: TabSidebar,
8+
}
9+
10+
const Template: Story<TabSidebarProps> = (args: TabSidebarProps) => <TabSidebar {...args} />
11+
12+
export const Example = Template.bind({})
13+
Example.args = {
14+
menuItems: [
15+
{ label: "OAuth Settings", path: "oauthSettings" },
16+
{ label: "Security", path: "security", hasChanges: true },
17+
{ label: "Hardware", path: "hardware" },
18+
],
19+
}

‎site/src/components/Sidebar/index.tsx renamed to ‎site/src/components/TabPanel/TabSidebar.tsx

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,34 @@ import ListItem from "@material-ui/core/ListItem"
33
import { makeStyles } from "@material-ui/core/styles"
44
import React from "react"
55
import { combineClasses } from "../../util/combineClasses"
6+
import { NavLink } from "react-router-dom"
67

7-
export interface SidebarItem {
8-
value: string
8+
export interface TabSidebarItem {
9+
path: string
910
label: string
1011
hasChanges?: boolean
1112
}
1213

13-
export interface SidebarProps {
14-
menuItems: SidebarItem[]
15-
activeItem?: string
16-
onSelect?: (value: string) => void
14+
export interface TabSidebarProps {
15+
menuItems: TabSidebarItem[]
1716
}
1817

19-
export const Sidebar: React.FC<SidebarProps> = ({ menuItems, activeItem, onSelect }) => {
18+
export const TabSidebar: React.FC<TabSidebarProps> = ({ menuItems }) => {
2019
const styles = useStyles()
2120

2221
return (
2322
<List className={styles.menu}>
2423
{menuItems.map(({ hasChanges, ...tab }) => {
25-
const isActive = activeItem === tab.value
2624
return (
27-
<ListItem
28-
key={tab.value}
29-
button
30-
onClick={onSelect ? () => onSelect(tab.value) : undefined}
31-
className={styles.menuItem}
32-
disableRipple
33-
focusRipple={false}
34-
component="li"
35-
>
36-
<span className={combineClasses({ [styles.menuItemSpan]: true, active: isActive })}>
37-
{hasChanges ? `${tab.label}*` : tab.label}
38-
</span>
39-
</ListItem>
25+
<NavLink to={tab.path} key={tab.path} className={styles.link}>
26+
{({ isActive }) => (
27+
<ListItem button className={styles.menuItem} disableRipple focusRipple={false} component="li">
28+
<span className={combineClasses({ [styles.menuItemSpan]: true, active: isActive })}>
29+
{hasChanges ? `${tab.label}*` : tab.label}
30+
</span>
31+
</ListItem>
32+
)}
33+
</NavLink>
4034
)
4135
})}
4236
</List>
@@ -49,6 +43,10 @@ const useStyles = makeStyles((theme) => ({
4943
marginTop: theme.spacing(5),
5044
},
5145

46+
link: {
47+
textDecoration: "none",
48+
},
49+
5250
menuItem: {
5351
letterSpacing: -theme.spacing(0.0375),
5452
padding: 0,

0 commit comments

Comments
 (0)