Skip to content

feat: UI/UX for regions #7283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 54 commits into from
Apr 28, 2023
Merged

feat: UI/UX for regions #7283

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
26d3497
chore: Allow regular users to query for all workspaces
Emyrk Apr 24, 2023
3203ad7
Begin work on FE to add workspace proxy options to account settings
Emyrk Apr 24, 2023
a9ad485
Take origin file
Emyrk Apr 25, 2023
bde8870
Remove excess diffs
Emyrk Apr 25, 2023
69ce5f0
fixup! Remove excess diffs
Emyrk Apr 25, 2023
1daa32f
Update proxy page for regions endpoint
Emyrk Apr 25, 2023
b2e3efb
Some basic selector for proxies
Emyrk Apr 25, 2023
f78935f
Make hook for preferred proxy
Emyrk Apr 25, 2023
7a2e78e
Make fmt
Emyrk Apr 25, 2023
9b598e8
Typo
Emyrk Apr 25, 2023
17f9b00
Create workspace proxy context
Emyrk Apr 26, 2023
0683412
Use new context
Emyrk Apr 26, 2023
69c5734
fixup! Use new context
Emyrk Apr 26, 2023
9879476
WorkspaceProxy context syncs with coderd on region responses
Emyrk Apr 26, 2023
7d163fd
Make fmt
Emyrk Apr 26, 2023
e400810
Move dashboard provider
Emyrk Apr 26, 2023
02bcb84
Fix authenticated providers
Emyrk Apr 26, 2023
f9446c2
Fix authenticated renders
Emyrk Apr 26, 2023
9281333
Merge remote-tracking branch 'origin/main' into stevenmasley/regions
Emyrk Apr 26, 2023
8cc227f
Make fmt
Emyrk Apr 26, 2023
63dc985
Use auth render
Emyrk Apr 26, 2023
f4b6921
Fix terminal test render
Emyrk Apr 26, 2023
322fda6
Make fmt
Emyrk Apr 26, 2023
89efc57
Fix local storage load
Emyrk Apr 27, 2023
48a0beb
Fix terminals on the frontend to use proxies
Emyrk Apr 27, 2023
77d943f
Remove CSP hole
Emyrk Apr 27, 2023
75b8fd4
Add comment on origin patterns
Emyrk Apr 27, 2023
3391e84
Add unit test for getURLs
Emyrk Apr 27, 2023
4075b92
remove some TODOs
Emyrk Apr 27, 2023
b79b460
Add another store
Emyrk Apr 27, 2023
e879160
Update site/src/components/TerminalLink/TerminalLink.tsx
Emyrk Apr 27, 2023
27ef4a9
Fix stories
Emyrk Apr 27, 2023
eb38e95
Move providers into requrie auth
Emyrk Apr 27, 2023
1f8cae4
Fix imports
Emyrk Apr 27, 2023
6a22181
Fix 2 stories
Emyrk Apr 27, 2023
51bdaa2
Stories did not have subdomains on
Emyrk Apr 27, 2023
909801c
Merge remote-tracking branch 'origin/main' into stevenmasley/regions
Emyrk Apr 27, 2023
836c5a4
Fmt after merge
Emyrk Apr 27, 2023
0d0ed87
Fix port forward story
Emyrk Apr 27, 2023
6ed5fe4
ProxyPageView -> ProxyView
Emyrk Apr 27, 2023
163bbff
PR comment cleanup
Emyrk Apr 27, 2023
7dee309
Fix moon feature flag panic
Emyrk Apr 27, 2023
b7cfb39
Make fmt
Emyrk Apr 27, 2023
6b19118
Fix typo
Emyrk Apr 27, 2023
3fed785
Rename getUrls
Emyrk Apr 28, 2023
5bb44e8
Rename regions to proxies
Emyrk Apr 28, 2023
c868fc9
Only do 1 api call based on experiment
Emyrk Apr 28, 2023
edbe6e4
Cleanup args to take just the selected proxy
Emyrk Apr 28, 2023
eb6493c
Renames regions -> proxies
Emyrk Apr 28, 2023
017b3db
Fix stories
Emyrk Apr 28, 2023
c59a6ba
Move funciton back to bottom
Emyrk Apr 28, 2023
87e0b6d
Fix onSuccess of proxy provider
Emyrk Apr 28, 2023
fef5b00
Make fmt
Emyrk Apr 28, 2023
d33371d
Simplify some ts
Emyrk Apr 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions coderd/workspaceapps/proxy.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -616,6 +616,12 @@ func (s *Server) workspaceAgentPTY(rw http.ResponseWriter, r *http.Request) {

conn, err := websocket.Accept(rw, r, &websocket.AcceptOptions{
CompressionMode: websocket.CompressionDisabled,
// Always allow websockets from the primary dashboard URL.
// Terminals are opened there and connect to the proxy.
OriginPatterns: []string{
s.DashboardURL.Host,
s.AccessURL.Host,
},
})
if err != nil {
httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{
Expand Down
15 changes: 15 additions & 0 deletions enterprise/coderd/workspaceproxy.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import (
"fmt"
"net/http"
"net/url"
"strings"
"time"

"github.com/google/uuid"
Expand Down Expand Up @@ -156,6 +157,20 @@ func (api *API) postWorkspaceProxy(rw http.ResponseWriter, r *http.Request) {
return
}

if strings.ToLower(req.Name) == "primary" {
httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{
Message: `The name "primary" is reserved for the primary region.`,
Detail: "Cannot name a workspace proxy 'primary'.",
Validations: []codersdk.ValidationError{
{
Field: "name",
Detail: "Reserved name",
},
},
})
return
}

id := uuid.New()
secret, err := cryptorand.HexString(64)
if err != nil {
Expand Down
228 changes: 134 additions & 94 deletions site/src/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,20 @@ import TemplatesPage from "pages/TemplatesPage/TemplatesPage"
import UsersPage from "pages/UsersPage/UsersPage"
import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"
import { FC, lazy, Suspense } from "react"
import { Route, Routes, BrowserRouter as Router } from "react-router-dom"
import {
Route,
Routes,
BrowserRouter as Router,
Outlet,
} from "react-router-dom"
import { DashboardLayout } from "./components/Dashboard/DashboardLayout"
import { RequireAuth } from "./components/RequireAuth/RequireAuth"
import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout"
import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout"
import { WorkspaceSettingsLayout } from "pages/WorkspaceSettingsPage/WorkspaceSettingsLayout"
import { DashboardProvider } from "components/Dashboard/DashboardProvider"
import { ProxyProvider } from "contexts/ProxyContext"

// Lazy load pages
// - Pages that are secondary, not in the main navigation or not usually accessed
Expand All @@ -38,6 +45,10 @@ const SSHKeysPage = lazy(
const TokensPage = lazy(
() => import("./pages/UserSettingsPage/TokensPage/TokensPage"),
)
const WorkspaceProxyPage = lazy(
() =>
import("./pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage"),
)
const CreateUserPage = lazy(
() => import("./pages/UsersPage/CreateUserPage/CreateUserPage"),
)
Expand Down Expand Up @@ -177,127 +188,145 @@ export const AppRouter: FC = () => {

{/* Dashboard routes */}
<Route element={<RequireAuth />}>
<Route element={<DashboardLayout />}>
<Route index element={<IndexPage />} />
<Route element={<AuthenticatedProviders />}>
<Route element={<DashboardLayout />}>
<Route index element={<IndexPage />} />

<Route path="gitauth" element={<GitAuthPage />} />
<Route path="gitauth" element={<GitAuthPage />} />

<Route path="workspaces" element={<WorkspacesPage />} />

<Route path="starter-templates">
<Route index element={<StarterTemplatesPage />} />
<Route path=":exampleId" element={<StarterTemplatePage />} />
</Route>
<Route path="workspaces" element={<WorkspacesPage />} />

<Route path="templates">
<Route index element={<TemplatesPage />} />
<Route path="new" element={<CreateTemplatePage />} />
<Route path=":template">
<Route element={<TemplateLayout />}>
<Route index element={<TemplateSummaryPage />} />
<Route path="docs" element={<TemplateDocsPage />} />
<Route path="files" element={<TemplateFilesPage />} />
<Route path="versions" element={<TemplateVersionsPage />} />
</Route>
<Route path="starter-templates">
<Route index element={<StarterTemplatesPage />} />
<Route path=":exampleId" element={<StarterTemplatePage />} />
</Route>

<Route path="workspace" element={<CreateWorkspacePage />} />
<Route path="templates">
<Route index element={<TemplatesPage />} />
<Route path="new" element={<CreateTemplatePage />} />
<Route path=":template">
<Route element={<TemplateLayout />}>
<Route index element={<TemplateSummaryPage />} />
<Route path="docs" element={<TemplateDocsPage />} />
<Route path="files" element={<TemplateFilesPage />} />
<Route
path="versions"
element={<TemplateVersionsPage />}
/>
</Route>

<Route path="settings" element={<TemplateSettingsLayout />}>
<Route index element={<TemplateSettingsPage />} />
<Route
path="permissions"
element={<TemplatePermissionsPage />}
/>
<Route
path="variables"
element={<TemplateVariablesPage />}
/>
<Route path="schedule" element={<TemplateSchedulePage />} />
</Route>
<Route path="workspace" element={<CreateWorkspacePage />} />

<Route path="versions">
<Route path=":version">
<Route index element={<TemplateVersionPage />} />
<Route path="settings" element={<TemplateSettingsLayout />}>
<Route index element={<TemplateSettingsPage />} />
<Route
path="permissions"
element={<TemplatePermissionsPage />}
/>
<Route
path="edit"
element={<TemplateVersionEditorPage />}
path="variables"
element={<TemplateVariablesPage />}
/>
<Route
path="schedule"
element={<TemplateSchedulePage />}
/>
</Route>
</Route>
</Route>
</Route>

<Route path="users">
<Route element={<UsersLayout />}>
<Route index element={<UsersPage />} />
<Route path="versions">
<Route path=":version">
<Route index element={<TemplateVersionPage />} />
<Route
path="edit"
element={<TemplateVersionEditorPage />}
/>
</Route>
</Route>
</Route>
</Route>

<Route path="create" element={<CreateUserPage />} />
</Route>
<Route path="users">
<Route element={<UsersLayout />}>
<Route index element={<UsersPage />} />
</Route>

<Route path="/groups">
<Route element={<UsersLayout />}>
<Route index element={<GroupsPage />} />
<Route path="create" element={<CreateUserPage />} />
</Route>

<Route path="create" element={<CreateGroupPage />} />
<Route path=":groupId" element={<GroupPage />} />
<Route
path=":groupId/settings"
element={<SettingsGroupPage />}
/>
</Route>
<Route path="/groups">
<Route element={<UsersLayout />}>
<Route index element={<GroupsPage />} />
</Route>

<Route path="/audit" element={<AuditPage />} />
<Route path="create" element={<CreateGroupPage />} />
<Route path=":groupId" element={<GroupPage />} />
<Route
path=":groupId/settings"
element={<SettingsGroupPage />}
/>
</Route>

<Route
path="/settings/deployment"
element={<DeploySettingsLayout />}
>
<Route path="general" element={<GeneralSettingsPage />} />
<Route path="licenses" element={<LicensesSettingsPage />} />
<Route path="licenses/add" element={<AddNewLicensePage />} />
<Route path="security" element={<SecuritySettingsPage />} />
<Route path="appearance" element={<AppearanceSettingsPage />} />
<Route path="network" element={<NetworkSettingsPage />} />
<Route path="userauth" element={<UserAuthSettingsPage />} />
<Route path="gitauth" element={<GitAuthSettingsPage />} />
</Route>
<Route path="/audit" element={<AuditPage />} />

<Route path="settings" element={<SettingsLayout />}>
<Route path="account" element={<AccountPage />} />
<Route path="security" element={<SecurityPage />} />
<Route path="ssh-keys" element={<SSHKeysPage />} />
<Route path="tokens">
<Route index element={<TokensPage />} />
<Route path="new" element={<CreateTokenPage />} />
<Route
path="/settings/deployment"
element={<DeploySettingsLayout />}
>
<Route path="general" element={<GeneralSettingsPage />} />
<Route path="licenses" element={<LicensesSettingsPage />} />
<Route path="licenses/add" element={<AddNewLicensePage />} />
<Route path="security" element={<SecuritySettingsPage />} />
<Route
path="appearance"
element={<AppearanceSettingsPage />}
/>
<Route path="network" element={<NetworkSettingsPage />} />
<Route path="userauth" element={<UserAuthSettingsPage />} />
<Route path="gitauth" element={<GitAuthSettingsPage />} />
</Route>
</Route>

<Route path="/@:username">
<Route path=":workspace">
<Route index element={<WorkspacePage />} />
<Route path="settings" element={<SettingsLayout />}>
<Route path="account" element={<AccountPage />} />
<Route path="security" element={<SecurityPage />} />
<Route path="ssh-keys" element={<SSHKeysPage />} />
<Route path="tokens">
<Route index element={<TokensPage />} />
<Route path="new" element={<CreateTokenPage />} />
</Route>
<Route
path="builds/:buildNumber"
element={<WorkspaceBuildPage />}
path="workspace-proxies"
element={<WorkspaceProxyPage />}
/>
<Route path="settings" element={<WorkspaceSettingsLayout />}>
<Route index element={<WorkspaceSettingsPage />} />
</Route>

<Route path="/@:username">
<Route path=":workspace">
<Route index element={<WorkspacePage />} />
<Route
path="schedule"
element={<WorkspaceSchedulePage />}
path="builds/:buildNumber"
element={<WorkspaceBuildPage />}
/>
<Route
path="settings"
element={<WorkspaceSettingsLayout />}
>
<Route index element={<WorkspaceSettingsPage />} />
<Route
path="schedule"
element={<WorkspaceSchedulePage />}
/>
</Route>
</Route>
</Route>
</Route>
</Route>

{/* Terminal and CLI auth pages don't have the dashboard layout */}
<Route
path="/@:username/:workspace/terminal"
element={<TerminalPage />}
/>
<Route path="cli-auth" element={<CliAuthenticationPage />} />
{/* Terminal and CLI auth pages don't have the dashboard layout */}
<Route
path="/@:username/:workspace/terminal"
element={<TerminalPage />}
/>
<Route path="cli-auth" element={<CliAuthenticationPage />} />
</Route>
</Route>

{/* Using path="*"" means "match anything", so this route
Expand All @@ -309,3 +338,14 @@ export const AppRouter: FC = () => {
</Suspense>
)
}

// AuthenticatedProviders are used to provide authenticated contexts to children
export const AuthenticatedProviders: FC = () => {
return (
<DashboardProvider>
<ProxyProvider>
<Outlet />
</ProxyProvider>
</DashboardProvider>
)
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO, having a RequireAuth and AuthenticatedProviders is kinda confusing because RequireAuth should do that. I think the best would be to move the ProxyProvider inside the DashboardProvider and wrap the component there or even merge the DashboardProvider with ProxyProvider if that is only used inside the Dashboard.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is also used in the Terminal Page, and the settings page

19 changes: 19 additions & 0 deletions site/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,15 @@ export const getFile = async (fileId: string): Promise<ArrayBuffer> => {
return response.data
}

export const getWorkspaceProxies =
async (): Promise<TypesGen.RegionsResponse> => {
const response = await axios.get<TypesGen.RegionsResponse>(
`/api/v2/regions`,
{},
)
return response.data
}

export const getAppearance = async (): Promise<TypesGen.AppearanceConfig> => {
try {
const response = await axios.get(`/api/v2/appearance`)
Expand Down Expand Up @@ -1245,3 +1254,13 @@ export const watchBuildLogsByBuildId = (
})
return socket
}

export const issueReconnectingPTYSignedToken = async (
params: TypesGen.IssueReconnectingPTYSignedTokenRequest,
): Promise<TypesGen.IssueReconnectingPTYSignedTokenResponse> => {
const response = await axios.post(
"/api/v2/applications/reconnecting-pty-signed-token",
params,
)
return response.data
}
Loading