Merge main

coder · bryphe-coder · Mar 12, 2022 · Feb 24, 2022 · Feb 24, 2022 · Feb 24, 2022
commit 7a50bc18b761fd7da10ff65d6ceb4363edfc1f44
diff --git a/go.mod b/go.mod
@@ -51,7 +51,7 @@ require (
 	github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8
 	github.com/powersj/whatsthis v1.3.0
 	github.com/quasilyte/go-ruleguard/dsl v0.3.17
-	github.com/spf13/cobra v1.3.0
+	github.com/spf13/cobra v1.4.0
 	github.com/stretchr/testify v1.7.0
 	github.com/tabbed/pqtype v0.1.1
 	github.com/unrolled/secure v1.10.0

diff --git a/go.sum b/go.sum
diff --git a/site/api.ts b/site/api.ts
@@ -84,7 +84,7 @@ export interface Workspace {
 
 export namespace Workspace {
   export const create = async (request: CreateWorkspaceRequest): Promise<Workspace> => {
-    const response = await fetch(`/api/v2/workspaces/me`, {
+    const response = await fetch(`/api/v2/users/me/workspaces`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

diff --git a/site/app.tsx b/site/app.tsx
@@ -13,7 +13,7 @@ import LoginPage from "./pages/login"
 import ProjectsPage from "./pages/projects"
 import ProjectPage from "./pages/projects/[organization]/[project]"
 import CreateWorkspacePage from "./pages/projects/[organization]/[project]/create"
-import WorkspacePage from "./pages/workspaces/[user]/[workspace]"
+import WorkspacePage from "./pages/workspaces/[workspace]"
 
 export const App: React.FC = () => {
   return (
@@ -50,9 +50,7 @@ export const App: React.FC = () => {
                 </Route>
 
                 <Route path="workspaces">
-                  <Route path=":user">
-                    <Route path=":workspace" element={<WorkspacePage />} />
-                  </Route>
+                  <Route path=":workspace" element={<WorkspacePage />} />
                 </Route>
 
                 {/* Using path="*"" means "match anything", so this route

diff --git a/site/components/Workspace/Workspace.test.tsx b/site/components/Workspace/Workspace.test.tsx
@@ -1,12 +1,12 @@
 import { screen } from "@testing-library/react"
 import React from "react"
 import { Workspace } from "./Workspace"
-import { MockWorkspace, render } from "../../test_helpers"
+import { MockOrganization, MockProject, MockWorkspace, render } from "../../test_helpers"
 
 describe("Workspace", () => {
   it("renders", async () => {
     // When
-    render(<Workspace workspace={MockWorkspace} />)
+    render(<Workspace organization={MockOrganization} project={MockProject} workspace={MockWorkspace} />)
 
     // Then
     const element = await screen.findByText(MockWorkspace.name)

diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx
@@ -10,19 +10,21 @@ import * as API from "../../api"
 import { WorkspaceSection } from "./WorkspaceSection"
 
 export interface WorkspaceProps {
+  organization: API.Organization
   workspace: API.Workspace
+  project: API.Project
 }
 
 /**
  * Workspace is the top-level component for viewing an individual workspace
  */
-export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
+export const Workspace: React.FC<WorkspaceProps> = ({ organization, project, workspace }) => {
   const styles = useStyles()
 
   return (
     <div className={styles.root}>
       <div className={styles.vertical}>
-        <WorkspaceHeader workspace={workspace} />
+        <WorkspaceHeader organization={organization} project={project} workspace={workspace} />
         <div className={styles.horizontal}>
           <div className={styles.sidebarContainer}>
             <WorkspaceSection title="Applications">
@@ -54,17 +56,19 @@ export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
 /**
  * Component for the header at the top of the workspace page
  */
-export const WorkspaceHeader: React.FC<WorkspaceProps> = ({ workspace }) => {
+export const WorkspaceHeader: React.FC<WorkspaceProps> = ({ organization, project, workspace }) => {
   const styles = useStyles()
 
+  const projectLink = `/projects/${organization.name}/${project.name}`
+
   return (
     <Paper elevation={0} className={styles.section}>
       <div className={styles.horizontal}>
         <WorkspaceHeroIcon />
         <div className={styles.vertical}>
           <Typography variant="h4">{workspace.name}</Typography>
           <Typography variant="body2" color="textSecondary">
-            <Link to="javascript:;">{workspace.project_id}</Link>
+            <Link to={projectLink}>{project.name}</Link>
           </Typography>
         </div>
       </div>

diff --git a/site/components/index.tsx b/site/components/index.tsx
@@ -1,4 +1,3 @@
 export * from "./Button"
 export * from "./EmptyState"
 export * from "./Page"
-export * from "./Redirect"
diff --git a/site/package.json b/site/package.json
@@ -35,7 +35,7 @@
     "@types/express": "4.17.13",
     "@types/jest": "27.4.1",
     "@types/node": "14.18.12",
-    "@types/react": "17.0.39",
+    "@types/react": "17.0.40",
     "@types/react-dom": "17.0.13",
     "@types/superagent": "4.1.15",
     "@typescript-eslint/eslint-plugin": "4.33.0",

diff --git a/site/pages/projects/[organization]/[project]/create.tsx b/site/pages/projects/[organization]/[project]/create.tsx
@@ -8,26 +8,36 @@ import { useUser } from "../../../../contexts/UserContext"
 import { ErrorSummary } from "../../../../components/ErrorSummary"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { CreateWorkspaceForm } from "../../../../forms/CreateWorkspaceForm"
+import { unsafeSWRArgument } from "../../../../util"
 
 const CreateWorkspacePage: React.FC = () => {
-  const { organization, project: projectName } = useParams()
+  const { organization: organizationName, project: projectName } = useParams()
   const navigate = useNavigate()
   const styles = useStyles()
   const { me } = useUser(/* redirectOnError */ true)
-  const { data: project, error: projectError } = useSWR<API.Project, Error>(
-    `/api/v2/projects/${organization}/${projectName}`,
+
+  const { data: organizationInfo, error: organizationError } = useSWR<API.Organization, Error>(
+    () => `/api/v2/users/me/organizations/${organizationName}`,
   )
 
+  const { data: project, error: projectError } = useSWR<API.Project, Error>(() => {
+    return `/api/v2/organizations/${unsafeSWRArgument(organizationInfo).id}/projects/${projectName}`
+  })
+
   const onCancel = useCallback(async () => {
-    navigate(`/projects/${organization}/${projectName}`)
-  }, [navigate, organization, projectName])
+    navigate(`/projects/${organizationName}/${projectName}`)
+  }, [navigate, organizationName, projectName])
 
   const onSubmit = async (req: API.CreateWorkspaceRequest) => {
     const workspace = await API.Workspace.create(req)
-    navigate(`/workspaces/me/${workspace.name}`)
+    navigate(`/workspaces/${workspace.id}`)
     return workspace
   }
 
+  if (organizationError) {
+    return <ErrorSummary error={organizationError} />
+  }
+
   if (projectError) {
     return <ErrorSummary error={projectError} />
   }

diff --git a/site/pages/projects/[organization]/[project]/index.tsx b/site/pages/projects/[organization]/[project]/index.tsx
@@ -4,7 +4,7 @@ import Paper from "@material-ui/core/Paper"
 import { Link, useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
 
-import { Project, Workspace } from "../../../../api"
+import { Organization, Project, Workspace } from "../../../../api"
 import { Header } from "../../../../components/Header"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { Navbar } from "../../../../components/Navbar"
@@ -14,20 +14,31 @@ import { useUser } from "../../../../contexts/UserContext"
 import { ErrorSummary } from "../../../../components/ErrorSummary"
 import { firstOrItem } from "../../../../util/array"
 import { EmptyState } from "../../../../components/EmptyState"
+import { unsafeSWRArgument } from "../../../../util"
 
 const ProjectPage: React.FC = () => {
   const styles = useStyles()
   const { me, signOut } = useUser(true)
   const navigate = useNavigate()
-  const { project, organization } = useParams()
+  const { project: projectName, organization: organizationName } = useParams()
 
-  const { data: projectInfo, error: projectError } = useSWR<Project, Error>(
-    () => `/api/v2/projects/${organization}/${project}`,
+  const { data: organizationInfo, error: organizationError } = useSWR<Organization, Error>(
+    () => `/api/v2/users/me/organizations/${organizationName}`,
   )
-  const { data: workspaces, error: workspacesError } = useSWR<Workspace[], Error>(
-    () => `/api/v2/projects/${organization}/${project}/workspaces`,
+
+  const { data: projectInfo, error: projectError } = useSWR<Project, Error>(
+    () => `/api/v2/organizations/${unsafeSWRArgument(organizationInfo).id}/projects/${projectName}`,
   )
 
+  // TODO: The workspaces endpoint was recently changed, so that we can't get
+  // workspaces per-project. This just grabs all workspaces... and then
+  // later filters them to match the current project.
+  const { data: workspaces, error: workspacesError } = useSWR<Workspace[], Error>(() => `/api/v2/users/me/workspaces`)
+
+  if (organizationError) {
+    return <ErrorSummary error={organizationError} />
+  }
+
   if (projectError) {
     return <ErrorSummary error={projectError} />
   }
@@ -41,7 +52,7 @@ const ProjectPage: React.FC = () => {
   }
 
   const createWorkspace = () => {
-    navigate(`/projects/${organization}/${project}/create`)
+    navigate(`/projects/${organizationName}/${projectName}/create`)
   }
 
   const emptyState = (
@@ -59,26 +70,31 @@ const ProjectPage: React.FC = () => {
     {
       key: "name",
       name: "Name",
-      renderer: (nameField: string) => {
-        return <Link to={`/workspaces/me/${nameField}`}>{nameField}</Link>
+      renderer: (nameField: string, workspace: Workspace) => {
+        return <Link to={`/workspaces/${workspace.id}`}>{nameField}</Link>
+
       },
     },
   ]
 
+  const perProjectWorkspaces = workspaces.filter((workspace) => {
+    return workspace.project_id === projectInfo.id
+  })
+
   const tableProps = {
     title: "Workspaces",
     columns,
-    data: workspaces,
+    data: perProjectWorkspaces,
     emptyState: emptyState,
   }
 
   return (
     <div className={styles.root}>
       <Navbar user={me} onSignOut={signOut} />
       <Header
-        title={firstOrItem(project, "")}
-        description={firstOrItem(organization, "")}
-        subTitle={`${workspaces.length} workspaces`}
+        title={firstOrItem(projectName, "")}
+        description={firstOrItem(organizationName, "")}
+        subTitle={`${perProjectWorkspaces.length} workspaces`}
         action={{
           text: "Create Workspace",
           onClick: createWorkspace,

diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx
diff --git a/site/pages/workspaces/[workspace].tsx b/site/pages/workspaces/[workspace].tsx
@@ -0,0 +1,76 @@
+import React from "react"
+import useSWR from "swr"
+import { makeStyles } from "@material-ui/core/styles"
+import { useParams } from "react-router-dom"
+import { Navbar } from "../../components/Navbar"
+import { Footer } from "../../components/Page"
+import { useUser } from "../../contexts/UserContext"
+import { firstOrItem } from "../../util/array"
+import { ErrorSummary } from "../../components/ErrorSummary"
+import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import { Workspace } from "../../components/Workspace"
+import { unsafeSWRArgument } from "../../util"
+import * as API from "../../api"
+
+const WorkspacesPage: React.FC = () => {
+  const styles = useStyles()
+  const { workspace: workspaceQueryParam } = useParams()
+  const { me, signOut } = useUser(true)
+
+  const { data: workspace, error: workspaceError } = useSWR<API.Workspace, Error>(() => {
+    const workspaceParam = firstOrItem(workspaceQueryParam, null)
+
+    return `/api/v2/workspaces/${workspaceParam}`
+  })
+
+  // Fetch parent project
+  const { data: project, error: projectError } = useSWR<API.Project, Error>(() => {
+    return `/api/v2/projects/${unsafeSWRArgument(workspace).project_id}`
+  })
+
+  const { data: organization, error: organizationError } = useSWR<API.Project, Error>(() => {
+    return `/api/v2/organizations/${unsafeSWRArgument(project).organization_id}`
+  })
+
+  if (workspaceError) {
+    return <ErrorSummary error={workspaceError} />
+  }
+
+  if (projectError) {
+    return <ErrorSummary error={projectError} />
+  }
+
+  if (organizationError) {
+    return <ErrorSummary error={organizationError} />
+  }
+
+  if (!me || !workspace || !project || !organization) {
+    return <FullScreenLoader />
+  }
+
+  return (
+    <div className={styles.root}>
+      <Navbar user={me} onSignOut={signOut} />
+
+      <div className={styles.inner}>
+        <Workspace organization={organization} project={project} workspace={workspace} />
+      </div>
+
+      <Footer />
+    </div>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  inner: {
+    maxWidth: "1380px",
+    margin: "1em auto",
+    width: "100%",
+  },
+}))
+
+export default WorkspacesPage
diff --git a/site/util/index.ts b/site/util/index.ts
@@ -0,0 +1,2 @@
+export * from "./array"
+export * from "./swr"